[#29] Feat/29/로그인기능

[LMS10]

❓이슈

• close Feat : 로그인 기능 #29

📝 Description

이메일/비밀번호 기반의 일반 로그인 및 회원가입 기능을 구현합니다.
next-auth v4 + Credentials Provider를 사용하며, 백엔드 REST API와 연동합니다.

구현 흐름

회원가입
사용자 입력
→ 클라이언트 유효성 검사 (blur 이벤트 + 제출 시점)
→ Server Action (signupAction)
→ 백엔드 POST /api/v1/auth/signup 호출
→ 성공 시 /login으로 redirect
→ 실패 시 에러 코드별 분기 처리 (409: 이메일 중복, 400: 비밀번호 형식)

로그인
사용자 입력
→ 클라이언트 유효성 검사 (blur 이벤트 + 제출 시점)
→ next-auth signIn('credentials') 호출
→ NextAuth authorize() 내부에서 백엔드 POST /api/v1/auth/signin 호출
→ 성공 시 백엔드 accessToken을 JWT에 저장 → 암호화되어 쿠키에 저장
→ /workspace로 이동
→ 실패 시 이메일 입력칸 하단에 에러 메시지 노출

라우트 보호
요청 발생
→ middleware에서 next-auth/jwt의 getToken()으로 쿠키 내 JWT 확인
→ 비로그인 상태에서 /workspace, /mypage 접근 시 /login으로 redirect
→ 로그인 상태에서 /login, /signup 접근 시 /workspace로 redirect

주요 파일 설명

파일	역할
src/types/auth.ts	백엔드 API 요청/응답 타입 정의
src/types/next-auth.d.ts	NextAuth Session, JWT 타입 확장 (accessToken, userId 추가)
src/lib/auth-api.ts	백엔드 로그인/회원가입 API 호출 함수. ApiError 클래스로 HTTP 상태코드 전달
src/app/api/auth/[...nextauth]/route.ts	NextAuth 설정. Credentials Provider, JWT/Session 콜백 정의
src/middleware.ts	getToken()으로 Edge Runtime에서 안전하게 인증 상태 확인 후 라우팅
src/components/AuthProvider.tsx	SessionProvider 래퍼. 클라이언트에서 useSession() 사용을 위해 필요
src/app/layout.tsx	루트 레이아웃에 AuthProvider 적용
src/app/(before-login)/(auth)/signup/_actions.ts	회원가입 Server Action. 에러 코드별 field 분기 처리
src/app/(before-login)/(auth)/signup/page.tsx	회원가입 페이지. blur 기반 실시간 유효성 검사, 버튼 활성화 조건
src/app/(before-login)/(auth)/login/page.tsx	로그인 페이지. blur 기반 실시간 유효성 검사, 버튼 활성화 조건
src/components/TempLogoutButton.tsx	임시 로그아웃 버튼. 헤더 구현 후 제거 예정
src/app/(before-login)/(landing)/page.tsx	임시 로그아웃 버튼 마운트. 헤더 구현 후 제거

유효성 검사 규칙

로그인

• 이메일: 필수, 이메일 형식 확인
• 비밀번호: 필수
• 모든 필드가 유효할 때만 로그인 버튼 활성화
• 로그인 실패(401): 이메일 입력칸 하단에 에러 메시지 노출

회원가입

• 이메일: 필수, 이메일 형식 확인
• 이름: 필수
• 비밀번호: 필수, 6자 이상, 영문+숫자+특수문자(!@#$%^&*) 조합
• 비밀번호 확인: 필수, 비밀번호 일치 여부 확인
• 모든 필드가 유효할 때만 가입하기 버튼 활성화
• 이메일 중복(409): 이메일 입력칸 하단에 에러 메시지 노출
• 비밀번호 형식 오류(400): 비밀번호 입력칸 하단에 에러 메시지 노출

🌀 PR Type

어떤 변경 사항이 있나요?

• 새로운 기능 추가
• 버그 수정
• CSS 등 사용자 UI 디자인 변경
• 코드에 영향을 주지 않는 변경사항 (오타 수정, 탭 사이즈 변경, 변수명 변경)
• 코드 리팩토링
• 주석 추가 및 수정
• 문서 수정
• 테스트 추가, 테스트 리팩토링
• 빌드 부분 혹은 패키지 매니저 수정
• 파일 혹은 폴더명 수정
• 파일 혹은 폴더 삭제

✅ Checklist

PR Checklist

PR이 다음 요구 사항을 충족하는지 확인하세요.

• Branch Convention 확인

  feat/ 기능 구현, fix/ 버그 수정, refactor/ 개선

• Base Branch 확인
• 커밋 메시지 컨벤션 준수
• 적절한 Label 지정
• Assignee 및 Reviewer 지정

Test Checklist

• 로컬 작동 확인

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
remate	Ready	Preview, Comment	May 4, 2026 11:10am

[minzx23]

잘 돌아갑니다~! 확실히 코드가 많이 추가됐네욤 고생하셨습니다!!