From 4789c108a18e2c1d73769cf41afb14a583981a93 Mon Sep 17 00:00:00 2001
From: Park Sumin <fhsjdvs@gmail.com>
Date: Fri, 26 Jul 2024 21:19:16 +0900
Subject: [PATCH] =?UTF-8?q?Fix:=20=EB=A6=B0=ED=8A=B8=20=EC=98=A4=EB=A5=98?=
 =?UTF-8?q?=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActivityDetails/ActivityDetails.tsx       | 37 +++++++++++--------
 .../ViewedActivities/ViewedActivities.tsx     |  9 ++++-
 .../ViewedActivities/ViewedActivity.tsx       | 25 +++++++------
 3 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/components/ActivityDetails/ActivityDetails.tsx b/components/ActivityDetails/ActivityDetails.tsx
index 41fad9e..57089f9 100644
--- a/components/ActivityDetails/ActivityDetails.tsx
+++ b/components/ActivityDetails/ActivityDetails.tsx
@@ -53,23 +53,30 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
     queryFn: () => getActivityInfo({ id }),
   });
 
-  const addViewedActivity = useCallback((newActivity: ViewedActivityProps) => {
-    setViewedInfo(prevViewedInfo => {
-      // 중복되는 항목 찾기
-      const isDuplicate = prevViewedInfo.some(activity => activity.id === newActivity.id);
-      let updatedViewedInfo = prevViewedInfo.filter(activity => activity.id !== newActivity.id);
-      
-      // 새로운 항목 추가
-      updatedViewedInfo = [newActivity, ...updatedViewedInfo];
+  const addViewedActivity = useCallback(
+    (newActivity: ViewedActivityProps) => {
+      setViewedInfo((prevViewedInfo) => {
+        // 중복되는 항목 찾기
+        const isDuplicate = prevViewedInfo.some(
+          (activity) => activity.id === newActivity.id
+        );
+        let updatedViewedInfo = prevViewedInfo.filter(
+          (activity) => activity.id !== newActivity.id
+        );
 
-      // 10개를 초과할 경우 가장 오래된 항목 삭제
-      if (updatedViewedInfo.length > 10) {
-        updatedViewedInfo.pop();
-      }
+        // 새로운 항목 추가
+        updatedViewedInfo = [newActivity, ...updatedViewedInfo];
 
-      return updatedViewedInfo;
-    });
-  }, [setViewedInfo]);
+        // 10개를 초과할 경우 가장 오래된 항목 삭제
+        if (updatedViewedInfo.length > 10) {
+          updatedViewedInfo.pop();
+        }
+
+        return updatedViewedInfo;
+      });
+    },
+    [setViewedInfo]
+  );
 
   const {
     data: reviewData,
diff --git a/components/ViewedActivities/ViewedActivities.tsx b/components/ViewedActivities/ViewedActivities.tsx
index 61e701e..f962b77 100644
--- a/components/ViewedActivities/ViewedActivities.tsx
+++ b/components/ViewedActivities/ViewedActivities.tsx
@@ -57,16 +57,21 @@ function ViewedActivities() {
           <div className="font-sans text-[14px] font-[600]">
             최근 방문한 체험
           </div>
-          <div className='flex flex-col gap-[10px]'>
+          <div className="flex flex-col gap-[10px]">
             {ViewedActivitiesVlue.map((activity) => (
               <ViewedActivity
+                key={activity.id}
                 id={activity.id}
                 bannerImage={activity.bannerImage}
                 title={activity.title}
               />
             ))}
           </div>
-          {(ViewedActivitiesVlue.length === 10) && <div className='font-sans text-[10px] font-[600]'>*최근 10개 정보까지 볼 수 있습니다.</div>}
+          {ViewedActivitiesVlue.length === 10 && (
+            <div className="font-sans text-[10px] font-[600]">
+              *최근 10개 정보까지 볼 수 있습니다.
+            </div>
+          )}
         </div>
       )}
     </div>
diff --git a/components/ViewedActivities/ViewedActivity.tsx b/components/ViewedActivities/ViewedActivity.tsx
index ea76d0f..4513a98 100644
--- a/components/ViewedActivities/ViewedActivity.tsx
+++ b/components/ViewedActivities/ViewedActivity.tsx
@@ -11,18 +11,21 @@ function ViewedActivity({ id, bannerImage, title }: ViewedActivityProps) {
   };
 
   return (
-      <div className="min-w-[140px] min-h-[80px] rounded bg-gray-200 flex items-center justify-between cursor-pointer block hover:bg-gray-300" onClick={linkToClick}>
-        <Image
-          src={bannerImage}
-          alt="배너이미지"
-          width={42}
-          height={40}
-          className="ml-[10px] min-w-[42px] min-h-[40px] max-w-[42px] max-h-[40px]"
-        />
-        <div className="mr-[10px] font-sans text-[12px] font-[700] w-[70px] h-[38px] line-clamp-2 overflow-hidden">
-          {title}
-        </div>
+    <div
+      className="min-w-[140px] min-h-[80px] rounded bg-gray-200 flex items-center justify-between cursor-pointer block hover:bg-gray-300"
+      onClick={linkToClick}
+    >
+      <Image
+        src={bannerImage}
+        alt="배너이미지"
+        width={42}
+        height={40}
+        className="ml-[10px] min-w-[42px] min-h-[40px] max-w-[42px] max-h-[40px]"
+      />
+      <div className="mr-[10px] font-sans text-[12px] font-[700] w-[70px] h-[38px] line-clamp-2 overflow-hidden">
+        {title}
       </div>
+    </div>
   );
 }