[FEAT] 유저 api 연동

[limtjdghks]

[FEAT] 유저 api 연동

🎯 Issue

• [FEAT] 유저 api 연동 #71

---

📝 변경 내용

• 유저 API 사용을 위한 타입을 선언하였습니다.
• 백엔드에 선언 되어 있는 enums를 조회하는 로직을 구현하였습니다
• 로그인 및 회원가입 로직을 페이지에 연동하였습니다
• 온보딩 페이지에서 기본 프로필을 설정하는 API를 연동하였습니다
• 토큰 재발급 로직을 개선하였습니다
• 회원가입 플로우에서 휴대폰 번호 인증 -> 중복체크로 변경됨에 따라 디자인이 수정되었습니다

---

✅ 변경 사항

• 새로운 기능 추가
• 버그 수정
• UI/UX 개선
• 리팩토링
• 문서 업데이트

---

📷 스크린샷

---

📋 체크리스트

• 브라우저에서 정상 동작 확인
• 기존 기능에 영향 없음 확인

👀 기타 사항

• 헤더 디자인 변경에 맞춰 추후 프로필 조회 API를 추가해야합니다 (이미지, 닉네임, 파트, 이메일)
  • 로그아웃 API는 구현되어있으나 헤더 디자인 수정에 맞춰 추가해야합니다
• 온보딩 페이지에서 프로필 설정 이후 AI 분석 페이지로 이동하게 수정해야합니다
  • 현재 분석 중인 페이지가 구현이 안되어있어 추가된 이후 작업해야합니다

[netlify]

✅ Deploy Preview for umc-nect ready!

Name	Link
🔨 Latest commit	c727f61
🔍 Latest deploy log	https://app.netlify.com/projects/umc-nect/deploys/69849613ea086e000851b64b
😎 Deploy Preview	https://deploy-preview-73--umc-nect.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[gemini-code-assist]

Summary of Changes

Hello @limtjdghks, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 사용자 인증 및 온보딩 프로세스와 관련된 프론트엔드 기능을 백엔드 API와 연동하여 실제 서비스 환경에서 동작하도록 구현합니다. 로그인, 회원가입, 프로필 설정 등 핵심 사용자 플로우를 API 기반으로 전환하고, 온보딩 과정에서 필요한 다양한 선택지(직업, 스킬 등)를 동적으로 불러올 수 있도록 Enum API를 통합합니다. 또한, 토큰 재발급 로직을 개선하여 사용자 세션 관리의 안정성을 확보했습니다.

Highlights

• 유저 API 연동: 로그인, 회원가입, 프로필 설정 등 유저 관련 백엔드 API를 프론트엔드에 연동했습니다.
• Enum API 연동: 직업, 역할, 스킬, 관심분야, 목표 등 온보딩 과정에 필요한 다양한 Enum 데이터를 백엔드에서 조회하여 사용하도록 연동했습니다.
• 회원가입 플로우 개선: 휴대폰 번호 인증 대신 중복 확인 로직으로 변경하고, 회원가입 단계 관리를 위한 SignupStepContext를 도입했습니다.
• 온보딩 프로필 설정 연동: 온보딩 페이지에서 입력한 프로필 정보를 postSetup API를 통해 백엔드에 저장하도록 연동했습니다.
• 토큰 재발급 로직 강화: Axios 인터셉터에서 리프레시 토큰을 사용하여 액세스 토큰을 재발급하는 로직을 개선하고 안정성을 높였습니다.

Changelog

• src/api/enums.ts
  • 다양한 Enum 데이터를 조회하는 API 함수들을 정의했습니다 (예: getSkillCategory, getRoles, getJobs 등).
• src/api/users.ts
  • 사용자 인증 및 관리를 위한 API 함수들을 정의했습니다 (예: postLogin, postSignup, postSetup, postCheck, postRefreshToken 등).
• src/components/auth/login/AuthForm.tsx
  • 더미 로그인 로직을 postLogin API 호출로 대체하고, 응답으로 받은 액세스/리프레시 토큰을 로컬 스토리지에 저장하도록 구현했습니다.
  • 로그인 버튼에 isSubmitting 상태를 추가하여 중복 제출을 방지하고 사용자 경험을 개선했습니다.
  • 회원가입 링크를 /signup 경로로 연결했습니다.
• src/components/auth/onboarding/OnboardingMain.tsx
  • 온보딩 완료 시 postSetup API를 호출하여 프로필 정보를 백엔드에 저장하도록 연동했습니다.
  • useOnboardingEnums 훅을 사용하여 온보딩에 필요한 Enum 데이터를 미리 불러오도록 useEffect를 추가했습니다.
  • 폼 데이터를 RequestSetupDto 형식으로 변환하는 toRequestSetupDto 유틸리티 함수를 추가했습니다.
  • 제출 버튼에 isSubmitting 상태를 추가했습니다.
• src/components/auth/onboarding/steps/Step1.tsx
  • 직업 선택 드롭다운 옵션을 useOnboardingEnums에서 가져오도록 변경하고, 선택 로직을 API value/label 형식에 맞춰 수정했습니다.
• src/components/auth/onboarding/steps/Step2.tsx
  • 역할 및 역할별 직종 선택 옵션을 useOnboardingEnums에서 가져오도록 변경하고, 선택 로직을 API value/label 형식에 맞춰 수정했습니다.
• src/components/auth/onboarding/steps/Step3.tsx
  • 스킬 카테고리 및 스킬 목록을 useOnboardingEnums에서 가져오도록 변경하고, 스킬 선택 및 직접 입력 로직을 API value/label 형식에 맞춰 수정했습니다.
• src/components/auth/onboarding/steps/Step4.tsx
  • 관심분야 선택 옵션을 useOnboardingEnums에서 가져오도록 변경하고, 선택 로직을 API value/label 형식에 맞춰 수정했습니다.
• src/components/auth/onboarding/steps/Step5.tsx
  • 목표 선택 옵션을 useOnboardingEnums에서 가져오도록 변경하고, 선택 로직을 API value/label 형식에 맞춰 수정했습니다.
• src/components/auth/singup/AgreeStep.tsx
  • 회원가입 완료 시 postSignup 및 postAgree API를 호출하도록 연동했습니다.
  • isSubmitting 상태와 에러 메시지 표시 로직을 추가했습니다.
  • useSignup 스토어에서 signupData를 가져와 사용하도록 변경했습니다.
  • 회원가입 단계 관리를 useSignupStep 컨텍스트로 이관했습니다.
• src/components/auth/singup/DoneStep.tsx
  • 회원가입 완료 화면에서 useSignup 스토어의 signupData.name을 사용하여 사용자 이름을 표시하도록 변경했습니다.
  • 완료 버튼 클릭 시 resetSignupData를 호출하여 회원가입 데이터를 초기화하도록 추가했습니다.
• src/components/auth/singup/Form1Step.tsx
  • 기존 휴대폰 번호 인증 로직(인증번호 입력, 타이머)을 제거하고, postCheck API를 이용한 전화번호 중복 확인 로직으로 대체했습니다.
  • isCheckingPhone 상태를 추가하여 중복 확인 중 UI를 처리합니다.
  • signupForm1Schema에서 certificationNumber 필드를 제거했습니다.
  • 폼 제출 시 signupData에 이름과 전화번호를 저장하도록 변경했습니다.
• src/components/auth/singup/Form2Step.tsx
  • 이메일 중복 확인 로직을 postCheck API 호출로 대체하고, isCheckingEmail 상태를 추가했습니다.
  • 폼 제출 시 signupData에 이메일, 비밀번호를 저장하도록 변경했습니다.
• src/components/auth/singup/SignupMain.tsx
  • 회원가입 단계 관리를 useSignup 스토어 대신 새로 생성된 useSignupStep 컨텍스트를 사용하도록 변경했습니다.
• src/components/header/ExploreHeader.tsx
  • 프로필 아이콘 클릭 시 액세스 토큰 유무를 확인하여, 토큰이 없으면 로그인 페이지로 리다이렉트하도록 로직을 추가했습니다.
• src/components/layout/AuthLayout.tsx
  • 회원가입 헤더 표시 로직을 간소화하여 useSignup 스토어의 currentStep에 의존하지 않도록 변경했습니다.
• src/contexts/SignupStepContext.tsx
  • 회원가입 플로우의 현재 단계를 관리하는 SignupStepContext를 생성했습니다.
• src/pages/auth/SignupPage.tsx
  • SignupStepProvider로 회원가입 페이지 컴포넌트들을 감싸서 단계 관리 컨텍스트를 제공하도록 변경했습니다.
• src/stores/useOnboardingEnums.ts
  • Zustand를 사용하여 온보딩 과정에서 필요한 직업, 역할, 스킬, 관심분야, 목표 등의 Enum 데이터를 비동기적으로 불러와 관리하는 스토어를 구현했습니다.
• src/stores/useSignup.ts
  • currentStep 상태를 SignupStepContext로 이관하고, 회원가입 과정에서 입력되는 사용자 정보를 저장하는 signupData 상태를 추가했습니다.
  • setSignupData 및 resetSignupData 액션을 추가했습니다.
• src/types/api/commonResponse.ts
  • CommonResponse 인터페이스의 body 필드를 선택적(optional)으로 변경하고, 제네릭 T의 기본값을 void로 설정했습니다.
• src/types/api/enums.ts
  • Enum API 응답을 위한 타입 정의 (EnumItem, ResponseSkillCategoryDto 등)를 추가했습니다.
• src/types/api/users.ts
  • 사용자 관련 API 요청 및 응답을 위한 타입 정의 (RequestLoginDto, ResponseLoginDto, RequestSignupDto 등)를 추가했습니다.
• src/utils/AxiosInstance.ts
  • Axios 인터셉터에서 401 에러 발생 시 postRefreshToken API를 사용하여 토큰을 재발급하도록 로직을 개선했습니다.
  • 리프레시 토큰 요청 자체에서 401 에러가 발생하면 모든 토큰을 삭제하고 에러를 던지도록 처리했습니다.
• src/utils/validate.ts
  • signupForm1Schema에서 certificationNumber 필드 유효성 검사를 제거했습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

이 PR은 유저 관련 API 연동 및 회원가입/온보딩 플로우 개선에 대한 변경사항을 포함하고 있습니다. 전반적으로 API 연동 및 상태 관리 리팩토링이 잘 이루어졌습니다. 특히, 하드코딩된 데이터를 API에서 받아오도록 변경하고, Zustand와 Context API를 사용하여 상태 관리를 개선한 점이 인상적입니다. 몇 가지 개선점을 제안드립니다. 온보딩 과정에서 데이터 변환 로직의 효율성을 높이고, API 호출 실패 시 사용자에게 명확한 피드백을 제공하도록 보완하면 좋겠습니다. 또한, 회원가입 과정에서 여러 API를 호출할 때 발생할 수 있는 데이터 정합성 문제에 대한 고려가 필요해 보입니다.