✨ feat : Add recoil-persist for state persistence

- Add the Recoil-persist library
- Add functionality to userState to maintain the logged-in state

Related issue: YJU-OKURA#115

Author: dorimu0

package.json

@@ -34,6 +34,7 @@
     "react-markdown": "^9.0.1",
     "react-pdf": "^7.7.0",
     "recoil": "^0.7.7",
+    "recoil-persist": "^5.1.0",
     "swiper": "^11.1.0",
     "ts-node": "^10.9.2"
   },

src/app/intro/googleLogin/page.tsx

@@ -3,21 +3,18 @@ import {useEffect} from 'react';
 import Image from 'next/image';
 import {useRouter, useSearchParams} from 'next/navigation';
 import {useSetRecoilState} from 'recoil';
-import {userState} from '@/src/recoil/atoms/userState';
+import userState from '@/src/recoil/atoms/userState';
 import accessTokenState from '@/src/recoil/atoms/accessTokenState';
 import refreshTokenState from '@/src/recoil/atoms/refreshTokenState';
-import isLoginState from '@/src/recoil/atoms/isLoginState';
-import useRecoilStateWithLocalStorage from '@/src/hooks/useRecoilStateWithLocalStorage';
 import postGoogleLogin from '@/src/api/auth/postGoogleLogin';
 import gifs from '@/public/gif';
 import '@/src/styles/variable.css';
 
 const Page = () => {
   const code: string | null = useSearchParams().get('code');
-  const [, setUser] = useRecoilStateWithLocalStorage(userState);
+  const setUser = useSetRecoilState(userState);
   const setAccessToken = useSetRecoilState(accessTokenState);
   const setRefreshToken = useSetRecoilState(refreshTokenState);
-  const setIsLogin = useSetRecoilState(isLoginState);
   const router = useRouter();
   useEffect(() => {
     console.log(code);
@@ -31,7 +28,6 @@ const Page = () => {
           setRefreshToken({refresh_token: res.refresh_token});
           window.localStorage.setItem('access_token', res.access_token);
           window.localStorage.setItem('refresh_token', res.refresh_token);
-          setIsLogin(true);
         }
         router.push('/');
       });

src/recoil/atoms/userState.ts

@@ -1,18 +1,13 @@
 import {atom} from 'recoil';
 import {User} from '@/src/interfaces/user';
+import {recoilPersist} from 'recoil-persist';
+
+const {persistAtom} = recoilPersist();
 
 const userState = atom<User | null>({
   key: 'userState',
   default: null,
+  effects_UNSTABLE: [persistAtom],
 });
 
-const saveStateToLocalStorage = (key: string, value: unknown) => {
-  localStorage.setItem(key, JSON.stringify(value));
-};
-
-const loadStateFromLocalStorage = (key: string) => {
-  const storedState = localStorage.getItem(key);
-  return storedState ? JSON.parse(storedState) : null;
-};
-
-export {userState, saveStateToLocalStorage, loadStateFromLocalStorage};
+export default userState;

yarn.lock

@@ -5961,6 +5961,11 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+recoil-persist@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/recoil-persist/-/recoil-persist-5.1.0.tgz#c4232fe04f2e4b6afcc815baff56f2521f6dcde1"
+  integrity sha512-sew4k3uBVJjRWKCSFuBw07Y1p1pBOb0UxLJPxn4G2bX/9xNj+r2xlqYy/BRfyofR/ANfqBU04MIvulppU4ZC0w==
+
 recoil@^0.7.7:
   version "0.7.7"
   resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.7.7.tgz#c5f2c843224384c9c09e4a62c060fb4c1454dc8e"
@@ -6407,7 +6412,16 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -6491,7 +6505,14 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -7197,7 +7218,16 @@ wide-align@^1.1.2:
   dependencies:
     string-width "^1.0.2 || 2 || 3 || 4"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==