[FEAT] 이전 달의 미션 캘린더 정보를 볼 수 있다. #469
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import { useState } from 'react'; | ||
| import useQueryParams from '@/hooks/useQueryParams'; | ||
| import dayjs, { type Dayjs } from 'dayjs'; | ||
|
|
||
| /** | ||
| * useCalendar hook - 달력 정보를 다루기 위한 hook | ||
| * | ||
| * @param date 초기 랜더링 시 달력의 기준이 되는 날짜 | ||
| * @param isQueryParams 년과 월의 정보를 query params로 관리할지 여부 | ||
| */ | ||
| const useCalendar = ({ currentData, isQueryParams }: { currentData: Dayjs; isQueryParams?: boolean }) => { | ||
| const { queryParams, setQueryParams } = useQueryParams({ queryKey: 'date' }); | ||
| const [date, setDate] = useState(queryParams ? dayjs(queryParams) : currentData); | ||
| const { monthCalendarData } = getCalenderInfo(date.month() + 1, date.year()); | ||
|
|
||
| const onNextMonth = () => { | ||
| const nextMonth = date.add(1, 'month'); | ||
| setDate(nextMonth); | ||
| if (isQueryParams) { | ||
| setQueryParams({ date: nextMonth.format('YYYY-MM') }); | ||
| } | ||
| }; | ||
|
|
||
| const onPrevMonth = () => { | ||
| const prevMonth = date.subtract(1, 'month'); | ||
| setDate(prevMonth); | ||
| if (isQueryParams) { | ||
| setQueryParams({ date: prevMonth.format('YYYY-MM') }); | ||
| } | ||
| }; | ||
|
|
||
| const isCurrentMonth = currentData.month() === date.month() && currentData.year() === date.year(); | ||
|
|
||
| return { date, monthCalendarData, onNextMonth, onPrevMonth, isCurrentMonth }; | ||
| }; | ||
|
|
||
| export default useCalendar; | ||
|
|
||
| const getCalenderInfo = (currentMonth: number, currentYear: number) => { | ||
| // 이번달 1일 | ||
| const firstDate = new Date(currentYear, currentMonth - 1, 1); | ||
|
|
||
| // 이번달 마지막날 | ||
| const lastDate = new Date(currentYear, currentMonth, 0); | ||
|
|
||
| // getDay() : 일요일 0 ~ 토요일 6 | ||
| const prevBlankCount = firstDate.getDay(); | ||
| const totalDate = lastDate.getDate(); | ||
|
|
||
| const monthCalendarData = getMonthArray(prevBlankCount, totalDate).map((week) => | ||
| week.map((date) => { | ||
| if (date === 0) { | ||
| return null; | ||
| } | ||
|
|
||
| return { | ||
| year: currentYear, | ||
| month: currentMonth, | ||
| date, | ||
| }; | ||
| }), | ||
| ); | ||
|
|
||
| return { monthCalendarData }; | ||
| }; | ||
|
|
||
| const getMonthArray = (prevBlankCount: number, totalDate: number) => { | ||
| const weekNumber = Math.ceil((prevBlankCount + totalDate) / 7); | ||
|
|
||
| return Array.from({ length: weekNumber }, (_, weekIndex) => { | ||
| const offsetDate = weekIndex * 7 - prevBlankCount + 1; | ||
|
|
||
| return getWeekArray(totalDate, offsetDate); | ||
| }); | ||
| }; | ||
|
|
||
| const getWeekArray = (totalDate: number, offsetDate: number) => { | ||
| return Array.from({ length: 7 }, (_, i) => { | ||
| const currentDate = offsetDate + i; | ||
| if (currentDate < 0) { | ||
| return 0; | ||
| } | ||
|
|
||
| if (currentDate > totalDate) { | ||
| return 0; | ||
| } | ||
| return currentDate; | ||
| }); | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { usePathname, useRouter, useSearchParams } from 'next/navigation'; | ||
|
|
||
| /** | ||
| * useQueryParams hook - query params를 다루기 위한 hook | ||
| * UI 상태를 query params로 관리하기 위한 hook | ||
| * @param queryKey | ||
| */ | ||
| const useQueryParams = <T extends string>({ queryKey }: { queryKey: T }) => { | ||
| const searchParams = useSearchParams(); | ||
| const router = useRouter(); | ||
| const pathname = usePathname(); | ||
| const queryParams = searchParams.get(queryKey) as string | undefined; | ||
|
|
||
|
There was a problem hiding this comment. queryparam 이라는 네이밍을 보고 처음에는 react-query에 관련된 로직이라고 생각했었던거같아요 🤔 There was a problem hiding this comment. useSearchParamState 로 변경할게요 |
||
| const setQueryParamsHandler = (newQueryParams: Record<T, string>) => { | ||
| router.replace(pathname + '?' + new URLSearchParams(newQueryParams).toString()); | ||
| }; | ||
|
|
||
| return { queryParams, setQueryParams: setQueryParamsHandler }; | ||
| }; | ||
|
|
||
| export default useQueryParams; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍