+
+ {userIcon}
-
- {/* 좋아요 & 메뉴 */}
-
- {likeSlot}
- {menuSlot}
+
+ {username}
+ {timeAgo}
- {/* 태그 & 별점 */}
-
-
- {tags.map((tag, idx) => (
-
- {tag}
-
- ))}
-
- {rating}
+ {/* 좋아요 & 메뉴 */}
+
{children}
+
+ );
+};
+
+ReviewCard.TagAndRating = function TagAndRating({ reviewId }: TagAndRatingProps) {
+ const tags = useReviewCardStore((state) => state.allReviews[reviewId]?.aroma ?? []);
+ const rating = useReviewCardStore((state) => state.allReviews[reviewId]?.rating);
+ return (
+
+
+ {tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+ {rating}
+
+
+ );
+};
- {/* 리뷰 텍스트 */}
- {reviewText &&
{reviewText}
}
+ReviewCard.ReviewBody = function ReviewBody({ reviewId, flavorSliderSlot }: ReviewBodyProps) {
+ const reviewText = useReviewCardStore((state) => state.allReviews[reviewId]?.content);
+ const isOpen = useReviewCardStore((state) => state.allReviews[reviewId]?.isOpen);
- {/* 슬라이더 */}
- {flavorSliderSlot &&
{flavorSliderSlot}
}
+ 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 (
+
+
+ {reviewText}
+
+
{flavorSliderSlot}
);
-}
+};
+
+ReviewCard.ToggleButton = function TogleButton({ reviewId }: ToggleButtonProps) {
+ const isOpen = useReviewCardStore((state) => state.allReviews[reviewId]?.isOpen);
+ const toggleReviewOpen = useReviewCardStore((state) => state.toggleReviewOpen);
+ return (
+
+ );
+};
diff --git a/src/components/common/card/ReviewCardTypes.ts b/src/components/common/card/ReviewCardTypes.ts
new file mode 100644
index 0000000..489fa29
--- /dev/null
+++ b/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,
+};
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
new file mode 100644
index 0000000..b1cdd8f
--- /dev/null
+++ b/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
,
+ React.ComponentPropsWithoutRef
+>(({ className, value, ...props }, ref) => (
+
+
+
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
diff --git a/src/components/wineDetail/AverageStar.tsx b/src/components/wineDetail/AverageStar.tsx
new file mode 100644
index 0000000..abbeabc
--- /dev/null
+++ b/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 (
+
+ {STARS.map((_, i) => (
+
= activateStar,
+ })}
+ >
+
+
+ ))}
+
+ );
+}
+
+export default AverageStar;
diff --git a/src/components/wineDetail/FlavorSliderList.tsx b/src/components/wineDetail/FlavorSliderList.tsx
new file mode 100644
index 0000000..2a76375
--- /dev/null
+++ b/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 (
+
+ {}} //onChange가 필수 프롭이라
+ labelLeft={'가벼워요'}
+ labelRight={'진해요'}
+ badgeLabel={'바디감'}
+ disabled
+ />
+ {}}
+ labelLeft={'부드러워요'}
+ labelRight={'떫어요'}
+ badgeLabel={'타닌'}
+ disabled
+ />
+ {}}
+ labelLeft={'드라이해요'}
+ labelRight={'달아요'}
+ badgeLabel={'당도'}
+ disabled
+ />
+ {}}
+ labelLeft={'안셔요'}
+ labelRight={'많이셔요'}
+ badgeLabel={'산미'}
+ disabled
+ />
+
+ );
+}
+
+export default FlavorSliderList;
diff --git a/src/components/wineDetail/Kebab.tsx b/src/components/wineDetail/Kebab.tsx
new file mode 100644
index 0000000..f158b14
--- /dev/null
+++ b/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 (
+
+
+
+ }
+ >
+ );
+}
+
+export default Kebab;
diff --git a/src/components/wineDetail/LikeButton.tsx b/src/components/wineDetail/LikeButton.tsx
new file mode 100644
index 0000000..ecdbe09
--- /dev/null
+++ b/src/components/wineDetail/LikeButton.tsx
@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+import FullLikeIcon from '@/assets/icons/fullLike.svg';
+import LikeIcon from '@/assets/icons/like.svg';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface Props {
+ isLike?: boolean;
+}
+
+function LikeButton({ isLike }: Props) {
+ const [isClicked, setIsClicked] = useState(isLike);
+
+ function handleToggle() {
+ setIsClicked(!isClicked);
+ //좋아요 api 요청 보내기
+ }
+
+ return (
+
+ );
+}
+
+export default LikeButton;
diff --git a/src/components/wineDetail/WineContent.tsx b/src/components/wineDetail/WineContent.tsx
new file mode 100644
index 0000000..827b5e3
--- /dev/null
+++ b/src/components/wineDetail/WineContent.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { Badge } from '@/components/ui/badge';
+
+interface Props {
+ name: string;
+ region: string;
+ price: number;
+}
+
+function WineContent({ name, region, price }: Props) {
+ return (
+
+
+ {name}
+
+
+ {region}
+
+
+ ₩{' ' + price.toLocaleString('ko-KR')}
+
+
+
+
+ {ratings.map((rating, i) => (
+
+ ))}
+
+
+
+
리뷰 목록
+
+ {testReviews.map((review) => (
+ -
+
+
+ ))}
+
+
+
+