ewhk9887/korean_code_reviews_from_github huggingface dataset:
@@ -0,0 +1,105 @@
+import styled from "@emotion/styled";
+import RestaurantExternalLinkIcon from "feature/restaurants/restaurantsDetail/components/icons/RestaurantExternalLinkIcon";
+import Link from "next/link";
+
+interface Props {
+  restaurantId: string;
+  userAuth?: number;
+  restaurantName: string;
+  restaurantAddress: string;
+  organizationName: string;
+  link?: string;
+  isMain?: boolean;
+}
+
+const RestaurantDetailHeaderSection: React.FC<Props> = ({
+  restaurantId,
+  userAuth,
+  restaurantName,
+  restaurantAddress,
+  organizationName,
+  link,
+  isMain = true,
+}) => {
+  return (
+    <EmotionWrapper>
+      <div className="over-title-div">
+        <span className="subtitle">{organizationName}</span>
+        {isMain &&
+          (userAuth === 0 || userAuth === 1 ? (
+            <Link className="link-div" href={"/restaurants/" + restaurantId + "/edit"}>
+              맛집 수정
+            </Link>
+          ) : (
+            <Link className="link-div" href={"/restaurants/" + restaurantId + "/copy"}>
+              맛집 수정
+            </Link>
+          ))}
+      </div>
+      <h1 className="title">{restaurantName}</h1>
+      <div className="under-title-div">
+        <span className="subtitle">{restaurantAddress}</span>
+        {link && (
+          <Link className="link-div" href={link}>
+            <RestaurantExternalLinkIcon />
+            <span className="link-span">맛집 상세 정보 &gt;</span>
+          </Link>
+        )}
+      </div>
+    </EmotionWrapper>
+  );
+};
+
+export default RestaurantDetailHeaderSection;
+
+const EmotionWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: left;
+  gap: 8px;
+
+  span {
+    font-weight: 300;
+    margin-left: 2px;
+    font-size: 16px;
+    color: ${({ theme }) => theme.color.gray600};
+  }
+
+  span.subtitle {
+    font-size: 12px;
+    font-weight: 400;
+    color: ${({ theme }) => theme.color.gray300};
+  }
+
+  .title {
+    font-size: 30px;
+    font-weight: 600;
+    color: ${({ theme }) => theme.color.gray700};
+  }
+
+  .under-title-div,
+  .over-title-div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .link-div {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    text-decoration-line: none;
+
+    font-size: 14px;
+    font-weight: 400;
+    color: ${({ theme }) => theme.color.gray700};
+  }
+
+  .link-span {
+    font-size: 12px;
+    font-weight: 300;
+    color: ${({ theme }) => theme.color.gray500};
+  }
+`;

리뷰: 이 `restaurantId` 가 `string[]` 도 받게 하신 이유가 있을까요~?
@@ -0,0 +1,105 @@
+import styled from "@emotion/styled";
+import RestaurantExternalLinkIcon from "feature/restaurants/restaurantsDetail/components/icons/RestaurantExternalLinkIcon";
+import Link from "next/link";
+
+interface Props {
+  restaurantId: string;
+  userAuth?: number;
+  restaurantName: string;
+  restaurantAddress: string;
+  organizationName: string;
+  link?: string;
+  isMain?: boolean;
+}
+
+const RestaurantDetailHeaderSection: React.FC<Props> = ({
+  restaurantId,
+  userAuth,
+  restaurantName,
+  restaurantAddress,
+  organizationName,
+  link,
+  isMain = true,
+}) => {
+  return (
+    <EmotionWrapper>
+      <div className="over-title-div">
+        <span className="subtitle">{organizationName}</span>
+        {isMain &&
+          (userAuth === 0 || userAuth === 1 ? (
+            <Link className="link-div" href={"/restaurants/" + restaurantId + "/edit"}>
+              맛집 수정
+            </Link>
+          ) : (
+            <Link className="link-div" href={"/restaurants/" + restaurantId + "/copy"}>
+              맛집 수정
+            </Link>
+          ))}
+      </div>
+      <h1 className="title">{restaurantName}</h1>
+      <div className="under-title-div">
+        <span className="subtitle">{restaurantAddress}</span>
+        {link && (
+          <Link className="link-div" href={link}>
+            <RestaurantExternalLinkIcon />
+            <span className="link-span">맛집 상세 정보 &gt;</span>
+          </Link>
+        )}
+      </div>
+    </EmotionWrapper>
+  );
+};
+
+export default RestaurantDetailHeaderSection;
+
+const EmotionWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: left;
+  gap: 8px;
+
+  span {
+    font-weight: 300;
+    margin-left: 2px;
+    font-size: 16px;
+    color: ${({ theme }) => theme.color.gray600};
+  }
+
+  span.subtitle {
+    font-size: 12px;
+    font-weight: 400;
+    color: ${({ theme }) => theme.color.gray300};
+  }
+
+  .title {
+    font-size: 30px;
+    font-weight: 600;
+    color: ${({ theme }) => theme.color.gray700};
+  }
+
+  .under-title-div,
+  .over-title-div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .link-div {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    text-decoration-line: none;
+
+    font-size: 14px;
+    font-weight: 400;
+    color: ${({ theme }) => theme.color.gray700};
+  }
+
+  .link-span {
+    font-size: 12px;
+    font-weight: 300;
+    color: ${({ theme }) => theme.color.gray500};
+  }
+`;

리뷰: 앗 여기도 `over-title-div` 이렇게 가 어떨까요 !
@@ -0,0 +1,105 @@
+import styled from "@emotion/styled";
+import RestaurantExternalLinkIcon from "feature/restaurants/restaurantsDetail/components/icons/RestaurantExternalLinkIcon";
+import Link from "next/link";
+
+interface Props {
+  restaurantId: string;
+  userAuth?: number;
+  restaurantName: string;
+  restaurantAddress: string;
+  organizationName: string;
+  link?: string;
+  isMain?: boolean;
+}
+
+const RestaurantDetailHeaderSection: React.FC<Props> = ({
+  restaurantId,
+  userAuth,
+  restaurantName,
+  restaurantAddress,
+  organizationName,
+  link,
+  isMain = true,
+}) => {
+  return (
+    <EmotionWrapper>
+      <div className="over-title-div">
+        <span className="subtitle">{organizationName}</span>
+        {isMain &&
+          (userAuth === 0 || userAuth === 1 ? (
+            <Link className="link-div" href={"/restaurants/" + restaurantId + "/edit"}>
+              맛집 수정
+            </Link>
+          ) : (
+            <Link className="link-div" href={"/restaurants/" + restaurantId + "/copy"}>
+              맛집 수정
+            </Link>
+          ))}
+      </div>
+      <h1 className="title">{restaurantName}</h1>
+      <div className="under-title-div">
+        <span className="subtitle">{restaurantAddress}</span>
+        {link && (
+          <Link className="link-div" href={link}>
+            <RestaurantExternalLinkIcon />
+            <span className="link-span">맛집 상세 정보 &gt;</span>
+          </Link>
+        )}
+      </div>
+    </EmotionWrapper>
+  );
+};
+
+export default RestaurantDetailHeaderSection;
+
+const EmotionWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: left;
+  gap: 8px;
+
+  span {
+    font-weight: 300;
+    margin-left: 2px;
+    font-size: 16px;
+    color: ${({ theme }) => theme.color.gray600};
+  }
+
+  span.subtitle {
+    font-size: 12px;
+    font-weight: 400;
+    color: ${({ theme }) => theme.color.gray300};
+  }
+
+  .title {
+    font-size: 30px;
+    font-weight: 600;
+    color: ${({ theme }) => theme.color.gray700};
+  }
+
+  .under-title-div,
+  .over-title-div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .link-div {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    text-decoration-line: none;
+
+    font-size: 14px;
+    font-weight: 400;
+    color: ${({ theme }) => theme.color.gray700};
+  }
+
+  .link-span {
+    font-size: 12px;
+    font-weight: 300;
+    color: ${({ theme }) => theme.color.gray500};
+  }
+`;

리뷰: 여기는 이 페이지에서 거의 메인 급 제목인 것 같은데 `<h1 />` 태그 정도로 사용하면 어떨까요~?

아래는 레퍼런스용 [페이스북] 의 멤버 상세 페이지인데 서비스 제목 (저희로 치면 '쩝쩝대학') 은 `<h2/>` 태그, 유저 이름은 `<h1/>` 으로 사용한 것 같습니다. 

저희도 오히려 상단 navbar 에서 [쩝쩝대학] 을 `<h2 />` 로 바꾸고 맛집이나 단체 상세 페이지에서 맛집이름, 단체이름은 `<h1/>` 에 넣으면 semantic tagging 뿐만 아니라 SEO 에도 도움이 될 것 같습니다!

cc. @hoon5083 

![image](https://github.com/SystemConsultantGroup/foodhub-frontend/assets/86560973/31909b28-e965-4157-9662-f9cc6f8ddd4c)


![image](https://github.com/SystemConsultantGroup/foodhub-frontend/assets/86560973/9ba5c818-272f-4814-afe4-7d66dd4ed369)
@@ -0,0 +1,85 @@
+import styled from "@emotion/styled";
+import Image from "next/image";
+import { useState } from "react";
+import Button from "components/button/Button";
+
+interface Props {
+  imgSrcList: string[];
+}
+
+const RestaurantDetailImgSection: React.FC<Props> = ({ imgSrcList }) => {
+  const [currentImgIndex, setCurrentImgIndex] = useState(0);
+
+  const handleOnClickRight = () => {
+    setCurrentImgIndex((currentImgIndex) =>
+      currentImgIndex == imgSrcList.length - 1 ? 0 : currentImgIndex + 1
+    );
+  };
+
+  const handleOnClickLeft = () => {
+    setCurrentImgIndex((currentImgIndex) =>
+      currentImgIndex == 0 ? imgSrcList.length - 1 : currentImgIndex - 1
+    );
+  };
+
+  return (
+    <EmotionWrapper>
+      {imgSrcList.length === 0 ? (
+        <Image
+          className="restaurant-img"
+          alt="맛집 기본 이미지"
+          src={"/images/defaults/default-restaurant-image.png"}
+          fill
+        />
+      ) : (
+        <Image
+          className="restaurant-img"
+          alt="맛집 이미지"
+          src={imgSrcList[currentImgIndex]}
+          fill
+        />
+      )}
+      <Button
+        onClick={handleOnClickLeft}
+        variant="text"
+        style={{
+          backgroundColor: "transparent",
+          zIndex: "10",
+          position: "absolute",
+          left: "0px",
+        }}
+      >
+        &lt;
+      </Button>
+      <Button
+        onClick={handleOnClickRight}
+        variant="text"
+        className="right-button"
+        style={{
+          backgroundColor: "transparent",
+          zIndex: "10",
+          position: "absolute",
+          right: "0px",
+        }}
+      >
+        &gt;
+      </Button>
+    </EmotionWrapper>
+  );
+};
+
+export default RestaurantDetailImgSection;
+
+const EmotionWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 120px;
+  overflow: hidden;
+  margin-bottom: 10px;
+
+  .restaurant-img {
+    z-index: 1;
+    object-fit: cover;
+    position: absolute;
+  }
+`;

리뷰: 혹시 이 버튼은 화면상의 어느 부분인가용~?
로컬에서 돌렸을 때 노출되지 않는 것 같습니다!
![image](https://github.com/SystemConsultantGroup/foodhub-frontend/assets/86560973/c705c6dd-3624-40d6-8639-8764bd45609d)
@@ -0,0 +1,70 @@
+import styled from "@emotion/styled";
+import RestaurantDetailImgSection from "feature/restaurants/restaurantsDetail/components/section/RestaurantDetailImgSection";
+import RestaurantDetailHeaderSection from "feature/restaurants/restaurantsDetail/components/section/RestaurantDetailHeaderSection";
+import RestaurantDetailInfoSection from "feature/restaurants/restaurantsDetail/components/section/RestaurantDetailInfoSection";
+import RestaurantDetailReviewSection from "feature/restaurants/restaurantsDetail/components/section/RestaurantDetailReviewSection";
+import Divider from "components/divider/Divider";
+import { restaurant } from "feature/restaurants/restaurantsDetail/mockups/restaurant";
+import { reviewPage1 } from "feature/restaurants/restaurantsDetail/mockups/reviews";
+
+interface Props {
+  restaurantId: string;
+}
+
+const ViewRestaurantDetail: React.FC<Props> = ({ restaurantId }) => {
+  /**
+   * TODO 1: 사용자 권한 불러오기
+   */
+  const userAuth = 0;
+
+  /**
+   * TODO 2: 맛집 상세 정보 불러오기
+   */
+
+  /**
+   * TODO3: 맛집의 모든 리뷰 조회하기
+   * - totalScore, totalPages 확인하기 위한 Read Reviews API 호출
+   * - 리뷰가 없는 경우 404 에러 반환?
+   */
+  const { totalScore, totalCount, totalPages, scoreStatistics } = reviewPage1;
+
+  return (
+    <EmotionWrapper>
+      <RestaurantDetailImgSection imgSrcList={restaurant.imgSrcList} />
+      <RestaurantDetailHeaderSection
+        restaurantId={restaurantId}
+        userAuth={userAuth}
+        restaurantName={restaurant.name}
+        restaurantAddress={restaurant.address}
+        organizationName={restaurant.organizationName}
+        link={restaurant.link}
+      />
+      <RestaurantDetailInfoSection
+        restaurantId={restaurantId}
+        comment={restaurant.comment}
+        orderTip={restaurant.orderTip}
+        capacity={restaurant.capacity}
+        recommendedMenus={restaurant.recommnededMenus}
+        category={restaurant.category}
+        delivery={restaurant.delivery}
+        openingHour={restaurant.openingHour}
+        tags={restaurant.tags}
+        totalScore={totalScore}
+        totalCount={totalCount}
+      />
+      <Divider />
+      <RestaurantDetailReviewSection
+        restaurantId={restaurantId}
+        userAuth={userAuth}
+        totalScore={totalScore}
+        totalCount={totalCount}
+        totalPages={totalPages}
+        scoreStatistics={scoreStatistics}
+      />
+    </EmotionWrapper>
+  );
+};
+
+export default ViewRestaurantDetail;
+
+const EmotionWrapper = styled.div``;

리뷰: 임시 코드인가요!?

객체구조 분해로 받아오는 것도 좋을 것 같습니다!

```tsx
const { totalScore, totalCount, totalPages, scoreStatistics } = reviewPage1
```
@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+import RestaurantsReviewForm from "feature/restaurants/restaurantsReview/components/form/RestaurantsReviewForm";
+
+interface Props {
+  restaurantId: string;
+}
+
+const ViewRestaurantReviewCreate: React.FC<Props> = ({ restaurantId }) => {
+  return (
+    <EmotionWrapper>
+      <RestaurantsReviewForm restaurantId={restaurantId} isEditMode={false} />
+    </EmotionWrapper>
+  );
+};
+
+export default ViewRestaurantReviewCreate;
+
+const EmotionWrapper = styled.div``;

리뷰: 여기서도 `string []` 을 특별히 추가해주신 이유가 있을까요~?
@@ -0,0 +1,85 @@
+import styled from "@emotion/styled";
+import Image from "next/image";
+import { useState } from "react";
+import Button from "components/button/Button";
+
+interface Props {
+  imgSrcList: string[];
+}
+
+const RestaurantDetailImgSection: React.FC<Props> = ({ imgSrcList }) => {
+  const [currentImgIndex, setCurrentImgIndex] = useState(0);
+
+  const handleOnClickRight = () => {
+    setCurrentImgIndex((currentImgIndex) =>
+      currentImgIndex == imgSrcList.length - 1 ? 0 : currentImgIndex + 1
+    );
+  };
+
+  const handleOnClickLeft = () => {
+    setCurrentImgIndex((currentImgIndex) =>
+      currentImgIndex == 0 ? imgSrcList.length - 1 : currentImgIndex - 1
+    );
+  };
+
+  return (
+    <EmotionWrapper>
+      {imgSrcList.length === 0 ? (
+        <Image
+          className="restaurant-img"
+          alt="맛집 기본 이미지"
+          src={"/images/defaults/default-restaurant-image.png"}
+          fill
+        />
+      ) : (
+        <Image
+          className="restaurant-img"
+          alt="맛집 이미지"
+          src={imgSrcList[currentImgIndex]}
+          fill
+        />
+      )}
+      <Button
+        onClick={handleOnClickLeft}
+        variant="text"
+        style={{
+          backgroundColor: "transparent",
+          zIndex: "10",
+          position: "absolute",
+          left: "0px",
+        }}
+      >
+        &lt;
+      </Button>
+      <Button
+        onClick={handleOnClickRight}
+        variant="text"
+        className="right-button"
+        style={{
+          backgroundColor: "transparent",
+          zIndex: "10",
+          position: "absolute",
+          right: "0px",
+        }}
+      >
+        &gt;
+      </Button>
+    </EmotionWrapper>
+  );
+};
+
+export default RestaurantDetailImgSection;
+
+const EmotionWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 120px;
+  overflow: hidden;
+  margin-bottom: 10px;
+
+  .restaurant-img {
+    z-index: 1;
+    object-fit: cover;
+    position: absolute;
+  }
+`;

리뷰: 앗 이미지 슬라이더를 구현하려다가 일단 PR부터 올렸는데, 해당 버튼은 그 과정에서 생긴 별 의미 없는 버튼입니다.. 삭제하도록 하겠습니다!
@@ -0,0 +1,70 @@
+import styled from "@emotion/styled";
+import RestaurantDetailImgSection from "feature/restaurants/restaurantsDetail/components/section/RestaurantDetailImgSection";
+import RestaurantDetailHeaderSection from "feature/restaurants/restaurantsDetail/components/section/RestaurantDetailHeaderSection";
+import RestaurantDetailInfoSection from "feature/restaurants/restaurantsDetail/components/section/RestaurantDetailInfoSection";
+import RestaurantDetailReviewSection from "feature/restaurants/restaurantsDetail/components/section/RestaurantDetailReviewSection";
+import Divider from "components/divider/Divider";
+import { restaurant } from "feature/restaurants/restaurantsDetail/mockups/restaurant";
+import { reviewPage1 } from "feature/restaurants/restaurantsDetail/mockups/reviews";
+
+interface Props {
+  restaurantId: string;
+}
+
+const ViewRestaurantDetail: React.FC<Props> = ({ restaurantId }) => {
+  /**
+   * TODO 1: 사용자 권한 불러오기
+   */
+  const userAuth = 0;
+
+  /**
+   * TODO 2: 맛집 상세 정보 불러오기
+   */
+
+  /**
+   * TODO3: 맛집의 모든 리뷰 조회하기
+   * - totalScore, totalPages 확인하기 위한 Read Reviews API 호출
+   * - 리뷰가 없는 경우 404 에러 반환?
+   */
+  const { totalScore, totalCount, totalPages, scoreStatistics } = reviewPage1;
+
+  return (
+    <EmotionWrapper>
+      <RestaurantDetailImgSection imgSrcList={restaurant.imgSrcList} />
+      <RestaurantDetailHeaderSection
+        restaurantId={restaurantId}
+        userAuth={userAuth}
+        restaurantName={restaurant.name}
+        restaurantAddress={restaurant.address}
+        organizationName={restaurant.organizationName}
+        link={restaurant.link}
+      />
+      <RestaurantDetailInfoSection
+        restaurantId={restaurantId}
+        comment={restaurant.comment}
+        orderTip={restaurant.orderTip}
+        capacity={restaurant.capacity}
+        recommendedMenus={restaurant.recommnededMenus}
+        category={restaurant.category}
+        delivery={restaurant.delivery}
+        openingHour={restaurant.openingHour}
+        tags={restaurant.tags}
+        totalScore={totalScore}
+        totalCount={totalCount}
+      />
+      <Divider />
+      <RestaurantDetailReviewSection
+        restaurantId={restaurantId}
+        userAuth={userAuth}
+        totalScore={totalScore}
+        totalCount={totalCount}
+        totalPages={totalPages}
+        scoreStatistics={scoreStatistics}
+      />
+    </EmotionWrapper>
+  );
+};
+
+export default ViewRestaurantDetail;
+
+const EmotionWrapper = styled.div``;

리뷰: 확인 감사합니다. 수정했습니다!
@@ -0,0 +1,85 @@
+import styled from "@emotion/styled";
+import Image from "next/image";
+import { useState } from "react";
+import Button from "components/button/Button";
+
+interface Props {
+  imgSrcList: string[];
+}
+
+const RestaurantDetailImgSection: React.FC<Props> = ({ imgSrcList }) => {
+  const [currentImgIndex, setCurrentImgIndex] = useState(0);
+
+  const handleOnClickRight = () => {
+    setCurrentImgIndex((currentImgIndex) =>
+      currentImgIndex == imgSrcList.length - 1 ? 0 : currentImgIndex + 1
+    );
+  };
+
+  const handleOnClickLeft = () => {
+    setCurrentImgIndex((currentImgIndex) =>
+      currentImgIndex == 0 ? imgSrcList.length - 1 : currentImgIndex - 1
+    );
+  };
+
+  return (
+    <EmotionWrapper>
+      {imgSrcList.length === 0 ? (
+        <Image
+          className="restaurant-img"
+          alt="맛집 기본 이미지"
+          src={"/images/defaults/default-restaurant-image.png"}
+          fill
+        />
+      ) : (
+        <Image
+          className="restaurant-img"
+          alt="맛집 이미지"
+          src={imgSrcList[currentImgIndex]}
+          fill
+        />
+      )}
+      <Button
+        onClick={handleOnClickLeft}
+        variant="text"
+        style={{
+          backgroundColor: "transparent",
+          zIndex: "10",
+          position: "absolute",
+          left: "0px",
+        }}
+      >
+        &lt;
+      </Button>
+      <Button
+        onClick={handleOnClickRight}
+        variant="text"
+        className="right-button"
+        style={{
+          backgroundColor: "transparent",
+          zIndex: "10",
+          position: "absolute",
+          right: "0px",
+        }}
+      >
+        &gt;
+      </Button>
+    </EmotionWrapper>
+  );
+};
+
+export default RestaurantDetailImgSection;
+
+const EmotionWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 120px;
+  overflow: hidden;
+  margin-bottom: 10px;
+
+  .restaurant-img {
+    z-index: 1;
+    object-fit: cover;
+    position: absolute;
+  }
+`;

리뷰: 이미지 슬라이더는 아직 구현하지 않았지만, 일단 이미지 전환이 가능하도록 버튼은 만들어두었습니다! 지금은 버튼 보일 겁니다.
@@ -0,0 +1,105 @@
+import styled from "@emotion/styled";
+import RestaurantExternalLinkIcon from "feature/restaurants/restaurantsDetail/components/icons/RestaurantExternalLinkIcon";
+import Link from "next/link";
+
+interface Props {
+  restaurantId: string;
+  userAuth?: number;
+  restaurantName: string;
+  restaurantAddress: string;
+  organizationName: string;
+  link?: string;
+  isMain?: boolean;
+}
+
+const RestaurantDetailHeaderSection: React.FC<Props> = ({
+  restaurantId,
+  userAuth,
+  restaurantName,
+  restaurantAddress,
+  organizationName,
+  link,
+  isMain = true,
+}) => {
+  return (
+    <EmotionWrapper>
+      <div className="over-title-div">
+        <span className="subtitle">{organizationName}</span>
+        {isMain &&
+          (userAuth === 0 || userAuth === 1 ? (
+            <Link className="link-div" href={"/restaurants/" + restaurantId + "/edit"}>
+              맛집 수정
+            </Link>
+          ) : (
+            <Link className="link-div" href={"/restaurants/" + restaurantId + "/copy"}>
+              맛집 수정
+            </Link>
+          ))}
+      </div>
+      <h1 className="title">{restaurantName}</h1>
+      <div className="under-title-div">
+        <span className="subtitle">{restaurantAddress}</span>
+        {link && (
+          <Link className="link-div" href={link}>
+            <RestaurantExternalLinkIcon />
+            <span className="link-span">맛집 상세 정보 &gt;</span>
+          </Link>
+        )}
+      </div>
+    </EmotionWrapper>
+  );
+};
+
+export default RestaurantDetailHeaderSection;
+
+const EmotionWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: left;
+  gap: 8px;
+
+  span {
+    font-weight: 300;
+    margin-left: 2px;
+    font-size: 16px;
+    color: ${({ theme }) => theme.color.gray600};
+  }
+
+  span.subtitle {
+    font-size: 12px;
+    font-weight: 400;
+    color: ${({ theme }) => theme.color.gray300};
+  }
+
+  .title {
+    font-size: 30px;
+    font-weight: 600;
+    color: ${({ theme }) => theme.color.gray700};
+  }
+
+  .under-title-div,
+  .over-title-div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .link-div {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    text-decoration-line: none;
+
+    font-size: 14px;
+    font-weight: 400;
+    color: ${({ theme }) => theme.color.gray700};
+  }
+
+  .link-span {
+    font-size: 12px;
+    font-weight: 300;
+    color: ${({ theme }) => theme.color.gray500};
+  }
+`;

리뷰: 오.. 넵 다른 페이지도 메인이 되는 텍스트(맛집 이름, 단체 이름)은 `<h1 />`을 사용하도록 수정하겠습니다.
일단 맛집 상세 페이지에서는 맛집 이름을  `<h1 />` 태그로 수정 완료하였습니다.