장소 추가 시 해당 Day 탭 유지

src/components/Plan/PlanSectionTop.tsx

@@ -13,8 +13,8 @@ import {
 } from '@api/socket';
 import { useEffect } from 'react';
 import { useRecoilState } from 'recoil';
-import { dayState, dateState } from '@recoil/plan';
-import { calculateDayAndDate } from '@utils/utils';
+import { dayState, dateState, isFirstLoadState } from '@recoil/plan';
+import { calculateDayAndDate, resetVisitDateAndTab } from '@utils/utils';
 import { useGetTrips } from '@hooks/useGetTrips';
 import { visitDateState } from '@recoil/socket';
 import { useState } from 'react';
@@ -39,6 +39,8 @@ const PlanSectionTop = () => {
     tripBudget,
   } = useContext(socketContext);
   const [, setVisitDate] = useRecoilState(visitDateState);
+  const [isFirstLoad, setIsFirstLoad] = useRecoilState(isFirstLoadState);
+
   const { startDate, endDate } = useGetTrips();
   const [isEnter, setIsEnter] = useState(false);
 
@@ -52,12 +54,13 @@ const PlanSectionTop = () => {
   }
 
   useEffect(() => {
-    if (startDate) {
+    if (isFirstLoad && startDate) {
       setVisitDate({ visitDate: startDate });
+      setIsFirstLoad(false);
     }
     setDay(DayArr);
     setDate(DateArr);
-  }, [startDate, endDate]);
+  }, [startDate, endDate, isFirstLoad]);
 
   useEffect(() => {
     callBackPub(() => pubEnterMember(tripId));
@@ -93,6 +96,7 @@ const PlanSectionTop = () => {
         showBack={true}
         backHandler={() => {
           navigate(-1);
+          resetVisitDateAndTab();
         }}
         showShare={true}
         shareHandler={() => {

src/components/Trip/PlanTripButton.tsx

@@ -1,6 +1,7 @@
 import { PlanColorIcon, RightIcon } from '@components/common/icons/Icons';
 import { useNavigate } from 'react-router-dom';
 import { getMember } from '@api/member';
+import { resetVisitDateAndTab } from '@utils/utils';
 
 const PlanTripButton = () => {
   const navigate = useNavigate();
@@ -16,6 +17,8 @@ const PlanTripButton = () => {
     }
   };
 
+  resetVisitDateAndTab();
+
   return (
     <button
       onClick={handleButtonClick}

src/components/Trip/TripPreference.tsx

@@ -173,7 +173,6 @@ const TripPreference: React.FC = () => {
 
   useEffect(() => {
     if (tripPreference) {
-      console.log('tripPreference', tripPreference);
       setA([
         tripPreference?.data?.data?.planningCount,
         tripPreference?.data?.data?.planningTotalCount,

src/components/addToList/addToOurPlace/AddtoListBtn.tsx

@@ -1,4 +1,4 @@
-import { useRecoilValue, useRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 import { selectedItemsState } from '@recoil/listItem';
 import { ButtonPrimary } from '@components/common/button/Button';
 import { postTripsLike } from '@api/trips';
@@ -7,6 +7,8 @@ import { pubAddTripItem } from '@api/socket';
 import { useContext } from 'react';
 import { socketContext } from '@hooks/useSocket';
 import { visitDateState } from '@recoil/socket';
+import { calculateDayAndDate } from '@utils/utils';
+import { tapState } from '@recoil/plan';
 
 const AddToListButton = ({
   apiType,
@@ -16,13 +18,26 @@ const AddToListButton = ({
   const { id: tripId } = useParams();
   const [selectedTourItemIds, setSelectedTourItemIds] =
     useRecoilState(selectedItemsState);
-  const visitDate = useRecoilValue(visitDateState);
+  const [visitDate, setVisitDate] = useRecoilState(visitDateState);
   const { callBackPub } = useContext(socketContext);
   const navigate = useNavigate();
+  const { tripInfo } = useContext(socketContext);
+  const startDate = tripInfo?.data?.startDate;
+  const endDate = tripInfo?.data?.endDate;
+  const [, setTapState] = useRecoilState(tapState);
 
   const handleAddClick = async () => {
     if (tripId) {
       try {
+        // calculateDayAndDate 함수를 호출하여 DateArr 얻기
+        const { DateArr } = calculateDayAndDate(startDate ?? '', endDate ?? '');
+
+        // visitDate와 DateArr 비교하여 인덱스 찾기
+        const dayIndex = DateArr.findIndex(
+          (date) => date === visitDate?.visitDate,
+        );
+        const selectedDay = `${dayIndex}`;
+
         if (apiType === 'postTripsLike') {
           await postTripsLike(tripId, selectedTourItemIds);
           navigate(`/trip/${tripId}`);
@@ -36,7 +51,10 @@ const AddToListButton = ({
             newTripItems,
           };
 
+          setVisitDate(visitDate);
+          setTapState(selectedDay);
           callBackPub(() => pubAddTripItem(pubAddTripItemData, tripId));
+
           setTimeout(() => {
             setSelectedTourItemIds([]);
             navigate(`/trip/${tripId}/plan`);

src/components/common/icons/Icons.tsx

@@ -314,8 +314,8 @@ export const LeftIcon = () => {
       viewBox="0 0 9 16"
       fill="none">
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M8.24116 1.13262C8.55699 1.41694 8.58027 1.90096 8.29315 2.21371L2.58306 8.43359L8.29315 14.6535C8.58026 14.9662 8.55699 15.4502 8.24116 15.7346C7.92534 16.0189 7.43656 15.9958 7.14944 15.6831L0.49414 8.43359L7.14944 1.1841C7.43656 0.871356 7.92534 0.848308 8.24116 1.13262Z"
         fill="#1E1E1E"
       />
@@ -695,14 +695,14 @@ export const SearchIcon: React.FC<IconProps> = ({
       height={size}
       fill={fill}>
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M8.00156 2.27344C4.88115 2.27344 2.35156 4.80303 2.35156 7.92344C2.35156 11.0438 4.88115 13.5734 8.00156 13.5734C11.122 13.5734 13.6516 11.0438 13.6516 7.92344C13.6516 4.80303 11.122 2.27344 8.00156 2.27344ZM0.851562 7.92344C0.851562 3.9746 4.05273 0.773438 8.00156 0.773438C11.9504 0.773438 15.1516 3.9746 15.1516 7.92344C15.1516 11.8723 11.9504 15.0734 8.00156 15.0734C4.05273 15.0734 0.851562 11.8723 0.851562 7.92344Z"
         fill="#1E1E1E"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M11.872 12.1596C12.1649 11.8667 12.6398 11.8667 12.9327 12.1596L16.9327 16.1597C17.2256 16.4526 17.2256 16.9274 16.9327 17.2203C16.6398 17.5132 16.1649 17.5132 15.872 17.2203L11.872 13.2203C11.5791 12.9274 11.5791 12.4525 11.872 12.1596Z"
         fill="#1E1E1E"
       />

src/components/common/tab/Tab.tsx

@@ -1,20 +1,28 @@
 import * as Tabs from '@radix-ui/react-tabs';
-import { useRecoilState } from 'recoil';
-import { tapState } from '@recoil/plan';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { isFirstLoadState, tapState } from '@recoil/plan';
+import { useEffect } from 'react';
 
 interface TabProps {
   lists: string[];
   contents: React.ReactNode[];
 }
 
 const Tab = ({ lists, contents }: TabProps) => {
-  const [, setTapState] = useRecoilState(tapState);
-
+  const [tap, setTapState] = useRecoilState(tapState);
+  const isFirstLoad = useRecoilValue(isFirstLoadState);
   const handleTabChange = (value: string) => {
     const tabIndex = value.replace('tab', '');
     setTapState(tabIndex);
   };
 
+  useEffect(() => {
+    setTapState(tap);
+    if (isFirstLoad) {
+      setTapState('0');
+    }
+  }, [tap]);
+
   let isDayTab = false;
   let isParticipationTab = false;
 
@@ -30,7 +38,7 @@ const Tab = ({ lists, contents }: TabProps) => {
   return (
     <Tabs.Root
       className="flex w-full flex-col"
-      defaultValue="tab0"
+      defaultValue={tap ? `tab${tap}` : 'tab0'}
       onValueChange={handleTabChange}>
       <Tabs.List
         className={`${

src/recoil/plan.ts

@@ -14,3 +14,8 @@ export const tapState = atom<string>({
   key: 'tapState',
   default: '',
 });
+
+export const isFirstLoadState = atom({
+  key: 'isFirstLoadState',
+  default: true,
+});

src/utils/utils.ts

@@ -1,3 +1,8 @@
+import { useGetTrips } from '@hooks/useGetTrips';
+import { isFirstLoadState, tapState } from '@recoil/plan';
+import { visitDateState } from '@recoil/socket';
+import { useSetRecoilState } from 'recoil';
+
 export const getEmoji = (content: string) => {
   const emojiMap: { [key: string]: string } = {
     깨끗해요: '🧼',
@@ -56,3 +61,16 @@ export function calculateDayAndDate(startDate: string, endDate: string) {
     SmallDayArr,
   };
 }
+
+export const resetVisitDateAndTab = () => {
+  const setVisitDate = useSetRecoilState(visitDateState);
+  const setIsFirstLoad = useSetRecoilState(isFirstLoadState);
+  const setTapState = useSetRecoilState(tapState);
+  const { startDate } = useGetTrips();
+
+  if (startDate) {
+    setVisitDate({ visitDate: startDate });
+  }
+  setIsFirstLoad(true);
+  setTapState('0');
+};