diff --git a/src/apis/record.ts b/src/apis/record.ts index 5f7866b..ccdd581 100644 --- a/src/apis/record.ts +++ b/src/apis/record.ts @@ -1,3 +1,9 @@ +import { AxiosResponse } from 'axios' +import { + IMemoryRecordList, + IMyRecordRequestParam, + IRecordByDateList, +} from 'types/recordData' import { baseInstance } from './instance' const MEMORY_RECORD_SIZE = 7 @@ -20,7 +26,9 @@ export const getRecord = async (recordId: string | undefined) => { } } -export const getMemoryRecord = (pageParam: number) => { +export const getMemoryRecord = ( + pageParam: number +): Promise> => { return baseInstance.get(`/record/memory`, { params: { memoryRecordPage: pageParam, @@ -36,3 +44,17 @@ export const deleteRecord = async (recordId: string | undefined) => { return res.data } } + +export const getRecordByDate = ({ + date, + page, + size, +}: IMyRecordRequestParam): Promise> => { + return baseInstance.get(`/record`, { + params: { + date, + page, + size, + }, + }) +} diff --git a/src/assets/myRecordIcon/calendar.svg b/src/assets/myRecordIcon/calendar.svg new file mode 100644 index 0000000..014a1c8 --- /dev/null +++ b/src/assets/myRecordIcon/calendar.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/MyRecord/MemoryRecord.tsx b/src/pages/MyRecord/MemoryRecord.tsx index ca38194..eb8f25c 100644 --- a/src/pages/MyRecord/MemoryRecord.tsx +++ b/src/pages/MyRecord/MemoryRecord.tsx @@ -19,7 +19,7 @@ export default function MemoryRecord() { return <> } - if (!memoryRecord?.pages[0].data) { + if (!memoryRecord?.pages[0].data.totalCount) { return (
navigate(`/record/${recordId}`)} > -

전체보기

+

전체보기

)}
) } -// e: React.MouseEvent, diff --git a/src/pages/MyRecord/MyRecord.tsx b/src/pages/MyRecord/MyRecord.tsx index 3939870..0759da4 100644 --- a/src/pages/MyRecord/MyRecord.tsx +++ b/src/pages/MyRecord/MyRecord.tsx @@ -26,7 +26,6 @@ export default function MyRecord() { -

마이 레코드

나만의 추억 레코드 diff --git a/src/pages/MyRecord/MyRecordCalendar.tsx b/src/pages/MyRecord/MyRecordCalendar.tsx new file mode 100644 index 0000000..6d5b4f0 --- /dev/null +++ b/src/pages/MyRecord/MyRecordCalendar.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import { ReactComponent as Calendar } from '@assets/myRecordIcon/calendar.svg' +import { useNavigate } from 'react-router-dom' + +export default function MyRecordCalendar() { + const navigate = useNavigate() + + return ( +
+

마이 레코드

+ navigate('/notservice')} + /> +
+ ) +} diff --git a/src/pages/MyRecord/TodayRecord.tsx b/src/pages/MyRecord/TodayRecord.tsx index 788c1b9..530c2b7 100644 --- a/src/pages/MyRecord/TodayRecord.tsx +++ b/src/pages/MyRecord/TodayRecord.tsx @@ -1,60 +1,81 @@ import React from 'react' import { useNavigate } from 'react-router-dom' -// import { ITodayRecord } from 'types/recordData' -// import { getChipIconName } from '@pages/DetailRecord/getChipIconName' -// import Chip from '@components/Chip' -// import recordIcons from '@assets/record_icons' +import { useMyRecord } from '@react-query/hooks/useMyRecord' +import { getChipIconName } from '@pages/DetailRecord/getChipIconName' +import Chip from '@components/Chip' +import recordIcons from '@assets/record_icons' +import { getFormattedDate } from '@utils/getFormattedDate' +import MyRecordCalendar from './MyRecordCalendar' export default function TodayRecord() { const navigate = useNavigate() - // const todayWriteRecord = null - // const background_color = `bg-${todayWriteRecord?.colorName}` - // const RecordIcon = recordIcons[`${todayWriteRecord?.iconName}`] + const { todayRecord, isLoading } = useMyRecord() + const background_color = `bg-${todayRecord?.colorName}` + const RecordIcon = recordIcons[`${todayRecord?.iconName}`] + + if (isLoading) { + return <> + } + + if (!todayRecord) { + return ( + <> + +
+ + 오늘 쓴 레코드가 없어요! +
+ 레코드를 쓰고 추억을 공유해보세요. + +
navigate('/record/add')} + > + 레코드 추가하러 가기 +
+
+ + ) + } - // if (!todayWriteRecord) { return ( -
- - 오늘 쓴 레코드가 없어요! -
- 레코드를 쓰고 추억을 공유해보세요. - -
navigate('/record/add')} - > - 레코드 추가하러 가기 + <> + +
+
navigate(`/record/${todayRecord.recordId}`)} + > + {getFormattedDate(new Date(todayRecord.createdAt), 'point')} +
+
navigate(`/record/${todayRecord.recordId}`)} + > +
+ +
+
+
+ +
+

+ {todayRecord.title} +

+
+ 댓글 {todayRecord.commentCount}개 +
+
+
-
+ ) - // } - - // return ( - //
- // {/* TODO: 레코드 만든 날짜 === 오늘 날짜 포맷팅하기*/} - //
{todayWriteRecord.createdAt}
- //
- //
- // - //
- //
- // - //

- // {todayWriteRecord.title} - //

- //
- // 댓글 {todayWriteRecord.commentCount}개 - //
- //
- //
- //
- // ) } diff --git a/src/react-query/hooks/useMemoryRecord.ts b/src/react-query/hooks/useMemoryRecord.ts index b07b5fc..4229760 100644 --- a/src/react-query/hooks/useMemoryRecord.ts +++ b/src/react-query/hooks/useMemoryRecord.ts @@ -20,9 +20,6 @@ export const useMemoryRecord = () => { return null }, retry: false, - refetchOnMount: false, - refetchOnReconnect: false, - refetchOnWindowFocus: false, }) return { diff --git a/src/react-query/hooks/useMyRecord.ts b/src/react-query/hooks/useMyRecord.ts new file mode 100644 index 0000000..95c60a6 --- /dev/null +++ b/src/react-query/hooks/useMyRecord.ts @@ -0,0 +1,26 @@ +import { QUERY_KEYS } from '@react-query/queryKeys' +import { useQuery } from '@tanstack/react-query' +import { getRecordByDate } from '@apis/record' +import { getFormattedDate } from '@utils/getFormattedDate' + +export const useMyRecord = () => { + const today = new Date() + + const { data: records = null, isLoading } = useQuery( + [QUERY_KEYS.todayRecord], + async () => + await getRecordByDate({ + date: getFormattedDate(today, 'hyphen'), + page: 0, + size: 1, + }), + { + retry: false, + } + ) + + return { + todayRecord: records?.data.recordByDateDtos[0], + isLoading, + } +} diff --git a/src/react-query/hooks/useUser.ts b/src/react-query/hooks/useUser.ts index e292ec3..885de81 100644 --- a/src/react-query/hooks/useUser.ts +++ b/src/react-query/hooks/useUser.ts @@ -9,9 +9,6 @@ export const useUser = () => { isLoading, } = useQuery([QUERY_KEYS.user], async () => await getUserInfo(), { retry: false, - refetchOnMount: false, - refetchOnReconnect: false, - refetchOnWindowFocus: false, }) return { user, refetch, isLoading } diff --git a/src/types/recordData.ts b/src/types/recordData.ts index 88d5b89..2db06ae 100644 --- a/src/types/recordData.ts +++ b/src/types/recordData.ts @@ -11,20 +11,10 @@ export interface IRecordDataType { imageUrls: string[] } -export interface ITodayRecord { - title: string - categoryName: string - commentCount: number - iconName: string - colorName: string - createdAt: string -} - export interface IMemoryRecordList { - hasNextPage: boolean - isFirstPage: boolean - isLastPage: boolean memoryRecordList: IMemoryRecord[] + totalCount: number + totalPage: number } export interface IMemoryRecord { @@ -39,3 +29,25 @@ export interface IRecordMemoryComment { commentId: number content: string } + +export interface IRecordByDate { + recordId: number + title: string + categoryName: string + commentCount: number + iconName: string + colorName: string + createdAt: string +} + +export interface IRecordByDateList { + recordByDateDtos: IRecordByDate[] + totalCount: number + totalPage: number +} + +export interface IMyRecordRequestParam { + date: string + page: number + size: number +} diff --git a/src/utils/getFormattedDate.ts b/src/utils/getFormattedDate.ts new file mode 100644 index 0000000..9197f17 --- /dev/null +++ b/src/utils/getFormattedDate.ts @@ -0,0 +1,13 @@ +const DATE_JOIN_POINT = 'point' + +export const getFormattedDate = (date: Date, type: string) => { + const year = date.getFullYear() + const month = (date.getMonth() + 1).toString().padStart(2, '0') + const day = date.getDate().toString().padStart(2, '0') + + if (type === DATE_JOIN_POINT) { + return `${year}.${month}.${day}` + } + + return `${year}-${month}-${day}` +}