feat: recoil 템플릿 코드 추가

.eslintrc.json

@@ -57,7 +57,6 @@
         "allow": ["private-constructors"]
       }
     ],
-    "@typescript-eslint/no-unused-vars": "warn",
     "react/jsx-no-useless-fragment": "off",
     "react/react-in-jsx-scope": "off",
     "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }],

src/features/auth/auth.action.ts

@@ -1,16 +1,17 @@
 import { useCallback, useMemo } from 'react';
+import { useRecoilState } from 'recoil';
 
-import { useAuthState } from '.';
+import { authState } from './auth.atom';
 
 export const useAuthActions = () => {
-  const [authState, setAuthState] = useAuthState();
+  const [, setAuth] = useRecoilState(authState);
 
   const login = useCallback(() => {
-    setAuthState(prev => ({ ...prev, isLogin: true }));
-  }, []);
+    setAuth(prev => ({ ...prev, isLogin: true }));
+  }, [setAuth]);
   const logout = useCallback(() => {
-    setAuthState(prev => ({ ...prev, isLogin: false }));
-  }, []);
+    setAuth(prev => ({ ...prev, isLogin: false }));
+  }, [setAuth]);
 
   useMemo(
     () => ({

src/features/auth/auth.atom.ts

@@ -0,0 +1,11 @@
+import { atom } from 'recoil';
+
+import { type AuthState } from './auth.model';
+
+export const authState = atom<AuthState>({
+  key: 'authState',
+  default: {
+    isLogin: false,
+    token: undefined,
+  },
+});

src/features/auth/auth.hook.ts

@@ -1,6 +1,7 @@
 import { useRecoilState, useRecoilValue } from 'recoil';
 
-import { authState, getIsLogin } from './auth.model';
+import { authState } from './auth.atom';
+import { getIsLogin } from './auth.selector';
 
 export const useAuthState = () => useRecoilState(authState);
 export const useAuthIsLogin = () => useRecoilValue(getIsLogin);

src/features/auth/auth.model.ts

@@ -1,22 +1,4 @@
-import { atom, selector } from 'recoil';
-
 export interface AuthState {
   isLogin: boolean;
   token?: string;
 }
-
-export const authState = atom<AuthState>({
-  key: 'authState',
-  default: {
-    isLogin: false,
-    token: undefined,
-  },
-});
-
-export const getIsLogin = selector<boolean>({
-  key: 'authState/isLogin',
-  get: ({ get }) => {
-    const auth = get(authState);
-    return auth.isLogin;
-  },
-});

src/features/auth/auth.selector.ts

@@ -0,0 +1,11 @@
+import { selector } from 'recoil';
+
+import { authState } from './auth.atom';
+
+export const getIsLogin = selector<boolean>({
+  key: 'authState/isLogin',
+  get: ({ get }) => {
+    const auth = get(authState);
+    return auth.isLogin;
+  },
+});

src/features/auth/index.ts

@@ -1,3 +1,5 @@
-export { type AuthState, authState, getIsLogin } from './auth.model';
-export { useAuthState, useAuthIsLogin } from './auth.hook';
-export {} from './auth.action';
+export * from './auth.action';
+export * from './auth.atom';
+export * from './auth.hook';
+export * from './auth.model';
+export * from './auth.selector';