Feature/wineid

package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-radio-group": "^1.3.7",
     "@radix-ui/react-slider": "^1.3.5",
     "@radix-ui/react-slot": "^1.2.3",
@@ -33,6 +34,7 @@
     "react-hook-form": "^7.59.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
+    "use-sync-external-store": "^1.5.0",
     "zod": "^4.0.5",
     "zustand": "^5.0.5"
   },

src/components/common/Gnb.tsx

@@ -11,8 +11,8 @@ import UserDefaultImg from './UserDefaultImg';
 function Gnb() {
   return (
     //inset-x-0 -> x축:left,right둘 다 0
-    <header className='fixed top-0 inset-x-0 mx-auto px-[16px] md:px-[20px] xl:px-0 max-w-[1140px]  min-w-[343px]'>
-      <nav className=' z-50 flex justify-between items-center bg-black  w-full h-[50px] md:h-[70px] rounded-[12px] md:rounded-[16px] mt-[16px] md:mt-[24px] px-[20px] md:px-[60px]'>
+    <header className='z-50 fixed top-0 inset-x-0 mx-auto px-[16px] md:px-[20px] xl:px-0 max-w-[1140px]  min-w-[343px]'>
+      <nav className='flex justify-between items-center bg-black  w-full h-[50px] md:h-[70px] rounded-[12px] md:rounded-[16px] mt-[16px] md:mt-[24px] px-[20px] md:px-[60px]'>
         <Logo />
         <AuthMenu />
       </nav>

src/components/common/Input.tsx

@@ -1,8 +1,7 @@
 // 샤드cn은 아닌데 조합해서 쓸 것 같아서 components/ui에 넣어뒀습니다.
 import React, { forwardRef, InputHTMLAttributes } from 'react';
 
-// import { FieldValues, UseFormReturn } from 'react-hook-form';
-import SearchIcon from '@/assets/search.svg';
+import SearchIcon from '@/assets/icons/search.svg';
 import { cn } from '@/lib/utils';
 
 interface Props extends React.ComponentProps<'input'> {
@@ -63,7 +62,7 @@ Input.displayName = 'Input';
 
 //md 768이상  xl 1280이상
 const variantStyles = {
-  base: ' rounded-[16px] bg-white border border-gray-300 outline-none active:border-gray-500 focus:border-gray-500 font-sans',
+  base: 'rounded-[16px] bg-white border border-gray-300 outline-none active:border-gray-500 focus:border-gray-500 font-sans',
   default: 'px-[20px] py-[11px] w-[303px] md:w-[400px]',
   search: 'w-[210px] py-[7px] px-[45px] rounded-[50px] md:w-[400px]',
   name: 'px-[20px] py-[11px]  w-full',

src/components/common/Logo.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Link from 'next/link';
 
-import LogoIcon from '@/assets/logo.svg';
+import LogoIcon from '@/assets/icons/logo.svg';
 import { cn } from '@/lib/utils';
 
 interface Props {

src/components/common/UserDefaultImg.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import DefaultImg from '@/assets/userDefaultImg.svg';
+import DefaultImg from '@/assets/icons/userDefaultImg.svg';
 import { cn } from '@/lib/utils';
 
 interface Props {
@@ -9,7 +9,7 @@ interface Props {
 
 function UserDefaultImg({ className }: Props) {
   return (
-    <div className={cn('text-white w-[20px] md:w-[45px] h-[20px] md:h-[45px]', className)}>
+    <div className={cn('text-gray-100 w-[20px] md:w-[45px] h-[20px] md:h-[45px]', className)}>
       <DefaultImg />
     </div>
   );

src/components/common/card/ReviewCard.tsx

@@ -1,70 +1,114 @@
-import React from 'react';
-
+import ShowMoreBtn from '@/assets/icons/showMoreBtn.svg';
+import Star from '@/assets/icons/star.svg';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
+import useReviewCardStore from '@/stores/reviewCardStore';
+
+import {
+  ReviewCardProps,
+  UserHeaderProps,
+  TagAndRatingProps,
+  ReviewBodyProps,
+  ToggleButtonProps,
+} from './ReviewCardTypes';
 
-interface ReviewCardProps {
-  userIcon: React.ReactNode; // 유저 아이콘
-  username: string; // 유저 이름
-  timeAgo: string; // 작성 시간
-  tags: string[]; // 태그 목록
-  rating: React.ReactNode; // 별점 영역 slot
-  likeSlot: React.ReactNode; // 좋아요 버튼 slot
-  menuSlot: React.ReactNode; // 메뉴 버튼 slot
-  reviewText?: string; // 리뷰 목록
-  flavorSliderSlot?: React.ReactNode; // 슬라이더
-  className?: string; // 컨테이너 클래스
+/*
+  여기 저 혼자만 사용하는 것 같아서 
+  제가 임의로 건드렸습니다. 
+  혹시 다른 분들도 쓰게 된다면 말씀해주세요
+*/
+export function ReviewCard({ children }: ReviewCardProps) {
+  return (
+    <div className='rounded-xl bg-white p-4 md:p-8 xl:p-4 xl:px-6 shadow-sm border border-gray-300 md:pb-6 xl:pb-5 w-full xl:w-[800px]'>
+      {children}
+    </div>
+  );
 }
 
-export function ReviewCard({
-  userIcon,
-  username,
-  timeAgo,
-  tags,
-  rating,
-  likeSlot,
-  menuSlot,
-  reviewText,
-  flavorSliderSlot,
-  className,
-}: ReviewCardProps) {
+ReviewCard.UserHeader = function UserHeader({ userIcon, reviewId, children }: UserHeaderProps) {
+  const username = useReviewCardStore((state) => state.allReviews[reviewId]?.user.name);
+  const timeAgo = useReviewCardStore((state) => state.allReviews[reviewId]?.updatedAt);
+
   return (
-    <div
-      className={cn('w-full rounded-xl bg-white p-4 shadow-sm border border-gray-300', className)}
-    >
-      {/* 상단: 유저 정보 & 우측 slot */}
-      <div className='flex justify-between items-start'>
-        <div className='flex items-center gap-3'>
-          <div className='w-8 h-8 rounded-full bg-gray-200 overflow-hidden'>{userIcon}</div>
-          <div className='flex flex-col'>
-            <span className='text-sm font-medium text-gray-900'>{username}</span>
-            <span className='text-xs text-gray-500'>{timeAgo}</span>
-          </div>
+    <div className='flex justify-between items-start'>
+      <div className='flex items-center gap-4'>
+        <div className='w-10 h-10 md:w-16 md:h-16 rounded-full bg-gray-200 overflow-hidden'>
+          {userIcon}
         </div>
-
-        {/* 좋아요 & 메뉴 */}
-        <div className='flex items-center gap-2'>
-          {likeSlot}
-          {menuSlot}
+        <div className='flex flex-col'>
+          <span className='custom-text-lg-semibold text-gray-900'>{username}</span>
+          <span className='custom-text-md-regular  text-gray-500'>{timeAgo}</span>
         </div>
       </div>
 
-      {/* 태그 & 별점 */}
-      <div className='mt-3 flex justify-between items-center'>
-        <div className='flex flex-wrap gap-2'>
-          {tags.map((tag, idx) => (
-            <span key={idx} className='rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-700'>
-              {tag}
-            </span>
-          ))}
-        </div>
-        {rating}
+      {/* 좋아요 & 메뉴 */}
+      <div className='flex items-center gap-2'>{children}</div>
+    </div>
+  );
+};
+
+ReviewCard.TagAndRating = function TagAndRating({ reviewId }: TagAndRatingProps) {
+  const tags = useReviewCardStore((state) => state.allReviews[reviewId]?.aroma ?? []);
+  const rating = useReviewCardStore((state) => state.allReviews[reviewId]?.rating);
+  return (
+    <div className='mt-3 flex justify-between items-center'>
+      <div className='flex flex-wrap gap-2'>
+        {tags.map((tag) => (
+          <Badge
+            key={tag}
+            className='mt-4 rounded-full bg-white border-gray-300 px-[10px] py-[6px] md:px-[15px] md:py-2 custom-text-lg-regular text-gray-700'
+            variant='flavor'
+          >
+            {tag}
+          </Badge>
+        ))}
       </div>
+      <Badge variant='star' className='inline-flex gap-1 items-center'>
+        <Star className='size-3 md:size-4 md:mt-[-2px]' /> {rating}
+      </Badge>
+    </div>
+  );
+};
 
-      {/* 리뷰 텍스트 */}
-      {reviewText && <p className='mt-3 text-sm text-gray-800 leading-relaxed'>{reviewText}</p>}
+ReviewCard.ReviewBody = function ReviewBody({ reviewId, flavorSliderSlot }: ReviewBodyProps) {
+  const reviewText = useReviewCardStore((state) => state.allReviews[reviewId]?.content);
+  const isOpen = useReviewCardStore((state) => state.allReviews[reviewId]?.isOpen);
 
-      {/* 슬라이더 */}
-      {flavorSliderSlot && <div className='mt-4'>{flavorSliderSlot}</div>}
+  const cardTransition = cn('overflow-hidden transition-all duration-500 ease-in-out', {
+    'opacity-100 translate-y-0 max-h-[1000px]': isOpen,
+    'opacity-0 -translate-y-4 max-h-0': !isOpen,
+  });
+
+  if (!reviewText && !flavorSliderSlot) null;
+
+  return (
+    <div className={cardTransition}>
+      <p className='mt-9 text-[14px] md:text-[16px] leading-6 md:leading-[26px] text-gray-800'>
+        {reviewText}
+      </p>
+      <div className='mt-4 md:mt-6 xl:mt-5'>{flavorSliderSlot}</div>
     </div>
   );
-}
+};
+
+ReviewCard.ToggleButton = function TogleButton({ reviewId }: ToggleButtonProps) {
+  const isOpen = useReviewCardStore((state) => state.allReviews[reviewId]?.isOpen);
+  const toggleReviewOpen = useReviewCardStore((state) => state.toggleReviewOpen);
+  return (
+    <Button
+      size={null} //버튼 디폴트 덮어씌우기
+      width={null}
+      variant='onlyCancel'
+      onClick={() => toggleReviewOpen(reviewId)}
+      className={cn(
+        'border-0 mx-auto [&_svg]:w-[30px] [&_svg]:h-[30px] block transition-all duration-500 ease-in-out',
+        {
+          'scale-y-[-1] mt-0': isOpen,
+        },
+      )}
+    >
+      <ShowMoreBtn />
+    </Button>
+  );
+};

src/components/common/card/ReviewCardTypes.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+
+interface ReviewCardProps {
+  children: ReactNode;
+}
+
+interface UserHeaderProps {
+  userIcon: ReactNode;
+  reviewId: string;
+  children: ReactNode;
+}
+
+interface TagAndRatingProps {
+  reviewId: string;
+}
+
+interface ReviewBodyProps {
+  reviewId: string;
+  flavorSliderSlot: ReactNode;
+}
+
+interface ToggleButtonProps {
+  reviewId: string;
+}
+
+export type {
+  ReviewCardProps,
+  UserHeaderProps,
+  TagAndRatingProps,
+  ReviewBodyProps,
+  ToggleButtonProps,
+};

src/components/ui/progress.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+import { cn } from '@/lib/utils';
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className='h-full w-full flex-1 bg-primary transition-all'
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };