[FEAT] 맛집 상세 페이지 UI 구현

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "git.ignoreLimitWarning": true
+}

omechu-app/middleware.ts

@@ -0,0 +1,33 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+// NOTE: middleware 함수는 모든 요청에 대해 실행되어 라우팅 또는 리디렉션 등을 처리할 수 있음
+export function middleware(request: NextRequest) {
+  const { pathname, searchParams } = request.nextUrl;
+
+  // CASE 1: /restaurant-detail?id=123 형식으로 접근 시 → /restaurant-detail/123 으로 리디렉션
+  if (pathname === "/restaurant-detail" && searchParams.has("id")) {
+    const id = searchParams.get("id");
+    const url = request.nextUrl.clone();
+    url.pathname = `/restaurant-detail/${id}`; // 동적 세그먼트 경로로 변경
+    url.search = ""; // 기존 쿼리스트링 제거
+    return NextResponse.redirect(url);
+  }
+
+  // CASE 2: /restaurant-detail/map?id=123 형식으로 접근 시 → /restaurant-detail/map/123 으로 리디렉션
+  if (pathname === "/restaurant-detail/map" && searchParams.has("id")) {
+    const id = searchParams.get("id");
+    const url = request.nextUrl.clone();
+    url.pathname = `/restaurant-detail/map/${id}`; // 동적 세그먼트 경로로 변경
+    url.search = ""; // 기존 쿼리스트링 제거
+    return NextResponse.redirect(url);
+  }
+
+  // 기본적으로는 요청을 그대로 통과시킴
+  return NextResponse.next();
+}
+
+// NOTE: matcher를 설정하면 특정 경로에만 middleware를 적용 가능 (선택사항)
+export const config = {
+  matcher: ["/restaurant-detail", "/restaurant-detail/map"],
+};

omechu-app/src/app/ClientLayout.tsx

@@ -29,15 +29,24 @@ export default function ClientLayout({
     "/mypage/user-info-setup/condition",
     "/mypage/user-info-setup/allergy",
     "/mypage/recommended-list",
+    "/mainpage/question-answer/meal-time",
+    "/mainpage/question-answer/purpose",
+    "/mainpage/question-answer/state",
+    "/mainpage/question-answer/who",
+    "/mainpage/question-answer/budget",
+    "/mainpage/question-answer/middle-question",
+    "/mainpage/meal-answer",
+    "/mainpage/location-answer",
+    "/mypage/recommended-list",
 
+    // 마이페이지-이용약관
+    "/mypage/terms",
     // 마이페이지-설정
     "/mypage/settings",
     "/mypage/settings/account-settings",
     "/mypage/settings/account-settings/change-password",
+    // 마이페이지-이용약관
     "/mypage/terms",
-    "/mypage/terms/service",
-    "/mypage/terms/personal-info",
-    "/mypage/terms/location-info",
 
     // 로그인, 회원가입, 온보딩 페이지
     "/auth/signin",
@@ -50,6 +59,14 @@ export default function ClientLayout({
     "/onboarding/4",
     "/onboarding/5",
     "/onboarding/6",
+
+    // 마이페이지-이용약관
+    "/mypage/terms/service",
+    "/mypage/terms/personal-info",
+    "/mypage/terms/location-info",
+
+    //맛집-상세페이지
+    "/restaurant-detail",
   ];
   const showBottomNav = !noBottomNavRoutes.includes(pathname);
 

omechu-app/src/app/auth/signup/page.tsx

@@ -66,7 +66,7 @@ export default function Signup() {
   return (
     <div className="flex flex-col items-center min-h-screen bg-[#F8D5FF] py-10 px-4">
       <form onSubmit={handleSubmit(onSubmit)} className="w-full max-w-sm">
-        <h1 className="text-xl font-bold text-center mb-8 text-black">
+        <h1 className="mb-8 text-xl font-bold text-center text-black">
           회원 정보를 입력해 주세요
         </h1>
 
@@ -149,7 +149,7 @@ export default function Signup() {
                 onChange={handleAllAgreement}
                 className="peer relative appearance-none w-5 h-5 border-2 border-gray-300 rounded-full cursor-pointer checked:bg-[#00B2FF] checked:border-transparent focus:outline-none"
               />
-              <span className="absolute text-white transition-opacity opacity-0 pointer-events-none top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 peer-checked:opacity-100">
+              <span className="absolute text-white transition-opacity -translate-x-1/2 -translate-y-1/2 opacity-0 pointer-events-none top-1/2 left-1/2 peer-checked:opacity-100">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   className="w-3.5 h-3.5"
@@ -168,7 +168,7 @@ export default function Signup() {
               아래의 내용을 모두 확인하였으며 모두 동의합니다
             </span>
           </label>
-          <div className="pl-7 space-y-2">
+          <div className="space-y-2 pl-7">
             <div className="flex items-center justify-between">
               <label
                 htmlFor="termsService"
@@ -181,7 +181,7 @@ export default function Signup() {
                     {...register("termsService")}
                     className="peer relative appearance-none w-5 h-5 border-2 border-gray-300 rounded-full cursor-pointer checked:bg-[#00B2FF] checked:border-transparent focus:outline-none"
                   />
-                  <span className="absolute text-white transition-opacity opacity-0 pointer-events-none top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 peer-checked:opacity-100">
+                  <span className="absolute text-white transition-opacity -translate-x-1/2 -translate-y-1/2 opacity-0 pointer-events-none top-1/2 left-1/2 peer-checked:opacity-100">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       className="w-3.5 h-3.5"
@@ -224,7 +224,7 @@ export default function Signup() {
                     {...register("termsPrivacy")}
                     className="peer relative appearance-none w-5 h-5 border-2 border-gray-300 rounded-full cursor-pointer checked:bg-[#00B2FF] checked:border-transparent focus:outline-none"
                   />
-                  <span className="absolute text-white transition-opacity opacity-0 pointer-events-none top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 peer-checked:opacity-100">
+                  <span className="absolute text-white transition-opacity -translate-x-1/2 -translate-y-1/2 opacity-0 pointer-events-none top-1/2 left-1/2 peer-checked:opacity-100">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       className="w-3.5 h-3.5"
@@ -269,7 +269,7 @@ export default function Signup() {
                     {...register("termsLocation")}
                     className="peer relative appearance-none w-5 h-5 border-2 border-gray-300 rounded-full cursor-pointer checked:bg-[#00B2FF] checked:border-transparent focus:outline-none"
                   />
-                  <span className="absolute text-white transition-opacity opacity-0 pointer-events-none top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 peer-checked:opacity-100">
+                  <span className="absolute text-white transition-opacity -translate-x-1/2 -translate-y-1/2 opacity-0 pointer-events-none top-1/2 left-1/2 peer-checked:opacity-100">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       className="w-3.5 h-3.5"
@@ -313,7 +313,7 @@ export default function Signup() {
                   {...register("termsAge")}
                   className="peer relative appearance-none w-5 h-5 border-2 border-gray-300 rounded-full cursor-pointer checked:bg-[#00B2FF] checked:border-transparent focus:outline-none"
                 />
-                <span className="absolute text-white transition-opacity opacity-0 pointer-events-none top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 peer-checked:opacity-100">
+                <span className="absolute text-white transition-opacity -translate-x-1/2 -translate-y-1/2 opacity-0 pointer-events-none top-1/2 left-1/2 peer-checked:opacity-100">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     className="w-3.5 h-3.5"

omechu-app/src/app/components/auth/TermsOfServiceModal.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import Image from "next/image";
+import Button from "./Button";
+
+type TermsOfServiceModalProps = {
+  title: string;
+  content: React.ReactNode;
+  onConfirm: () => void;
+  onClose: () => void;
+};
+
+const TermsOfServiceModal = ({
+  title,
+  content,
+  onConfirm,
+  onClose,
+}: TermsOfServiceModalProps) => {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40">
+      <div className="bg-white w-[335px] rounded-2xl p-5 flex flex-col gap-4 shadow-lg">
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-bold">{title}</h2>
+          <button onClick={onClose}>
+            <Image src="/x_icon.png" alt="close" width={20} height={20} />
+          </button>
+        </div>
+        <div className="h-64 p-3 overflow-y-auto text-sm text-gray-600 border rounded-md bg-gray-50">
+          {content}
+        </div>
+        <Button onClick={onConfirm} variant="red" size="medium">
+          확인
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default TermsOfServiceModal;

omechu-app/src/app/components/common/Bottom.tsx

@@ -22,7 +22,7 @@ const navItems: {
   },
   {
     title: "맛집",
-    routingUrl: "/",
+    routingUrl: "/restaurant",
     imgSrc: "/restaurant.png",
     imgAlt: "맛집",
   },

omechu-app/src/app/components/restaurant/ReportModal.tsx

@@ -0,0 +1,79 @@
+import Image from "next/image";
+import { useState } from "react";
+
+type ReportModalProps = {
+  onClick: () => void;
+  onReport: () => void;
+};
+
+export default function ReportModal({ onClick, onReport }: ReportModalProps) {
+  const [selectedReason, setSelectedReason] = useState("");
+
+  const reasons = [
+    { id: "abuse", label: "욕설, 비방" },
+    { id: "ad", label: "광고, 홍보성 글" },
+    { id: "false", label: "허위 사실" },
+    { id: "offensive", label: "선정적 / 불쾌한 내용" },
+    { id: "other", label: "기타" },
+  ];
+
+  return (
+    <section className="relative px-7 py-10 flex flex-col items-center gap-5 w-80 h-fit bg-white border border-[#393939] rounded-2xl">
+      {/* 나가기 버튼 */}
+      <div className="absolute top-4 right-4">
+        <button onClick={onClick}>
+          <Image
+            src="/close_button.png"
+            alt="나가기 버튼"
+            width={20}
+            height={20}
+          />
+        </button>
+      </div>
+
+      {/* 모달 제목 */}
+      <div className="mt-5 mb-2 text-2xl text-[#393939] font-semibold">
+        후기 신고하기
+      </div>
+
+      {/* 신고 사유 */}
+      <div className="w-full ">
+        <h1 className="mb-2">신고 사유를 선택해 주세요</h1>
+        <div className="flex flex-col items-start w-full gap-2 px-1">
+          {reasons.map(({ id, label }) => (
+            <label
+              key={id}
+              htmlFor={id}
+              className="flex items-center gap-2 text-sm text-[#626262]"
+            >
+              <input
+                id={id}
+                type="radio"
+                name="reportReason"
+                value={label}
+                checked={selectedReason === label}
+                onChange={() => setSelectedReason(label)}
+                className="accent-[#1F9BDA]"
+              />
+              {label}
+            </label>
+          ))}
+        </div>
+      </div>
+
+      {/* 신고 내용 */}
+      <textarea
+        className="w-full h-24 px-2.5 py-2 border border-[#ccc] rounded resize-none text-sm text-[#393939] focus:outline-none"
+        placeholder="신고 사유를 자세하게 설명해주세요. (선택)"
+      />
+
+      {/* 신고 버튼 */}
+      <button
+        onClick={onReport}
+        className="w-36 h-10 rounded-3xl text-white bg-[#FB4746] hover:bg-[#e2403f] active:bg-[#c93938]"
+      >
+        <span>신고하기</span>
+      </button>
+    </section>
+  );
+}

omechu-app/src/app/components/restaurant/Review.tsx

@@ -0,0 +1,125 @@
+import Image from "next/image";
+
+type ReviewProps = {
+  id: number;
+  profileImgUrl: string;
+  userId: string;
+  createdDate: string;
+  votes: number;
+  rating: number;
+  content: string;
+  tags?: string[];
+  images?: string[];
+  onClick?: () => void;
+  onReport?: () => void;
+  onVote?: () => void;
+  isVoted: boolean;
+  isOptionOpen?: boolean;
+};
+
+export default function Review({
+  id,
+  profileImgUrl,
+  userId,
+  createdDate,
+  votes = 0,
+  rating,
+  content,
+  tags,
+  images,
+  onClick,
+  onReport,
+  onVote,
+  isVoted,
+  isOptionOpen = false,
+}: ReviewProps) {
+  return (
+    <section
+      className="w-full h-fit p-4 flex flex-col gap-2 bg-white 
+                border-[1px] border-[#393939] rounded-xl "
+    >
+      {/* 프로필사진, 닉네임, 작성일 | 추천 버튼, 설정버튼 */}
+      <div className="relative flex justify-between">
+        <div className="flex items-center gap-3">
+          <Image
+            src={profileImgUrl}
+            alt={profileImgUrl}
+            width={30}
+            height={30}
+          />
+          <span className="text-base text-[#393939] font-semibold">
+            {userId}
+          </span>
+          <span className="mt-[1.2px] text-sm text-[#828282] font-normal">
+            {createdDate}
+          </span>
+        </div>
+        <div className="absolute flex items-center gap-1 mb-2 -top-1 -right-1">
+          <span className="mt-1 text-sm ">{votes}</span>
+          <button onClick={onVote} className="mb-1">
+            <Image
+              src={isVoted ? "/thumbs-up-fill.png" : "/thumbs-up.png"}
+              alt="리뷰 추천 버튼"
+              width={22}
+              height={22}
+            />
+          </button>
+          <button onClick={onClick}>
+            <Image
+              src="/menu_dots_vertical.png"
+              alt="메뉴"
+              width={18}
+              height={18}
+            />
+          </button>
+        </div>
+        {isOptionOpen && (
+          <div className="absolute p-2 bg-white border rounded shadow -right-1 top-6">
+            <button
+              onClick={onReport}
+              className="flex items-center justify-center w-full gap-2 text-left"
+            >
+              <Image
+                src="/report.png"
+                alt={"신고하기"}
+                width={13}
+                height={18}
+              />
+              <span className="mt-1">신고하기</span>
+            </button>
+          </div>
+        )}
+      </div>
+      {/* 평점, 후기 */}
+      <div className="flex flex-col gap-1 mt-1 ml-2">
+        <span className="text-xl font-normal text-[#1F9BDA]">
+          {"★".repeat(rating) + "☆".repeat(5 - rating)}
+        </span>
+        <span className="text-xl font-normal text-[#828282]">{content}</span>
+        <div className="flex flex-shrink-0 gap-2 mt-1 overflow-x-scroll scrollbar-hide scroll-smooth max-h-52">
+          {images?.map((item, index) => (
+            <Image
+              key={`review-img-${index}`}
+              src={item}
+              alt={`후기 이미지 ${index + 1}`}
+              width={200}
+              height={200}
+              className="rounded-md shrink-0"
+            />
+          ))}
+        </div>
+      </div>
+      {/* 후기 관련 태그 */}
+      <div className="flex flex-wrap justify-start gap-1 px-1">
+        {tags?.map((item, tagIdx) => (
+          <div
+            key={`tag-${id}-${tagIdx}`}
+            className="px-3 pt-1 pb-0.5 bg-white border-[1px] w-fit rounded-3xl border-[#393939] text-sm font-nomal hover:scale-105 duration-300"
+          >
+            {item}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}