match date 순으로 정렬 및 match 자세히 보기 클릭 시 date 초기화 이슈 해결

src/entities/main/ui/DateContainer/index.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { LeftArrow, RightArrowIcon } from '@/shared/assets/svg';
-import { useSelectDateStore } from '@/shared/stores';
+import { useMyStageIdStore, useSelectDateStore } from '@/shared/stores';
 import { cn } from '@/shared/utils/cn';
 
 const DateContainer = () => {
@@ -29,6 +29,8 @@ const DateContainer = () => {
 
   const { setSelectDate } = useSelectDateStore();
 
+  const { stageId } = useMyStageIdStore();
+
   const dates = Array.from({ length: totalDays }, (_, index) => {
     const date = new Date(today);
     date.setDate(today.getDate() - pastDays + index);
@@ -40,6 +42,40 @@ const DateContainer = () => {
     return { short: `${month}-${day}`, full: `${year}-${month}-${day}` };
   });
 
+  useEffect(() => {
+    const localSelectDate = sessionStorage.getItem('selectDate');
+
+    if (localSelectDate) {
+      const { selectDate: localDate, stageId: localStageId } =
+        JSON.parse(localSelectDate);
+
+      if (localDate !== '') {
+        if (stageId === localStageId) {
+          const matchedDate = dates.find((d) => d.full === localDate);
+
+          if (matchedDate) {
+            setSelectedDate(matchedDate.short);
+            setSelectDate(matchedDate.full);
+            const matchedIndex = dates.findIndex((d) => d.full === localDate);
+            setStartIndex(matchedIndex);
+          } else {
+            const date = new Date(localDate);
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            const short = `${month}-${day}`;
+
+            setSelectedDate(short);
+            setSelectDate(localDate);
+            const matchedIndex = dates.findIndex((d) => d.full === localDate);
+            setStartIndex(matchedIndex);
+          }
+        }
+      }
+
+      sessionStorage.removeItem('selectDate');
+    }
+  }, [dates]);
+
   const todayIndex = dates.findIndex(
     (d) =>
       d.short ===
@@ -48,6 +84,7 @@ const DateContainer = () => {
   const [selectedDate, setSelectedDate] = useState<string>(
     dates[todayIndex].short,
   );
+
   const [startIndex, setStartIndex] = useState(todayIndex);
 
   const handleDateChange = (index: number) => {

src/entities/match/detail/ui/DetailFormation/index.tsx

@@ -147,7 +147,6 @@ const DetailFormation = ({
           const courtRect = courtElement.getBoundingClientRect();
           const svgRect = svg.getBoundingClientRect();
 
-          console.log(svgRect.height);
           setSvgBounds({
             width: Math.max(svgRect.width - 90),
             height: Math.max(svgRect.height - 90),

src/shared/ui/match/index.tsx

@@ -18,6 +18,7 @@ import {
   useMatchNoticeStore,
   useMatchStore,
   useMyStageIdStore,
+  useSelectDateStore,
 } from '@/shared/stores';
 import { MatchData } from '@/shared/types/my/bet';
 import { cn } from '@/shared/utils/cn';
@@ -55,6 +56,7 @@ const Match = ({ match }: MatchProps) => {
   const { matchNoticeArr } = useMatchNoticeStore();
   const { bettingMatchArr } = useBettingMatchArrStore();
   const { isAlarmClicked, setIsAlarmClicked } = useAlarmClickStore();
+  const { selectDate } = useSelectDateStore();
   const [isBettingPossible, setIsBettingPossible] = useState(false);
 
   const [adminIdxArr, setAdminIdxArr] = useState<number[]>([]);
@@ -175,6 +177,10 @@ const Match = ({ match }: MatchProps) => {
 
     localStorage.setItem('matchStatus', JSON.stringify(matchStatusData));
     localStorage.setItem('match', JSON.stringify(matchData));
+    sessionStorage.setItem(
+      'selectDate',
+      JSON.stringify({ selectDate, stageId }),
+    );
 
     setMatchStatus(matchStatusData);
     setMatch(matchData);

src/shared/ui/stageMatchContainer/index.tsx

@@ -87,20 +87,27 @@ const StageMatchContainer = ({
             </div>
           ))}
 
-          {matches?.matches.map((match) => (
-            <div
-              key={match.matchId}
-              className={cn(
-                'flex',
-                'midpad:w-[calc(50%-20px)]',
-                'w-full',
-                'shrink-0',
-                'justify-center',
-              )}
-            >
-              <Match match={match} />
-            </div>
-          ))}
+          {matches?.matches
+            .slice()
+            .sort(
+              (a, b) =>
+                new Date(a.startDate).getTime() -
+                new Date(b.startDate).getTime(),
+            )
+            .map((match) => (
+              <div
+                key={match.matchId}
+                className={cn(
+                  'flex',
+                  'midpad:w-[calc(50%-20px)]',
+                  'w-full',
+                  'shrink-0',
+                  'justify-center',
+                )}
+              >
+                <Match match={match} />
+              </div>
+            ))}
         </div>
       </div>
     </div>

src/views/main/ui/MainPage/index.tsx

@@ -62,6 +62,10 @@ const MainPage = () => {
     setSelectDate('');
   }, [stageId]);
 
+  useEffect(() => {
+    setSelectDate(selectDate);
+  }, []);
+
   const today = new Date();
   const formattedToday = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
 

src/widgets/match/ui/MatchNameContainer/index.tsx

@@ -16,8 +16,6 @@ const MatchNameContainer = ({ gameData }: MatchNameContainerProps) => {
       id: game.gameId,
     })) ?? [];
 
-  console.log(selectedGameId);
-
   return (
     <div
       className={cn(