[Feat] 인증 인가 관련 토큰 로직 생성

[yoorli]

📝 변경 사항

💡src/types/service/auth.ts

• LoginResponse 타입에서 refreshToken 제거 (리프레시 토큰은 쿠키로만 관리)
• 액세스 토큰 재발급 응답용 RefreshResponse 타입 정의

💡src/lib/auth/token.ts

• 액세스 토큰 관리 유틸 추가
  • setAccessToken(token: string, maxAgeSeconds?: number)
    • 브라우저 환경(document 존재)에서만 동작하도록 방어 코드 추가
    • accessToken를 키로 하는 쿠키 작성
    • maxAgeSeconds가 주어지면 Max-Age 옵션을 함께 설정
  • clearAccessToken()
    • 브라우저 환경 체크 후 accessToken 쿠키를 Max-Age=0으로 설정하여 삭제

💡src/api/service/auth-service/index.ts

• RefreshResponse 타입 import 추가
• 토큰 유틸(setAccessToken, clearAccessToken) import 추가
• 엔드포인트 경로 정리
  • 로그인: POST /api/v1/auth/login → POST /auth/login
  • 회원가입: POST /api/v1/auth/signup → POST /auth/signup
  • 로그아웃: POST /api/v1/auth/logout → POST /auth/logout
  • 액세스 토큰 재발급: POST /auth/refresh 신규 추가
• authServiceRemote 구현 변경
  • login
    • 로그인 성공 시 응답의 accessToken, expiresIn을 사용하여 setAccessToken 호출
    • 이후 로그인 응답 데이터를 그대로 반환
  • logout
    • 로그아웃 요청 실패 여부와 상관없이(try/finally) clearAccessToken을 호출하여 클라이언트 측 액세스 토큰 제거
  • refresh
    • POST /auth/refresh 호출 후 RefreshResponse 수신
    • 응답의 accessToken, expiresIn을 사용하여 setAccessToken으로 액세스 토큰 갱신
    • 재발급 응답(RefreshResponse) 반환

💡src/mock/service/auth/auth-utils.ts
💡src/mock/service/auth/auth-handlers.ts

• 목 토큰 유틸에서 응답 구조 수정
• 로그인 목 핸들러 개선
• 리프레시 토큰 목 핸들러 추가

💡src/components/pages/login/login-form/index.tsx

• React Query 연동 추가

---

🔗 관련 이슈

Closes #114

---

🧪 테스트 방법

• 수동 테스트 검증(로컬 환경)
• 유닛 테스트 검증
• 통합 테스트 검증

---

📸 스크린샷 (선택)

---

📋 체크리스트

• 관련 문서를 업데이트했습니다 (필요한 경우)
• 테스트를 추가/수정했습니다 (필요한 경우)
• Breaking change가 있다면 명시했습니다

---

💬 추가 코멘트

• 현재 구현에서는 액세스 토큰을 클라이언트 쿠키(document.cookie) 기반으로 관리하고, 리프레시 토큰은 HttpOnly 쿠키로만 관리하는 구조를 MSW 레벨에서 시뮬레이션하고 있습니다.

---

CodeRabbit Review는 자동으로 실행되지 않습니다.

Review를 실행하려면 comment에 아래와 같이 작성해주세요

@coderabbitai review

---

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch yoolri-feat/token-logic

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎨 Storybook Report

ℹ️ Story 변경사항이 감지되지 않았습니다

이 PR에는 Story 변경이 없어서 빌드를 스킵했습니다.

Status	Storybook	Build Log	Updated (UTC)
⏭️ Skipped	-	-	2025-12-09 09:17:11

[github-actions]

📊 Coverage Report

Status	Build Log	Updated (UTC)
✅ Ready	View Build	2025-12-09 09:17:30

📉 #128을 main에 병합하면 coverage가 0.32% 감소합니다.

Coverage 요약

@@             Coverage Diff             @@
##             main     #128       +/-   ##
===========================================
- Coverage   28.16%   27.84%    -0.32%     
===========================================
  Files         121      122        +1     
  Lines        4732     4788       +56     
  Branches      217      218        +1     
===========================================
  Hits         1333     1333         0     
+ Misses       3399     3455       +56     

영향받은 파일

✅ 이 PR로 영향받은 파일이 없습니다

수정된 모든 파일이 현재 coverage를 유지했습니다.

[github-actions]

🚀 PR Preview Report

✨ Build가 성공적으로 완료되었습니다.

Preview에서 변경사항을 확인하세요.

Status	Preview	Build Log	Updated (UTC)
✅ Ready	Visit Preview	View Logs	2025-12-09 09:18:55

[Chiman2937]

수고하셨습니다!

[Chiman2937]

로그인/회원가입은 직접 api 호출을 하고 있는 것 같은데, 맞다면 React Query를 사용하지 않는 거니까 해당 로직은 필요없어보입니다 :)

React Query를 사용하더라도 invalidateQueries의 용도는 useQuery 로 get한 데이터가 stale 됐다고 강제 변경한 뒤 데이터를 다시 refetch 해오는 용도로 쓰기 때문에 login에서는 필요 없을 것 같아요!

[Chiman2937]

getAccessToken과 clearAccessToken은 클라이언트에서만 사용되어야 하니까 서버 환경일 때는 error를 던져주면 디버깅에 용이할 것 같네요!