From 5251ea9fda4e6a3228d08ff287726f2c1b780cde Mon Sep 17 00:00:00 2001 From: hyobb109 Date: Sat, 6 Jul 2024 18:16:44 +0900 Subject: [PATCH 01/19] =?UTF-8?q?fix:=20tab=20route=20name=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/navigators/TabNavigator.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/navigators/TabNavigator.tsx b/src/navigators/TabNavigator.tsx index 4d4586c..192f277 100644 --- a/src/navigators/TabNavigator.tsx +++ b/src/navigators/TabNavigator.tsx @@ -38,7 +38,7 @@ const TabNavigator = () => { }} > { }} /> { }} /> { }} /> Date: Sat, 6 Jul 2024 18:17:31 +0900 Subject: [PATCH 02/19] =?UTF-8?q?fix:=20hook=20=ED=98=B8=EC=B6=9C=20?= =?UTF-8?q?=EC=88=9C=EC=84=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/navigators/MainNavigator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/navigators/MainNavigator.tsx b/src/navigators/MainNavigator.tsx index 8844d72..39ec70d 100644 --- a/src/navigators/MainNavigator.tsx +++ b/src/navigators/MainNavigator.tsx @@ -16,8 +16,8 @@ const Stack = createStackNavigator(); const MainNavigator = () => { const isLoggedIn = useRecoilValue(isLoggedInState); - useUserSetup(); useAxiosInterceptors(); + useUserSetup(); return ( Date: Sat, 6 Jul 2024 18:31:55 +0900 Subject: [PATCH 03/19] =?UTF-8?q?fix:=20=EC=A0=80=EC=9E=A5=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EC=B7=A8=EC=86=8C=20=EC=88=98=EC=A0=95=EB=8F=84=20?= =?UTF-8?q?=EC=B7=A8=EC=86=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/diary/carousel/DiaryCard.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/diary/carousel/DiaryCard.tsx b/src/components/diary/carousel/DiaryCard.tsx index fe39ced..2ad8af6 100644 --- a/src/components/diary/carousel/DiaryCard.tsx +++ b/src/components/diary/carousel/DiaryCard.tsx @@ -163,6 +163,12 @@ const DiaryCard = ({ sendDiaryData(); }; + const onCancelSaveEdit = () => { + setInformModalVisible(false); + setIsEditing(false); + setDiaryInput(content); + }; + const onKeyboardDismiss = () => { setIsEditing(false); Keyboard.dismiss(); @@ -223,6 +229,7 @@ const DiaryCard = ({ visible={isInformModalVisible} setIsVisible={setInformModalVisible} onConfirm={onConfirmSaveEdit} + onCancel={onCancelSaveEdit} content={`기록을 수정해도\n편지의 내용은 바뀌지 않아요.`} confirmText="저장" /> From 4dc2005ae0665ecf68a70abd131ac583dfb40846 Mon Sep 17 00:00:00 2001 From: hyobb109 Date: Sat, 6 Jul 2024 22:12:10 +0900 Subject: [PATCH 04/19] =?UTF-8?q?fix:=20=EC=9D=BC=EA=B8=B0=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1=20=EC=8B=9C=EA=B0=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/diary/carousel/DiaryCard.tsx | 2 +- src/components/diary/carousel/DiaryInput.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/diary/carousel/DiaryCard.tsx b/src/components/diary/carousel/DiaryCard.tsx index 2ad8af6..a8e7110 100644 --- a/src/components/diary/carousel/DiaryCard.tsx +++ b/src/components/diary/carousel/DiaryCard.tsx @@ -37,6 +37,7 @@ const DiaryCard = ({ useEffect(() => { setDiaryInput(id === NEW_DIARY ? '' : content); setIsEditing(false); + setTimeStartWriting(''); }, [id, content]); const addNewDiary = useMutation({ @@ -86,7 +87,6 @@ const DiaryCard = ({ const sendDiary = useMutation({ mutationFn: (data: IAiLetterRequest) => postAiLetters(data), onSuccess: (data) => { - console.log(data); queryClient.invalidateQueries({ queryKey: ['diary', 'list'] }); queryClient.invalidateQueries({ queryKey: ['userInfo'] }); queryClient.invalidateQueries({ queryKey: ['fetchAiLettersMonthSummary'] }); diff --git a/src/components/diary/carousel/DiaryInput.tsx b/src/components/diary/carousel/DiaryInput.tsx index dfbd165..86f0d00 100644 --- a/src/components/diary/carousel/DiaryInput.tsx +++ b/src/components/diary/carousel/DiaryInput.tsx @@ -34,13 +34,13 @@ const DiaryInput = ({ const onChangeText = (text: string) => { if (text.length > MAX_LENGTH) return; - if (text.length === 1 && !timeStartWriting) { + if (!timeStartWriting) { const now = new Date(); const [year, month, date] = targetDate.split('-').map(Number); const newDate = set(now, { year, month: month - 1, date }); setTimeStartWriting(newDate.toISOString()); } - if (text.length === 0 && timeStartWriting) { + if (text.length === 0) { setTimeStartWriting(''); } setDiaryInput(text); From 8c9805cde70383e44fcfd517157a8301265bbd65 Mon Sep 17 00:00:00 2001 From: hyobb109 Date: Sat, 6 Jul 2024 23:02:42 +0900 Subject: [PATCH 05/19] =?UTF-8?q?feat:=20calendar=20=EB=82=A0=EC=A7=9C=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EB=AA=A8=EB=8B=AC=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../diary/calendar/CalendarSelectModal.tsx | 139 ++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 src/components/diary/calendar/CalendarSelectModal.tsx diff --git a/src/components/diary/calendar/CalendarSelectModal.tsx b/src/components/diary/calendar/CalendarSelectModal.tsx new file mode 100644 index 0000000..4386112 --- /dev/null +++ b/src/components/diary/calendar/CalendarSelectModal.tsx @@ -0,0 +1,139 @@ +import MyText from '@components/common/MyText'; +import { appColor3 } from '@utils/colors'; +import { kMonth } from '@utils/localeConfig'; +import { fontLarge } from '@utils/Sizing'; +import React from 'react'; +import { + View, + Modal, + FlatList, + Pressable, + TouchableWithoutFeedback, + StyleSheet, + ListRenderItem, +} from 'react-native'; + +interface IMonthItem { + month: string; + index: number; +} + +interface ICalendarSelectModalProps { + isModalVisible: boolean; + handleModalDismiss: () => void; + selectedMonth: number; + selectedYear: number; + setSelectedMonth: (month: number) => void; + setSelectedYear: (year: number) => void; +} + +const CalendarSelectModal = ({ + isModalVisible, + handleModalDismiss, + selectedMonth, + selectedYear, + setSelectedMonth, + setSelectedYear, +}: ICalendarSelectModalProps) => { + const renderMonthItem: ListRenderItem = ({ item }) => ( + setSelectedMonth(item.index + 1)}> + + + {item.month} + + + + ); + + const renderYearItem: ListRenderItem = ({ item }) => ( + setSelectedYear(item)}> + + + {item} + + + + ); + return ( + + + + + + + ({ month, index }))} + renderItem={renderMonthItem} + keyExtractor={(item) => item.index.toString()} + initialScrollIndex={Math.max(0, selectedMonth - 1)} + getItemLayout={(data, index) => ({ length: 50, offset: 50 * index, index })} + showsVerticalScrollIndicator={false} + /> + + + 2000 + i)} + renderItem={renderYearItem} + keyExtractor={(item) => item.toString()} + initialScrollIndex={Math.max(0, selectedYear - 2000)} + getItemLayout={(data, index) => ({ length: 50, offset: 50 * index, index })} + showsVerticalScrollIndicator={false} + /> + + + + + + + ); +}; + +export default CalendarSelectModal; + +const styles = StyleSheet.create({ + modalOverlay: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'rgba(0, 0, 0, 0.5)', + }, + modalContent: { + width: 300, + maxHeight: 300, + backgroundColor: '#ffffff', + borderRadius: 10, + padding: 10, + flexDirection: 'row', + }, + modalListContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + width: '100%', + }, + modalMonth: { + width: '50%', + }, + modalYear: { + width: '50%', + }, + modalItem: { + paddingVertical: 10, + paddingHorizontal: 20, + }, + modalText: { + fontSize: fontLarge, + textAlign: 'center', + }, + selectedText: { + fontSize: fontLarge, + textAlign: 'center', + color: appColor3, + }, + selectedStyle: { + borderColor: appColor3, + borderWidth: 1, + borderRadius: 15, + paddingVertical: 10, + paddingHorizontal: 19, + }, +}); From 5d2782047fbb3ff507fb06279c8eb7aa211d59b9 Mon Sep 17 00:00:00 2001 From: hyobb109 Date: Sat, 6 Jul 2024 23:07:23 +0900 Subject: [PATCH 06/19] =?UTF-8?q?feat:=20calendar=20=ED=97=A4=EB=8D=94=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EB=82=A0=EC=A7=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20=EB=AA=A8=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/diary/calendar/MyCalendar.tsx | 61 +++++++++++++++++--- src/hooks/diary/calendarHook.ts | 6 +- src/hooks/diary/useDate.ts | 22 +++++++ src/screens/diary/DiaryScreen.tsx | 1 - src/types/Diary.ts | 2 +- src/utils/localeConfig.ts | 45 ++++++--------- 6 files changed, 95 insertions(+), 42 deletions(-) create mode 100644 src/hooks/diary/useDate.ts diff --git a/src/components/diary/calendar/MyCalendar.tsx b/src/components/diary/calendar/MyCalendar.tsx index e991926..c5b4fd7 100644 --- a/src/components/diary/calendar/MyCalendar.tsx +++ b/src/components/diary/calendar/MyCalendar.tsx @@ -1,22 +1,31 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import CalendarArrow, { Direction } from '@components/diary/calendar/CalendarArrow'; -import { StyleSheet, View, Platform } from 'react-native'; +import { StyleSheet, View } from 'react-native'; import { Calendar, DateData } from 'react-native-calendars'; -import setLocaleConfig from '@utils/localeConfig'; +import setLocaleConfig, { kMonth } from '@utils/localeConfig'; import { IDiaryCount, IMarkedDates } from '@type/Diary'; import { dotColors } from '@utils/colors'; import { fontLarge } from '@utils/Sizing'; -import { getToday } from '@utils/dateUtils'; +import MyText from '@components/common/MyText'; +import TextButton from '@components/common/TextButton'; +import CalendarSelectModal from './CalendarSelectModal'; +import { useRecoilState } from 'recoil'; +import { selectedDateStatus } from '@stores/tense'; +import useDate from '@hooks/diary/useDate'; setLocaleConfig(); interface IMyCalendarProps { - selectedDate: string; markedDates: IDiaryCount[]; onDayPress: (date: DateData) => void; onMonthChange: (date: DateData) => void; } -const MyCalendar = ({ selectedDate, markedDates, onDayPress, onMonthChange }: IMyCalendarProps) => { +const MyCalendar = ({ markedDates, onDayPress, onMonthChange }: IMyCalendarProps) => { + const saveDateStatus = useDate(); + const [isModalVisible, setModalVisible] = useState(false); + const [selectedDate, setSelectedDate] = useRecoilState(selectedDateStatus); + const [selectedMonth, setSelectedMonth] = useState(parseInt(selectedDate.slice(5, 7), 10)); + const [selectedYear, setSelectedYear] = useState(parseInt(selectedDate.slice(0, 4), 10)); const markedDatesList: IMarkedDates = markedDates.reduce((acc, date) => { acc[date.markedDate] = { selected: date.markedDate === selectedDate, @@ -26,10 +35,32 @@ const MyCalendar = ({ selectedDate, markedDates, onDayPress, onMonthChange }: IM return acc; }, {} as IMarkedDates); + useEffect(() => { + setSelectedMonth(parseInt(selectedDate.slice(5, 7), 10)); + setSelectedYear(parseInt(selectedDate.slice(0, 4), 10)); + saveDateStatus(selectedDate); + }, [selectedDate]); + + const handleModalDismiss = () => { + setSelectedDate(`${selectedYear}-${selectedMonth.toString().padStart(2, '0')}-01`); + setModalVisible(false); + }; + + const onHeaderPress = () => { + setModalVisible(true); + }; + + const getDisplayDate = (date: Date) => { + const year = date.getFullYear(); + const month = date.getMonth(); + return `${kMonth[month]} ${year}`; + }; + return ( } + renderHeader={(date: string) => ( + <> + + {getDisplayDate(new Date(date))} + + + + )} /> ); diff --git a/src/hooks/diary/calendarHook.ts b/src/hooks/diary/calendarHook.ts index 0904d7f..c5b1054 100644 --- a/src/hooks/diary/calendarHook.ts +++ b/src/hooks/diary/calendarHook.ts @@ -1,15 +1,13 @@ import React, { useState } from 'react'; -import { isSameDay } from 'date-fns'; import { DateData } from 'react-native-calendars'; import { IDate } from '@type/Diary'; import { useDiaryCounts } from '@api/diary/get'; import { useRecoilState, useSetRecoilState } from 'recoil'; import { snackMessage } from '@stores/snackMessage'; import { selectedDateStatus, tense } from '@stores/tense'; -import { getToday, getYear, getMonth } from '@utils/dateUtils'; +import { getYear, getMonth } from '@utils/dateUtils'; const useCalendarHook = () => { - const [today] = useState(getToday); const [selectedMonth, setSelectedMonth] = useState({ year: getYear(), month: getMonth() }); const [selectedDate, setSelectedDate] = useRecoilState(selectedDateStatus); const setDateStatus = useSetRecoilState(tense); @@ -17,7 +15,6 @@ const useCalendarHook = () => { const { data, isPending, isError } = useDiaryCounts(selectedMonth); const onDayPress = (day: DateData) => { - isSameDay(day.dateString, new Date(today)) ? setDateStatus('TODAY') : setDateStatus('PAST'); setSelectedDate(day.dateString); }; @@ -28,7 +25,6 @@ const useCalendarHook = () => { }; return { - today, selectedDate, setSelectedDate, onDayPress, diff --git a/src/hooks/diary/useDate.ts b/src/hooks/diary/useDate.ts new file mode 100644 index 0000000..f9acf91 --- /dev/null +++ b/src/hooks/diary/useDate.ts @@ -0,0 +1,22 @@ +import { tense } from '@stores/tense'; +import { getToday } from '@utils/dateUtils'; +import { isPast, isSameDay } from 'date-fns'; +import { useSetRecoilState } from 'recoil'; + +const useDate = () => { + const setDateStatus = useSetRecoilState(tense); + + const saveDateStatus = (date: string) => { + if (isSameDay(date, new Date(getToday()))) { + setDateStatus('TODAY'); + } else if (isPast(new Date(date))) { + setDateStatus('PAST'); + } else { + setDateStatus('FUTURE'); + } + }; + + return saveDateStatus; +}; + +export default useDate; diff --git a/src/screens/diary/DiaryScreen.tsx b/src/screens/diary/DiaryScreen.tsx index fb12d09..e5f29ac 100644 --- a/src/screens/diary/DiaryScreen.tsx +++ b/src/screens/diary/DiaryScreen.tsx @@ -13,7 +13,6 @@ const DiaryScreen = () => { <> { LocaleConfig.locales['ko'] = { - monthNames: [ - '일 월', - '이 월', - '삼 월', - '사 월', - '오 월', - '유 월', - '칠 월', - '팔 월', - '구 월', - '시 월', - '십일 월', - '십이 월', - ], - monthNamesShort: [ - '일 월', - '이 월', - '삼 월', - '사 월', - '오 월', - '유 월', - '칠 월', - '팔 월', - '구 월', - '시 월', - '십일 월', - '십이 월', - ], + monthNames: kMonth, + monthNamesShort: kMonth, dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'], dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'], today: '오늘', From b10415db83d774862e74680ddedbcf3c27be0b20 Mon Sep 17 00:00:00 2001 From: hyobb109 Date: Sat, 6 Jul 2024 23:41:11 +0900 Subject: [PATCH 07/19] =?UTF-8?q?fix:=20=EB=AF=B8=EB=9E=98=20=EB=B3=B4?= =?UTF-8?q?=EB=82=B4=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EA=B0=80=EB=A6=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../diary/carousel/DiaryCardHeader.tsx | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/diary/carousel/DiaryCardHeader.tsx b/src/components/diary/carousel/DiaryCardHeader.tsx index 2a4d897..dcd579d 100644 --- a/src/components/diary/carousel/DiaryCardHeader.tsx +++ b/src/components/diary/carousel/DiaryCardHeader.tsx @@ -6,6 +6,8 @@ import { format } from 'date-fns'; import { ko } from 'date-fns/locale'; // import MyIconButton from '@components/common/MyIconButtons'; import TextButton from '@components/common/TextButton'; +import { useRecoilValue } from 'recoil'; +import { tense } from '@stores/tense'; interface DiaryCardHeaderProps { isNew: boolean; @@ -35,6 +37,8 @@ const DiaryCardHeader = ({ onDelete, onSend, }: DiaryCardHeaderProps) => { + const dateStatus = useRecoilValue(tense); + return ( {formatTime(createdTime) || formatTime(timeStartWriting)} @@ -63,13 +67,15 @@ const DiaryCardHeader = ({ ) : ( // <> - - 보내기 - + {dateStatus !== 'FUTURE' && ( + + 보내기 + + )} 삭제 From 0ec07eec194c51945c07c725e8b24a9f4b395e8e Mon Sep 17 00:00:00 2001 From: hyobb109 Date: Sun, 7 Jul 2024 01:23:25 +0900 Subject: [PATCH 08/19] =?UTF-8?q?feat:=20=EC=9D=BC=EA=B8=B0=20=EC=97=86?= =?UTF-8?q?=EC=9D=84=20=EB=95=90=20=EC=9A=94=EC=B2=AD=20=EB=B3=B4=EB=82=B4?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EC=9D=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/diary/get.ts | 6 +++--- src/hooks/diary/calendarHook.ts | 11 +++++++++-- src/hooks/diary/diaryHook.ts | 13 ++++++++++--- src/stores/tense.ts | 5 +++++ 4 files changed, 27 insertions(+), 8 deletions(-) diff --git a/src/api/diary/get.ts b/src/api/diary/get.ts index 031c85e..f38770f 100644 --- a/src/api/diary/get.ts +++ b/src/api/diary/get.ts @@ -1,6 +1,6 @@ import React from 'react'; import instance from '@api/axios'; -import { DateStatus, IDate, IDiaryCount, IDiaryListResponse, NEW_DIARY } from '@type/Diary'; +import { IDate, IDiaryCount, IDiaryListResponse, NEW_DIARY } from '@type/Diary'; import { useQuery, UseQueryResult } from '@tanstack/react-query'; export const fetchDiaryList = async (targetDate: string): Promise => { @@ -8,11 +8,11 @@ export const fetchDiaryList = async (targetDate: string): Promise { +export const useDiaryList = (targetDate: string, isMarked: boolean) => { return useQuery({ queryKey: ['diary', 'list', targetDate], queryFn: () => fetchDiaryList(targetDate), - enabled: !!targetDate, + enabled: !!targetDate && isMarked, staleTime: Infinity, select: (data) => { const diaryList = data.diaries.map((item) => ({ diff --git a/src/hooks/diary/calendarHook.ts b/src/hooks/diary/calendarHook.ts index c5b1054..9306fc2 100644 --- a/src/hooks/diary/calendarHook.ts +++ b/src/hooks/diary/calendarHook.ts @@ -1,10 +1,10 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { DateData } from 'react-native-calendars'; import { IDate } from '@type/Diary'; import { useDiaryCounts } from '@api/diary/get'; import { useRecoilState, useSetRecoilState } from 'recoil'; import { snackMessage } from '@stores/snackMessage'; -import { selectedDateStatus, tense } from '@stores/tense'; +import { markedDateStatus, selectedDateStatus, tense } from '@stores/tense'; import { getYear, getMonth } from '@utils/dateUtils'; const useCalendarHook = () => { @@ -13,6 +13,13 @@ const useCalendarHook = () => { const setDateStatus = useSetRecoilState(tense); const [snackbarText, setSnackbarText] = useRecoilState(snackMessage); const { data, isPending, isError } = useDiaryCounts(selectedMonth); + const setMarkedDateSet = useSetRecoilState(markedDateStatus); + + useEffect(() => { + if (data) { + setMarkedDateSet(new Set(data.map((item) => item.markedDate))); + } + }, [data, setMarkedDateSet]); const onDayPress = (day: DateData) => { setSelectedDate(day.dateString); diff --git a/src/hooks/diary/diaryHook.ts b/src/hooks/diary/diaryHook.ts index 61e9a1f..08fece1 100644 --- a/src/hooks/diary/diaryHook.ts +++ b/src/hooks/diary/diaryHook.ts @@ -1,10 +1,17 @@ import { useDiaryList } from '@api/diary/get'; -import { tense } from '@stores/tense'; +import { markedDateStatus } from '@stores/tense'; +import { useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; const useDiaryHook = (selectedDate: string) => { - const dateStatus = useRecoilValue(tense); - const { data, isPending, isError, isSuccess } = useDiaryList(selectedDate, dateStatus); + const markedDateSet = useRecoilValue(markedDateStatus); + const [isMarked, setIsMarked] = useState(false); + + useEffect(() => { + setIsMarked(markedDateSet.has(selectedDate)); + }, [selectedDate, markedDateSet]); + + const { data, isPending, isError, isSuccess } = useDiaryList(selectedDate, isMarked); return { data: data?.diaryList || [], diff --git a/src/stores/tense.ts b/src/stores/tense.ts index 9828bb7..4397bee 100644 --- a/src/stores/tense.ts +++ b/src/stores/tense.ts @@ -11,3 +11,8 @@ export const selectedDateStatus = atom({ key: 'selectedDateStatus', default: format(new Date(), 'yyyy-MM-dd'), }); + +export const markedDateStatus = atom>({ + key: 'markedDateStatus', + default: new Set(), +}); From 1e81c1cb3c1cca07c91ab123e1d5c19ac70fd8a8 Mon Sep 17 00:00:00 2001 From: hyobb109 Date: Sun, 7 Jul 2024 01:28:23 +0900 Subject: [PATCH 09/19] =?UTF-8?q?fix:=20isMarked=20=EC=83=81=ED=83=9C=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/diary/diaryHook.ts | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/hooks/diary/diaryHook.ts b/src/hooks/diary/diaryHook.ts index 08fece1..8621c05 100644 --- a/src/hooks/diary/diaryHook.ts +++ b/src/hooks/diary/diaryHook.ts @@ -1,17 +1,13 @@ import { useDiaryList } from '@api/diary/get'; import { markedDateStatus } from '@stores/tense'; -import { useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; const useDiaryHook = (selectedDate: string) => { const markedDateSet = useRecoilValue(markedDateStatus); - const [isMarked, setIsMarked] = useState(false); - - useEffect(() => { - setIsMarked(markedDateSet.has(selectedDate)); - }, [selectedDate, markedDateSet]); - - const { data, isPending, isError, isSuccess } = useDiaryList(selectedDate, isMarked); + const { data, isPending, isError, isSuccess } = useDiaryList( + selectedDate, + markedDateSet.has(selectedDate), + ); return { data: data?.diaryList || [], From e12a55d8baa6e7163fbc1b31fa6391fa8c2126ad Mon Sep 17 00:00:00 2001 From: hyobb109 Date: Sun, 7 Jul 2024 01:52:07 +0900 Subject: [PATCH 10/19] =?UTF-8?q?fix:=20=EC=9D=BC=EA=B8=B0=20=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EB=82=A0=EC=A7=9C=20=EA=B8=B0=EB=B3=B8=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/diary/diaryHook.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/hooks/diary/diaryHook.ts b/src/hooks/diary/diaryHook.ts index 8621c05..8083d3b 100644 --- a/src/hooks/diary/diaryHook.ts +++ b/src/hooks/diary/diaryHook.ts @@ -1,5 +1,7 @@ import { useDiaryList } from '@api/diary/get'; import { markedDateStatus } from '@stores/tense'; +import { NEW_DIARY } from '@type/Diary'; +import { useEffect } from 'react'; import { useRecoilValue } from 'recoil'; const useDiaryHook = (selectedDate: string) => { @@ -8,13 +10,20 @@ const useDiaryHook = (selectedDate: string) => { selectedDate, markedDateSet.has(selectedDate), ); + const newDiary = [ + { + id: NEW_DIARY, + content: '이 날의 심심기록을 남겨보세요', + createdTime: '', + }, + ]; return { - data: data?.diaryList || [], + data: markedDateSet.has(selectedDate) ? data?.diaryList || [] : newDiary, isPending, isError, isSuccess, - sendStatus: data?.sendStatus || false, + sendStatus: markedDateSet.has(selectedDate) ? data?.sendStatus || false : false, }; }; From 8bd92b256f74a1b032ab667d60ce4041d90379b8 Mon Sep 17 00:00:00 2001 From: hyobb109 Date: Sun, 7 Jul 2024 02:38:45 +0900 Subject: [PATCH 11/19] =?UTF-8?q?fix:=20createdTime=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/diary/carousel/DiaryCard.tsx | 3 +-- src/components/diary/carousel/DiaryInput.tsx | 6 +++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/diary/carousel/DiaryCard.tsx b/src/components/diary/carousel/DiaryCard.tsx index a8e7110..739d8c7 100644 --- a/src/components/diary/carousel/DiaryCard.tsx +++ b/src/components/diary/carousel/DiaryCard.tsx @@ -127,8 +127,7 @@ const DiaryCard = ({ }; const sendDiaryData = () => { - const formattedTime = `${targetDate}T${timeStartWriting.split('T')[1]}`; - const cretatedDate = id === NEW_DIARY ? formattedTime : createdTime; + const cretatedDate = id === NEW_DIARY ? timeStartWriting : createdTime; const data = { content: diaryInput, createdDate: cretatedDate, diff --git a/src/components/diary/carousel/DiaryInput.tsx b/src/components/diary/carousel/DiaryInput.tsx index 86f0d00..d8108e5 100644 --- a/src/components/diary/carousel/DiaryInput.tsx +++ b/src/components/diary/carousel/DiaryInput.tsx @@ -4,7 +4,6 @@ import MyTextInput from '@components/common/MyTextInput'; import LengthCheckView from '@components/common/LengthCheckView'; import { useRecoilValue } from 'recoil'; import { selectedDateStatus } from '@stores/tense'; -import { set } from 'date-fns'; interface IDiaryInputProps { id: number; @@ -37,12 +36,13 @@ const DiaryInput = ({ if (!timeStartWriting) { const now = new Date(); const [year, month, date] = targetDate.split('-').map(Number); - const newDate = set(now, { year, month: month - 1, date }); - setTimeStartWriting(newDate.toISOString()); + now.setFullYear(year, month - 1, date); + setTimeStartWriting(now.toISOString()); } if (text.length === 0) { setTimeStartWriting(''); } + console.log('timeStartWriting', timeStartWriting); setDiaryInput(text); }; From 4adc1112fc8b2d4a5dc960a55ef91687ecf8295f Mon Sep 17 00:00:00 2001 From: hyobb109 Date: Sun, 7 Jul 2024 02:58:01 +0900 Subject: [PATCH 12/19] =?UTF-8?q?chore:=20new=20diary=20const=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/diary/get.ts | 9 ++------- src/hooks/diary/diaryHook.ts | 13 +++---------- src/types/Diary.ts | 6 ++++++ 3 files changed, 11 insertions(+), 17 deletions(-) diff --git a/src/api/diary/get.ts b/src/api/diary/get.ts index f38770f..f99093d 100644 --- a/src/api/diary/get.ts +++ b/src/api/diary/get.ts @@ -1,6 +1,6 @@ import React from 'react'; import instance from '@api/axios'; -import { IDate, IDiaryCount, IDiaryListResponse, NEW_DIARY } from '@type/Diary'; +import { IDate, IDiaryCount, IDiaryListResponse, newDiary } from '@type/Diary'; import { useQuery, UseQueryResult } from '@tanstack/react-query'; export const fetchDiaryList = async (targetDate: string): Promise => { @@ -20,12 +20,7 @@ export const useDiaryList = (targetDate: string, isMarked: boolean) => { content: item.content, createdTime: item.createdDate, })); - diaryList.length < 3 && - diaryList.push({ - id: NEW_DIARY, - content: '이 날의 심심기록을 남겨보세요', - createdTime: '', - }); + diaryList.length < 3 && diaryList.push(newDiary); return { sendStatus: data.sendStatus, diaryList }; }, }); diff --git a/src/hooks/diary/diaryHook.ts b/src/hooks/diary/diaryHook.ts index 8083d3b..c5c35ab 100644 --- a/src/hooks/diary/diaryHook.ts +++ b/src/hooks/diary/diaryHook.ts @@ -1,7 +1,6 @@ import { useDiaryList } from '@api/diary/get'; import { markedDateStatus } from '@stores/tense'; -import { NEW_DIARY } from '@type/Diary'; -import { useEffect } from 'react'; +import { newDiary } from '@type/Diary'; import { useRecoilValue } from 'recoil'; const useDiaryHook = (selectedDate: string) => { @@ -10,16 +9,10 @@ const useDiaryHook = (selectedDate: string) => { selectedDate, markedDateSet.has(selectedDate), ); - const newDiary = [ - { - id: NEW_DIARY, - content: '이 날의 심심기록을 남겨보세요', - createdTime: '', - }, - ]; + const newDiaryData = [newDiary]; return { - data: markedDateSet.has(selectedDate) ? data?.diaryList || [] : newDiary, + data: markedDateSet.has(selectedDate) ? data?.diaryList || newDiaryData : newDiaryData, isPending, isError, isSuccess, diff --git a/src/types/Diary.ts b/src/types/Diary.ts index a8e527c..1e296db 100644 --- a/src/types/Diary.ts +++ b/src/types/Diary.ts @@ -12,6 +12,12 @@ export interface IDiaryList { export const NEW_DIARY = -1; +export const newDiary = { + id: NEW_DIARY, + content: '이 날의 심심기록을 남겨보세요', + createdTime: '', +}; + export type DateStatus = 'TODAY' | 'PAST' | 'FUTURE'; export interface IDiaryCarouselProps { From 632c2a4a437c8ecbb030c2ee76a67ae10e733c7e Mon Sep 17 00:00:00 2001 From: hyobb109 Date: Sun, 7 Jul 2024 02:58:17 +0900 Subject: [PATCH 13/19] =?UTF-8?q?chore:=20console=20=EC=A7=80=EC=9B=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/diary/carousel/DiaryInput.tsx | 1 - src/hooks/useAxiosInterceptors.ts | 6 +++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/diary/carousel/DiaryInput.tsx b/src/components/diary/carousel/DiaryInput.tsx index d8108e5..60497ac 100644 --- a/src/components/diary/carousel/DiaryInput.tsx +++ b/src/components/diary/carousel/DiaryInput.tsx @@ -42,7 +42,6 @@ const DiaryInput = ({ if (text.length === 0) { setTimeStartWriting(''); } - console.log('timeStartWriting', timeStartWriting); setDiaryInput(text); }; diff --git a/src/hooks/useAxiosInterceptors.ts b/src/hooks/useAxiosInterceptors.ts index 8501714..707d168 100644 --- a/src/hooks/useAxiosInterceptors.ts +++ b/src/hooks/useAxiosInterceptors.ts @@ -45,7 +45,7 @@ const useAxiosInterceptors = () => { // auth/google 제외한 요청 401(토큰 만료) 에러 시 토큰 재발급, 403(권한 없음) 에러 시 로그아웃 if (error.response.status === 401 && !originalRequest._retry) { originalRequest._retry = true; - console.log('토큰 만료'); + // console.log('토큰 만료'); axios .post(`${process.env.BASE_URL}/auth/reissue`, null, { headers: { 'X-Custom-Header': 'foobar', 'Content-Type': 'application/json' }, @@ -58,12 +58,12 @@ const useAxiosInterceptors = () => { // return instance.request(originalRequest); }) .catch((err) => { - console.log('토큰 재발급 실패', err); + // console.log('토큰 재발급 실패', err); handleLogout(); }); } else if (error.response.status === 403 && !originalRequest._retry) { originalRequest._retry = true; - console.log('권한 없음'); + // console.log('권한 없음'); handleLogout(); } return Promise.reject(error); From 77a794d960da95cbf929476801b1406bf86db083 Mon Sep 17 00:00:00 2001 From: hyobb109 Date: Sun, 7 Jul 2024 03:02:01 +0900 Subject: [PATCH 14/19] chore: error any type --- src/components/diary/carousel/DiaryCard.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/diary/carousel/DiaryCard.tsx b/src/components/diary/carousel/DiaryCard.tsx index 739d8c7..998031d 100644 --- a/src/components/diary/carousel/DiaryCard.tsx +++ b/src/components/diary/carousel/DiaryCard.tsx @@ -47,7 +47,7 @@ const DiaryCard = ({ setSnackbar('저장이 완료되었습니다.'); setTimeStartWriting(''); }, - onError: (error) => { + onError: (error: any) => { setSnackbar(error.response.data.message || '오류가 발생했습니다.'); }, onSettled: () => { @@ -60,7 +60,7 @@ const DiaryCard = ({ queryClient.invalidateQueries({ queryKey: ['diary'] }); setSnackbar('삭제가 완료되었습니다.'); }, - onError: (error) => { + onError: (error: any) => { setSnackbar(error.response.data.message || '오류가 발생했습니다.'); }, onSettled: () => { @@ -76,7 +76,7 @@ const DiaryCard = ({ queryClient.invalidateQueries({ queryKey: ['diary', 'list'] }); setSnackbar('수정이 완료되었습니다.'); }, - onError: (error) => { + onError: (error: any) => { setSnackbar(error.response.data.message || '오류가 발생했습니다.'); }, onSettled: () => { @@ -92,7 +92,7 @@ const DiaryCard = ({ queryClient.invalidateQueries({ queryKey: ['fetchAiLettersMonthSummary'] }); // setSnackbar('편지가 도착했습니다'); }, - onError: (error) => { + onError: (error: any) => { setSnackbar(error.response.data.message || '오류가 발생했습니다.'); }, }); From 530dff0bb91da61089234d83ec725e74571ba889 Mon Sep 17 00:00:00 2001 From: hyobb109 Date: Sun, 7 Jul 2024 03:02:48 +0900 Subject: [PATCH 15/19] =?UTF-8?q?fix:=20markedSet=20=EC=B4=88=EA=B8=B0?= =?UTF-8?q?=EA=B0=92=EC=97=90=20=EC=98=A4=EB=8A=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stores/tense.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/tense.ts b/src/stores/tense.ts index 4397bee..c4cfeb6 100644 --- a/src/stores/tense.ts +++ b/src/stores/tense.ts @@ -14,5 +14,5 @@ export const selectedDateStatus = atom({ export const markedDateStatus = atom>({ key: 'markedDateStatus', - default: new Set(), + default: new Set([format(new Date(), 'yyyy-MM-dd')]), }); From 41c605bd57e2a427f409634711254555023cf8cd Mon Sep 17 00:00:00 2001 From: hyobb109 Date: Sun, 7 Jul 2024 03:08:13 +0900 Subject: [PATCH 16/19] =?UTF-8?q?chore:=20=EB=B3=B4=EB=82=B4=EA=B8=B0=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=AC=B8=EA=B5=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/diary/carousel/DiaryCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/diary/carousel/DiaryCard.tsx b/src/components/diary/carousel/DiaryCard.tsx index 998031d..619a117 100644 --- a/src/components/diary/carousel/DiaryCard.tsx +++ b/src/components/diary/carousel/DiaryCard.tsx @@ -221,7 +221,7 @@ const DiaryCard = ({ visible={isSendModalVisible} setIsVisible={setSendModalVisible} onConfirm={onConfirmSend} - content="기록을 보내시겠습니까?" + content={`이 날의 기록을 모두 보내시겠습니까?\n편지는 하루에 한 번만 받을 수 있어요.`} confirmText="보내기" /> Date: Sun, 7 Jul 2024 03:22:24 +0900 Subject: [PATCH 17/19] =?UTF-8?q?fix:=20calendar=20hook=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/diary/calendar/MyCalendar.tsx | 9 +++------ .../diary/carousel/DiaryCarousel.native.tsx | 7 +++++-- .../diary/carousel/DiaryCarousel.web.tsx | 7 +++++-- src/screens/diary/DiaryScreen.tsx | 14 +++++--------- 4 files changed, 18 insertions(+), 19 deletions(-) diff --git a/src/components/diary/calendar/MyCalendar.tsx b/src/components/diary/calendar/MyCalendar.tsx index c5b4fd7..f4fb762 100644 --- a/src/components/diary/calendar/MyCalendar.tsx +++ b/src/components/diary/calendar/MyCalendar.tsx @@ -12,15 +12,12 @@ import CalendarSelectModal from './CalendarSelectModal'; import { useRecoilState } from 'recoil'; import { selectedDateStatus } from '@stores/tense'; import useDate from '@hooks/diary/useDate'; +import useCalendarHook from '@hooks/diary/calendarHook'; setLocaleConfig(); -interface IMyCalendarProps { - markedDates: IDiaryCount[]; - onDayPress: (date: DateData) => void; - onMonthChange: (date: DateData) => void; -} -const MyCalendar = ({ markedDates, onDayPress, onMonthChange }: IMyCalendarProps) => { +const MyCalendar = () => { + const { onDayPress, onMonthChange, markedDates } = useCalendarHook(); const saveDateStatus = useDate(); const [isModalVisible, setModalVisible] = useState(false); const [selectedDate, setSelectedDate] = useRecoilState(selectedDateStatus); diff --git a/src/components/diary/carousel/DiaryCarousel.native.tsx b/src/components/diary/carousel/DiaryCarousel.native.tsx index 83877cd..600e4cf 100644 --- a/src/components/diary/carousel/DiaryCarousel.native.tsx +++ b/src/components/diary/carousel/DiaryCarousel.native.tsx @@ -2,12 +2,15 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; import { StyleSheet, View, FlatList, ListRenderItem, ViewToken } from 'react-native'; import DiaryCard from '@components/diary/carousel/DiaryCard'; import DiaryPagination from '@components/diary/carousel/DiaryPagination'; -import { IDiary, IDiaryCarouselProps, NEW_DIARY } from '@type/Diary'; +import { IDiary, NEW_DIARY } from '@type/Diary'; import { CARD_WIDTH } from '@utils/Sizing'; import useDiaryHook from '@hooks/diary/diaryHook'; import CenterViewText from '@components/common/CenterViewText'; +import { useRecoilValue } from 'recoil'; +import { selectedDateStatus } from '@stores/tense'; -const DiaryCarousel = ({ selectedDate }: IDiaryCarouselProps) => { +const DiaryCarousel = () => { + const selectedDate = useRecoilValue(selectedDateStatus); const { data, isPending, isError, sendStatus } = useDiaryHook(selectedDate); const [activeIndex, setActiveIndex] = useState(0); const [isEditing, setIsEditing] = useState(false); diff --git a/src/components/diary/carousel/DiaryCarousel.web.tsx b/src/components/diary/carousel/DiaryCarousel.web.tsx index 0532239..690fbfd 100644 --- a/src/components/diary/carousel/DiaryCarousel.web.tsx +++ b/src/components/diary/carousel/DiaryCarousel.web.tsx @@ -2,11 +2,14 @@ import React, { useEffect, useState } from 'react'; import { StyleSheet, View } from 'react-native'; import DiaryCard from '@components/diary/carousel/DiaryCard'; import DiaryArrowIcons from '@components/diary/carousel/DiaryArrowIcons'; -import { IDiaryCarouselProps, NEW_DIARY } from '@type/Diary'; +import { NEW_DIARY } from '@type/Diary'; import useDiaryHook from '@hooks/diary/diaryHook'; import CenterViewText from '@components/common/CenterViewText'; +import { useRecoilValue } from 'recoil'; +import { selectedDateStatus } from '@stores/tense'; -const DiaryCarousel = ({ selectedDate }: IDiaryCarouselProps) => { +const DiaryCarousel = () => { + const selectedDate = useRecoilValue(selectedDateStatus); const [activeIndex, setActiveIndex] = useState(0); const { data, isPending, isError, isSuccess, sendStatus } = useDiaryHook(selectedDate); const [isEditing, setIsEditing] = useState(false); diff --git a/src/screens/diary/DiaryScreen.tsx b/src/screens/diary/DiaryScreen.tsx index e5f29ac..3668f44 100644 --- a/src/screens/diary/DiaryScreen.tsx +++ b/src/screens/diary/DiaryScreen.tsx @@ -2,22 +2,18 @@ import React from 'react'; import { StyleSheet, View } from 'react-native'; import MyCalendar from '@components/diary/calendar/MyCalendar'; import DiaryCarousel from '@components/diary/carousel/DiaryCarousel'; -import useCalendarHook from '@hooks/diary/calendarHook'; import MySnackbar from '@components/common/MySnackbar'; import { paddingLarge } from '@utils/Sizing'; +import { useRecoilValue } from 'recoil'; +import { snackMessage } from '@stores/snackMessage'; const DiaryScreen = () => { - const { selectedDate, onDayPress, onMonthChange, markedDates, snackbarText } = useCalendarHook(); - + const snackbarText = useRecoilValue(snackMessage); return ( <> - - + + From 6b648f35069286e7fc15c9d2505fda9fabcb8b9d Mon Sep 17 00:00:00 2001 From: hyobb109 Date: Sun, 7 Jul 2024 03:37:19 +0900 Subject: [PATCH 18/19] =?UTF-8?q?fix:=20=EB=AA=A8=EB=8B=AC=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=20=EC=8B=9C=EC=97=90=20month=20=EB=B0=94?= =?UTF-8?q?=EA=BF=94=EC=A4=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/diary/calendar/MyCalendar.tsx | 23 +++++++++++++------- src/hooks/diary/calendarHook.ts | 21 ++++++++++++++---- src/hooks/diary/useDate.ts | 22 ------------------- 3 files changed, 32 insertions(+), 34 deletions(-) delete mode 100644 src/hooks/diary/useDate.ts diff --git a/src/components/diary/calendar/MyCalendar.tsx b/src/components/diary/calendar/MyCalendar.tsx index f4fb762..467f74e 100644 --- a/src/components/diary/calendar/MyCalendar.tsx +++ b/src/components/diary/calendar/MyCalendar.tsx @@ -1,26 +1,29 @@ import React, { useEffect, useState } from 'react'; import CalendarArrow, { Direction } from '@components/diary/calendar/CalendarArrow'; import { StyleSheet, View } from 'react-native'; -import { Calendar, DateData } from 'react-native-calendars'; +import { Calendar } from 'react-native-calendars'; import setLocaleConfig, { kMonth } from '@utils/localeConfig'; -import { IDiaryCount, IMarkedDates } from '@type/Diary'; +import { IDate, IMarkedDates } from '@type/Diary'; import { dotColors } from '@utils/colors'; import { fontLarge } from '@utils/Sizing'; import MyText from '@components/common/MyText'; import TextButton from '@components/common/TextButton'; import CalendarSelectModal from './CalendarSelectModal'; -import { useRecoilState } from 'recoil'; -import { selectedDateStatus } from '@stores/tense'; -import useDate from '@hooks/diary/useDate'; import useCalendarHook from '@hooks/diary/calendarHook'; setLocaleConfig(); const MyCalendar = () => { - const { onDayPress, onMonthChange, markedDates } = useCalendarHook(); - const saveDateStatus = useDate(); + const { + onDayPress, + onMonthChange, + markedDates, + selectedDate, + setSelectedDate, + saveDateStatus, + setTargetMonth, + } = useCalendarHook(); const [isModalVisible, setModalVisible] = useState(false); - const [selectedDate, setSelectedDate] = useRecoilState(selectedDateStatus); const [selectedMonth, setSelectedMonth] = useState(parseInt(selectedDate.slice(5, 7), 10)); const [selectedYear, setSelectedYear] = useState(parseInt(selectedDate.slice(0, 4), 10)); const markedDatesList: IMarkedDates = markedDates.reduce((acc, date) => { @@ -40,6 +43,10 @@ const MyCalendar = () => { const handleModalDismiss = () => { setSelectedDate(`${selectedYear}-${selectedMonth.toString().padStart(2, '0')}-01`); + setTargetMonth({ + year: selectedYear.toString(), + month: selectedMonth.toString().padStart(2, '0') as IDate['month'], + }); setModalVisible(false); }; diff --git a/src/hooks/diary/calendarHook.ts b/src/hooks/diary/calendarHook.ts index 9306fc2..f0f4053 100644 --- a/src/hooks/diary/calendarHook.ts +++ b/src/hooks/diary/calendarHook.ts @@ -5,14 +5,15 @@ import { useDiaryCounts } from '@api/diary/get'; import { useRecoilState, useSetRecoilState } from 'recoil'; import { snackMessage } from '@stores/snackMessage'; import { markedDateStatus, selectedDateStatus, tense } from '@stores/tense'; -import { getYear, getMonth } from '@utils/dateUtils'; +import { getToday, getYear, getMonth } from '@utils/dateUtils'; +import { isPast, isSameDay } from 'date-fns'; const useCalendarHook = () => { - const [selectedMonth, setSelectedMonth] = useState({ year: getYear(), month: getMonth() }); + const [targetMonth, setTargetMonth] = useState({ year: getYear(), month: getMonth() }); const [selectedDate, setSelectedDate] = useRecoilState(selectedDateStatus); const setDateStatus = useSetRecoilState(tense); const [snackbarText, setSnackbarText] = useRecoilState(snackMessage); - const { data, isPending, isError } = useDiaryCounts(selectedMonth); + const { data, isPending, isError } = useDiaryCounts(targetMonth); const setMarkedDateSet = useSetRecoilState(markedDateStatus); useEffect(() => { @@ -28,7 +29,17 @@ const useCalendarHook = () => { const onMonthChange = (date: DateData) => { const year = date.year.toString(); const month = date.month.toString().padStart(2, '0') as IDate['month']; - setSelectedMonth({ year, month }); + setTargetMonth({ year, month }); + }; + + const saveDateStatus = (date: string) => { + if (isSameDay(date, new Date(getToday()))) { + setDateStatus('TODAY'); + } else if (isPast(new Date(date))) { + setDateStatus('PAST'); + } else { + setDateStatus('FUTURE'); + } }; return { @@ -37,6 +48,8 @@ const useCalendarHook = () => { onDayPress, onMonthChange, setDateStatus, + saveDateStatus, + setTargetMonth, snackbarText, setSnackbarText, markedDates: data || [], diff --git a/src/hooks/diary/useDate.ts b/src/hooks/diary/useDate.ts deleted file mode 100644 index f9acf91..0000000 --- a/src/hooks/diary/useDate.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { tense } from '@stores/tense'; -import { getToday } from '@utils/dateUtils'; -import { isPast, isSameDay } from 'date-fns'; -import { useSetRecoilState } from 'recoil'; - -const useDate = () => { - const setDateStatus = useSetRecoilState(tense); - - const saveDateStatus = (date: string) => { - if (isSameDay(date, new Date(getToday()))) { - setDateStatus('TODAY'); - } else if (isPast(new Date(date))) { - setDateStatus('PAST'); - } else { - setDateStatus('FUTURE'); - } - }; - - return saveDateStatus; -}; - -export default useDate; From f6ac1f670733c8d5d40ff408dc57046f2bd99b8e Mon Sep 17 00:00:00 2001 From: hyobb109 Date: Sun, 7 Jul 2024 03:39:14 +0900 Subject: [PATCH 19/19] =?UTF-8?q?fix:=20selectedDate=EB=B0=94=EB=80=94=20?= =?UTF-8?q?=EB=95=8C=20month=20=EA=B0=99=EC=9D=B4=20=EB=B0=94=EA=BF=94?= =?UTF-8?q?=EC=A4=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/diary/calendar/MyCalendar.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/diary/calendar/MyCalendar.tsx b/src/components/diary/calendar/MyCalendar.tsx index 467f74e..34f2867 100644 --- a/src/components/diary/calendar/MyCalendar.tsx +++ b/src/components/diary/calendar/MyCalendar.tsx @@ -38,15 +38,15 @@ const MyCalendar = () => { useEffect(() => { setSelectedMonth(parseInt(selectedDate.slice(5, 7), 10)); setSelectedYear(parseInt(selectedDate.slice(0, 4), 10)); + setTargetMonth({ + year: selectedYear.toString(), + month: selectedMonth.toString().padStart(2, '0') as IDate['month'], + }); saveDateStatus(selectedDate); }, [selectedDate]); const handleModalDismiss = () => { setSelectedDate(`${selectedYear}-${selectedMonth.toString().padStart(2, '0')}-01`); - setTargetMonth({ - year: selectedYear.toString(), - month: selectedMonth.toString().padStart(2, '0') as IDate['month'], - }); setModalVisible(false); };