Merge branch 'master' into feature-황은지

eunji-0623 · Jul 31, 2024 · 2ba01fb · 2ba01fb
2 parents beaca8a + 7d51890
commit 2ba01fb
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 20 deletions.
diff --git a/components/ActivityDetails/ActivityDetails.tsx b/components/ActivityDetails/ActivityDetails.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useQuery } from '@tanstack/react-query';
@@ -21,14 +21,16 @@ import {
 } from '@/pages/api/activities/apiactivities.types';
 import Spinner from '../Spinner/Spinner';
 import { userState } from '@/states/userState';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { ActivityDetailsPageMeta } from '../MetaData/MetaData';
 import useDeleteActivity from '@/hooks/myActivity/useDeleteActivity';
 import { usePopup } from '@/hooks/usePopup';
 import { darkModeState } from '@/states/themeState';
 import SendChat from '../Chat/SendChat';
 import { ShareButton } from '../ShareButton/ShareButton';
 import { loginState } from '@/states/loginState';
+import { ViewedActivitiesState } from '@/states/ViewedState';
+import { ViewedActivityProps } from '../ViewedActivities/ViewedActivities.type';
 
 export default function ActivityDetails({ id }: ActivityDetailsProps) {
   const router = useRouter();
@@ -37,11 +39,13 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
   const [currentPage, setCurrentPage] = useState<number>(
     router.query.page ? parseInt(router.query.page as string, 10) : 1
   );
+  const [ViewedInfo, setViewedInfo] = useRecoilState(ViewedActivitiesState);
   const itemsPerPage = 3;
   const { openPopup } = usePopup();
   const { deleteMyActivityMutation } = useDeleteActivity();
   const menuRef = useClickOutside<HTMLDivElement>(() => setIsOpen(false));
   const userData = useRecoilValue(userState);
+
   const {
     data: activityData,
     error: activityError,
@@ -51,6 +55,31 @@ 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];
+
+        // 10개를 초과할 경우 가장 오래된 항목 삭제
+        if (updatedViewedInfo.length > 10) {
+          updatedViewedInfo.pop();
+        }
+
+        return updatedViewedInfo;
+      });
+    },
+    [setViewedInfo]
+  );
+
   const {
     data: reviewData,
     error: reviewError,
@@ -61,6 +90,16 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
       getActivityReviews({ id, page: currentPage, size: itemsPerPage }),
   });
 
+  useEffect(() => {
+    if (activityData?.id !== undefined) {
+      addViewedActivity({
+        id: activityData.id,
+        bannerImage: activityData.bannerImageUrl || '',
+        title: activityData.title || '',
+      });
+    }
+  }, [activityData, addViewedActivity]);
+
   if (isLoadingActivity || isLoadingReviews) {
     return <Spinner />;
   }
@@ -216,7 +255,7 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
           />
         )}
         <div className="flex gap-4 m:block m:relative">
-          <div className="mb-20 ipad-pro:w-[725px] t:w-full m:w-full m:px-[24px]">
+          <div className="mb-20 ipad-pro:w-[725px] w-full m:px-[24px]">
             <div className="border-t-2 border-var-gray3 dark:border-var-dark4 border-solid pt-10 m:pt-6" />
             <div className="flex flex-col gap-4">
               <p className="text-nomad-black dark:text-var-gray2 font-bold text-xl">

diff --git a/components/ActivityDetails/Map/Map.tsx b/components/ActivityDetails/Map/Map.tsx
@@ -159,7 +159,7 @@ export default function Map({ address }: MapProps) {
       </div>
       <div
         id="map"
-        className="w-[800px] h-[500px] rounded-2xl ipad-pro:h-[400px] t:w-full t:h-[276px] m:w-full m:h-[450px]"
+        className="w-full h-[500px] rounded-2xl ipad-pro:h-[400px] t:h-[276px] m:h-[450px]"
       />
       <div className="flex gap-1 mt-2 items-center">
         <Image

diff --git a/components/Button/TopButton.tsx b/components/Button/TopButton.tsx
@@ -26,7 +26,7 @@ const TopButton = () => {
   return (
     <>
       {showButton && (
-        <div className="fixed right-[30px] bottom-[30px] z-30">
+        <div className="fixed right-[30px] m:right-[14px] bottom-[30px] z-30">
           <button
             onClick={scrollToTop}
             type="button"

diff --git a/components/ViewedActivities/ViewedActivities.tsx b/components/ViewedActivities/ViewedActivities.tsx
@@ -4,6 +4,8 @@ import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import ViewedActivity from './ViewedActivity';
 import useClickOutside from '@/hooks/useClickOutside';
+import { useRecoilValue } from 'recoil';
+import { ViewedActivitiesState } from '@/states/ViewedState';
 
 function ViewedActivities() {
   const [isOpen, setIsOpen] = useState(false);
@@ -12,6 +14,7 @@ function ViewedActivities() {
   const ViewedActivitiesElement = useClickOutside<HTMLDivElement>(() =>
     setIsOpen(false)
   );
+  const ViewedActivitiesVlue = useRecoilValue(ViewedActivitiesState);
 
   const openModal = () => {
     setAnimationClass('rotate-open');
@@ -26,7 +29,7 @@ function ViewedActivities() {
 
   return (
     <div ref={ViewedActivitiesElement}>
-      <div className="fixed right-[32px] bottom-[90px] z-30 w-[40px] h-[40px] bg-gray-200 flex items-center justify-center rounded-xl cursor-pointer hover:bg-gray-300">
+      <div className="fixed right-[32px] m:right-[14px] bottom-[90px] z-30 w-[40px] h-[40px] bg-gray-200 flex items-center justify-center rounded-xl cursor-pointer hover:bg-gray-300">
         {!isOpen ? (
           <Image
             src={RecordImg}
@@ -49,15 +52,26 @@ function ViewedActivities() {
       </div>
       {isOpen && (
         <div
-          className={`w-[180px] h-[300px] rounded-lg fixed right-[32px] bottom-[138px] z-30 bg-white border-solid border-4 border-gray-500 ${faded} flex flex-col items-center px-[10px] pt-[10px] gap-[10px] overflow-y-auto overflow-x-hidden pb-[10px] custom-scrollbar`}
+          className={`w-[180px] h-[300px] rounded-lg fixed right-[32px] m:right-[14px] bottom-[138px] z-30 bg-white border-solid border-4 border-gray-800 ${faded} flex flex-col items-center px-[10px] pt-[10px] gap-[10px] overflow-y-auto overflow-x-hidden pb-[10px] custom-scrollbar`}
         >
-          <ViewedActivity bannerImage="" title="" />
-          <ViewedActivity bannerImage="" title="" />
-          <ViewedActivity bannerImage="" title="" />
-          <ViewedActivity bannerImage="" title="" />
-          <ViewedActivity bannerImage="" title="" />
-          <ViewedActivity bannerImage="" title="" />
-          <ViewedActivity bannerImage="" title="" />
+          <div className="font-sans text-[14px] font-[600]">
+            최근 방문한 체험
+          </div>
+          <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>
+          )}
         </div>
       )}
     </div>

diff --git a/components/ViewedActivities/ViewedActivities.type.ts b/components/ViewedActivities/ViewedActivities.type.ts
@@ -1,4 +1,5 @@
 export interface ViewedActivityProps {
+  id: number;
   bannerImage: string;
   title: string;
 }
diff --git a/components/ViewedActivities/ViewedActivity.tsx b/components/ViewedActivities/ViewedActivity.tsx
@@ -1,19 +1,29 @@
 import Image from 'next/image';
 import TestImg from '@/public/image/TestImage.jpg';
 import { ViewedActivityProps } from './ViewedActivities.type';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+
+function ViewedActivity({ id, bannerImage, title }: ViewedActivityProps) {
+  const router = useRouter();
+  const linkToClick = () => {
+    router.push(`/activity-details/${id}`);
+  };
 
-function ViewedActivity({ bannerImage, title }: ViewedActivityProps) {
   return (
-    <div className="min-w-[140px] min-h-[80px] rounded bg-gray-300 flex items-center justify-between cursor-pointer block">
+    <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={TestImg}
+        src={bannerImage}
         alt="배너이미지"
-        width={40}
+        width={42}
         height={40}
-        className="ml-[10px]"
+        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">
-        [TEST] 체험 제목 체험 제목 체험 제목 체험 제목
+        {title}
       </div>
     </div>
   );

diff --git a/states/ViewedState.tsx b/states/ViewedState.tsx
@@ -0,0 +1,11 @@
+import { ViewedActivityProps } from '@/components/ViewedActivities/ViewedActivities.type';
+import { atom } from 'recoil';
+import { recoilPersist } from 'recoil-persist';
+
+const { persistAtom } = recoilPersist();
+
+export const ViewedActivitiesState = atom<ViewedActivityProps[]>({
+  key: 'ViewedActivitiesState',
+  default: [],
+  effects_UNSTABLE: [persistAtom],
+});