diff --git a/app/record/page.tsx b/app/record/page.tsx index aa00cf1f..80585ffe 100644 --- a/app/record/page.tsx +++ b/app/record/page.tsx @@ -1,10 +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 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 (
@@ -15,7 +33,10 @@ export default function RecordPage() { {/* Title 컴포넌트 생성 시 대체 */}

기본정보

-
+
); diff --git a/features/record/components/organisms/form.tsx b/features/record/components/organisms/form.tsx index d9b1eecc..cfa11a8d 100644 --- a/features/record/components/organisms/form.tsx +++ b/features/record/components/organisms/form.tsx @@ -32,9 +32,11 @@ import { usePullEditMemory, } from '../../apis'; import { useRecordForm } from '../../hooks'; +import { saveSwimData } from '../../server-actions'; import { formSubInfoState } from '../../store/form-sub-info'; import { formSectionStyles } from '../../styles/form-section'; -import { getSavedSwimData, isFuture, saveSwimData } from '../../utils'; +import { PoolInfoDataProps, SwimTimeDataProps } from '../../types'; +import { isFuture } from '../../utils'; import { DiarySection } from './diary-section'; import { DistancePageModal } from './distance-page-modal'; import { EquipmentSection } from './equipment-section'; @@ -44,9 +46,14 @@ import { PoolSearchPageModal } from './pool-search-page-modal'; import { SubInfoSection } from './sub-info-section'; import { TimeBottomSheet } from './time-bottom-sheet'; +interface FormProps { + savedSwimTimeData?: SwimTimeDataProps; + savedPoolInfoData?: PoolInfoDataProps; +} + //Todo: 코드 개선 //Todo: 수정모드일 시, 불러온 기록 데이터에서 차이가 없을 때는 버튼 disabled -export function Form() { +export function Form({ savedSwimTimeData, savedPoolInfoData }: FormProps) { const searchParams = useSearchParams(); const date = searchParams.get('date'); const memoryId = searchParams.get('memoryId'); @@ -55,8 +62,6 @@ export function Form() { Number(memoryId), ); - const { savedSwimTimeData, savedPoolInfoData } = getSavedSwimData(); - const [formSubInfo, setFormSubInfo] = useAtom(formSubInfoState); const { toast } = useToast(); @@ -233,12 +238,21 @@ export function Form() { } //기록 생성 모드일 때 else { - saveSwimData( - submitData.startTime, - submitData.endTime, - data.poolName, - submitData.poolId, - ); + 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 d1c0f070..8517ae6c 100644 --- a/features/record/server-actions/index.ts +++ b/features/record/server-actions/index.ts @@ -1 +1,2 @@ export * from './revalidate-record-detail'; +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/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; +} diff --git a/features/record/utils/index.ts b/features/record/utils/index.ts index 25568c7d..4d71b242 100644 --- a/features/record/utils/index.ts +++ b/features/record/utils/index.ts @@ -1,5 +1,4 @@ export * from './highlight-text'; export * from './is-future'; export * from './remove-special-symbols'; -export * from './swim-data'; export * from './time'; diff --git a/features/record/utils/swim-data.ts b/features/record/utils/swim-data.ts deleted file mode 100644 index 43eeb4c4..00000000 --- a/features/record/utils/swim-data.ts +++ /dev/null @@ -1,60 +0,0 @@ -interface SwimTimeProps { - start: string; - end: string; -} - -interface PoolInfoProps { - name: string; - id: number; -} - -//로컬 스토리지에 저장되어 있는 수영 정보를 가져오는 함수 -export const getSavedSwimData = () => { - const savedSwimTimeData = localStorage.getItem('swimTime') - ? (JSON.parse(localStorage.getItem('swimTime') as string) as SwimTimeProps) - : undefined; - - const savedPoolInfoData = localStorage.getItem('poolInfo') - ? (JSON.parse(localStorage.getItem('poolInfo') as string) as PoolInfoProps) - : undefined; - - return { savedSwimTimeData, savedPoolInfoData }; -}; - -//로컬 스토리지에 가장 최근 수영 기록 정보를 저장하는 함수 -export const saveSwimData = ( - swimStartTime: string, - swimEndTime: string, - poolName?: string, - poolId?: number, -) => { - const { savedSwimTimeData, savedPoolInfoData } = getSavedSwimData(); - - if ( - //저장된 수영 시간이 없거나 - !savedSwimTimeData || - //저장된 수영 시간이 있지만, 현재 생성한 기록의 수영 시간과 다르면 - (savedSwimTimeData && - (savedSwimTimeData.start !== swimStartTime || - savedSwimTimeData.end !== swimEndTime)) - ) - localStorage.setItem( - 'swimTime', - JSON.stringify({ start: swimStartTime, end: swimEndTime }), - ); - - //현재 생성한 기록에 수영장 정보가 포함되어 있을 때 - if (poolName && poolId) { - //저장된 수영장 정보가 없거나 - if ( - !savedPoolInfoData || - //저장된 수영장 정보가 있지만, 현재 생성한 기록의 수영장 정보와 다르다면 - (savedPoolInfoData && savedPoolInfoData.id !== poolId) - ) { - localStorage.setItem( - 'poolInfo', - JSON.stringify({ name: poolName, id: poolId }), - ); - } - } -};