Merge pull request #66 from SanjiJikFarm/refactor/#65-loginAPI

[Refactor/#65 login api] 로그인 API 수정

Author: only1Ksy

sanjijikfarm/src/api/axios/store.js

@@ -1,20 +1,26 @@
 import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 
-export const useAuthStore = create((set) => ({
-  accessToken: null,
-  refreshToken: null,
-  username: null,
-  profileImageKey: null,
+export const useAuthStore = create(
+  persist(
+    (set) => ({
+      accessToken: null,
+      refreshToken: null,
+      username: null,
+      profileImageKey: null,
 
-  setTokens: (access, refresh) => set({ accessToken: access, refreshToken: refresh }),
+      // 토큰 저장
+      setTokens: (access, refresh) => set({ accessToken: access, refreshToken: refresh }),
+      // 사용자 아이디 저장
+      setUsername: (name) => set({ username: name }),
+      // 프로필 이미지 키 저장
+      setProfileImageKey: (key) => set({ profileImageKey: key }),
 
-  setUsername: (name) => set({ username: name }),
-
-  setProfileImageKey: (key) =>
-    set((state) => {
-      if (state.profileImageKey === key) return state;
-      return { profileImageKey: key };
+      // 로그아웃시 상태 초기화
+      clear: () => set({ accessToken: null, refreshToken: null, username: null, profileImageKey: null }),
     }),
-
-  clear: () => set({ accessToken: null, refreshToken: null, username: null, profileImageKey: null }),
-}));
+    {
+      name: 'auth-storage',
+    },
+  ),
+);

sanjijikfarm/src/pages/MyPage.jsx

@@ -1,6 +1,7 @@
 import { useMemo, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { logout } from '@/api/axios/auth';
 import { useAuthStore } from '@/api/axios/store';
 import { getPresignedUrl, saveUserProfileImage, updateUserProfileImage, uploadImageToS3 } from '@/api/profile/profile';
 import ArrowIcon from '@/assets/icons/right-arrow.svg';
@@ -53,7 +54,7 @@ export default function MyPage() {
   ];
 
   return (
-    <div className="flex flex-col items-center px-5 pt-10">
+    <div className="relative flex flex-col items-center px-5 pt-10">
       <div className="flex w-full flex-col items-center border-b border-gray-200 pb-10">
         <div className="relative mb-3 h-16 w-16">
           {profileImageUrl ? (
@@ -94,6 +95,12 @@ export default function MyPage() {
           </button>
         ))}
       </div>
+
+      <div className="text-body-2 text-gray-4 border-gray-3 absolute top-2 right-2 flex justify-end border-b font-semibold">
+        <button className="cursor-pointer" onClick={logout}>
+          로그아웃
+        </button>
+      </div>
     </div>
   );
 }