[공통] Storage 접근 제한 환경에서 클라이언트 예외 발생 (#1260)

Author: ff1451

src/components/Course/hooks/useSelectedCourses.ts

@@ -1,23 +1,15 @@
 import { useMemo, useState } from 'react';
 import { PreCourse } from 'api/course/entity';
+import { isomorphicSessionStorage } from 'utils/ts/env';
 
 const SELECTED_COURSES_KEY = 'selected-courses';
 
 const getStoredCourses = (): PreCourse[] => {
-  try {
-    const stored = sessionStorage.getItem(SELECTED_COURSES_KEY);
-    return stored ? JSON.parse(stored) : [];
-  } catch {
-    return [];
-  }
+  return isomorphicSessionStorage.getJSONItem<PreCourse[]>(SELECTED_COURSES_KEY, []);
 };
 
 const storeCourses = (courses: PreCourse[]) => {
-  try {
-    sessionStorage.setItem(SELECTED_COURSES_KEY, JSON.stringify(courses));
-  } catch {
-    // sessionStorage 용량 초과 등 무시
-  }
+  isomorphicSessionStorage.setJSONItem(SELECTED_COURSES_KEY, courses);
 };
 
 export const getCourseKey = (course: PreCourse) => {

src/components/IndexComponents/IndexCafeteria/index.tsx

@@ -45,12 +45,12 @@ function IndexCafeteria() {
   };
 
   const handleTooltipContentButtonClick = () => {
-    localStorage.setItem('cafeteria-tooltip', 'used');
+    isomorphicLocalStorage.setItem('cafeteria-tooltip', 'used');
     handleMoreClick();
   };
 
   const handleTooltipCloseButtonClick = () => {
-    localStorage.setItem('cafeteria-tooltip', 'used');
+    isomorphicLocalStorage.setItem('cafeteria-tooltip', 'used');
     closeTooltip();
   };
 

src/components/Store/StoreDetailPage/components/Review/components/ReviewButton/index.tsx

@@ -4,6 +4,7 @@ import useStoreDetail from 'components/Store/StoreDetailPage/hooks/useStoreDetai
 import useLogger from 'utils/hooks/analytics/useLogger';
 import useModalPortal from 'utils/hooks/layout/useModalPortal';
 import { useUser } from 'utils/hooks/state/useUser';
+import { isomorphicSessionStorage } from 'utils/ts/env';
 import styles from './index.module.scss';
 
 export const REVEIW_LOGIN = ['리뷰를 작성하기 ', '리뷰 작성은 회원만 사용 가능합니다.'];
@@ -46,7 +47,7 @@ export default function ReviewButton({ id, goReviewPage }: { id: string; goRevie
       event_label: 'shop_detail_view_review_write',
       value: storeDetail.name,
     });
-    sessionStorage.setItem('enterReview', new Date().getTime().toString());
+    isomorphicSessionStorage.setItem('enterReview', new Date().getTime().toString());
   };
 
   return (

src/components/Store/StoreDetailPage/components/Review/index.tsx

@@ -2,6 +2,7 @@ import { Suspense, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { DropdownProvider } from 'components/Store/StoreDetailPage/hooks/useDropdown';
 import ROUTES from 'static/routes';
+import { isomorphicSessionStorage } from 'utils/ts/env';
 import AverageRating from './components/AverageRating/AverageRating';
 import ReviewButton from './components/ReviewButton';
 import ReviewList from './components/ReviewList/ReviewList';
@@ -12,7 +13,7 @@ export default function ReviewPage({ id }: { id: string }) {
 
   useEffect(() => {
     // 리뷰 페이지 진입 시간 기록
-    sessionStorage.setItem('enterReviewPage', new Date().getTime().toString());
+    isomorphicSessionStorage.setItem('enterReviewPage', new Date().getTime().toString());
   }, []);
 
   return (

src/components/Store/StoreReviewPage/ReviewForm/ReviewForm.tsx

@@ -11,6 +11,7 @@ import ROUTES from 'static/routes';
 import useLogger from 'utils/hooks/analytics/useLogger';
 import useImageUpload from 'utils/hooks/ui/useImageUpload';
 import useScrollToTop from 'utils/hooks/ui/useScrollToTop';
+import { isomorphicSessionStorage } from 'utils/ts/env';
 import uuidv4 from 'utils/ts/uuidGenerater';
 import styles from './ReviewForm.module.scss';
 
@@ -65,7 +66,8 @@ function ReviewForm({ storeDetail, mutate, initialData = {} }: Props) {
   };
 
   const reviewSuccessLogging = () => {
-    const getReviewDurationTime = (new Date().getTime() - Number(sessionStorage.getItem('enterReview'))) / 1000;
+    const getReviewDurationTime =
+      (new Date().getTime() - Number(isomorphicSessionStorage.getItem('enterReview'))) / 1000;
     logger.actionEventClick({
       team: 'BUSINESS',
       event_label: 'shop_detail_view_review_write_done',

src/components/Store/utils/durationTime.ts

@@ -1,17 +1,19 @@
+import { isomorphicSessionStorage } from 'utils/ts/env';
+
 const MAIN_ENTRY_TIME = 'main-entry-time';
 const CATEGORY_ENTRY_TIME = 'category-entry-time';
 
 const initializeTime = (key: string) => {
   const currentTime = new Date().getTime();
-  sessionStorage.setItem(key, currentTime.toString());
+  isomorphicSessionStorage.setItem(key, currentTime.toString());
 };
 
 export const initializeMainEntryTime = () => initializeTime(MAIN_ENTRY_TIME);
 export const initializeCategoryEntryTime = () => initializeTime(CATEGORY_ENTRY_TIME);
 
 const getTime = (key: string) => {
   const currentTime = new Date().getTime();
-  const mainEntryTime = Number(sessionStorage.getItem(key)) || currentTime;
+  const mainEntryTime = Number(isomorphicSessionStorage.getItem(key)) || currentTime;
   return (currentTime - mainEntryTime) / 1000;
 };
 

src/components/TimetablePage/MainTimetablePage/DefaultPage/index.tsx

@@ -7,6 +7,7 @@ import MainTimetable from 'components/TimetablePage/components/MainTimetable';
 import TimetableList from 'components/TimetablePage/components/TimetableList';
 import ROUTES from 'static/routes';
 import useLogger from 'utils/hooks/analytics/useLogger';
+import { isomorphicSessionStorage } from 'utils/ts/env';
 import styles from './DefaultPage.module.scss';
 
 interface DefaultPageProps {
@@ -19,14 +20,14 @@ export default function DefaultPage({ timetableFrameId, setCurrentFrameId }: Def
   const logger = useLogger();
   const handlePopState = React.useCallback(() => {
     // swipe로 뒤로가기 시
-    if (sessionStorage.getItem('swipeToBack') === 'true') {
+    if (isomorphicSessionStorage.getItem('swipeToBack') === 'true') {
       logger.actionEventSwipe({
         team: 'USER',
         event_label: 'timetable_back',
         value: 'OS스와이프',
         previous_page: '시간표',
         current_page: '메인',
-        duration_time: (new Date().getTime() - Number(sessionStorage.getItem('enterTimetablePage'))) / 1000,
+        duration_time: (new Date().getTime() - Number(isomorphicSessionStorage.getItem('enterTimetablePage'))) / 1000,
       });
       history.back();
       return;
@@ -38,7 +39,7 @@ export default function DefaultPage({ timetableFrameId, setCurrentFrameId }: Def
       value: '뒤로가기버튼',
       previous_page: '시간표',
       current_page: '메인',
-      duration_time: (new Date().getTime() - Number(sessionStorage.getItem('enterTimetablePage'))) / 1000,
+      duration_time: (new Date().getTime() - Number(isomorphicSessionStorage.getItem('enterTimetablePage'))) / 1000,
     });
   }, [logger]);
 
@@ -51,11 +52,11 @@ export default function DefaultPage({ timetableFrameId, setCurrentFrameId }: Def
   }, []);
 
   React.useEffect(() => {
-    sessionStorage.setItem('swipeToBack', 'false');
+    isomorphicSessionStorage.setItem('swipeToBack', 'false');
     const handleWheel = (e: WheelEvent) => {
       // 한 번에 최소 100px만큼 스크롤(드래그) 시 swipe했다고 간주
       if (e.deltaX < -100) {
-        sessionStorage.setItem('swipeToBack', 'true');
+        isomorphicSessionStorage.setItem('swipeToBack', 'true');
       }
     };
     window.addEventListener('wheel', handleWheel);

src/components/TimetablePage/components/MainTimetable/index.tsx

@@ -19,6 +19,7 @@ import ROUTES from 'static/routes';
 import useLogger from 'utils/hooks/analytics/useLogger';
 import useBooleanState from 'utils/hooks/state/useBooleanState';
 import useTokenState from 'utils/hooks/state/useTokenState';
+import { isomorphicSessionStorage } from 'utils/ts/env';
 import { useSemester } from 'utils/zustand/semester';
 import DownloadTimetableModal from './DownloadTimetableModal';
 import styles from './MyLectureTimetable.module.scss';
@@ -143,7 +144,7 @@ function ValidMainTimetable({ timetableFrameId }: { readonly timetableFrameId: n
         team: 'USER',
         event_label: 'timetable',
         value: '이미지저장',
-        duration_time: (new Date().getTime() - Number(sessionStorage.getItem('enterTimetablePage'))) / 1000,
+        duration_time: (new Date().getTime() - Number(isomorphicSessionStorage.getItem('enterTimetablePage'))) / 1000,
       });
       openModal();
     }

src/components/TimetablePage/hooks/useTimetableMutation.ts

@@ -9,6 +9,7 @@ import {
 } from 'api/timetable/entity';
 import useToast from 'components/feedback/Toast/useToast';
 import useTokenState from 'utils/hooks/state/useTokenState';
+import { isomorphicSessionStorage } from 'utils/ts/env';
 import showToast from 'utils/ts/showToast';
 import { useLecturesAction } from 'utils/zustand/myLectures';
 import { useSemester } from 'utils/zustand/semester';
@@ -67,7 +68,9 @@ export default function useTimetableMutation(timetableFrameId: number) {
 
   // 강의 복원
   const restoreLecture = (id: number[]) => {
-    const restoredLecture = JSON.parse(sessionStorage.getItem('restoreLecture')!);
+    const restoredLecture = isomorphicSessionStorage.getJSONItem<Lecture | MyLectureInfo | null>('restoreLecture', null);
+    if (!restoredLecture || typeof restoredLecture !== 'object') return;
+
     if ('name' in restoredLecture) {
       addLectureFromLocalStorage(restoredLecture, `${semester?.year}${semester?.term}`);
     } else {
@@ -107,7 +110,7 @@ export default function useTimetableMutation(timetableFrameId: number) {
 
   const removeMyLecture = useMutation({
     mutationFn: async ({ clickedLecture, id }: RemoveMyLectureProps & { disableRecoverButton?: boolean }) => {
-      sessionStorage.setItem('restoreLecture', JSON.stringify(clickedLecture));
+      isomorphicSessionStorage.setJSONItem('restoreLecture', clickedLecture);
       if (clickedLecture && 'name' in clickedLecture) {
         return Promise.resolve(removeLectureFromLocalStorage(clickedLecture, `${semester?.year}${semester?.term}`));
       }

src/components/layout/Header/MobileHeader/Panel/index.tsx

@@ -13,6 +13,7 @@ import useTokenState from 'utils/hooks/state/useTokenState';
 import { useUser } from 'utils/hooks/state/useUser';
 import { useBodyScrollLock } from 'utils/hooks/ui/useBodyScrollLock';
 import { useEscapeKeyDown } from 'utils/hooks/ui/useEscapeKeyDown';
+import { isomorphicSessionStorage } from 'utils/ts/env';
 import { useMobileSidebar } from 'utils/zustand/mobileSidebar';
 import type { Portal } from 'components/modal/Modal/PortalProvider';
 import styles from './Panel.module.scss';
@@ -62,7 +63,7 @@ export default function Panel({ openModal }: PanelProps) {
         value: '햄버거',
         previous_page: '시간표',
         current_page: title,
-        duration_time: (new Date().getTime() - Number(sessionStorage.getItem('enterTimetablePage'))) / 1000,
+        duration_time: (new Date().getTime() - Number(isomorphicSessionStorage.getItem('enterTimetablePage'))) / 1000,
       });
     }
   };