From 3009fc8c35bdf23b914f92a1baf67f008e0a3777 Mon Sep 17 00:00:00 2001
From: junye0l <junyeolkim00@gmail.com>
Date: Wed, 22 Oct 2025 01:03:34 +0900
Subject: [PATCH 1/9] =?UTF-8?q?refactor=20:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[id]/_components/wine-review-form/review-form.tsx  | 10 ----------
 .../[id]/_components/wine-review/wine-review-item.tsx  |  7 -------
 2 files changed, 17 deletions(-)

diff --git a/src/app/wines/[id]/_components/wine-review-form/review-form.tsx b/src/app/wines/[id]/_components/wine-review-form/review-form.tsx
index c3fe9442..9892a052 100644
--- a/src/app/wines/[id]/_components/wine-review-form/review-form.tsx
+++ b/src/app/wines/[id]/_components/wine-review-form/review-form.tsx
@@ -38,7 +38,6 @@ export default function ReviewForm({
     image: wineImage,
   } = wine;
 
-  // 상태 관리
   const [rating, setRating] = useState(0);
   const [content, setContent] = useState("");
   const [selectedAromas, setSelectedAromas] = useState<AromaKey[]>([]);
@@ -68,7 +67,6 @@ export default function ReviewForm({
     }
   }, [initialData]);
 
-  // 맛 변경 핸들러
   const handleTasteChange = (index: number, newLevel: GaugeLevel) => {
     const newTastes = [...tastes];
     newTastes[index].data = newLevel;
@@ -114,7 +112,6 @@ export default function ReviewForm({
 
     if (hasError) return;
 
-    // 데이터 생성
     const reviewData: ReviewBase = {
       rating,
       lightBold: tastes[0].data,
@@ -140,15 +137,12 @@ export default function ReviewForm({
         className
       )}
     >
-      {/* 모든 컨텐츠 */}
       <div className="flex flex-col gap-8">
-        {/* 와인 정보 */}
         <div>
           <WineInfo name={wineName} region={wineRegion} image={wineImage} />
           <div className="mt-4 border-t border-gray-300" />
         </div>
 
-        {/* 별점 선택 */}
         <div className="flex items-center gap-4">
           <label className="text-body-sm text-gray-500">별점 선택</label>
           <RatingInput
@@ -158,7 +152,6 @@ export default function ReviewForm({
           />
         </div>
 
-        {/* 후기 입력 */}
         <div>
           <textarea
             value={content}
@@ -189,7 +182,6 @@ export default function ReviewForm({
           </div>
         </div>
 
-        {/* 와인의 맛 */}
         <div>
           <label className="mb-4 block text-heading-md">
             와인의 맛은 어떤가요?
@@ -201,7 +193,6 @@ export default function ReviewForm({
           />
         </div>
 
-        {/* 향 선택 */}
         <div className="tablet:pb-12 pc:pb-12">
           <label className="mb-4 block text-heading-md">
             기억에 남는 향이 있나요?
@@ -219,7 +210,6 @@ export default function ReviewForm({
           </div>
         </div>
 
-        {/* 버튼 */}
         <PageModalBtnWrapper>
           <Button
             onClick={handleSubmit}
diff --git a/src/app/wines/[id]/_components/wine-review/wine-review-item.tsx b/src/app/wines/[id]/_components/wine-review/wine-review-item.tsx
index bd7efe80..7f9ab13b 100644
--- a/src/app/wines/[id]/_components/wine-review/wine-review-item.tsx
+++ b/src/app/wines/[id]/_components/wine-review/wine-review-item.tsx
@@ -175,14 +175,12 @@ const WineReviewItem = ({
             "pc:gap-[20px]"
           )}
         >
-          {/* 1. 별점 */}
           <div className="flex items-center justify-between">
             <div role="group" aria-label={`별점 ${review.rating}점`}>
               <Rating rating={review.rating} size="sm" />
             </div>
           </div>
 
-          {/* 2. 프로필 + 시간 + 좋아요 or 햄버거 버튼*/}
           <div className="flex items-center justify-between">
             <WineReviewRating createdAt={review.createdAt} user={review.user} />
             <div className="flex items-center gap-2">
@@ -206,7 +204,6 @@ const WineReviewItem = ({
             </div>
           </div>
 
-          {/* 3. 향 정보 */}
           {review.aroma && review.aroma.length > 0 && (
             <nav aria-label="와인 향">
               <ul className="flex flex-wrap items-center gap-1">
@@ -239,12 +236,9 @@ const WineReviewItem = ({
             </nav>
           )}
 
-          {/* 4. 리뷰 내용 */}
           <p className="whitespace-pre-wrap break-keep text-body-md leading-relaxed tracking-[-0.02em] text-gray-900">
             {review.content}
           </p>
-
-          {/* 5. 맛 평가 토글 영역 */}
           <div>
             <div
               id={`taste-${review.id}`}
@@ -272,7 +266,6 @@ const WineReviewItem = ({
             </div>
           </div>
 
-          {/* 6. 토글 */}
           <div className="flex w-full justify-center">
             <IconButton
               icon="ArrowDownIcon"

From 9933fe7dbaef48862f453fa1544605c9eef978eb Mon Sep 17 00:00:00 2001
From: junye0l <junyeolkim00@gmail.com>
Date: Wed, 22 Oct 2025 02:33:30 +0900
Subject: [PATCH 2/9] =?UTF-8?q?refactor=20:=20review-item=20=EC=83=81?=
 =?UTF-8?q?=EB=8B=A8,=20=ED=95=98=EB=8B=A8=20=EA=B8=B0=EC=A4=80=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wine-review/wine-review-item.tsx          | 317 ++----------------
 .../wine-review-item/review-item-footer.tsx   |  65 ++++
 .../wine-review-item/review-item-header.tsx   | 211 ++++++++++++
 3 files changed, 306 insertions(+), 287 deletions(-)
 create mode 100644 src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-footer.tsx
 create mode 100644 src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-header.tsx

diff --git a/src/app/wines/[id]/_components/wine-review/wine-review-item.tsx b/src/app/wines/[id]/_components/wine-review/wine-review-item.tsx
index 7f9ab13b..c619f761 100644
--- a/src/app/wines/[id]/_components/wine-review/wine-review-item.tsx
+++ b/src/app/wines/[id]/_components/wine-review/wine-review-item.tsx
@@ -1,301 +1,44 @@
 "use client";
 
-import { useState, useRef, useMemo, memo } from "react";
-import { useRouter } from "next/navigation";
-import { cn, getAromaIconName } from "@/lib/utils";
-import WineTaste, { buildTasteData } from "@/components/wine-taste";
-import {
-  Rating,
-  Icon,
-  DropdownMenu,
-  IconButton,
-  LikeButton,
-  ConfirmModal,
-} from "@/components";
-import { aromaMap } from "@/components/flavor/aroma-map";
-import useToggle from "@/hooks/use-toggle";
-import useClickOutside from "@/hooks/use-click-outside";
-import WineReviewRating from "./wine-review-rating";
-import useReviewLike from "../../../../../hooks/api/reviews/use-review-like";
-import useReviewDelete from "../../../../../hooks/api/reviews/use-review-delete";
+import { cn } from "@/lib/utils";
 import type { Review } from "@/types/wine";
-import { useToast } from "@/hooks/use-toast";
+import ReviewItemHeader from "./wine-review-item/review-item-header";
+import ReviewItemFooter from "./wine-review-item/review-item-footer";
 
 interface WineReviewItemProps {
   review: Review;
-  isFirst?: boolean;
-  currentUserId?: number;
   wineId: number;
+  currentUserId?: number;
+  isFirst?: boolean;
 }
 
-interface OptionMenuProps {
-  isOpen: boolean;
-  onToggle: () => void;
-  onEdit: () => void;
-  onDelete: () => void;
-  onClose: () => void;
-}
-
-const OptionMenu = memo(function OptionMenu({
-  isOpen,
-  onToggle,
-  onEdit,
-  onDelete,
-  onClose,
-}: OptionMenuProps) {
-  const menuRef = useRef<HTMLDivElement>(null);
-  useClickOutside(menuRef, onClose);
-
-  return (
-    <div className="relative" ref={menuRef}>
-      <IconButton
-        icon="HamburgerIcon"
-        aria-label="옵션 메뉴"
-        className="!h-6 !w-6 border-none hover:bg-inherit active:bg-inherit"
-        iconClassName="mobile:ic-sm tablet:ic-sm pc:ic-md"
-        onClick={onToggle}
-      />
-      {isOpen && (
-        <div className="absolute right-0 top-full z-50 mt-2">
-          <DropdownMenu
-            items={[
-              { label: "수정하기", onClick: onEdit },
-              { label: "삭제하기", onClick: onDelete },
-            ]}
-          />
-        </div>
-      )}
-    </div>
-  );
-});
-
 const WineReviewItem = ({
   review,
-  isFirst = false,
-  currentUserId,
   wineId,
-}: WineReviewItemProps) => {
-  const router = useRouter();
-  const { reviewDeleteSuccess, reviewDeleteError } = useToast();
-
-  const derivedIsLiked = useMemo(() => {
-    if (typeof review.isLiked === "boolean") {
-      return review.isLiked;
-    }
-    if (!review.isLiked) {
-      return false;
-    }
-    return Object.keys(review.isLiked).length > 0;
-  }, [review.isLiked]);
-
-  const [isTasteOpen, setIsTasteOpen] = useState(false);
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [liked, setLiked] = useState(derivedIsLiked);
-
-  const {
-    isOn: isMenuOpen,
-    toggle: toggleMenu,
-    setOff: closeMenu,
-  } = useToggle(false);
-
-  const isMyReview = currentUserId === review.user.id;
-
-  const { mutate: toggleLike, isPending: likePending } = useReviewLike(
-    review.id,
-    wineId
-  );
-
-  const { mutate: deleteReview, isPending: deletePending } = useReviewDelete({
-    reviewId: review.id,
-    wineId,
-  });
-
-  const tastes = useMemo(() => {
-    return buildTasteData({
-      lightBold: review.lightBold,
-      smoothTannic: review.smoothTannic,
-      drySweet: review.drySweet,
-      softAcidic: review.softAcidic,
-    });
-  }, [
-    review.lightBold,
-    review.smoothTannic,
-    review.drySweet,
-    review.softAcidic,
-  ]);
-
-  const handleEdit = () => {
-    closeMenu();
-    router.push(`/reviews/${review.id}/edit`);
-  };
-
-  const openDeleteModal = () => {
-    closeMenu();
-    setIsDeleteModalOpen(true);
-  };
-
-  const handleDeleteConfirm = () => {
-    deleteReview(undefined, {
-      onSuccess: () => {
-        setIsDeleteModalOpen(false);
-        reviewDeleteSuccess();
-      },
-      onError: () => {
-        reviewDeleteError();
-      },
-    });
-  };
-
-  const handleLikeClick = () => {
-    const next = !liked;
-    setLiked(next);
-
-    toggleLike(next, {
-      onError: () => {
-        setLiked((prev) => !prev);
-      },
-    });
-  };
-
-  return (
-    <>
-      <article
-        className={cn(
-          "flex w-full select-none flex-col items-center gap-[14px] py-8",
-          "tablet:items-center tablet:gap-[20px] tablet:py-10",
-          "pc:gap-[20px] pc:py-8",
-          !isFirst && "border-t border-gray-300"
-        )}
-        aria-label={`${review.user.nickname}님의 리뷰`}
-      >
-        <div
-          className={cn(
-            "flex w-full flex-col gap-[14px]",
-            "tablet:gap-[20px]",
-            "pc:gap-[20px]"
-          )}
-        >
-          <div className="flex items-center justify-between">
-            <div role="group" aria-label={`별점 ${review.rating}점`}>
-              <Rating rating={review.rating} size="sm" />
-            </div>
-          </div>
-
-          <div className="flex items-center justify-between">
-            <WineReviewRating createdAt={review.createdAt} user={review.user} />
-            <div className="flex items-center gap-2">
-              {!isMyReview && (
-                <LikeButton
-                  isLike={liked}
-                  disabled={likePending}
-                  onClick={handleLikeClick}
-                  aria-label={liked ? "좋아요 취소" : "좋아요"}
-                />
-              )}
-              {isMyReview && (
-                <OptionMenu
-                  isOpen={isMenuOpen}
-                  onToggle={toggleMenu}
-                  onEdit={handleEdit}
-                  onDelete={openDeleteModal}
-                  onClose={closeMenu}
-                />
-              )}
-            </div>
-          </div>
-
-          {review.aroma && review.aroma.length > 0 && (
-            <nav aria-label="와인 향">
-              <ul className="flex flex-wrap items-center gap-1">
-                {review.aroma.map((aroma, index) => {
-                  const aromaInfo = aromaMap[aroma];
-                  if (!aromaInfo) return null;
-
-                  return (
-                    <li key={aroma} className="flex items-center">
-                      <div className="flex items-center gap-3 px-1">
-                        <Icon
-                          icon={getAromaIconName(aroma) as any}
-                          size="sm"
-                          className="text-gray-700"
-                          aria-hidden="true"
-                        />
-                        <span className="text-body-sm text-gray-500">
-                          {aromaInfo.label}
-                        </span>
-                      </div>
-                      {index < review.aroma.length - 1 && (
-                        <span className="text-gray-300" aria-hidden="true">
-                          •
-                        </span>
-                      )}
-                    </li>
-                  );
-                })}
-              </ul>
-            </nav>
-          )}
-
-          <p className="whitespace-pre-wrap break-keep text-body-md leading-relaxed tracking-[-0.02em] text-gray-900">
-            {review.content}
-          </p>
-          <div>
-            <div
-              id={`taste-${review.id}`}
-              className={cn(
-                "grid transition-all duration-300 ease-in-out",
-                isTasteOpen
-                  ? "grid-rows-[1fr] opacity-100"
-                  : "grid-rows-[0fr] opacity-0"
-              )}
-              role="region"
-              aria-label="맛 평가"
-              aria-hidden={!isTasteOpen}
-            >
-              <div className="overflow-hidden">
-                <div
-                  className={cn(
-                    "my-[18px]",
-                    "tablet:my-[20px]",
-                    "pc:my-[28px]"
-                  )}
-                >
-                  <WineTaste type="review" tastes={tastes} />
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="flex w-full justify-center">
-            <IconButton
-              icon="ArrowDownIcon"
-              aria-label={isTasteOpen ? "맛 평가 숨기기" : "맛 평가 보기"}
-              aria-expanded={isTasteOpen}
-              aria-controls={`taste-${review.id}`}
-              onClick={() => setIsTasteOpen(!isTasteOpen)}
-              className={cn(
-                "!h-[32px] !w-full",
-                "!border-none !bg-transparent hover:!bg-transparent active:!bg-transparent",
-                "text-gray-600 transition-transform duration-300 ease-in-out",
-                isTasteOpen && "rotate-180"
-              )}
-            />
-          </div>
-        </div>
-      </article>
-
-      <ConfirmModal
-        isOpen={isDeleteModalOpen}
-        onClose={() => setIsDeleteModalOpen(false)}
-        onConfirm={handleDeleteConfirm}
-        msg={{
-          text: "리뷰를 정말 삭제할까요?",
-          cancelMsg: "취소",
-          confirmMsg: deletePending ? "삭제 중..." : "삭제",
-        }}
-      />
-    </>
-  );
-};
+  currentUserId,
+  isFirst = false,
+}: WineReviewItemProps) => (
+  <article
+    className={cn(
+      "flex w-full select-none flex-col gap-6 py-8",
+      "tablet:gap-8 tablet:py-10",
+      "pc:gap-6 pc:py-8",
+      !isFirst && "border-t border-gray-300"
+    )}
+    aria-label={`${review.user.nickname}님의 리뷰`}
+  >
+    <ReviewItemHeader
+      review={review}
+      wineId={wineId}
+      currentUserId={currentUserId}
+    />
+
+    <p className="whitespace-pre-wrap break-keep text-body-md leading-relaxed tracking-[-0.02em] text-gray-900">
+      {review.content}
+    </p>
+
+    <ReviewItemFooter review={review} />
+  </article>
+);
 
 export default WineReviewItem;
diff --git a/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-footer.tsx b/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-footer.tsx
new file mode 100644
index 00000000..e114e3aa
--- /dev/null
+++ b/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-footer.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { cn } from "@/lib/utils";
+import WineTaste, { buildTasteData } from "@/components/wine-taste";
+import { IconButton } from "@/components";
+import type { Review } from "@/types/wine";
+
+interface ReviewItemFooterProps {
+  review: Review;
+}
+
+const ReviewItemFooter = ({ review }: ReviewItemFooterProps) => {
+  const [isTasteOpen, setIsTasteOpen] = useState(false);
+
+  const tastes = useMemo(
+    () =>
+      buildTasteData({
+        lightBold: review.lightBold,
+        smoothTannic: review.smoothTannic,
+        drySweet: review.drySweet,
+        softAcidic: review.softAcidic,
+      }),
+    [review.lightBold, review.smoothTannic, review.drySweet, review.softAcidic]
+  );
+
+  return (
+    <div className="flex w-full flex-col items-center gap-4">
+      <div
+        id={`taste-${review.id}`}
+        className={cn(
+          "grid w-full transition-all duration-300 ease-in-out",
+          isTasteOpen
+            ? "grid-rows-[1fr] opacity-100"
+            : "grid-rows-[0fr] opacity-0"
+        )}
+        role="region"
+        aria-label="맛 평가"
+        aria-hidden={!isTasteOpen}
+      >
+        <div className="overflow-hidden">
+          <div className="pb-2">
+            <WineTaste type="review" tastes={tastes} />
+          </div>
+        </div>
+      </div>
+
+      <IconButton
+        icon="ArrowUpIcon"
+        aria-label={isTasteOpen ? "맛 평가 숨기기" : "맛 평가 보기"}
+        aria-expanded={isTasteOpen}
+        aria-controls={`taste-${review.id}`}
+        onClick={() => setIsTasteOpen((prev) => !prev)}
+        className={cn(
+          "h-auto w-auto p-2",
+          "!border-none !bg-transparent hover:!bg-transparent active:!bg-transparent",
+          "text-gray-600 transition-transform duration-300 ease-in-out",
+          isTasteOpen && "rotate-180"
+        )}
+      />
+    </div>
+  );
+};
+
+export default ReviewItemFooter;
diff --git a/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-header.tsx b/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-header.tsx
new file mode 100644
index 00000000..27e3c215
--- /dev/null
+++ b/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-header.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+import { memo, useMemo, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Rating,
+  Icon,
+  LikeButton,
+  DropdownMenu,
+  IconButton,
+  ConfirmModal,
+} from "@/components";
+import { cn, getAromaIconName } from "@/lib/utils";
+import useToggle from "@/hooks/use-toggle";
+import useClickOutside from "@/hooks/use-click-outside";
+import useReviewLike from "@/hooks/api/reviews/use-review-like";
+import useReviewDelete from "@/hooks/api/reviews/use-review-delete";
+import { useToast } from "@/hooks/use-toast";
+import { aromaMap } from "@/components/flavor/aroma-map";
+import WineReviewRating from "../wine-review-rating";
+import type { Review } from "@/types/wine";
+
+interface ReviewItemHeaderProps {
+  review: Review;
+  wineId: number;
+  currentUserId?: number;
+}
+
+const OptionMenu = memo(function OptionMenu({
+  isOpen,
+  onToggle,
+  onClose,
+  onEdit,
+  onDelete,
+}: {
+  isOpen: boolean;
+  onToggle: () => void;
+  onClose: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}) {
+  const menuRef = useRef<HTMLDivElement>(null);
+  useClickOutside(menuRef, onClose);
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <IconButton
+        icon="HamburgerIcon"
+        aria-label="옵션 메뉴"
+        className="!h-6 !w-6 border-none hover:bg-inherit active:bg-inherit"
+        iconClassName="mobile:ic-sm tablet:ic-sm pc:ic-md"
+        onClick={onToggle}
+      />
+      {isOpen && (
+        <div className="absolute right-0 top-full z-50 mt-2">
+          <DropdownMenu
+            items={[
+              { label: "수정하기", onClick: onEdit },
+              { label: "삭제하기", onClick: onDelete },
+            ]}
+          />
+        </div>
+      )}
+    </div>
+  );
+});
+
+const ReviewItemHeader = ({
+  review,
+  wineId,
+  currentUserId,
+}: ReviewItemHeaderProps) => {
+  const router = useRouter();
+  const { reviewDeleteSuccess, reviewDeleteError } = useToast();
+
+  const derivedIsLiked = useMemo(() => {
+    if (typeof review.isLiked === "boolean") return review.isLiked;
+    if (!review.isLiked) return false;
+    return Object.keys(review.isLiked).length > 0;
+  }, [review.isLiked]);
+
+  const [liked, setLiked] = useState(derivedIsLiked);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+
+  const {
+    isOn: isMenuOpen,
+    toggle: toggleMenu,
+    setOff: closeMenu,
+  } = useToggle(false);
+
+  const isMyReview = currentUserId === review.user.id;
+
+  const { mutate: toggleLike, isPending: likePending } = useReviewLike(
+    review.id,
+    wineId
+  );
+  const { mutate: deleteReview, isPending: deletePending } = useReviewDelete({
+    reviewId: review.id,
+    wineId,
+  });
+
+  const handleEdit = () => {
+    closeMenu();
+    router.push(`/reviews/${review.id}/edit`);
+  };
+
+  const handleDeleteConfirm = () => {
+    deleteReview(undefined, {
+      onSuccess: () => {
+        setIsDeleteModalOpen(false);
+        reviewDeleteSuccess();
+      },
+      onError: () => {
+        reviewDeleteError();
+      },
+    });
+  };
+
+  const handleLikeClick = () => {
+    const next = !liked;
+    setLiked(next);
+
+    toggleLike(next, {
+      onError: () => {
+        setLiked((prev) => !prev);
+      },
+    });
+  };
+
+  return (
+    <>
+      <div
+        className={cn("flex w-full flex-col gap-6", "tablet:gap-8", "pc:gap-6")}
+      >
+        <div className="flex items-center justify-between">
+          <div role="group" aria-label={`별점 ${review.rating}점`}>
+            <Rating rating={review.rating} size="sm" />
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <WineReviewRating createdAt={review.createdAt} user={review.user} />
+          <div className="flex items-center gap-2">
+            {!isMyReview && (
+              <LikeButton
+                isLike={liked}
+                disabled={likePending}
+                onClick={handleLikeClick}
+                aria-label={liked ? "좋아요 취소" : "좋아요"}
+              />
+            )}
+            {isMyReview && (
+              <OptionMenu
+                isOpen={isMenuOpen}
+                onToggle={toggleMenu}
+                onClose={closeMenu}
+                onEdit={handleEdit}
+                onDelete={() => setIsDeleteModalOpen(true)}
+              />
+            )}
+          </div>
+        </div>
+
+        {review.aroma?.length ? (
+          <nav aria-label="와인 향">
+            <ul className="flex flex-wrap items-center gap-1">
+              {review.aroma.map((aroma, index) => {
+                const aromaInfo = aromaMap[aroma];
+                if (!aromaInfo) return null;
+
+                return (
+                  <li key={aroma} className="flex items-center">
+                    <div className="flex items-center gap-3 px-1">
+                      <Icon
+                        icon={getAromaIconName(aroma) as any}
+                        size="sm"
+                        className="text-gray-700"
+                        aria-hidden="true"
+                      />
+                      <span className="text-body-sm text-gray-500">
+                        {aromaInfo.label}
+                      </span>
+                    </div>
+                    {index < review.aroma.length - 1 && (
+                      <span className="text-gray-300" aria-hidden="true">
+                        •
+                      </span>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          </nav>
+        ) : null}
+      </div>
+
+      <ConfirmModal
+        isOpen={isDeleteModalOpen}
+        onClose={() => setIsDeleteModalOpen(false)}
+        onConfirm={handleDeleteConfirm}
+        msg={{
+          text: "리뷰를 정말 삭제할까요?",
+          cancelMsg: "취소",
+          confirmMsg: deletePending ? "삭제 중..." : "삭제",
+        }}
+      />
+    </>
+  );
+};
+
+export default memo(ReviewItemHeader);

From 381b122162e296b545dd81bd24d555c276c42b86 Mon Sep 17 00:00:00 2001
From: junye0l <junyeolkim00@gmail.com>
Date: Wed, 22 Oct 2025 02:37:11 +0900
Subject: [PATCH 3/9] =?UTF-8?q?refactor=20:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[id]/_components/wine-review/wine-review-section.tsx     | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/app/wines/[id]/_components/wine-review/wine-review-section.tsx b/src/app/wines/[id]/_components/wine-review/wine-review-section.tsx
index f7038ea8..5c38c844 100644
--- a/src/app/wines/[id]/_components/wine-review/wine-review-section.tsx
+++ b/src/app/wines/[id]/_components/wine-review/wine-review-section.tsx
@@ -78,7 +78,6 @@ const ReviewSection = ({
 
   return (
     <div>
-      {/* 모바일/태블릿: 평점 분포 */}
       <div
         className={cn(
           "mb-[77px]",
@@ -93,14 +92,12 @@ const ReviewSection = ({
         />
       </div>
 
-      {/* PC: 그리드 레이아웃 */}
       <div
         className={cn(
           "flex flex-col",
           "pc:grid pc:grid-cols-[1fr_280px] pc:gap-x-[77px]"
         )}
       >
-        {/* 왼쪽: 리뷰 목록 */}
         <div>
           <ReviewListHeader totalCount={reviews.length} />
 
@@ -116,7 +113,6 @@ const ReviewSection = ({
             ))}
           </div>
 
-          {/* 더보기 버튼 */}
           {hasMore && (
             <div className="mt-8 flex justify-center">
               <Button
@@ -128,7 +124,6 @@ const ReviewSection = ({
           )}
         </div>
 
-        {/* 오른쪽: PC 평점 분포 */}
         <div
           className={cn("hidden", "pc:sticky pc:top-[70px] pc:block pc:h-fit")}
         >

From 1bdee94a335cc8f74a563586d4d245d784670f70 Mon Sep 17 00:00:00 2001
From: junye0l <junyeolkim00@gmail.com>
Date: Wed, 22 Oct 2025 02:40:22 +0900
Subject: [PATCH 4/9] =?UTF-8?q?refactor=20:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[id]/_components/wine-detail/wine-detail-content.tsx      | 4 ----
 .../wines/[id]/_components/wine-review/wine-review-rating.tsx | 2 --
 2 files changed, 6 deletions(-)

diff --git a/src/app/wines/[id]/_components/wine-detail/wine-detail-content.tsx b/src/app/wines/[id]/_components/wine-detail/wine-detail-content.tsx
index 35287e74..9d9db2c8 100644
--- a/src/app/wines/[id]/_components/wine-detail/wine-detail-content.tsx
+++ b/src/app/wines/[id]/_components/wine-detail/wine-detail-content.tsx
@@ -40,12 +40,10 @@ const WineDetailContent = ({ wineId }: WineDetailContentProps) => {
 
   return (
     <main className="min-h-screen bg-white">
-      {/* 헤더 */}
       <section className="rounded-b-none bg-[url('/images/wines/bg-recommended.png')] bg-cover bg-repeat pt-[60px] tablet:rounded-b-none tablet:pt-[70px] pc:rounded-b-[88px] pc:pt-[70px]">
         <WineHeader wine={wine} />
       </section>
 
-      {/* 맛/향 섹션 */}
       <section className="mb-0 mt-12 bg-white tablet:mb-0 tablet:mt-16 pc:mb-12 pc:mt-16">
         <div className="container">
           <div className="flex flex-col gap-12 tablet:gap-20 pc:flex-row pc:gap-32">
@@ -66,12 +64,10 @@ const WineDetailContent = ({ wineId }: WineDetailContentProps) => {
         </div>
       </section>
 
-      {/* 구분선 */}
       <div className="container">
         <hr className="mt-[-5px] border-t border-gray-300 tablet:mt-0 pc:mt-0" />
       </div>
 
-      {/* 리뷰 섹션 */}
       <section className="bg-white pb-12 pt-14 tablet:pt-14 pc:pt-14">
         <div className="container">
           <ReviewSection
diff --git a/src/app/wines/[id]/_components/wine-review/wine-review-rating.tsx b/src/app/wines/[id]/_components/wine-review/wine-review-rating.tsx
index 2356b950..64e9e08a 100644
--- a/src/app/wines/[id]/_components/wine-review/wine-review-rating.tsx
+++ b/src/app/wines/[id]/_components/wine-review/wine-review-rating.tsx
@@ -13,7 +13,6 @@ interface WineReviewRatingProps {
 const WineReviewRating = ({ createdAt, user }: WineReviewRatingProps) => {
   return (
     <div className="flex items-center gap-3">
-      {/* 프로필 이미지 */}
       <div className="h-12 w-12 flex-shrink-0 overflow-hidden rounded-full">
         {isValidImageSrc(user.image) ? (
           <Image
@@ -33,7 +32,6 @@ const WineReviewRating = ({ createdAt, user }: WineReviewRatingProps) => {
         )}
       </div>
 
-      {/* 닉네임 + 시간 */}
       <div className="flex flex-col">
         <span className="text-body-lg font-bold text-gray-900">
           {user.nickname}

From 2d065d2b10b425a08a49d363e2107558b3a884b9 Mon Sep 17 00:00:00 2001
From: junye0l <junyeolkim00@gmail.com>
Date: Fri, 24 Oct 2025 23:48:55 +0900
Subject: [PATCH 5/9] =?UTF-8?q?refactor=20:=20=ED=94=BC=EB=93=9C=EB=B0=B1?=
 =?UTF-8?q?=20=EC=9D=BC=EB=B6=80=20=EB=B0=98=EC=98=81=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wine-review-item/review-item-footer.tsx   |  6 ++--
 .../wine-review-item/review-item-header.tsx   | 30 ++++++++-----------
 2 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-footer.tsx b/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-footer.tsx
index e114e3aa..f0d880e2 100644
--- a/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-footer.tsx
+++ b/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-footer.tsx
@@ -38,10 +38,8 @@ const ReviewItemFooter = ({ review }: ReviewItemFooterProps) => {
         aria-label="맛 평가"
         aria-hidden={!isTasteOpen}
       >
-        <div className="overflow-hidden">
-          <div className="pb-2">
-            <WineTaste type="review" tastes={tastes} />
-          </div>
+        <div className="overflow-hidden pb-2">
+          <WineTaste type="review" tastes={tastes} />
         </div>
       </div>
 
diff --git a/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-header.tsx b/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-header.tsx
index 27e3c215..f889f4ab 100644
--- a/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-header.tsx
+++ b/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-header.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useMemo, useRef, useState } from "react";
+import { memo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import {
   Rating,
@@ -48,7 +48,7 @@ const OptionMenu = memo(function OptionMenu({
         icon="HamburgerIcon"
         aria-label="옵션 메뉴"
         className="!h-6 !w-6 border-none hover:bg-inherit active:bg-inherit"
-        iconClassName="mobile:ic-sm tablet:ic-sm pc:ic-md"
+        iconClassName="ic-sm pc:ic-md"
         onClick={onToggle}
       />
       {isOpen && (
@@ -73,11 +73,10 @@ const ReviewItemHeader = ({
   const router = useRouter();
   const { reviewDeleteSuccess, reviewDeleteError } = useToast();
 
-  const derivedIsLiked = useMemo(() => {
-    if (typeof review.isLiked === "boolean") return review.isLiked;
-    if (!review.isLiked) return false;
-    return Object.keys(review.isLiked).length > 0;
-  }, [review.isLiked]);
+  const derivedIsLiked =
+    typeof review.isLiked === "boolean"
+      ? review.isLiked
+      : Boolean(review.isLiked && Object.keys(review.isLiked).length);
 
   const [liked, setLiked] = useState(derivedIsLiked);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -132,24 +131,21 @@ const ReviewItemHeader = ({
       <div
         className={cn("flex w-full flex-col gap-6", "tablet:gap-8", "pc:gap-6")}
       >
-        <div className="flex items-center justify-between">
-          <div role="group" aria-label={`별점 ${review.rating}점`}>
-            <Rating rating={review.rating} size="sm" />
-          </div>
+        <div role="group" aria-label={`별점 ${review.rating}점`}>
+          <Rating rating={review.rating} size="sm" />
         </div>
 
         <div className="flex items-center justify-between">
           <WineReviewRating createdAt={review.createdAt} user={review.user} />
-          <div className="flex items-center gap-2">
-            {!isMyReview && (
+          <div className="flex items-center">
+            {isMyReview ? (
               <LikeButton
                 isLike={liked}
                 disabled={likePending}
                 onClick={handleLikeClick}
                 aria-label={liked ? "좋아요 취소" : "좋아요"}
               />
-            )}
-            {isMyReview && (
+            ) : (
               <OptionMenu
                 isOpen={isMenuOpen}
                 onToggle={toggleMenu}
@@ -161,7 +157,7 @@ const ReviewItemHeader = ({
           </div>
         </div>
 
-        {review.aroma?.length ? (
+        {Boolean(review.aroma?.length) && (
           <nav aria-label="와인 향">
             <ul className="flex flex-wrap items-center gap-1">
               {review.aroma.map((aroma, index) => {
@@ -191,7 +187,7 @@ const ReviewItemHeader = ({
               })}
             </ul>
           </nav>
-        ) : null}
+        )}
       </div>
 
       <ConfirmModal

From 0c8dec8ec9bea2cd1ce57959ae89d7edb7990a1f Mon Sep 17 00:00:00 2001
From: junye0l <junyeolkim00@gmail.com>
Date: Fri, 24 Oct 2025 23:55:55 +0900
Subject: [PATCH 6/9] =?UTF-8?q?refactor=20:=20aroma=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wine-review-item/review-item-aroma.tsx    | 44 +++++++++++++++++++
 .../wine-review-item/review-item-header.tsx   | 40 ++---------------
 2 files changed, 48 insertions(+), 36 deletions(-)
 create mode 100644 src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-aroma.tsx

diff --git a/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-aroma.tsx b/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-aroma.tsx
new file mode 100644
index 00000000..721000e5
--- /dev/null
+++ b/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-aroma.tsx
@@ -0,0 +1,44 @@
+import { getAromaIconName } from "@/lib/utils";
+import { aromaMap } from "@/components/flavor/aroma-map";
+import type { Review } from "@/types/wine";
+import { Icon } from "@/components";
+
+const ReviewItemAroma = ({ review }: { review: Review }) => {
+  return (
+    <>
+      {Boolean(review.aroma?.length) && (
+        <nav aria-label="와인 향">
+          <ul className="flex flex-wrap items-center gap-1">
+            {review.aroma.map((aroma, index) => {
+              const aromaInfo = aromaMap[aroma];
+              if (!aromaInfo) return null;
+
+              return (
+                <li key={aroma} className="flex items-center">
+                  <div className="flex items-center gap-3 px-1">
+                    <Icon
+                      icon={getAromaIconName(aroma) as any}
+                      size="sm"
+                      className="text-gray-700"
+                      aria-hidden="true"
+                    />
+                    <span className="text-body-sm text-gray-500">
+                      {aromaInfo.label}
+                    </span>
+                  </div>
+                  {index < review.aroma.length - 1 && (
+                    <span className="text-gray-300" aria-hidden="true">
+                      •
+                    </span>
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+      )}
+    </>
+  );
+};
+
+export default ReviewItemAroma;
diff --git a/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-header.tsx b/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-header.tsx
index f889f4ab..4897b1d3 100644
--- a/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-header.tsx
+++ b/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-header.tsx
@@ -4,20 +4,19 @@ import { memo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import {
   Rating,
-  Icon,
   LikeButton,
   DropdownMenu,
   IconButton,
   ConfirmModal,
 } from "@/components";
-import { cn, getAromaIconName } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 import useToggle from "@/hooks/use-toggle";
 import useClickOutside from "@/hooks/use-click-outside";
 import useReviewLike from "@/hooks/api/reviews/use-review-like";
 import useReviewDelete from "@/hooks/api/reviews/use-review-delete";
 import { useToast } from "@/hooks/use-toast";
-import { aromaMap } from "@/components/flavor/aroma-map";
 import WineReviewRating from "../wine-review-rating";
+import ReviewItemAroma from "./review-item-aroma";
 import type { Review } from "@/types/wine";
 
 interface ReviewItemHeaderProps {
@@ -138,7 +137,7 @@ const ReviewItemHeader = ({
         <div className="flex items-center justify-between">
           <WineReviewRating createdAt={review.createdAt} user={review.user} />
           <div className="flex items-center">
-            {isMyReview ? (
+            {!isMyReview ? (
               <LikeButton
                 isLike={liked}
                 disabled={likePending}
@@ -156,38 +155,7 @@ const ReviewItemHeader = ({
             )}
           </div>
         </div>
-
-        {Boolean(review.aroma?.length) && (
-          <nav aria-label="와인 향">
-            <ul className="flex flex-wrap items-center gap-1">
-              {review.aroma.map((aroma, index) => {
-                const aromaInfo = aromaMap[aroma];
-                if (!aromaInfo) return null;
-
-                return (
-                  <li key={aroma} className="flex items-center">
-                    <div className="flex items-center gap-3 px-1">
-                      <Icon
-                        icon={getAromaIconName(aroma) as any}
-                        size="sm"
-                        className="text-gray-700"
-                        aria-hidden="true"
-                      />
-                      <span className="text-body-sm text-gray-500">
-                        {aromaInfo.label}
-                      </span>
-                    </div>
-                    {index < review.aroma.length - 1 && (
-                      <span className="text-gray-300" aria-hidden="true">
-                        •
-                      </span>
-                    )}
-                  </li>
-                );
-              })}
-            </ul>
-          </nav>
-        )}
+        <ReviewItemAroma review={review} />
       </div>
 
       <ConfirmModal

From 0185f4555cec3acfb2662d1aa19c7157485b9f34 Mon Sep 17 00:00:00 2001
From: junye0l <junyeolkim00@gmail.com>
Date: Fri, 24 Oct 2025 23:59:39 +0900
Subject: [PATCH 7/9] =?UTF-8?q?refactor=20:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20use=20client=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/wines/[id]/_components/wine-review/wine-review-item.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/wines/[id]/_components/wine-review/wine-review-item.tsx b/src/app/wines/[id]/_components/wine-review/wine-review-item.tsx
index c619f761..9aa42fbb 100644
--- a/src/app/wines/[id]/_components/wine-review/wine-review-item.tsx
+++ b/src/app/wines/[id]/_components/wine-review/wine-review-item.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { cn } from "@/lib/utils";
 import type { Review } from "@/types/wine";
 import ReviewItemHeader from "./wine-review-item/review-item-header";

From 52aa7b58f4196c447cf11fc01cf5f71bec9dac71 Mon Sep 17 00:00:00 2001
From: junye0l <junyeolkim00@gmail.com>
Date: Sat, 25 Oct 2025 02:52:31 +0900
Subject: [PATCH 8/9] =?UTF-8?q?refactor=20:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EC=A4=91=EC=B2=A9=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wine-review-item/review-item-aroma.tsx    | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-aroma.tsx b/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-aroma.tsx
index 721000e5..f5316aad 100644
--- a/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-aroma.tsx
+++ b/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-aroma.tsx
@@ -14,18 +14,16 @@ const ReviewItemAroma = ({ review }: { review: Review }) => {
               if (!aromaInfo) return null;
 
               return (
-                <li key={aroma} className="flex items-center">
-                  <div className="flex items-center gap-3 px-1">
-                    <Icon
-                      icon={getAromaIconName(aroma) as any}
-                      size="sm"
-                      className="text-gray-700"
-                      aria-hidden="true"
-                    />
-                    <span className="text-body-sm text-gray-500">
-                      {aromaInfo.label}
-                    </span>
-                  </div>
+                <li key={aroma} className="flex items-center gap-3 px-1">
+                  <Icon
+                    icon={getAromaIconName(aroma) as any}
+                    size="sm"
+                    className="text-gray-700"
+                    aria-hidden="true"
+                  />
+                  <span className="text-body-sm text-gray-500">
+                    {aromaInfo.label}
+                  </span>
                   {index < review.aroma.length - 1 && (
                     <span className="text-gray-300" aria-hidden="true">
                       •

From 4c7ce74bda3dd28691f50bded90f809fa516afb2 Mon Sep 17 00:00:00 2001
From: junye0l <junyeolkim00@gmail.com>
Date: Sat, 25 Oct 2025 03:14:54 +0900
Subject: [PATCH 9/9] =?UTF-8?q?refactor=20:=20=EC=95=84=EB=A1=9C=EB=A7=88?=
 =?UTF-8?q?=20=EC=A1=B0=EA=B1=B4=EC=8B=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wine-review/wine-review-item/review-item-aroma.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-aroma.tsx b/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-aroma.tsx
index f5316aad..38270ffe 100644
--- a/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-aroma.tsx
+++ b/src/app/wines/[id]/_components/wine-review/wine-review-item/review-item-aroma.tsx
@@ -6,7 +6,7 @@ import { Icon } from "@/components";
 const ReviewItemAroma = ({ review }: { review: Review }) => {
   return (
     <>
-      {Boolean(review.aroma?.length) && (
+      {review.aroma?.length > 0 && (
         <nav aria-label="와인 향">
           <ul className="flex flex-wrap items-center gap-1">
             {review.aroma.map((aroma, index) => {