feat: 온보딩 플로우 API 연동 및 인증 로직 개선 #86
Conversation
There was a problem hiding this comment.
전체적으로 코멘트 남깁니다. 아래 쿼리키 관련 코멘트도 확인 부탁드립니다.
- 웬만하면 hook 화 시킨 함수를 호출해서 사용해주세요! 현재는 다 일반 함수를 호출하고 계신 것 같습니다.
- 현재 /onboarding/complete까지 제대로 온보딩 된 것을 확인했는데 여기서 멈추는 느낌이 들어서 몇 초 있다가 다른 페이지 (ex)홈, 기기검색) 으로 보낸다던지, 사용자가 가운데 이미지를 클릭할 경우 어디로 보낸다던지 이런 로직이 추가되면 좋을 것 같습니다. 논의해보시면 좋을 것 같습니다.
src/apis/combo/postCombo.ts
Outdated
| import { axiosInstance } from '@/apis/axios/axios'; | ||
| import type { PostComboRequest, PostComboResponse } from '@/types/combo/combo'; | ||
| import { useMutation } from '@tanstack/react-query'; | ||
|
|
||
| // 조합 생성 API | ||
| export const postCombo = async (payload: PostComboRequest): Promise<PostComboResponse> => { | ||
| const { data } = await axiosInstance.post<PostComboResponse>('/api/combos', payload); | ||
| return data; | ||
| }; | ||
|
|
||
| // 조합 생성 Mutation | ||
| export const usePostCombo = () => { | ||
| return useMutation({ | ||
| mutationFn: postCombo, | ||
| }); |
There was a problem hiding this comment.
오 제가 추후 사용해야 하는데 온보딩에서도 동일하게 사용되는군요! 만들어주셔서 감사합니다.
There was a problem hiding this comment.
그런데 함수 이름을 postCombo로 하면 다른 POST /api/combos/?? 이런 api 들이랑 헷갈리기 쉬운 것 같습니다.
조합 생성 이라는 함수 이름처럼 이름만 보면 바로 알 수 있게 네이밍 부탁드리고 ex) usePostCreateCombination
파일명과 import 경로까지 잊지말고 수정해주시면 좋겠습니다. 앞으로도 마찬가지입니다!
src/constants/queryKeys.ts
Outdated
| import type { TagType } from '@/types/tag/tag'; | ||
|
|
||
| export const queryKeys = { | ||
| userProfile: ['userProfile'] as const, | ||
| } as const; | ||
| tags: { | ||
| all: ['tags'] as const, | ||
| byType: (type: TagType) => ['tags', type] as const, | ||
| }, | ||
| }; |
There was a problem hiding this comment.
제가 말씀드린 쿼리키 상수화는
export const queryKey = {
MY_PROFILE: 'my_profile',
COMBO_NAME: 'combo_name',
SAMPLE_NAME: 'sample_name'
};이런 식으로 하나의 배열 속에서 키만 관리하는 방식이었습니다!
각자 이 배열 안에 맨 끝에 키만 추가하면 되니까요!
++ 그래서 제가 드린 예시에도
return useQuery({
queryKey: [queryKey.MY_PROFILE],이런 식으로 사용이 가능한겁니다.
|
혹시 훅화 시켜서 사용해달라는 것이 api함수 말씀하시는건가요? 아니면 페이지에 포함된 다른 로직함수 부분들 말씀하시는 걸까요? |
이미 훅화를 시키신 api 함수를 호출할 때 사용해달라는 의미였습니다. |
|
넵 수정했습니다. 확인 한번 부탁드려요! |
네 확인했습니다 |
📌 관련 이슈번호
close : #84
🔍 구현한 내용
1. 로그인/회원가입 플로우 개선
useLoginFlow훅 구현: 로그인 API 호출 + 토큰 저장 + 유저 정보 캐시를 하나의 훅으로 통합finalizeLogin유틸 함수: 로그인/회원가입 후 공통 처리 로직 분리 (토큰 저장 + 유저 프로필 캐시)2. 태그 관리 기능 구현
getTags): 전체 태그 목록 조회 (캐시 최적화: staleTime 1시간, gcTime 24시간)postTags): 사용자가 선택한 태그 저장 (replace 동작)splitTags): 태그를tagKey기준으로TAG_GROUP_BY_KEY상수와 비교하여 interest/lifestyle/brand로 자동 분류useGroupedTags훅: 태그 조회 + 분류를 하나의 훅으로 통합3. 온보딩 플로우 완성 및 API 연동
📸 스크린샷 or 실행 영상
2026-01-27.00-54-11.mp4
📢 리뷰어에게
현재 모든 API 에러 처리는 alert로 구현해놨습니다.
로딩처리는 로딩 중 버튼 disabled 외에 UI는 따로 아직 구현 안했습니다.
getTags로 태그 목록을 가져오는 API가 현재 INTERST/LIFESTYLE/BRAND에 따른 각 태그 목록을 제공하지 못해서 전체태그 목록을 가져올 수 밖에 없다고 합니다.
이에 따라 프론트에서 태그를 분류하는 함수를 따로 만들어 처리를 하였으니 필요하실 때 쓰시면 될거 같습니다.