Merge pull request #252 from ItRecode/FE-234

sookyeonghwang · web-flow · commit b137e52fc517 · 2023-03-02T15:04:15.000+09:00
[FE-234] feat: 추억레코드 캘린더 API 연동 구현
diff --git a/src/apis/myRecord.ts b/src/apis/myRecord.ts
@@ -12,10 +12,12 @@ const MEMORY_COMMENT_SIZE = 5
 const MY_RECORD_KEYWORD_SIZE = 10
 
 export const getMemoryRecord = (
-  pageParam: number
+  pageParam: number,
+  date: string
 ): Promise<AxiosResponse<IMemoryRecordList>> => {
   return baseInstance.get(`/record/memory`, {
     params: {
+      date,
       memoryRecordPage: pageParam,
       memoryRecordSize: MEMORY_RECORD_SIZE,
       sizeOfCommentPerRecord: MEMORY_COMMENT_SIZE,
diff --git a/src/pages/MyRecord/Calendar/Calendar.tsx b/src/pages/MyRecord/Calendar/Calendar.tsx
@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useState } from 'react'
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'
 import { ReactComponent as CloseIcon } from '@assets/myRecordIcon/close.svg'
 import { ReactComponent as ArrowDown } from '@assets/myRecordIcon/arrow_down.svg'
 import { ReactComponent as ArrowUp } from '@assets/myRecordIcon/arrow_up.svg'
@@ -7,7 +7,8 @@ import Button from '@components/Button'
 import DateBox from './DateBox'
 import CalendarMonthYear from './CalendarMonthYear'
 import { useMyRecordByMonthYear } from '@react-query/hooks/useMyRecordByMonthYear'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { getMonthYearDetail } from './getCalendarDetail'
 
 interface CalendarProps {
   setIsOpenCalendar: Dispatch<SetStateAction<boolean>>
@@ -16,6 +17,7 @@ interface CalendarProps {
 const WEEK_TO_KR = ['일', '월', '화', '수', '목', '금', '토']
 
 export default function Calendar({ setIsOpenCalendar }: CalendarProps) {
+  const { state } = useLocation()
   const navigate = useNavigate()
   const { today, monthYear, setMonthYear, recordsWithMonthYear } =
     useMyRecordByMonthYear()
@@ -25,7 +27,17 @@ export default function Calendar({ setIsOpenCalendar }: CalendarProps) {
     setIsOpenCalendar(false)
   })
   const isTodayMonthYear =
-    monthYear.month === today.month && monthYear.year && today.month
+    monthYear.month === today.month && monthYear.year === today.year
+  const isFutureMonthYear =
+    monthYear.month > today.month && monthYear.year === today.year
+
+  useEffect(() => {
+    if (state) {
+      setIsClickMonthYear(false)
+      setMonthYear(getMonthYearDetail(new Date(`${state.year}-${state.month}`)))
+      setSelectedDate(state.day)
+    }
+  }, [])
 
   return (
     <div className="fixed top-0 z-30 block h-full w-full">
@@ -70,6 +82,7 @@ export default function Calendar({ setIsOpenCalendar }: CalendarProps) {
                   hasRecord={recordsWithMonthYear?.includes(1)}
                   selectedDate={selectedDate}
                   setSelectedDate={setSelectedDate}
+                  isFutureMonthYear={isFutureMonthYear}
                 />
                 {[...Array(monthYear.lastDayOfMonth)].map((_, i) =>
                   i > 0 ? (
@@ -80,6 +93,7 @@ export default function Calendar({ setIsOpenCalendar }: CalendarProps) {
                       selectedDate={selectedDate}
                       hasRecord={recordsWithMonthYear?.includes(i + 1)}
                       setSelectedDate={setSelectedDate}
+                      isFutureMonthYear={isFutureMonthYear}
                     />
                   ) : null
                 )}
@@ -89,7 +103,16 @@ export default function Calendar({ setIsOpenCalendar }: CalendarProps) {
                   aria-label="select-record-date-button"
                   property={'solid'}
                   active={selectedDate !== 0}
-                  onClick={() => navigate('/myrecord/date')}
+                  onClick={() =>
+                    navigate('/myrecord/date', {
+                      state: {
+                        year: monthYear.year,
+                        month: monthYear.month,
+                        day: selectedDate,
+                      },
+                      replace: state ? true : false,
+                    })
+                  }
                 >
                   선택
                 </Button>
@@ -102,6 +125,7 @@ export default function Calendar({ setIsOpenCalendar }: CalendarProps) {
               year={monthYear.year}
               setIsChangedMonthYear={setIsClickMonthYear}
               setMonthYear={setMonthYear}
+              setSelectedDate={setSelectedDate}
             />
           )}
         </div>
diff --git a/src/pages/MyRecord/Calendar/CalendarMonthYear.tsx b/src/pages/MyRecord/Calendar/CalendarMonthYear.tsx
@@ -6,13 +6,15 @@ import { getMonthYearDetail, MonthYear } from './getCalendarDetail'
 interface CalendarMonthYearProps extends Pick<MonthYear, 'month' | 'year'> {
   setMonthYear: Dispatch<SetStateAction<MonthYear>>
   setIsChangedMonthYear: Dispatch<SetStateAction<boolean>>
+  setSelectedDate: Dispatch<SetStateAction<number>>
 }
 
 export default function CalendarMonthYear({
   month,
   year,
   setMonthYear,
   setIsChangedMonthYear,
+  setSelectedDate,
 }: CalendarMonthYearProps) {
   const [selectedMonth, setSelectedMonth] = useState(month)
   const [selectedYear, setSelectedYear] = useState(year)
@@ -65,6 +67,7 @@ export default function CalendarMonthYear({
   const setSelectedMonthYear = () => {
     const selectedDate = new Date(selectedYear, selectedMonth - 1)
     setMonthYear(getMonthYearDetail(selectedDate))
+    setSelectedDate(0)
     setIsChangedMonthYear(false)
   }
 
diff --git a/src/pages/MyRecord/Calendar/CalendarRecord.tsx b/src/pages/MyRecord/Calendar/CalendarRecord.tsx
@@ -1,10 +1,42 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useLocation } from 'react-router-dom'
 import Calendar from './Calendar'
 import BackButton from '@components/BackButton'
+import Spinner from '@components/Spinner'
+import MemoryRecordCard from '../Common/MemoryRecordCard'
+import { useMemoryRecord } from '@react-query/hooks/useMemoryRecord'
+import { getFormattedDate } from '@utils/getFormattedDate'
+import { IMemoryRecord } from 'types/myRecord'
 import { ReactComponent as CalendarIcon } from '@assets/myRecordIcon/calendar.svg'
+import { ReactComponent as ArrowDown } from '@assets/myRecordIcon/arrow_down.svg'
 
 export default function CalendarRecord() {
   const [isOpenCalendar, setIsOpenCalendar] = useState(false)
+  const { state } = useLocation()
+  const {
+    memoryRecord,
+    isLoading,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+    setDate,
+  } = useMemoryRecord()
+
+  useEffect(() => {
+    if (state) {
+      setIsOpenCalendar(false)
+      setDate(
+        getFormattedDate(
+          new Date(`${state.year}-${state.month}-${state.day}`),
+          'hyphen'
+        )
+      )
+    }
+  }, [state])
+
+  if (isLoading) {
+    return <></>
+  }
 
   return (
     <>
@@ -17,14 +49,49 @@ export default function CalendarRecord() {
         </div>
         <div className="mt-6 flex items-center justify-between px-6">
           <h2 className="text-lg font-semibold leading-[18px]">
-            2023년 2월 1일의 추억 레코드
+            {`${state.year}년 ${state.month}월 ${state.day}일의 추억 레코드`}
           </h2>
           <CalendarIcon
             className="cursor-pointer"
             onClick={() => setIsOpenCalendar(true)}
           />
         </div>
       </section>
+      <section id="date-selected-result-records">
+        {memoryRecord?.pages.map(({ data }) =>
+          data.memoryRecordList.map((memoryRecord: IMemoryRecord) => (
+            <MemoryRecordCard
+              key={memoryRecord.recordId}
+              recordId={memoryRecord.recordId}
+              title={memoryRecord.title}
+              iconName={memoryRecord.iconName}
+              colorName={memoryRecord.colorName}
+              memoryRecordComments={memoryRecord.memoryRecordComments}
+            />
+          ))
+        )}
+        <div className="relative mb-[100px] h-[80px]">
+          {hasNextPage && (
+            <button
+              className={`w-full bg-grey-1 ${
+                !isFetchingNextPage && 'cursor-pointer border-t border-t-grey-3'
+              }`}
+              onClick={() => fetchNextPage()}
+            >
+              <div className="flex items-center justify-center py-2">
+                {isFetchingNextPage ? (
+                  <Spinner size="button" />
+                ) : (
+                  <div className="py-2">
+                    <span className="text-sm text-primary-2">더보기</span>
+                    <ArrowDown className="ml-[10px]" />
+                  </div>
+                )}
+              </div>
+            </button>
+          )}
+        </div>
+      </section>
       {isOpenCalendar && <Calendar setIsOpenCalendar={setIsOpenCalendar} />}
     </>
   )
diff --git a/src/pages/MyRecord/Calendar/DateBox.tsx b/src/pages/MyRecord/Calendar/DateBox.tsx
@@ -7,6 +7,7 @@ interface DateBoxProps {
   hasRecord?: boolean
   selectedDate: number
   setSelectedDate: Dispatch<SetStateAction<number>>
+  isFutureMonthYear: boolean
 }
 
 export default function DateBox({
@@ -16,15 +17,18 @@ export default function DateBox({
   hasRecord,
   selectedDate,
   setSelectedDate,
+  isFutureMonthYear,
 }: DateBoxProps) {
   const [isClickedDay, setIsClickedDay] = useState(false)
   const [disabledDay, setDisabledDay] = useState(false)
 
   useEffect(() => {
-    if (todayDate && date > todayDate) {
+    if ((todayDate && date > todayDate) || isFutureMonthYear) {
       setDisabledDay(true)
+    } else {
+      setDisabledDay(false)
     }
-  }, [])
+  }, [disabledDay])
 
   useEffect(() => {
     if (selectedDate === date) {
diff --git a/src/pages/MyRecord/MyRecord.tsx b/src/pages/MyRecord/MyRecord.tsx
@@ -54,10 +54,7 @@ export default function MyRecord() {
             </h2>
             <CalendarIcon
               className="cursor-pointer"
-              onClick={() => {
-                navigate('/notservice')
-                // setIsOpenCalendar(true)
-              }}
+              onClick={() => setIsOpenCalendar(true)}
             />
           </div>
           <MemoryRecord />
diff --git a/src/react-query/hooks/useMemoryRecord.ts b/src/react-query/hooks/useMemoryRecord.ts
@@ -1,17 +1,21 @@
 import { QUERY_KEYS } from '@react-query/queryKeys'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { getMemoryRecord } from '@apis/myRecord'
+import { useState } from 'react'
 
 export const useMemoryRecord = () => {
+  const [date, setDate] = useState('')
+
   const {
     data: memoryRecord = null,
     isLoading,
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
   } = useInfiniteQuery({
-    queryKey: [QUERY_KEYS.memoryRecord],
-    queryFn: async ({ pageParam = 0 }) => await getMemoryRecord(pageParam),
+    queryKey: [QUERY_KEYS.memoryRecord, date],
+    queryFn: async ({ pageParam = 0 }) =>
+      await getMemoryRecord(pageParam, date),
     getNextPageParam: (lastPage): number | null => {
       const { data, config } = lastPage
       if (data.totalPage > config.params.memoryRecordPage + 1) {
@@ -27,5 +31,6 @@ export const useMemoryRecord = () => {
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
+    setDate,
   }
 }
diff --git a/src/react-query/hooks/useMyRecordByMonthYear.ts b/src/react-query/hooks/useMyRecordByMonthYear.ts
@@ -11,7 +11,7 @@ export const useMyRecordByMonthYear = () => {
   )
 
   const { data = null, isLoading } = useQuery(
-    [monthYear.month, monthYear],
+    [monthYear.month, monthYear.year],
     async () =>
       await getRecordByMonthYear(
         getFormattedDateWithMonthYear(monthYear.year, monthYear.month)

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ export const useMyRecordByMonthYear = () => {`
`11`	`11`	`)`
`12`	`12`
`13`	`13`	`const { data = null, isLoading } = useQuery(`
`14`		`- [monthYear.month, monthYear],`
	`14`	`+ [monthYear.month, monthYear.year],`
`15`	`15`	`async () =>`
`16`	`16`	`await getRecordByMonthYear(`
`17`	`17`	`getFormattedDateWithMonthYear(monthYear.year, monthYear.month)`