Refactor/#308: 사용자의 전공 상태 정보(useState) 삭제

src/components/Card/InformCard/index.test.tsx

@@ -5,7 +5,6 @@ import MajorContext from '@contexts/major';
 import useModals from '@hooks/useModals';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import Major from '@type/major';
 import { IconKind } from '@type/styles/icon';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
@@ -38,18 +37,14 @@ const INFORM_CARD: INFORM_CARD_DATA = {
 };
 
 const setMajorMock = (isRender: boolean) => {
-  const mockMajor: Major = isRender ? null : '컴퓨터인공지능학부';
+  const mockGetMajor = jest.fn();
   const mockSetMajor = jest.fn();
 
-  jest.mock('react', () => ({
-    ...jest.requireActual('react'),
-    useState: () => [mockMajor, mockSetMajor, graduationLink],
-  }));
+  mockGetMajor.mockReturnValue(isRender ? null : '컴퓨터인공지능학부');
 
   return {
-    major: mockMajor,
+    getMajor: mockGetMajor,
     setMajor: mockSetMajor,
-    graduationLink,
   };
 };
 
@@ -76,6 +71,7 @@ jest.mock('@hooks/useModals', () => {
 
 describe('InformCard 컴포넌트 테스트', () => {
   const oldWindowLocation = window.location;
+
   beforeEach(() => {
     Object.defineProperty(window, 'location', {
       configurable: true,

src/components/Providers/MajorProvider/index.tsx

@@ -1,22 +1,19 @@
 import MajorContext from '@contexts/major';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
+
+import MajorStorage from './major-storage';
 
 interface MajorProviderProps {
   children: React.ReactNode;
 }
 
-const MajorProvider = ({ children }: MajorProviderProps) => {
-  const [major, setMajor] = useState<string | null>(null);
-
-  useEffect(() => {
-    const storedMajor = localStorage.getItem('major');
-    if (!storedMajor) return;
+const MAJOR_STORAGE_KEY = 'major' as string;
 
-    setMajor(storedMajor);
-  }, []);
+const MajorProvider = ({ children }: MajorProviderProps) => {
+  const majorStorage = new MajorStorage(MAJOR_STORAGE_KEY);
 
   return (
-    <MajorContext.Provider value={{ major, setMajor }}>
+    <MajorContext.Provider value={majorStorage}>
       {children}
     </MajorContext.Provider>
   );

src/components/Providers/MajorProvider/major-storage.ts

@@ -0,0 +1,23 @@
+interface IMajorStorage {
+  getMajor: () => string | null;
+  setMajor: (major: string) => void;
+}
+
+class MajorStorage implements IMajorStorage {
+  private TOKEN_KEY;
+
+  constructor(key: string) {
+    this.TOKEN_KEY = key;
+  }
+
+  getMajor() {
+    const major = localStorage.getItem(this.TOKEN_KEY);
+    return major;
+  }
+
+  setMajor(major: string) {
+    localStorage.setItem(this.TOKEN_KEY, major);
+  }
+}
+
+export default MajorStorage;

src/components/Providers/OverlayProvider/index.tsx

@@ -2,8 +2,7 @@ import Modal from '@components/Common/Modal';
 import OverlayContext from '@contexts/overlays';
 import useModals from '@hooks/useModals';
 import useUserLocation from '@hooks/useUserLocation';
-import React, { useMemo } from 'react';
-import { Outlet } from 'react-router-dom';
+import React from 'react';
 
 import CustomOverlay from './overlay';
 

src/contexts/major.ts

@@ -2,8 +2,8 @@ import Major from '@type/major';
 import { createContext } from 'react';
 
 interface MajorState {
-  major: Major;
-  setMajor: React.Dispatch<React.SetStateAction<Major>>;
+  getMajor: () => Major;
+  setMajor: (major: string) => void;
 }
 
 const MajorContext = createContext<MajorState | null>(null);

src/hooks/useMajor.ts

@@ -2,13 +2,19 @@ import MajorContext from '@contexts/major';
 import { useContext } from 'react';
 
 const useMajor = () => {
-  const context = useContext(MajorContext);
+  const majorStorage = useContext(MajorContext);
 
-  if (!context) {
+  if (!majorStorage) {
     throw new Error('MajorContext does not exists.');
   }
 
-  return context;
+  const major = majorStorage.getMajor();
+  const setMajor = majorStorage.setMajor.bind(majorStorage);
+
+  return {
+    major,
+    setMajor,
+  };
 };
 
 export default useMajor;

src/pages/MajorDecision/index.test.tsx

@@ -15,6 +15,7 @@ jest.mock('react-router-dom', () => ({
 }));
 
 describe.skip('학과선택 페이지 로직 테스트', () => {
+  const mockGetMajor = jest.fn();
   const mockSetMajor = jest.fn();
 
   beforeEach(() => {
@@ -33,7 +34,7 @@ describe.skip('학과선택 페이지 로직 테스트', () => {
       <MemoryRouter>
         <MajorContext.Provider
           value={{
-            major: null,
+            getMajor: mockGetMajor,
             setMajor: mockSetMajor,
           }}
         >