chore: 웹앱에서의 사용성을 고려하여 쿠키로 전환

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 (
     <div>
       <RecordHeaderBar title="수영 기록하기" />
@@ -15,7 +33,10 @@ export default function RecordPage() {
       {/* Title 컴포넌트 생성 시 대체 */}
       <h1 className={titleStyles.form}>기본정보</h1>
       <Suspense>
-        <Form />
+        <Form
+          savedSwimTimeData={savedSwimTimeData}
+          savedPoolInfoData={savedPoolInfoData}
+        />
       </Suspense>
     </div>
   );

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([

features/record/server-actions/index.ts

@@ -1 +1,2 @@
 export * from './revalidate-record-detail';
+export * from './save-swim-data';

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

features/record/types/index.ts

@@ -1,3 +1,4 @@
 export * from './form-section';
+export * from './saved-swim-data';
 export * from './stroke';
 export * from './time';

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

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';