✨Feat: 로그인/회원가입 로직 구현 #29
Conversation
Walkthrough인증 기능이 새롭게 도입되어, 로그인 및 회원가입 API 모듈, 엔드포인트 상수, 타입 정의, 인증 관련 Zustand 스토어, 커스텀 훅이 추가되었습니다. 기존 사용자 스토어는 삭제되었고, User 타입이 닉네임 중심으로 변경되었습니다. Axios 인스턴스에는 인증 토큰 자동 첨부 기능이 추가되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant 컴포넌트
participant useAuth(커스텀 훅)
participant authApi
participant useAuthStore
participant Axios
컴포넌트->>useAuth: login({ email, password })
useAuth->>authApi: login({ email, password })
authApi->>Axios: POST /auth/login
Axios-->>authApi: { accessToken, user }
authApi-->>useAuth: { accessToken, user }
useAuth->>useAuthStore: setAccessToken(accessToken), setUser(user)
useAuth-->>컴포넌트: 로그인 결과 반환
컴포넌트->>useAuth: signup({ nickname, email, password })
useAuth->>authApi: signup({ nickname, email, password })
authApi->>Axios: POST /users
Axios-->>authApi: { user }
authApi-->>useAuth: { user }
useAuth-->>컴포넌트: 회원가입 결과 반환
컴포넌트->>useAuth: logout()
useAuth->>useAuthStore: clearAuthState()
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (6)
src/app/shared/lib/axios.ts (2)
5-7: 환경변수 검증 추가를 고려해보세요.
process.env.NEXT_PUBLIC_API_URL이 정의되지 않은 경우에 대한 처리가 없습니다. 런타임 오류를 방지하기 위해 검증 로직을 추가하는 것을 권장합니다.+const baseURL = process.env.NEXT_PUBLIC_API_URL +if (!baseURL) { + throw new Error('NEXT_PUBLIC_API_URL 환경변수가 설정되지 않았습니다.') +} + const api = axios.create({ - baseURL: process.env.NEXT_PUBLIC_API_URL, + baseURL, })
9-22: 토큰 만료 처리를 위한 응답 인터셉터 추가를 고려해보세요.현재 요청 인터셉터만 구현되어 있는데, 토큰 만료나 인증 실패 시 자동으로 로그아웃 처리할 수 있는 응답 인터셉터를 추가하면 사용자 경험이 향상됩니다.
) +api.interceptors.response.use( + (response) => response, + (error) => { + if (error.response?.status === 401) { + useAuthStore.getState().clearAuthState() + // 로그인 페이지로 리디렉션 로직 추가 가능 + } + return Promise.reject(error) + }, +) + export default apisrc/app/features/auth/store/useAuthStore.ts (1)
16-18: persist 설정 개선을 고려해보세요.보안을 위해 persist 설정에 추가 옵션을 고려해볼 수 있습니다.
{ name: 'auth-storage', + partialize: (state) => ({ + accessToken: state.accessToken, + user: state.user, + isLoggedIn: state.isLoggedIn + }), + version: 1, },src/app/features/auth/hooks/useAuth.ts (2)
21-23: 회원가입 성공 후 처리 로직을 추가하는 것을 고려해보세요.현재 회원가입 함수는 API 호출만 하고 성공 시 추가 처리가 없습니다. 사용자 경험을 위해 다음을 고려해보세요:
- 회원가입 성공 시 자동 로그인 처리
- 성공 메시지나 리다이렉션 로직
async function signup(data: SignupRequest) { - await signupApi(data) + const response = await signupApi(data) + // 성공 시 자동 로그인이나 성공 처리 로직 추가 고려 + return response }
5-34: 로딩 상태 관리 추가를 고려해보세요.인증 작업 중 로딩 상태를 관리하면 사용자 경험이 개선됩니다. Zustand 스토어에
isLoading상태를 추가하거나 별도의 상태 관리를 고려해보세요.스토어에 로딩 상태 추가 예시:
// useAuthStore에 추가 isLoading: false, setLoading: (loading: boolean) => set({ isLoading: loading }), // useAuth에서 사용 const { setAccessToken, setUser, clearAuthState, setLoading } = useAuthStore() async function login(data: LoginRequest) { setLoading(true) try { // ... 기존 로직 } finally { setLoading(false) } }src/app/features/auth/types/auth.type.ts (1)
19-26: SignupResponse 타입 정의를 추가하는 것을 고려해보세요.AuthState 인터페이스는 잘 정의되어 있지만, 코드의 완성도를 위해
SignupResponse인터페이스 추가를 고려해보세요.+ export interface SignupResponse { + message?: string + user?: User + }이렇게 하면 회원가입 API의 응답 타입도 명확하게 정의할 수 있습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/app/features/auth/api/authApi.ts(1 hunks)src/app/features/auth/api/authEndpoint.ts(1 hunks)src/app/features/auth/hooks/useAuth.ts(1 hunks)src/app/features/auth/store/useAuthStore.ts(1 hunks)src/app/features/auth/types/auth.type.ts(1 hunks)src/app/shared/lib/axios.ts(1 hunks)src/app/shared/store/useUserStore.ts(0 hunks)src/app/shared/types/user.type.ts(1 hunks)
💤 Files with no reviewable changes (1)
- src/app/shared/store/useUserStore.ts
🧰 Additional context used
🧬 Code Graph Analysis (5)
src/app/features/auth/api/authApi.ts (2)
src/app/features/auth/types/auth.type.ts (3)
LoginRequest(3-6)LoginResponse(8-11)SignupRequest(13-17)src/app/features/auth/api/authEndpoint.ts (1)
AUTH_ENDPOINT(1-4)
src/app/shared/lib/axios.ts (2)
src/app/features/auth/store/useAuthStore.ts (1)
useAuthStore(5-20)src/app/features/auth/api/authEndpoint.ts (1)
AUTH_ENDPOINT(1-4)
src/app/features/auth/hooks/useAuth.ts (3)
src/app/features/auth/store/useAuthStore.ts (1)
useAuthStore(5-20)src/app/features/auth/api/authApi.ts (2)
login(6-8)signup(10-12)src/app/features/auth/types/auth.type.ts (2)
LoginRequest(3-6)SignupRequest(13-17)
src/app/features/auth/store/useAuthStore.ts (1)
src/app/features/auth/types/auth.type.ts (1)
AuthState(19-26)
src/app/features/auth/types/auth.type.ts (1)
src/app/shared/types/user.type.ts (1)
User(1-8)
🔇 Additional comments (8)
src/app/features/auth/api/authEndpoint.ts (1)
1-4: API 엔드포인트 중앙 관리 - 좋은 구현입니다!엔드포인트를 상수 객체로 중앙집중식 관리하는 것은 좋은 패턴입니다. 코드 유지보수성과 일관성을 높여줍니다.
src/app/features/auth/store/useAuthStore.ts (1)
5-20: 인증 상태 관리가 잘 구현되었습니다!Zustand와 persist 미들웨어를 사용한 상태 관리가 깔끔하게 구현되었습니다.
setAccessToken에서 자동으로isLoggedIn을 true로 설정하는 로직도 좋습니다.src/app/features/auth/api/authApi.ts (1)
1-12: API 함수 구현이 깔끔합니다!엔드포인트 상수를 사용하고 타입을 적절히 정의한 API 함수 구현이 좋습니다. 위의 반환 타입 개선사항만 적용하면 더욱 견고한 코드가 될 것입니다.
src/app/shared/types/user.type.ts (1)
1-8: 사용자 인터페이스 변경사항이 잘 구현되었습니다.User 인터페이스의 변경사항들이 인증 플로우와 잘 맞습니다:
name→nickname으로 변경이 적절합니다profileImageUrl의string | null타입이 선택적 프로필 이미지를 잘 표현합니다- 불필요한
role속성이 제거되어 인터페이스가 더 간결해졌습니다src/app/features/auth/types/auth.type.ts (4)
3-6: 로그인 요청 타입이 잘 정의되었습니다.필수 필드인
password가 적절히 정의되어 있습니다.
8-11: 로그인 응답 타입이 적절합니다.
accessToken과user정보를 포함한 응답 구조가 명확하게 정의되어 있습니다.
13-17: 회원가입 요청 타입이 잘 구성되었습니다.
nickname,password필드가 적절히 정의되어 있고, 새로운 User 인터페이스와 일관성이 있습니다.
19-26: AuthState 인터페이스가 잘 설계되었습니다.Zustand 스토어의 상태와 액션 메서드들이 명확하게 타입 정의되어 있어 타입 안전성을 보장합니다.
LeeCh0129
left a comment
LeeCh0129
left a comment
There was a problem hiding this comment.
useAuthStore에서 persist 미들웨어를 사용해서 상태관리를 잘 구현해주셨고, axios interceptor로 토큰 처리까지 잘 구현해주셨네요. 👍
yuj2n
left a comment
yuj2n
left a comment
There was a problem hiding this comment.
인성님 로그인/회원가입 구현 수고 많으셨고 덕분에 저도 관련 로직을 공부할 수 있었습니당!!
dkslel1225
left a comment
dkslel1225
left a comment
There was a problem hiding this comment.
로그인/회원가입 설명 감사합니다! 구현하느라 수고 많으셨습니당⛄️👍👍
📌 변경 사항 개요
✨ 요약
📝 상세 내용
useAuthStore
persist를 통하여 상태를 로컬 스토리지에 자동 저장하여 새로고침해도 상태가 유지되게 구현했습니다.axios
baseURL은 환경 변수(NEXT_PUBLIC_API_URL)를 사용하여 관리하고 있습니다.Authorization헤더를 주입하도록 구현했으며,publicPaths에는 스웨거 명세 기준으로 토큰이 필요 없는 API 경로를 등록하여 예외 처리 했습니다.useAuth
🔗 관련 이슈
#18
🖼️ 스크린샷
2025-06-09.140152.mp4
✅ 체크리스트
💡 참고 사항
Summary by CodeRabbit
신규 기능
변경 사항