Feature/ user store - zustand 기반 전역 유저 상태 관리

[youdaeng2]

📦 Pull Request

📝 요약(Summary)

• Zustand 기반의 전역 유저 상태 스토어 useUserStore를 생성했습니다.

• 클라이언트 렌더링(CSR) 환경에서 앱 진입 시 유저 정보를 패치해 상태를 초기화하는 useInitUser 훅을 작성했습니다.

• useUserStore() 직접 호출 대신, useUser() 훅을 통해 상태를 접근·관리하는 방식으로 통일되어 있습니다.

• 현재는 CSR 방식만 대응 중이며, SSR이 필요한 경우 getServerSideProps에서 유저 데이터를 받아 페이지 props로 전달하고, 클라이언트에서 setUser()로 상태에 반영하는 방식으로 확장할 수 있습니다.

📁 src/stores/userStore.ts     // Zustand 전역 유저 스토어
📁 src/hooks/useInitUser.ts    // 앱 진입 시 유저 상태 초기화 훅
📁 src/hooks/useUser.ts        // 유저 정보와 로그인 여부를 가져오는 커스텀 훅

💬 공유사항 to 리뷰어

• 로그인/회원가입 이후 유저 정보를 받아와 setUser()를 호출해 상태에 저장해야 합니다. (자세한 내용은 하단 참고)

🗂️ 관련 이슈

#83

📸 스크린샷

• 해당 PR은 UI 변경사항이 없습니다.

✅ 체크리스트

• Zustand 스토어 생성 및 전역 유저 상태 구조 정의
• CSR 진입 시 상태 초기화 훅(useInitUser) 작성
• 스토어에서 상태 읽기/쓰기 및 초기화 함수 (setUser, clearUser) 구현
• ESLint / Prettier 통과
• 빌드 및 실행 확인

---

---

해야 할 작업

1. 로그인 성공 시

• 로그인 요청이 성공하면 /users/me API를 호출해 유저 정보를 받아옵니다.
• 받아온 유저 정보를 Zustand의 setUser()로 상태에 저장합니다.

2. 로그아웃 시

• 로그아웃 API를 호출합니다.
• 이후 Zustand의 clearUser()를 호출해 상태를 초기화합니다.

---

예시 코드

로그인 처리

import { getUser } from '@/api/user';
import { useUser } from '@/hooks/useUser';

export const useLoginSuccess = () => {
  const { setUser } = useUser();

  const handleLoginSuccess = async () => {
    try {
      const user = await getUser();
      setUser(user);
    } catch (e) {
      console.warn('유저 정보 불러오기 실패', e);
    }
  };

  return { handleLoginSuccess };
};

로그아웃 처리

import { logoutUser } from '@/api/auth';
import { useUser } from '@/hooks/useUser'; 

export const useLogout = () => {
  const { clearUser } = useUser(); 

  const handleLogout = async () => {
    try {
      await logoutUser(); // 로그아웃 요청
    } catch (e) {
      console.warn('로그아웃 요청 실패', e);
    }

    clearUser(); // 상태 초기화
  };

  return { handleLogout };
};

---

Zustand 스토어 구조 예시 (참고용)

export const useUserStore = create<UserStore>((set) => ({
  user: null,
  isLoggedIn: false,
  setUser: (user) => set({ user, isLoggedIn: true }),
  clearUser: () => set({ user: null, isLoggedIn: false }),
}));

---

정리

• 로그인 후에는 반드시 /users/me로 유저 정보를 받아와 상태에 저장해 주세요.
• 로그아웃 시에는 상태를 초기화하는 clearUser()도 호출해야 합니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
whyne-fe	❌ Failed (Inspect)			Jul 29, 2025 4:13pm

[summerDev96]

머지 후 로그인 시 추가하도록 하겠습니다!