diff --git a/src/entities/main/ui/DateContainer/index.tsx b/src/entities/main/ui/DateContainer/index.tsx index c2c7a436..c6eb2ef7 100644 --- a/src/entities/main/ui/DateContainer/index.tsx +++ b/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( dates[todayIndex].short, ); + const [startIndex, setStartIndex] = useState(todayIndex); const handleDateChange = (index: number) => { diff --git a/src/entities/match/detail/ui/DetailFormation/index.tsx b/src/entities/match/detail/ui/DetailFormation/index.tsx index 4150a5ec..6b835b0f 100644 --- a/src/entities/match/detail/ui/DetailFormation/index.tsx +++ b/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), diff --git a/src/shared/ui/match/index.tsx b/src/shared/ui/match/index.tsx index 310a5154..2471eada 100644 --- a/src/shared/ui/match/index.tsx +++ b/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([]); @@ -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); diff --git a/src/shared/ui/stageMatchContainer/index.tsx b/src/shared/ui/stageMatchContainer/index.tsx index fd24f898..758e1e1a 100644 --- a/src/shared/ui/stageMatchContainer/index.tsx +++ b/src/shared/ui/stageMatchContainer/index.tsx @@ -87,20 +87,27 @@ const StageMatchContainer = ({ ))} - {matches?.matches.map((match) => ( -
- -
- ))} + {matches?.matches + .slice() + .sort( + (a, b) => + new Date(a.startDate).getTime() - + new Date(b.startDate).getTime(), + ) + .map((match) => ( +
+ +
+ ))} diff --git a/src/views/main/ui/MainPage/index.tsx b/src/views/main/ui/MainPage/index.tsx index 8765812e..6dc1230a 100644 --- a/src/views/main/ui/MainPage/index.tsx +++ b/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')}`; diff --git a/src/widgets/match/ui/MatchNameContainer/index.tsx b/src/widgets/match/ui/MatchNameContainer/index.tsx index 4840386d..41f1011c 100644 --- a/src/widgets/match/ui/MatchNameContainer/index.tsx +++ b/src/widgets/match/ui/MatchNameContainer/index.tsx @@ -16,8 +16,6 @@ const MatchNameContainer = ({ gameData }: MatchNameContainerProps) => { id: game.gameId, })) ?? []; - console.log(selectedGameId); - return (