Skip to content

[Feat/#90] 사용자 마이페이지 API 연동#92

Merged
skyblue1232 merged 1 commit intodevelopfrom
feat/#90/customer-mypage-apis
Apr 6, 2026
Merged

[Feat/#90] 사용자 마이페이지 API 연동#92
skyblue1232 merged 1 commit intodevelopfrom
feat/#90/customer-mypage-apis

Conversation

@skyblue1232
Copy link
Copy Markdown
Contributor

@skyblue1232 skyblue1232 commented Apr 6, 2026

✅ 작업 내용

📝 Description

마이페이지에 회원 정보 조회를 연결하고, 프로필/통계 데이터를 실제 응답값으로 보여주도록 수정했습니다.
적립 QR 모달과 관련 query 훅도 함께 추가했습니다. :contentReference[oaicite:0]{index=0}

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

  • 마이페이지 API 연동
  • 프로필/통계 데이터 바인딩
  • 로딩/에러 처리
  • 적립 QR 모달 추가
  • 회원 관련 query 훅 추가

🚀 설계 의도 및 개선점

정적 화면을 실제 회원 데이터 기반 구조로 바꾸고, 마이페이지에서 필요한 조회 흐름을 query 단위로 분리했습니다.
QR 기능은 모달로 분리해 기존 화면 흐름을 크게 건드리지 않도록 구성했습니다.

📸 스크린샷 (선택)

  • 마이페이지 화면
  • 적립 QR 모달 화면

📎 기타 참고사항

  • 테스트 방식: 마이페이지 진입, 데이터 노출, QR 모달 오픈 확인
  • 환경 변수 변경 여부: 없음

Fixes #90

Summary by CodeRabbit

릴리스 노트

  • 새로운 기능

    • 마이페이지에 "적립 QR" 버튼 추가 - QR 코드를 통한 포인트 적립 기능 제공
    • 로그아웃 모달 확인 기능 추가로 의도하지 않은 로그아웃 방지
  • 버그 수정

    • 프로필 및 통계 정보 로딩 상태 개선
    • 계정 정보 표시 안정성 향상

@skyblue1232 skyblue1232 self-assigned this Apr 6, 2026
@skyblue1232 skyblue1232 added feat 기능 구현 및 생성 api 서버 - 클라이언트 통신 labels Apr 6, 2026
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 6, 2026

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

Project Deployment Actions Updated (UTC)
compasser-customer Ready Ready Preview, Comment Apr 6, 2026 5:11am
compasser-owner Ready Ready Preview, Comment Apr 6, 2026 5:11am

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 6, 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: ddecbac0-fe3d-4dc2-87a6-c2a757ca98df

📥 Commits

Reviewing files that changed from the base of the PR and between 6f0aa1c and 512995e.

📒 Files selected for processing (9)
  • apps/customer/src/app/(tabs)/mypage/_components/AccountCard.tsx
  • apps/customer/src/app/(tabs)/mypage/_components/ProfileSection.tsx
  • apps/customer/src/app/(tabs)/mypage/_components/RewardQrModal.tsx
  • apps/customer/src/app/(tabs)/mypage/_components/StatsCard.tsx
  • apps/customer/src/app/(tabs)/mypage/page.tsx
  • apps/customer/src/shared/api/api.ts
  • apps/customer/src/shared/queries/mutation/auth/useLogoutMutation.ts
  • apps/customer/src/shared/queries/query/member/useMyPageQuery.ts
  • apps/customer/src/shared/queries/query/member/useRewardQrQuery.ts

📝 Walkthrough

워크스루

MyPage 컴포넌트가 회원 데이터를 useMyPageQuery를 통해 페칭하도록 변경되었습니다. ProfileSection, StatsCard, AccountCard는 props 기반으로 리팩토링되었으며, RewardQrModal 신규 컴포넌트가 추가되고 useLogoutMutation 훅이 로그아웃 플로우를 처리하도록 수정되었습니다. 새로운 memberModule이 API 레이어에 추가되어 회원 관련 쿼리와 뮤테이션을 지원합니다.

변경사항

코호트 / 파일(들) 요약
데이터 페칭 및 API 통합
apps/customer/src/shared/api/api.ts, apps/customer/src/shared/queries/query/member/useMyPageQuery.ts
memberModule을 API 레이어에 추가하고, MyPage 데이터를 페칭하는 새로운 useMyPageQuery 훅 구현
MyPage 페이지
apps/customer/src/app/(tabs)/mypage/page.tsx
useMyPageQuery를 통해 회원 데이터를 페칭하고, 로딩/에러 상태를 처리하며 자식 컴포넌트에 props 전달
ProfileSection 컴포넌트
apps/customer/src/app/(tabs)/mypage/_components/ProfileSection.tsx
props 기반 컴포넌트로 변경(memberName, nickname, email, isLoading), RewardQrModal 통합 및 "적립 QR" 버튼 추가
RewardQrModal 및 쿼리
apps/customer/src/app/(tabs)/mypage/_components/RewardQrModal.tsx, apps/customer/src/shared/queries/query/member/useRewardQrQuery.ts
QR 코드 모달 신규 컴포넌트 추가, 60초 카운트다운 및 주기적 폴링(refetchInterval: 60000) 기능 구현
StatsCard 컴포넌트
apps/customer/src/app/(tabs)/mypage/_components/StatsCard.tsx
props 기반 컴포넌트로 변경(totalStampCount, totalUnboxingCount, totalCouponCount, isLoading), 동적 값 렌더링
AccountCard 및 로그아웃
apps/customer/src/app/(tabs)/mypage/_components/AccountCard.tsx, apps/customer/src/shared/queries/mutation/auth/useLogoutMutation.ts
useLogoutMutation 훅 추가, 로그아웃 플로우를 뮤테이션 기반으로 변경, 동적 로딩 상태 텍스트("로그아웃 중..." vs "로그아웃")

시퀀스 다이어그램

sequenceDiagram
    participant User as 사용자
    participant MyPage as MyPage<br/>(page.tsx)
    participant Query as useMyPageQuery<br/>훅
    participant API as API<br/>(memberModule)
    participant Components as ProfileSection<br/>StatsCard<br/>AccountCard

    User->>MyPage: MyPage 접속
    MyPage->>Query: useMyPageQuery() 호출
    Query->>API: memberModule.queries.myPage() 실행
    alt 데이터 로딩 중
        API-->>Query: isLoading = true
        Query-->>MyPage: isLoading = true
        MyPage->>Components: isLoading props 전달
        Components->>Components: "-" 렌더링 (로딩 상태)
    else 데이터 페칭 완료
        API-->>Query: 회원 데이터 반환
        Query-->>MyPage: memberName, nickname, email,<br/>totalStampCount 등
        MyPage->>Components: 회원 데이터 props 전달
        Components->>Components: 회원 정보 및 통계 렌더링
    end
Loading
sequenceDiagram
    participant User as 사용자
    participant ProfileSection as ProfileSection<br/>컴포넌트
    participant Modal as RewardQrModal<br/>컴포넌트
    participant Query as useRewardQrQuery<br/>훅
    participant API as API<br/>(memberModule)

    User->>ProfileSection: "적립 QR" 버튼 클릭
    ProfileSection->>ProfileSection: isQrModalOpen = true
    ProfileSection->>Modal: open={true} 전달
    Modal->>Query: useRewardQrQuery({ enabled: true }) 호출
    Query->>API: memberModule.queries.qrTest() 실행
    alt QR 생성 중
        API-->>Query: isLoading = true
        Query-->>Modal: "QR 생성 중..." 표시
    else QR 생성 완료
        API-->>Query: QR 데이터 반환
        Query-->>Modal: QR 데이터 설정
        Modal->>Modal: 카운트다운 시작 (60초)
        Modal->>Modal: 매 60초마다<br/>refetchInterval로 QR 갱신
        Modal->>Modal: QR 이미지 렌더링
    end
    User->>Modal: 모달 닫기 (오버레이 클릭)
    Modal->>Modal: onClose() 호출
    Modal->>ProfileSection: isQrModalOpen = false
Loading

코드 리뷰 예상 난이도

🎯 4 (복잡함) | ⏱️ ~45분

연관 이슈

  • [Feat] 사용자 마이페이지 API 연동 #90: 이 PR과 동일한 코드 레벨 변경사항을 포함하고 있으며, memberModule, useMyPageQuery, useRewardQrQuery, useLogoutMutation을 추가하고 이를 MyPage, ProfileSection, StatsCard, RewardQrModal에 연결하는 작업이 직접 관련됨.

연관 PR

  • [Feat/#44] 고객/사장 회원가입 페이지 생성  #45: 동일한 파일 apps/customer/src/app/(tabs)/mypage/page.tsx을 수정하고 있으며, 검색된 PR은 단순 MyPage 페이지를 추가하고 메인 PR은 이를 데이터 페칭 기능을 갖춘 MyPage로 교체하며 ProfileSection/StatsCard에 props를 전달하므로 직접 관련됨.

  • [Feat/#50] 마이페이지 생성 (적립 상세/모달창 포함) #59: 메인 PR이 검색된 PR에서 도입된 MyPage 컴포넌트들(AccountCard, ProfileSection, StatsCard, page.tsx)을 업데이트 및 리팩토링하며, 새로운 회원 API/훅(useMyPageQuery, useRewardQrQuery, useLogoutMutation)을 연결하고 props/동작을 변경하므로 직접 관련됨.

시 (시)

🐰 마이페이지에 새로운 바람이 불어오고,
회원 데이터는 쿼리로 흘러흘러 내려오네.
QR 코드는 60초마다 반짝반짝 새로워지고,
로그아웃은 뮤테이션으로 우아하게 작별하고,
Props의 향기로 컴포넌트들은 춤을 춘다! ✨

✨ 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 feat/#90/customer-mypage-apis

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.

@skyblue1232 skyblue1232 added the style 스타일 관련 적용 label Apr 6, 2026
@skyblue1232 skyblue1232 merged commit e46cba5 into develop Apr 6, 2026
5 of 6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

api 서버 - 클라이언트 통신 feat 기능 구현 및 생성 style 스타일 관련 적용

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feat] 사용자 마이페이지 API 연동

1 participant