Merge pull request #40 from capstone-maru/dev

release:  version 0.3.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "maru",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/lib/providers/AuthProvider.tsx

@@ -8,7 +8,7 @@ import {
   useAuthActions,
   useAuthValue,
 } from '@/features/auth';
-import { load } from '@/shared/persist';
+import { load } from '@/shared/storage';
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
   const auth = useAuthValue();

src/app/pages/main-page.tsx

@@ -57,7 +57,7 @@ export function MainPage() {
   const { data } = useQuery({
     queryKey: ['/api/auth/initial/info'],
     queryFn: getUserData,
-    enabled: auth?.accessToken !== undefined,
+    enabled: auth !== null,
   });
 
   useEffect(() => {

src/app/pages/shared-posts.tsx

@@ -52,7 +52,7 @@ export function SharedPostsPage() {
   const { data } = useQuery({
     queryKey: ['/api/auth/initial/info'],
     queryFn: getUserData,
-    enabled: auth?.accessToken !== undefined,
+    enabled: auth !== null,
   });
 
   useEffect(() => {

src/components/NavigationBar.tsx

@@ -12,7 +12,7 @@ import {
   useAuthIsLogin,
   useAuthValue,
 } from '@/features/auth';
-import { load } from '@/shared/persist';
+import { load } from '@/shared/storage';
 
 const styles = {
   container: styled.nav`

src/features/auth/auth.action.ts

@@ -6,17 +6,21 @@ import { authState } from './auth.atom';
 import { type Auth } from './auth.model';
 
 import { type User } from '@/entities/user';
-import { remove, save } from '@/shared/persist';
+import { remove, save } from '@/shared/storage';
 
 export const useAuthActions = () => {
   const [, setAuth] = useRecoilState(authState);
 
   const login = useCallback(
-    (auth: Auth) => {
+    (auth: Auth & { accessToken: string }) => {
       axios.defaults.headers.common.Authorization = `Bearer ${auth.accessToken}`;
       save({ type: 'local', key: 'refreshToken', value: auth.refreshToken });
       save({ type: 'local', key: 'expiresIn', value: `${auth.expiresIn}` });
-      setAuth(auth);
+      setAuth({
+        expiresIn: auth.expiresIn,
+        refreshToken: auth.refreshToken,
+        user: auth.user,
+      });
     },
     [setAuth],
   );

src/features/auth/auth.atom.ts

@@ -2,7 +2,15 @@ import { atom } from 'recoil';
 
 import { type Auth } from './auth.model';
 
+import { storageEffect } from '@/shared/persist';
+
 export const authState = atom<Auth | null>({
   key: 'authState',
   default: null,
+  effects: [
+    storageEffect({
+      key: 'auth-state',
+      storageType: 'session',
+    }),
+  ],
 });

src/features/auth/auth.model.ts

@@ -1,7 +1,6 @@
 import { type User } from '@/entities/user';
 
 export interface Auth {
-  accessToken: string;
   refreshToken: string;
   expiresIn: number;
   user?: User;

src/shared/persist/effect.ts

@@ -0,0 +1,28 @@
+import { type AtomEffect, type DefaultValue } from 'recoil';
+
+import { load, remove, save, type StorageType } from '@/shared/storage';
+
+export const storageEffect =
+  <StoredType>({
+    key,
+    storageType,
+  }: {
+    key: string;
+    storageType: StorageType;
+  }): AtomEffect<StoredType> =>
+  ({ setSelf, onSet }) => {
+    if (typeof window === 'undefined') return;
+
+    const savedValue = load({ type: storageType, key });
+    if (savedValue != null) {
+      setSelf(load({ type: storageType, key }) as StoredType);
+    }
+
+    onSet((newValue: StoredType | DefaultValue, _, isReset: boolean) => {
+      if (isReset) {
+        remove({ type: storageType, key });
+      } else {
+        save({ type: storageType, key, value: JSON.stringify(newValue) });
+      }
+    });
+  };

src/shared/persist/index.ts

@@ -1 +1 @@
-export * from './store';
+export * from './effect';

src/shared/storage/index.ts

@@ -0,0 +1 @@
+export * from './storage';

src/shared/persist/store.ts → src/shared/storage/storage.ts

@@ -1,29 +1,35 @@
-type storeType = 'session' | 'local';
+export type StorageType = 'session' | 'local';
 
 export const save = ({
   type,
   key,
   value,
 }: {
-  type: storeType;
+  type: StorageType;
   key: string;
   value: string;
 }) => {
+  if (typeof window === 'undefined') return;
+
   if (type === 'local') {
     localStorage.setItem(key, value);
   } else {
     sessionStorage.setItem(key, value);
   }
 };
 
-export const load = ({ type, key }: { type: storeType; key: string }) => {
+export const load = ({ type, key }: { type: StorageType; key: string }) => {
+  if (typeof window === 'undefined') return null;
+
   if (type === 'local') {
     return localStorage.getItem(key);
   }
   return sessionStorage.getItem(key);
 };
 
-export const remove = ({ type, key }: { type: storeType; key: string }) => {
+export const remove = ({ type, key }: { type: StorageType; key: string }) => {
+  if (typeof window === 'undefined') return;
+
   if (type === 'local') {
     localStorage.removeItem(key);
   } else {