fix(fe): refactor authentication checks to use accessToken (#32)

* refactor: remove isLogin method from auth store

* fix: replace isLogin method with accessToken checks in auth store

Author: cjeongmin

apps/client/src/components/Header.tsx

@@ -10,7 +10,7 @@ import { Button, SignInModal, SignUpModal } from '@/components';
 function Header() {
   const { isLogin, clearAuthInformation: clearAccessToken } = useAuthStore(
     useShallow((state) => ({
-      isLogin: state.isLogin,
+      isLogin: state.accessToken != null,
       clearAuthInformation: state.clearAuthInformation,
     })),
   );
@@ -47,12 +47,12 @@ function Header() {
           <div className='flex items-center justify-center gap-2.5'>
             <Button
               className='hover:bg-gray-200 hover:text-white hover:transition-all'
-              onClick={isLogin() ? handleLogout : openSignInModal}
+              onClick={isLogin ? handleLogout : openSignInModal}
             >
-              <p className='text-base font-bold text-black'>{isLogin() ? '로그아웃' : '로그인'}</p>
+              <p className='text-base font-bold text-black'>{isLogin ? '로그아웃' : '로그인'}</p>
             </Button>
-            <Button className='bg-indigo-600' onClick={isLogin() ? () => navigate({ to: '/my' }) : openSignUpModal}>
-              <p className='text-base font-bold text-white'>{isLogin() ? '세션 기록' : '회원가입'}</p>
+            <Button className='bg-indigo-600' onClick={isLogin ? () => navigate({ to: '/my' }) : openSignUpModal}>
+              <p className='text-base font-bold text-white'>{isLogin ? '세션 기록' : '회원가입'}</p>
             </Button>
           </div>
         </div>

apps/client/src/features/auth/auth.store.ts

@@ -3,13 +3,11 @@ import { create } from 'zustand';
 interface AuthStore {
   userId?: number;
   accessToken?: string;
-  isLogin: () => boolean;
   setAuthInformation: ({ userId, accessToken }: { userId?: number; accessToken?: string }) => void;
   clearAuthInformation: () => void;
 }
 
-export const useAuthStore = create<AuthStore>((set, get) => ({
-  isLogin: () => get().accessToken != null,
+export const useAuthStore = create<AuthStore>((set) => ({
   setAuthInformation: ({ userId, accessToken }: { userId?: number; accessToken?: string }) =>
     set({ userId, accessToken }),
   clearAuthInformation: () => set({ userId: undefined, accessToken: undefined }),

apps/client/src/features/session/session.util.ts

@@ -31,7 +31,7 @@ export async function loadSessionData(options: LoadSessionOptions) {
   } = sessionStore;
 
   // 1) [옵션] 로그인/refresh
-  if (!skipRefresh && !authStore.isLogin()) {
+  if (!skipRefresh && !authStore.accessToken) {
     try {
       const res = await refresh();
       authStore.setAuthInformation(res);

apps/client/src/pages/HomePage.tsx

@@ -7,7 +7,7 @@ import { useModal } from '@/features/modal';
 import { Button, CreateSessionModal, FeatureCard } from '@/components';
 
 function HomePage() {
-  const isLogin = useAuthStore((state) => state.isLogin);
+  const isLogin = useAuthStore((state) => state.accessToken != null);
 
   const { Modal: CreateSession, openModal: openCreateSessionModal } = useModal(<CreateSessionModal />);
 
@@ -25,12 +25,12 @@ function HomePage() {
           </div>
           <div className='group relative flex'>
             <Button
-              className={`${isLogin() ? 'bg-indigo-600' : 'cursor-not-allowed bg-indigo-300'}`}
-              onClick={isLogin() ? openCreateSessionModal : undefined}
+              className={`${isLogin ? 'bg-indigo-600' : 'cursor-not-allowed bg-indigo-300'}`}
+              onClick={isLogin ? openCreateSessionModal : undefined}
             >
               <div className='text-base font-bold text-white'>새로운 세션 만들기</div>
             </Button>
-            {isLogin() ? undefined : (
+            {isLogin ? undefined : (
               <span className='absolute top-1/2 flex w-full translate-y-full items-center justify-center rounded-md bg-indigo-600 p-1 text-sm font-bold text-white opacity-0 transition-opacity group-hover:opacity-100'>
                 로그인 후 이용 가능
               </span>

apps/client/src/routes/index.tsx

@@ -7,9 +7,9 @@ const LazyHomePage = React.lazy(() => import('@/pages').then((module) => ({ defa
 
 export const Route = createFileRoute('/')({
   beforeLoad: () => {
-    const { isLogin, setAuthInformation } = useAuthStore.getState();
+    const { accessToken, setAuthInformation } = useAuthStore.getState();
 
-    if (!isLogin())
+    if (!accessToken)
       refresh()
         .then((res) => {
           setAuthInformation(res);

apps/client/src/routes/my.tsx

@@ -12,9 +12,9 @@ export const Route = createFileRoute('/my')({
     </React.Suspense>
   ),
   beforeLoad: () => {
-    const { isLogin, setAuthInformation } = useAuthStore.getState();
+    const { accessToken, setAuthInformation } = useAuthStore.getState();
 
-    if (!isLogin()) {
+    if (!accessToken) {
       return refresh()
         .then((res) => {
           setAuthInformation(res);