Refactor/wineid api

src/components/common/card/ReviewCard.tsx

@@ -33,7 +33,7 @@ export function ReviewCard({ children }: ReviewCardProps) {
 ReviewCard.UserHeader = function UserHeader({ userIcon, reviewId, children }: UserHeaderProps) {
   const username = useReviewCardStore((state) => state.allReviews[reviewId]?.user.nickname);
   const userImg = useReviewCardStore((state) => state.allReviews[reviewId]?.user.image);
-  const timeAgo = useReviewCardStore((state) => state.allReviews[reviewId]?.updatedAt);
+  const timeAgo = useReviewCardStore((state) => state.allReviews[reviewId]?.createdAt);
 
   return (
     <div className='flex justify-between items-start'>

src/components/wineDetail/WineRating.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { motion } from 'framer-motion';
+
 import { Progress } from '@/components/ui/progress';
 import useWineStore from '@/stores/wineStore';
 
@@ -18,8 +20,16 @@ function WineRating({ rating, reviewCount, ratings }: Props) {
   if (!nowWine) return;
   const { id, name } = nowWine;
 
+  const percentageArr = [...ratings].reverse().map((rating) => {
+    return (rating / reviewCount) * 100;
+  });
+
   return (
-    <div
+    <motion.div
+      initial={{ opacity: 0, y: 0 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, amount: 0 }}
+      transition={{ duration: 1.6, ease: 'easeOut' }}
       className='mb-10 md:mb-[60px] md:px-[63px] xl:px-0 w-full xl:max-w-[280px] mx-auto xl:mx-0 order-1 xl:order-2  
       flex flex-col md:flex-row md:gap-20 xl:gap-0 xl:flex-col xl:relative'
     >
@@ -40,7 +50,7 @@ function WineRating({ rating, reviewCount, ratings }: Props) {
             </div>
           </div>
           <div className='flex gap-2 flex-col w-full order-2 '>
-            {[...ratings].reverse().map((rating, i) => (
+            {percentageArr.map((rating, i) => (
               <div key={`${5 - i}points`} className='flex items-center justify-between'>
                 <span className='block w-8 text-gray-500 mr-4'>{5 - i}점</span>
                 <Progress className='h-[6px]' value={rating} />
@@ -49,7 +59,7 @@ function WineRating({ rating, reviewCount, ratings }: Props) {
           </div>
         </>
       )}
-    </div>
+    </motion.div>
   );
 }
 

src/pages/wines/[wineid].tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 
 import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query';
 import axios from 'axios';
+import { motion } from 'framer-motion';
 import { GetServerSideProps } from 'next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
@@ -64,27 +65,45 @@ export default function WineInfoById(props: WinePageProps) {
       </Head>
 
       <main className='mx-auto px-4 md:px-5 xl:px-0 max-w-[1140px]  min-w-[343px]'>
-        <ImageCard
-          imageSrc={data.image}
-          imageClassName={IMAGE_CLASS_NAME}
-          className={cn(
-            'mx-auto relative w-full h-[190px] md:h-[260px] rounded-[16px] mt-[29px] md:mt-[62px] mb-[40px] md:mb-[60px] border-0',
-            'bg-gradient-to-tr from-white from-50% to-primary/20 to-100%', //그래디언트 설정 추후 변경
-            'shadow-sm',
-          )}
+        <motion.div
+          initial={{ opacity: 0.3, x: 40 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true, amount: 0.3 }}
+          transition={{ duration: 0.8, ease: 'easeOut' }}
         >
-          <WineContent name={data.name} region={data.region} price={data.price} />
-        </ImageCard>
+          <ImageCard
+            imageSrc={data.image}
+            imageClassName={IMAGE_CLASS_NAME}
+            className={cn(
+              'mx-auto relative w-full h-[190px] md:h-[260px] rounded-[16px] mt-[29px] md:mt-[62px] mb-[40px] md:mb-[60px] border-0',
+              'bg-gradient-to-tr from-white from-50% to-primary/20 to-100%', //그래디언트 설정 추후 변경
+              'shadow-sm',
+            )}
+          >
+            <WineContent name={data.name} region={data.region} price={data.price} />
+          </ImageCard>
+        </motion.div>
+
         <div className='flex flex-col xl:flex-row max-w-[1140px] w-full mx-auto justify-between '>
           <div className='flex-col  order-2 xl:order-1 xl:max-w-[1140px] '>
-            <h2 className='sr-only xl:not-sr-only !mb-[22px] xl:custom-text-xl-bold'>리뷰 목록</h2>
-            <Reviews wine={data} reviews={data.reviews} reviewCount={data.reviewCount} />
+            <motion.div
+              initial={{ opacity: 0.3, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, amount: 0 }}
+              transition={{ duration: 0.8, ease: 'easeOut' }}
+            >
+              <h2 className='sr-only xl:not-sr-only !mb-[22px] xl:custom-text-xl-bold'>
+                리뷰 목록
+              </h2>
+              <Reviews wine={data} reviews={data.reviews} reviewCount={data.reviewCount} />
+            </motion.div>
           </div>
+
           <WineRating
             rating={data.avgRating}
             reviewCount={data.reviewCount}
             ratings={Object.values(data.avgRatings)}
-          ></WineRating>
+          />
         </div>
       </main>
     </>