Skip to content

[Setting/#78] API 패키지화 및 React Query 팩토리 구조 설정#79

Merged
skyblue1232 merged 1 commit intodevelopfrom
setting/#78/api-query-factory
Mar 31, 2026
Merged

[Setting/#78] API 패키지화 및 React Query 팩토리 구조 설정#79
skyblue1232 merged 1 commit intodevelopfrom
setting/#78/api-query-factory

Conversation

@skyblue1232
Copy link
Copy Markdown
Contributor

@skyblue1232 skyblue1232 commented Mar 31, 2026

✅ 작업 내용

📝 Description

API 요청/응답 로직을 도메인별 React Query 팩토리 구조로 정리하고, 공통 axios 인스턴스 및 캐시 갱신 유틸을 패키지화했습니다.

작업한 내용을 체크해주세요.

  • packages/api 패키지 추가
  • 공통 axios 인스턴스 및 토큰 처리 로직 분리
  • 도메인별 query / mutation / key 팩토리 구성
  • mutation 이후 캐시 갱신 helper 추가
  • customer / owner 앱에서 공통 API 패키지 연결 가능하도록 구조 정리

🚀 설계 의도 및 개선점

기존에는 API 호출, queryKey, mutation, 캐시 처리 로직이 화면 단위로 흩어질 수 있었는데, 이를 도메인 기준으로 묶어 재사용성과 유지보수성을 높이기 위해 React Query 팩토리 구조로 정리했습니다.
또한 mutation 성공 후 관련 캐시를 즉시 반영할 수 있도록 공통 캐시 업데이트 helper를 추가해, 각 기능에서 동일한 패턴으로 서버 상태를 동기화할 수 있게 했습니다.

📸 스크린샷 (선택)

  • 없음

📎 기타 참고사항

  • packages/api 의존성 및 workspace 연결 필요
  • 앱 단에서 mutation 사용 시 queryClient 주입 방식으로 사용
  • 백엔드 refresh endpoint 경로는 실제 서버 명세에 맞게 추가 확인 필요

Fixes #78

Summary by CodeRabbit

릴리스 노트

  • 새로운 기능
    • 새로운 API 클라이언트 라이브러리 추가로 고객 및 소유자 앱에 통합
    • 인증, 결제, 주문, 회원 관리, 가게 정보, 보상 시스템 등 핵심 기능을 일관된 방식으로 제공
    • 자동 토큰 갱신 및 요청/응답 처리 기능 포함

@skyblue1232 skyblue1232 self-assigned this Mar 31, 2026
@skyblue1232 skyblue1232 added setting 세팅 관련 (라이브러리, 유효성 변경 등) api 서버 - 클라이언트 통신 labels Mar 31, 2026
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 31, 2026

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

Project Deployment Actions Updated (UTC)
compasser-customer Ready Ready Preview, Comment Mar 31, 2026 11:09am
compasser-owner Ready Ready Preview, Comment Mar 31, 2026 11:09am

@skyblue1232 skyblue1232 added the feat 기능 구현 및 생성 label Mar 31, 2026
@skyblue1232 skyblue1232 merged commit a6caef7 into develop Mar 31, 2026
5 checks passed
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 31, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3929d805-b152-4cbc-8fdd-53f1e56a9df1

📥 Commits

Reviewing files that changed from the base of the PR and between 07e7188 and 8aa1c55.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (30)
  • apps/customer/package.json
  • apps/owner/package.json
  • packages/api/package.json
  • packages/api/src/core/http.ts
  • packages/api/src/core/mutation.ts
  • packages/api/src/core/query-client.ts
  • packages/api/src/core/token-store.ts
  • packages/api/src/core/types.ts
  • packages/api/src/domains/auth.ts
  • packages/api/src/domains/health.ts
  • packages/api/src/domains/index.ts
  • packages/api/src/domains/member.ts
  • packages/api/src/domains/order.ts
  • packages/api/src/domains/owner.ts
  • packages/api/src/domains/payment.ts
  • packages/api/src/domains/random-box.ts
  • packages/api/src/domains/store-image.ts
  • packages/api/src/domains/store-manager.ts
  • packages/api/src/domains/store.ts
  • packages/api/src/index.ts
  • packages/api/src/models/auth.ts
  • packages/api/src/models/common.ts
  • packages/api/src/models/member.ts
  • packages/api/src/models/order.ts
  • packages/api/src/models/owner.ts
  • packages/api/src/models/payment.ts
  • packages/api/src/models/random-box.ts
  • packages/api/src/models/store-image.ts
  • packages/api/src/models/store.ts
  • packages/api/tsconfig.json

📝 Walkthrough

Walkthrough

새로운 @compasser/api 패키지가 추가되었으며, Axios 기반 HTTP 클라이언트, 토큰 저장소, React Query 통합, 그리고 인증, 주문, 결제 등의 도메인 모듈을 포함합니다. 이 패키지는 고객 및 점주 앱에서 의존성으로 등록되었습니다.

Changes

Cohort / File(s) Summary
앱 의존성 업데이트
apps/customer/package.json, apps/owner/package.json
@compasser/api 워크스페이스 의존성 추가
핵심 API 인프라
packages/api/src/core/http.ts, packages/api/src/core/token-store.ts, packages/api/src/core/query-client.ts
Axios 클라이언트 팩토리, 토큰 갱신 인터셉터, LocalStorage 기반 토큰 저장소, 쿼리 무효화 헬퍼 구현
React Query 통합
packages/api/src/core/mutation.ts
캐시 업데이트 액션을 지원하는 createMutationWithCache 래퍼
공용 타입 및 인터페이스
packages/api/src/core/types.ts
API 응답, 토큰 저장소, 갱신 컨텍스트, 클라이언트 옵션 타입 정의
인증 도메인
packages/api/src/domains/auth.ts
회원가입, 로그인, 로그아웃, Kakao OAuth 엔드포인트 및 뮤테이션 래핑
도메인 모듈 (조회)
packages/api/src/domains/health.ts, packages/api/src/domains/member.ts
헬스 체크, 멤버 보상/마이페이지/QR 조회 쿼리 옵션
도메인 모듈 (주문)
packages/api/src/domains/order.ts
주문 생성/취소, 상태 조회 및 캐시 무효화 액션
도메인 모듈 (점주)
packages/api/src/domains/owner.ts
비즈니스 라이센스 검증, 예약 승인/거절 뮤테이션
도메인 모듈 (결제)
packages/api/src/domains/payment.ts
KakaoPay 준비/승인/취소 및 콜백 엔드포인트 래핑
도메인 모듈 (스토어/이미지/랜덤박스/매니저)
packages/api/src/domains/store.ts, packages/api/src/domains/store-image.ts, packages/api/src/domains/random-box.ts, packages/api/src/domains/store-manager.ts
스토어 조회/수정, 이미지 업로드/삭제, 랜덤박스 CRUD, 보상 기록/QR 검증 뮤테이션
도메인 인덱스
packages/api/src/domains/index.ts
모든 도메인 모듈 초기화 팩토리
데이터 모델 (인증/공통)
packages/api/src/models/auth.ts, packages/api/src/models/common.ts
회원가입/로그인 DTO, 역할/태그/상태 타입 정의
데이터 모델 (도메인별)
packages/api/src/models/member.ts, packages/api/src/models/order.ts, packages/api/src/models/owner.ts, packages/api/src/models/payment.ts, packages/api/src/models/random-box.ts, packages/api/src/models/store.ts, packages/api/src/models/store-image.ts
각 도메인의 DTO 및 응답 타입 별칭
패키지 설정 및 내보내기
packages/api/package.json, packages/api/tsconfig.json, packages/api/src/index.ts
패키지 메니페스트, TypeScript 설정, 공용 API 재내보내기

Sequence Diagram(s)

sequenceDiagram
    participant Client
    participant Interceptor as Request Interceptor
    participant TokenStore as Token Store
    participant API as API Server
    participant RefreshHandler as Refresh Handler

    Client->>Interceptor: 요청 (401 응답)
    Interceptor->>TokenStore: getAccessToken()
    TokenStore-->>Interceptor: access token
    Interceptor->>Interceptor: isRefreshing 플래그 확인
    alt 토큰 갱신 중이 아님
        Interceptor->>Interceptor: isRefreshing = true
        Interceptor->>RefreshHandler: refreshTokens(context)
        RefreshHandler->>API: 토큰 갱신 요청
        API-->>RefreshHandler: 새 토큰
        RefreshHandler->>TokenStore: setTokens(newTokens)
        TokenStore-->>RefreshHandler: ✓
        Interceptor->>Interceptor: 대기 중인 요청 처리
        Interceptor->>API: 원본 요청 재시도
        API-->>Client: 성공 응답
    else 토큰 갱신 중
        Interceptor->>Interceptor: 대기 큐에 요청 추가
    end
Loading
sequenceDiagram
    participant Client
    participant Mutation as useMutation
    participant Handler as onSuccess Handler
    participant CacheActions as Cache Actions
    participant QueryClient as Query Client

    Client->>Mutation: 뮤테이션 실행
    Mutation->>Handler: onMutate 콜백
    Mutation->>API: API 요청 전송
    API-->>Mutation: 응답 수신
    Mutation->>Handler: onSuccess(data, variables)
    Handler->>CacheActions: getActions(data, variables)
    CacheActions-->>Handler: 캐시 액션 배열
    Handler->>CacheActions: runCacheActions 실행
    loop 각 액션별
        alt set 액션
            CacheActions->>QueryClient: setQueryData(key, value)
        else invalidate 액션
            CacheActions->>QueryClient: invalidateQueries(key)
        else remove 액션
            CacheActions->>QueryClient: removeQueries(key)
        end
    end
    QueryClient-->>Client: 캐시 업데이트 완료
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested labels

chore

Poem

🐰 새로운 API 패키지가 탄생했네요!
토큰 갱신에 캐시 액션까지,
깔끔한 도메인 구조로 정렬되고,
타입 안전함은 이제 필수예요.
Compasser의 미래가 밝아집니다! ✨

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch setting/#78/api-query-factory

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

api 서버 - 클라이언트 통신 feat 기능 구현 및 생성 setting 세팅 관련 (라이브러리, 유효성 변경 등)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Setting] API 패키지화 및 React Query 팩토리 구조 설정

1 participant