feat: 리프레시 토큰만 쿠키 나머지 정보 로컬 스토리지에 저장

Author: lgrin-byte

app/components/common/Dialog-new/Dialog.tsx

@@ -124,8 +124,4 @@ const Dialog = forwardRef<HTMLFormElement, DialogProps>((props) => {
   );
 });
 
-Dialog.defaultProps = {
-  type: "",
-};
-
 export default Dialog;

app/components/common/Hint-Dialog-new/Dialog.tsx

@@ -91,8 +91,4 @@ const Dialog = forwardRef<HTMLFormElement, DialogProps>((props) => {
   );
 });
 
-Dialog.defaultProps = {
-  type: "",
-};
-
 export default Dialog;

app/hooks/useClickOutside.ts

@@ -9,7 +9,7 @@ import { useEffect, RefObject } from "react";
  * @param {boolean} ignoreSiblings - 형제 요소 클릭 시에도 닫힐지 여부
  */
 function useClickOutside(
-  ref: RefObject<HTMLElement | HTMLElement[]>,
+  ref: React.RefObject<HTMLElement | HTMLElement[] | HTMLFormElement | null>,
   handler: (event: MouseEvent) => void,
   isActive = true,
   targetIndex = 0,

app/signup/CodeInput.tsx

@@ -13,29 +13,29 @@ interface Props {
 
 export default function CodeInput(props: Props) {
   const { disabled, numbers, setNumbers } = props;
-  const inputRefs = useRef(Array(6).fill(null)); // 6개의 ref를 저장할 배열
+  const inputRefs = useRef<(HTMLInputElement | null)[]>(
+    Array.from({ length: 6 }, () => null)
+  );
 
   const { mutateAsync: postVerification, isError = false } =
     usePostVerification();
   const signUpState = useSignUpValue();
 
   const handleInputChange = (index: number, value: string) => {
-    // 입력값이 숫자가 아니거나 길이가 1을 넘어가면 입력을 막음
     if (!/^\d$/.test(value)) return;
 
-    const newNumbers = [...numbers]; // 기존 숫자 배열 복사
-    newNumbers[index] = value; // 해당 인덱스의 값을 업데이트
-    setNumbers(newNumbers); // 업데이트된 배열을 상태로 설정
+    const newNumbers = [...numbers];
+    newNumbers[index] = value;
+    setNumbers(newNumbers);
 
-    // 다음 인풋 필드로 포커스 이동
     if (value !== "" && index < 5) {
-      inputRefs.current[index + 1].focus();
+      inputRefs.current[index + 1]?.focus();
     }
   };
 
   useEffect(() => {
     setTimeout(() => {
-      inputRefs.current[0].focus();
+      inputRefs.current[0]?.focus();
     }, 1000);
   }, []);
 
@@ -47,13 +47,12 @@ export default function CodeInput(props: Props) {
       if (isError) {
         setTimeout(() => {
           setNumbers(Array(6).fill(""));
-          inputRefs.current[0].focus();
+          inputRefs.current[0]?.focus();
         }, 1000);
       }
     }
   }, [numbers, isError]);
 
-  // 입력값을 삭제하는 함수
   const handleInputDelete = (
     index: number,
     e: React.KeyboardEvent<HTMLInputElement>
@@ -63,9 +62,8 @@ export default function CodeInput(props: Props) {
       newNumbers[index] = "";
       setNumbers(newNumbers);
 
-      // 이전 인풋 필드로 포커스 이동
       if (index > 0) {
-        inputRefs.current[index - 1].focus();
+        inputRefs.current[index - 1]?.focus();
       }
     }
   };
@@ -79,9 +77,11 @@ export default function CodeInput(props: Props) {
           value={number}
           error={isError && numbers.join("").length === 0}
           onChange={(e) => handleInputChange(index, e.target.value)}
-          onKeyDown={(e) => handleInputDelete(index, e)} // 삭제 이벤트 처리
-          maxLength={1} // 한 글자만 입력할 수 있도록 설정
-          ref={(input) => (inputRefs.current[index] = input)} // ref를 배열에 저장
+          onKeyDown={(e) => handleInputDelete(index, e)}
+          maxLength={1}
+          ref={(input) => {
+            inputRefs.current[index] = input;
+          }}
           disabled={disabled}
           inputMode="numeric"
         />

app/utils/storageUtil.ts

@@ -1,11 +1,12 @@
+import Cookies from "js-cookie";
+
 const ACCESS_TOKEN = "accessToken";
 const REFRESH_TOKEN = "refreshToken";
 const SHOP_NAME = "shopName";
 const ADMIN_CODE = "adminCode";
 const STATUS = "status";
 const THEME_ID = "themeId";
 const ACCESS_TOKEN_EXPIRES_IN = "accessTokenExpiresIn";
-
 interface LoginInfo {
   accessToken: string;
   shopName: string;
@@ -14,35 +15,45 @@ interface LoginInfo {
   refreshToken: string;
 }
 
-const setStorage = (storage: Storage, key: string, value: any) => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const setLocalStorage = (key: string, value: any) => {
   if (typeof window !== "undefined") {
-    if (!storage) return;
+    const storage = window.localStorage;
+    if (!storage) {
+      return;
+    }
     switch (typeof value) {
-      case `string`:
+      case `string`: {
         try {
           const stringifiedValue = JSON.stringify(value);
           storage.setItem(key, stringifiedValue);
         } catch (e) {
-          console.error(`Failed to stringify value for key: ${key}`);
+          console.error(`failed to stringify`);
         }
         break;
+      }
       default:
         storage.setItem(key, value);
     }
   }
 };
 
-const getStorage = (storage: Storage, key: string, defaultValue = null) => {
+export const getLocalStorage = (key: string, defaultValue = null) => {
   if (typeof window !== "undefined") {
-    if (!storage) return null;
+    const storage = window.localStorage;
+    if (!storage) {
+      return null;
+    }
     return storage.getItem(key) ?? defaultValue;
   }
-  return null;
 };
 
-const removeStorageItem = (storage: Storage, key: string) => {
+export const removeLocalStorageItem = (key: string) => {
   if (typeof window !== "undefined") {
-    if (!storage) return;
+    const storage = window.localStorage;
+    if (!storage) {
+      return;
+    }
     storage.removeItem(key);
   }
 };
@@ -56,59 +67,48 @@ export const setLoginInfo = (loginInfo: LoginInfo) => {
     accessTokenExpiresIn,
   } = loginInfo;
 
-  const sessionStorage = window.sessionStorage;
-  setStorage(sessionStorage, ACCESS_TOKEN, accessToken);
-  setStorage(sessionStorage, REFRESH_TOKEN, refreshToken);
-  setStorage(sessionStorage, SHOP_NAME, shopName?.replaceAll(`"`, ""));
-  setStorage(sessionStorage, ADMIN_CODE, adminCode?.replaceAll(`"`, ""));
-  setStorage(sessionStorage, ACCESS_TOKEN_EXPIRES_IN, accessTokenExpiresIn);
-};
-
-export const getLoginInfo = (): LoginInfo => {
-  const sessionStorage = window.sessionStorage;
-  return {
-    accessToken: getStorage(sessionStorage, ACCESS_TOKEN) || "",
-    refreshToken: getStorage(sessionStorage, REFRESH_TOKEN) || "",
-    shopName: getStorage(sessionStorage, SHOP_NAME) || "",
-    adminCode: getStorage(sessionStorage, ADMIN_CODE) || "",
-    accessTokenExpiresIn:
-      Number(getStorage(sessionStorage, ACCESS_TOKEN_EXPIRES_IN)) || 0,
-  };
-};
-
-export const removeLoginInfo = () => {
-  const sessionStorage = window.sessionStorage;
-  removeStorageItem(sessionStorage, ACCESS_TOKEN);
-  removeStorageItem(sessionStorage, REFRESH_TOKEN);
-  removeStorageItem(sessionStorage, SHOP_NAME);
-  removeStorageItem(sessionStorage, ADMIN_CODE);
-  removeStorageItem(sessionStorage, ACCESS_TOKEN_EXPIRES_IN);
+  setLocalStorage(ACCESS_TOKEN, accessToken);
+  Cookies.set(REFRESH_TOKEN, refreshToken, {
+    secure: true,
+    sameSite: "Strict",
+    expires: 7,
+  });
+  setLocalStorage(SHOP_NAME, shopName?.replaceAll(`"`, ""));
+  setLocalStorage(ADMIN_CODE, adminCode?.replaceAll(`"`, ""));
+  setLocalStorage(ACCESS_TOKEN_EXPIRES_IN, accessTokenExpiresIn);
 };
 
 export const setStatus = (status: string) => {
-  setStorage(window.localStorage, STATUS, status);
+  setLocalStorage(STATUS, status);
 };
 
 export const setSelectedThemeId = (themeId: number) => {
-  setStorage(window.localStorage, THEME_ID, themeId);
+  setLocalStorage(THEME_ID, themeId);
 };
 
-export const getStatus = () => getStorage(window.localStorage, STATUS);
-
-export const getSelectedThemeId = () =>
-  getStorage(window.localStorage, THEME_ID);
+export const getLoginInfo = (): LoginInfo => {
+  return {
+    accessToken: getLocalStorage(ACCESS_TOKEN) || "",
+    refreshToken: Cookies.get(REFRESH_TOKEN) || "",
+    shopName: getLocalStorage(SHOP_NAME) || "",
+    adminCode: getLocalStorage(ADMIN_CODE) || "",
+    accessTokenExpiresIn: Number(getLocalStorage(ACCESS_TOKEN_EXPIRES_IN)) || 0,
+  };
+};
+export const getStatus = () => getLocalStorage(STATUS);
+export const getSelectedThemeId = () => getLocalStorage(THEME_ID);
 
 export const removeAccessToken = () => {
-  removeStorageItem(window.sessionStorage, ACCESS_TOKEN);
+  removeLocalStorageItem(ACCESS_TOKEN);
 };
 
 export const removeThemeId = () => {
-  removeStorageItem(window.localStorage, THEME_ID);
+  removeLocalStorageItem(THEME_ID);
 };
 
 export const removeLocalStorageAll = () => {
   if (typeof window !== "undefined") {
     window.localStorage.clear();
-    window.sessionStorage.clear();
+    Cookies.remove(REFRESH_TOKEN);
   }
 };

package.json

@@ -48,6 +48,7 @@
   "devDependencies": {
     "@svgr/webpack": "^8.0.1",
     "@types/http-proxy": "^1.17.15",
+    "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.13",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
@@ -60,6 +61,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
+    "js-cookie": "^3.0.5",
     "prettier": "^2.8.8"
   }
 }