Merge pull request #142 from ItRecode/FE-150

[FE-150] feat: 마이 레코드(오늘의 레코드 API 적용)

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<AxiosResponse<IMemoryRecordList>> => {
   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<AxiosResponse<IRecordByDateList>> => {
+  return baseInstance.get(`/record`, {
+    params: {
+      date,
+      page,
+      size,
+    },
+  })
+}

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 (
       <div className="ml-[2px] mt-6 flex gap-6 px-6">
         <div

src/pages/MyRecord/MemoryRecordItem.tsx

@@ -77,11 +77,10 @@ export default function MemoryRecordItem({
             onClick={() => navigate(`/record/${recordId}`)}
           >
             <PlusIcons />
-            <p className="mt-[10px] w-[50px] text-primary-2">전체보기</p>
+            <p className="mt-[10px] w-max text-primary-2">전체보기</p>
           </div>
         )}
       </div>
     </div>
   )
 }
-// e: React.MouseEvent<HTMLDivElement, MouseEvent>,

src/pages/MyRecord/MyRecord.tsx

@@ -26,7 +26,6 @@ export default function MyRecord() {
           <CloseIcon className="absolute right-[10px] cursor-pointer" />
         </div>
       </section>
-      <h1 className="mt-7 px-6 text-2xl font-semibold">마이 레코드</h1>
       <TodayRecord />
       <h2 className="mt-3 px-6 text-lg font-semibold leading-[18px]">
         나만의 추억 레코드

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 (
+    <div className="mt-7 flex items-center justify-between px-6">
+      <h1 className="text-2xl font-semibold">마이 레코드</h1>
+      <Calendar
+        className="cursor-pointer"
+        onClick={() => navigate('/notservice')}
+      />
+    </div>
+  )
+}

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 (
+      <>
+        <MyRecordCalendar />
+        <div className="mt-10 mb-[49px] w-full text-center">
+          <span className="text-xs leading-5">
+            오늘 쓴 레코드가 없어요!
+            <br />
+            레코드를 쓰고 추억을 공유해보세요.
+          </span>
+          <div
+            className="mt-4 cursor-pointer text-sm font-semibold leading-5 text-primary-2 underline underline-offset-4"
+            onClick={() => navigate('/record/add')}
+          >
+            레코드 추가하러 가기
+          </div>
+        </div>
+      </>
+    )
+  }
 
-  // if (!todayWriteRecord) {
   return (
-    <div className="mt-10 mb-[49px] w-full text-center">
-      <span className="text-xs leading-5">
-        오늘 쓴 레코드가 없어요!
-        <br />
-        레코드를 쓰고 추억을 공유해보세요.
-      </span>
-      <div
-        className="mt-4 cursor-pointer text-sm font-semibold leading-5 text-primary-2 underline underline-offset-4"
-        onClick={() => navigate('/record/add')}
-      >
-        레코드 추가하러 가기
+    <>
+      <MyRecordCalendar />
+      <div className="mt-4 mb-10 w-full px-6">
+        <div
+          className="cursor-pointer text-xs"
+          onClick={() => navigate(`/record/${todayRecord.recordId}`)}
+        >
+          {getFormattedDate(new Date(todayRecord.createdAt), 'point')}
+        </div>
+        <div
+          className="mt-4 flex w-fit cursor-pointer"
+          onClick={() => navigate(`/record/${todayRecord.recordId}`)}
+        >
+          <div
+            className={`${background_color} flex h-[86px] w-[86px] items-center rounded-2xl`}
+          >
+            <RecordIcon className="flex aspect-square w-full" />
+          </div>
+          <div className="ml-4 flex flex-col">
+            <div className="inline">
+              <Chip
+                property="small"
+                icon={getChipIconName(todayRecord.categoryName)}
+                message={`${todayRecord.categoryName}`}
+                active={true}
+                pointer={false}
+              />
+            </div>
+            <h2 className="mt-3 text-lg font-semibold leading-[18px]">
+              {todayRecord.title}
+            </h2>
+            <div className="mt-[14px] text-xs leading-4">
+              댓글 {todayRecord.commentCount}개
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
+    </>
   )
-  // }
-
-  // return (
-  //   <div className="mt-4 mb-10 w-full px-6">
-  //     {/* TODO: 레코드 만든 날짜 === 오늘 날짜 포맷팅하기*/}
-  //     <div className="text-xs">{todayWriteRecord.createdAt}</div>
-  //     <div className="mt-4 flex">
-  //       <div
-  //         className={`${background_color} flex h-[86px] w-[86px] items-center rounded-2xl`}
-  //       >
-  //         <RecordIcon className="flex aspect-square w-full" />
-  //       </div>
-  //       <div className="ml-4 flex flex-col">
-  //         <Chip
-  //           property="small"
-  //           icon={getChipIconName(todayWriteRecord.categoryName)}
-  //           message={`${todayWriteRecord.categoryName}`}
-  //           active={true}
-  //           pointer={false}
-  //         />
-  //         <h2 className="mt-3 text-lg font-semibold leading-[18px]">
-  //           {todayWriteRecord.title}
-  //         </h2>
-  //         <div className="mt-[14px] text-xs leading-4">
-  //           댓글 {todayWriteRecord.commentCount}개
-  //         </div>
-  //       </div>
-  //     </div>
-  //   </div>
-  // )
 }

src/react-query/hooks/useMemoryRecord.ts

@@ -20,9 +20,6 @@ export const useMemoryRecord = () => {
       return null
     },
     retry: false,
-    refetchOnMount: false,
-    refetchOnReconnect: false,
-    refetchOnWindowFocus: false,
   })
 
   return {

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,
+  }
+}

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 }

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
+}

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}`
+}