Skip to content

[FEAT] Auth 관련 API & 상태 관리 초기 세팅#88

Merged
waldls merged 18 commits into
developfrom
feature/#76-auth-api
Jul 27, 2025
Merged

[FEAT] Auth 관련 API & 상태 관리 초기 세팅#88
waldls merged 18 commits into
developfrom
feature/#76-auth-api

Conversation

@waldls

@waldls waldls commented Jul 27, 2025

Copy link
Copy Markdown
Member

체크리스트

  • 🧰 npm run dev로 실행 환경에서 잘 돌아가는걸 확인했나요?
  • 🎋 base 브랜치를 develop 브랜치로 설정했나요?
  • 🖌️ PR 제목은 형식에 맞게 잘 작성했나요?
  • 🏷️ 라벨은 등록했나요?
  • 🙆 리뷰어는 등록했나요?

📌 관련 이슈번호


✅ Key Changes

  • apis/axios.ts

    • axiosInstance 기본 인스턴스 생성 및 baseURL 설정
    • 모든 요청에 accessToken 자동 포함 (요청 인터셉터)
    • accessToken 만료 시 refreshToken으로 재발급 요청 (응답 인터셉터)
    • 중복 재발급 요청 방지를 위한 전역 Promise 사용(tokenReissuePromise)
    • accessToken 재발급 실패 시 /onboarding 경로로 강제 이동
  • apis/auth.ts

    • accessToken 재발급 요청 함수 구현 (/api/token/reissue)
    • Google OAuth2 로그인 리다이렉트 함수 추가
    • Kakao OAuth2 로그인 리다이렉트 함수 임시 구현 (명세서 없음)
  • types/auth.ts

    • 토큰 재발급 응답 타입 ReIssueTokenResponse 정의(공통 응답 형태 CommonResponse 기반으로 작성)
  • hooks/useLocalStorage.ts

    • JSON 기반 로컬 스토리지 커스텀 훅 구현
    • key 기반 setItem, getItem, removeItem 기능 제공
    • 예외 처리 및 자동 JSON.stringify/parse 포함
  • pages/onboarding/GoogleLoginRedirect.tsx

    • Google 로그인 리다이렉트 후 accessToken 발급 요청 처리
    • 발급된 토큰을 localStorage에 저장
    • 추후 사용자 정보 조회 후 분기 처리를 위한 TODO 주석 추가

📸 스크린샷 or 실행영상


💬 To Reviewers

  • 우선적으로 노션 페이지에 있는 .env 코드에 서버 주소 넣어서 그대로 사용하시면 됩니다. (구글 & 카카오 로그인 리다이렉트 페이지 경로)
  • 프론트 측에서는 refreshToken을 직접 관리할 필요가 없습니다. 따라서 accessToken만 로컬 스토리지에 저장하는 방식으로 구현했습니다.

waldls added 18 commits July 23, 2025 23:39
@waldls waldls added ✨ FEAT 기능 구현 🌸 유민 labels Jul 27, 2025
@waldls
waldls requested review from a team, HiJuwon, gaeulzzang, jinj00oo and sunhwaaRj as code owners July 27, 2025 12:04
@github-actions

Copy link
Copy Markdown

@HiJuwon HiJuwon left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다, 나중에 백엔드 측에서 서버 배포하면 코드 실행해보고 문제 있을 경우 추후 수정하면 될 것 같습니다~~!!

@gaeulzzang gaeulzzang left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

로그인부터 토큰 재발급까지 수고 많으셨습니다 ❤️

const setItem = (value: unknown) => {
try {
// 값을 JSON 문자열로 변환해서 저장
window.localStorage.setItem(key, JSON.stringify(value));

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3: 혹시 json으로 저장하는 이유 알 수 있을까요??

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

accessToken은 문자열이지만, 혹시 모를 타입 변화나 재사용 상황에 대비해서 JSON.stringify()로 안전하게 저장했습니다!

@sunhwaaRj sunhwaaRj left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

공통 부분 담당해주셔서 감사합니다!! await axiosInstance.get 으로 uri 적용하겠습니다

@waldls
waldls merged commit bbfcae8 into develop Jul 27, 2025
1 check passed
@waldls
waldls deleted the feature/#76-auth-api branch July 27, 2025 12:18
@HiJuwon HiJuwon added this to the Demo Day milestone Aug 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEAT] Auth 관련 API & 상태 관리 초기 세팅

4 participants