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",

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'> {
@@ -57,7 +56,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,7 +1,17 @@
 import React from 'react';
 
+import ShowMoreBtn from '@/assets/icons/showMoreBtn.svg';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import useClickToggle from '@/hooks/useClickToggle';
 import { cn } from '@/lib/utils';
 
+/*
+  여기 저 혼자만 사용하는 것 같아서 
+  제가 임의로 간격이나 이런 수치들 조금 건드렸습니다. 
+  혹시 다른 분들도 쓰게 된다면 말씀해주세요
+*/
+
 interface ReviewCardProps {
   userIcon: React.ReactNode; // 유저 아이콘
   username: string; // 유저 이름
@@ -27,17 +37,28 @@ export function ReviewCard({
   flavorSliderSlot,
   className,
 }: ReviewCardProps) {
+  const { isOpen, onToggle } = useClickToggle();
+  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,
+  });
+
   return (
     <div
-      className={cn('w-full rounded-xl bg-white p-4 shadow-sm border border-gray-300', className)}
+      className={cn(
+        'w-full 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',
+        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 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 flex-col'>
-            <span className='text-sm font-medium text-gray-900'>{username}</span>
-            <span className='text-xs text-gray-500'>{timeAgo}</span>
+            <span className='custom-text-lg-semibold text-gray-900'>{username}</span>
+            <span className='custom-text-md-regular  text-gray-500'>{timeAgo}</span>
           </div>
         </div>
 
@@ -51,20 +72,49 @@ export function ReviewCard({
       {/* 태그 & 별점 */}
       <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'>
+          {tags.map((tag) => (
+            <Badge
+              key={tag + username}
+              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}
-            </span>
+            </Badge>
           ))}
         </div>
-        {rating}
+        <Badge variant='star'>{rating}</Badge>
       </div>
 
       {/* 리뷰 텍스트 */}
-      {reviewText && <p className='mt-3 text-sm text-gray-800 leading-relaxed'>{reviewText}</p>}
+      {reviewText && (
+        <p
+          className={cn(
+            'mt-9 text-[14px] md:text-[16px] leading-6 md:leading-[26px] text-gray-800',
+            cardTransition,
+          )}
+        >
+          {reviewText}
+        </p>
+      )}
 
       {/* 슬라이더 */}
-      {flavorSliderSlot && <div className='mt-4'>{flavorSliderSlot}</div>}
+      {flavorSliderSlot && (
+        <div className={cn('mt-4 md:mt-6 xl:mt-5', cardTransition)}>{flavorSliderSlot}</div>
+      )}
+      <Button
+        size={null} //버튼 디폴트 덮어씌우기
+        width={null}
+        variant='onlyCancel'
+        onClick={onToggle}
+        className={cn(
+          'border-0 mx-auto  [&_svg]:w-[30px] [&_svg]:h-[30px] block transition-all duration-500 ease-in-out mt-[-30px]',
+          {
+            'scale-y-[-1] mt-0': isOpen,
+          },
+        )}
+      >
+        <ShowMoreBtn />
+      </Button>
     </div>
   );
 }

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 };

src/components/wineDetail/AverageStar.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import clsx from 'clsx';
+
+import Star from '@/assets/icons/star.svg';
+
+interface Props {
+  rating: number;
+}
+
+const STARS = ['1st', '2nd', '3rd', '4th', '5th'];
+
+function AverageStar({ rating }: Props) {
+  const activateStar = Math.floor(rating);
+
+  return (
+    <div className='h-4 md:h-auto w-28'>
+      {STARS.map((_, i) => (
+        <li
+          key={`star${i}`}
+          className={clsx({
+            'size-4 inline-block mr-1': true,
+            'text-primary': i < activateStar,
+            'text-gray-300': i >= activateStar,
+          })}
+        >
+          <Star />
+        </li>
+      ))}
+    </div>
+  );
+}
+
+export default AverageStar;

src/components/wineDetail/FlavorSliderList.tsx

@@ -0,0 +1,54 @@
+import FlavorSlider from '@/components/common/slider/FlavorSlider';
+
+interface Props {
+  lightBold: number;
+  smoothTannic: number;
+  drySweet: number;
+  softAcidic: number;
+}
+
+function FlavorSliderList({
+  lightBold = 0,
+  smoothTannic = 0,
+  drySweet = 0,
+  softAcidic = 0,
+}: Props) {
+  return (
+    <div className='flex gap-[18px] flex-col mb-4 md:mb-6 xl:mb-[6.5px]'>
+      <FlavorSlider
+        value={lightBold}
+        onChange={() => {}} //onChange가 필수 프롭이라
+        labelLeft={'가벼워요'}
+        labelRight={'진해요'}
+        badgeLabel={'바디감'}
+        disabled
+      />
+      <FlavorSlider
+        value={smoothTannic}
+        onChange={() => {}}
+        labelLeft={'부드러워요'}
+        labelRight={'떫어요'}
+        badgeLabel={'타닌'}
+        disabled
+      />
+      <FlavorSlider
+        value={drySweet}
+        onChange={() => {}}
+        labelLeft={'드라이해요'}
+        labelRight={'달아요'}
+        badgeLabel={'당도'}
+        disabled
+      />
+      <FlavorSlider
+        value={softAcidic}
+        onChange={() => {}}
+        labelLeft={'안셔요'}
+        labelRight={'많이셔요'}
+        badgeLabel={'산미'}
+        disabled
+      />
+    </div>
+  );
+}
+
+export default FlavorSliderList;

src/components/wineDetail/Kebab.tsx

@@ -0,0 +1,33 @@
+import KebabIcon from '@/assets/icons/kebab.svg';
+import { Button } from '@/components/ui/button';
+
+import MenuDropdown from '../common/dropdown/MenuDropdown';
+
+function Kebab() {
+  //유진님이 만든 거랑 겹치는 거 같은데 나중에 합쳐지면 그걸로 수정해두겠습니다.
+  function onSelect(value: string) {
+    //-> 요거 혹시 저번에 멘토님께서 제네릭 관련 피드백 해주신 거 반영되어 있을까요???
+    if (value === 'update') alert('수정하기 모달 호출');
+    if (value === 'delete') alert('정말 삭제하겠습니다 alert 호출');
+  }
+
+  return (
+    <MenuDropdown
+      options={[
+        { label: '수정하기', value: 'update' },
+        { label: '삭제하기', value: 'delete' },
+      ]}
+      onSelect={onSelect}
+      trigger={
+        <Button
+          variant='onlyCancel'
+          className='border-0 w-8 h-8 md:w-9.5 md:h-9.5 [&_svg]:w-8 [&_svg]:h-8 hover:text-primary'
+        >
+          <KebabIcon />
+        </Button>
+      }
+    ></MenuDropdown>
+  );
+}
+
+export default Kebab;