diff --git a/app/record/page.tsx b/app/record/page.tsx index 96ed4c01..80585ffe 100644 --- a/app/record/page.tsx +++ b/app/record/page.tsx @@ -1,13 +1,28 @@ import { cookies } from 'next/headers'; import { Suspense } from 'react'; -import { Form, RecordHeaderBar, RecordWarning } from '@/features/record'; +import { + Form, + PoolInfoDataProps, + RecordHeaderBar, + RecordWarning, + SwimTimeDataProps, +} from '@/features/record'; import { css } from '@/styled-system/css'; import { flex } from '@/styled-system/patterns'; export default function RecordPage() { - const prevSwimStartTime = cookies().get('swimStartTime')?.value; - const prevSwimEndTime = cookies().get('swimEndTime')?.value; + const savedSwimTimeData = cookies().get('swimTime') + ? (JSON.parse( + cookies().get('swimTime')?.value as string, + ) as SwimTimeDataProps) + : undefined; + const savedPoolInfoData = cookies().get('poolInfo') + ? (JSON.parse( + cookies().get('poolInfo')?.value as string, + ) as PoolInfoDataProps) + : undefined; + return (
@@ -19,8 +34,8 @@ export default function RecordPage() {

기본정보

diff --git a/features/record/components/organisms/form.tsx b/features/record/components/organisms/form.tsx index 8729c71d..cfa11a8d 100644 --- a/features/record/components/organisms/form.tsx +++ b/features/record/components/organisms/form.tsx @@ -32,9 +32,10 @@ import { usePullEditMemory, } from '../../apis'; import { useRecordForm } from '../../hooks'; -import { saveSwimTime } from '../../server-actions'; +import { saveSwimData } from '../../server-actions'; import { formSubInfoState } from '../../store/form-sub-info'; import { formSectionStyles } from '../../styles/form-section'; +import { PoolInfoDataProps, SwimTimeDataProps } from '../../types'; import { isFuture } from '../../utils'; import { DiarySection } from './diary-section'; import { DistancePageModal } from './distance-page-modal'; @@ -46,13 +47,13 @@ import { SubInfoSection } from './sub-info-section'; import { TimeBottomSheet } from './time-bottom-sheet'; interface FormProps { - prevSwimStartTime?: string; - prevSwimEndTime?: string; + savedSwimTimeData?: SwimTimeDataProps; + savedPoolInfoData?: PoolInfoDataProps; } //Todo: 코드 개선 //Todo: 수정모드일 시, 불러온 기록 데이터에서 차이가 없을 때는 버튼 disabled -export function Form({ prevSwimStartTime, prevSwimEndTime }: FormProps) { +export function Form({ savedSwimTimeData, savedPoolInfoData }: FormProps) { const searchParams = useSearchParams(); const date = searchParams.get('date'); const memoryId = searchParams.get('memoryId'); @@ -68,9 +69,10 @@ export function Form({ prevSwimStartTime, prevSwimEndTime }: FormProps) { const methods = useForm({ defaultValues: { recordAt: date ? formatDateToKorean(date) : getToday(), - startTime: prevSwimStartTime ? prevSwimStartTime : '', - endTime: prevSwimEndTime ? prevSwimEndTime : '', - poolName: '', + startTime: savedSwimTimeData ? savedSwimTimeData.start : '', + endTime: savedSwimTimeData ? savedSwimTimeData.end : '', + poolId: savedPoolInfoData ? savedPoolInfoData.id : undefined, + poolName: savedPoolInfoData ? savedPoolInfoData.name : '', laneMeter: '25m', lane: 25, totalDistance: '', @@ -151,7 +153,7 @@ export function Form({ prevSwimStartTime, prevSwimEndTime }: FormProps) { }); const { isLoading, modifySubmitData, modifyStrokesData, handlers } = - useRecordForm(lane, isEditMode, prevSwimStartTime); + useRecordForm(lane, isEditMode, savedSwimTimeData?.start); const handleRecordEditSuccess = () => { handlers.onChangeIsLoading(false); @@ -236,7 +238,21 @@ export function Form({ prevSwimStartTime, prevSwimEndTime }: FormProps) { } //기록 생성 모드일 때 else { - saveSwimTime(submitData.startTime, submitData.endTime); + saveSwimData({ + swimTimeData: { + start: submitData.startTime, + end: submitData.endTime, + }, + savedSwimTimeData, + poolInfoData: + submitData.poolId && data.poolName + ? { + id: submitData.poolId, + name: data.poolName, + } + : undefined, + savedPoolInfoData, + }); //기록에서 이미지가 포함되었을 때 if (formSubInfo.imageFiles.length > 0) { const getImagePresignedUrlRes = await getImagePresignedUrl([ diff --git a/features/record/server-actions/index.ts b/features/record/server-actions/index.ts index 393d9650..8517ae6c 100644 --- a/features/record/server-actions/index.ts +++ b/features/record/server-actions/index.ts @@ -1,2 +1,2 @@ export * from './revalidate-record-detail'; -export * from './save-swim-time'; +export * from './save-swim-data'; diff --git a/features/record/server-actions/save-swim-data.ts b/features/record/server-actions/save-swim-data.ts new file mode 100644 index 00000000..d115a4fa --- /dev/null +++ b/features/record/server-actions/save-swim-data.ts @@ -0,0 +1,58 @@ +'use server'; + +import { cookies } from 'next/headers'; + +import { PoolInfoDataProps, SwimTimeDataProps } from '../types'; + +interface SaveSwimDataProps { + swimTimeData: SwimTimeDataProps; + savedSwimTimeData?: SwimTimeDataProps; + poolInfoData?: PoolInfoDataProps; + savedPoolInfoData?: PoolInfoDataProps; +} + +//cookie에 가장 최근 수영 기록 정보를 저장하는 함수 +export const saveSwimData = ({ + swimTimeData, + savedSwimTimeData, + poolInfoData, + savedPoolInfoData, +}: SaveSwimDataProps) => { + if ( + //저장된 수영 시간이 없거나 + !savedSwimTimeData || + //저장된 수영 시간이 있지만, 현재 생성한 기록의 수영 시간과 다르면 + (savedSwimTimeData && + (savedSwimTimeData.start !== swimTimeData.start || + savedSwimTimeData.end !== swimTimeData.end)) + ) + cookies().set( + 'swimTime', + JSON.stringify({ start: swimTimeData.start, end: swimTimeData.end }), + { + maxAge: Infinity, + httpOnly: true, + secure: true, + }, + ); + + //현재 생성한 기록에 수영장 정보가 포함되어 있을 때 + if (poolInfoData) { + //저장된 수영장 정보가 없거나 + if ( + !savedPoolInfoData || + //저장된 수영장 정보가 있지만, 현재 생성한 기록의 수영장 정보와 다르다면 + (savedPoolInfoData && savedPoolInfoData.id !== poolInfoData.id) + ) { + cookies().set( + 'poolInfo', + JSON.stringify({ name: poolInfoData.name, id: poolInfoData.id }), + { + maxAge: Infinity, + httpOnly: true, + secure: true, + }, + ); + } + } +}; diff --git a/features/record/server-actions/save-swim-time.ts b/features/record/server-actions/save-swim-time.ts deleted file mode 100644 index af85b6d0..00000000 --- a/features/record/server-actions/save-swim-time.ts +++ /dev/null @@ -1,23 +0,0 @@ -'use server'; - -import { cookies } from 'next/headers'; - -export const saveSwimTime = (startTime: string, endTime: string) => { - const prevSwimStartTime = cookies().get('swimStartTime')?.value; - const prevSwimEndTime = cookies().get('swimEndTime')?.value; - if ( - !prevSwimStartTime || - (prevSwimStartTime && prevSwimStartTime !== startTime) - ) - cookies().set('swimStartTime', startTime, { - maxAge: Infinity, - httpOnly: true, - secure: true, - }); - if (!prevSwimEndTime || (prevSwimEndTime && prevSwimEndTime !== endTime)) - cookies().set('swimEndTime', endTime, { - maxAge: Infinity, - httpOnly: true, - secure: true, - }); -}; diff --git a/features/record/types/index.ts b/features/record/types/index.ts index b711e5b9..30a08a9f 100644 --- a/features/record/types/index.ts +++ b/features/record/types/index.ts @@ -1,3 +1,4 @@ export * from './form-section'; +export * from './saved-swim-data'; export * from './stroke'; export * from './time'; diff --git a/features/record/types/saved-swim-data.ts b/features/record/types/saved-swim-data.ts new file mode 100644 index 00000000..c1bc0582 --- /dev/null +++ b/features/record/types/saved-swim-data.ts @@ -0,0 +1,10 @@ +//cookie에 저장될 수 있는 수영 기록 정보 types +export interface SwimTimeDataProps { + start: string; + end: string; +} + +export interface PoolInfoDataProps { + name: string; + id: number; +}