Skip to content

fix: SP2 마이페이지 화면 수정#422

Merged
bongtta merged 5 commits intodevelopfrom
fix/#421/fix-mypage
Apr 8, 2026
Merged

fix: SP2 마이페이지 화면 수정#422
bongtta merged 5 commits intodevelopfrom
fix/#421/fix-mypage

Conversation

@bongtta
Copy link
Copy Markdown
Contributor

@bongtta bongtta commented Apr 8, 2026

#️⃣ Related Issue

Closes #421

💎 PR Point

  • footer 수정
  • bottom navigation 수정
  • text color 수정
  • header 수정
  • query 수정

📸 Screenshot

스크린샷 2026-04-08 오후 6 32 05

Summary by CodeRabbit

릴리스 노트

  • 스타일

    • 마이페이지에 어두운 테마 디자인이 적용되어 시각적 일관성이 향상되었습니다.
    • 헤더, 하단 네비게이션, 푸터의 색상 스키마가 전체적으로 업데이트되어 통일된 외관을 제공합니다.
  • 버그 수정

    • 사용자 정보 및 매칭 조건 조회 API의 에러 처리 로직이 강화되었습니다.

@bongtta bongtta self-assigned this Apr 8, 2026
@bongtta bongtta requested a review from heesunee as a code owner April 8, 2026 09:33
@bongtta bongtta added the style css styling label Apr 8, 2026
@bongtta bongtta linked an issue Apr 8, 2026 that may be closed by this pull request
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 8, 2026

MATEBALL-STORYBOOK
⚾ Storybook 배포가 완료되었습니다!

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 8, 2026

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 831b4f0a-95b8-4919-885d-1fd9e9983262

📥 Commits

Reviewing files that changed from the base of the PR and between a72259e and 262b216.

📒 Files selected for processing (6)
  • src/pages/profile/profile.tsx
  • src/shared/apis/user/user-queries.ts
  • src/shared/components/bottom-navigation/bottom-navigation.tsx
  • src/shared/components/footer/footer.tsx
  • src/shared/components/header/header.tsx
  • src/shared/components/header/utils/get-header.tsx
 ________________________________________________________________________________________________
< Your code and I have a love-hate relationship. I love finding bugs, you hate that I find them. >
 ------------------------------------------------------------------------------------------------
  \
   \   (\__/)
       (•ㅅ•)
       /   づ
✨ 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 fix/#421/fix-mypage

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.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 8, 2026

Walkthrough

마이페이지 화면의 디자인을 개선하기 위해 배경색, 텍스트 색상, 구분선 스타일을 조정했습니다. 동시에 사용자 쿼리의 응답 처리 로직을 개선하고, 헤더와 하단 네비게이션의 프로필 경로에 대한 스타일링을 추가했습니다.

Changes

Cohort / File(s) Summary
프로필 페이지 스타일링
src/pages/profile/profile.tsx
외부 컨테이너에 bg-gray-black 클래스 추가, "문의하기", "의견 보내기", "로그아웃" 요소의 텍스트 색상을 text-gray-800에서 text-gray-300으로 변경, Divider 컴포넌트의 색상을 bg-gray-300에서 bg-gray-600으로 조정
사용자 쿼리 응답 처리
src/shared/apis/user/user-queries.ts
USER_INFOMATCH_CONDITION 쿼리 함수를 async 래퍼로 업데이트하여 ApiResponse 형태의 응답을 감지하고, 상태에 따라 에러 처리 또는 데이터 반환을 구분하는 로직 추가
헤더 및 네비게이션 스타일링
src/shared/components/header/header.tsx, src/shared/components/header/utils/get-header.tsx, src/shared/components/bottom-navigation/bottom-navigation.tsx
헤더의 프로필 경로에 대한 검사 추가 및 배경색을 bg-gray-black으로 설정, 프로필 페이지 제목 색상을 text-gray-black에서 text-gray-white로 변경, 하단 네비게이션의 DARK_NAV_PATHSROUTES.PROFILE 추가
푸터 스타일링
src/shared/components/footer/footer.tsx
로고 및 연락처 블록의 텍스트 색상을 text-gray-700에서 text-gray-500으로, 약관 링크의 색상을 text-gray-800에서 text-gray-500으로 변경

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

  • PR #308: 동일한 src/pages/profile/profile.tsx 파일의 Divider 사용과 링크/로그아웃 섹션 스타일링을 수정하는 관련 작업
  • PR #326: src/shared/apis/user/user-queries.ts의 USER_INFO와 MATCH_CONDITION 쿼리 구현을 수정하는 관련 변경사항
  • PR #282: 헤더 컴포넌트의 get-header 유틸리티를 수정하여 경로별 헤더 동작/스타일을 추가하는 관련 작업

Suggested reviewers

  • heesunee
  • Dubabbi
  • yeeeww

Poem

🐰 마이페이지, 옷을 입고 멋을 내니
어두운 배경에 회색 글씨 춤을 춘다
쿼리는 슬기로워 응답을 가르치고
헤더와 발치의 경로들도 함께 춤춘다
토끼는 웃으며, 화면은 더욱 아름다워진다! ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목은 마이페이지 화면 수정의 주요 변경사항을 명확하게 설명하며, PR의 핵심 목표와 일치합니다.
Linked Issues check ✅ Passed PR의 모든 변경사항이 #421의 요구사항을 충족합니다: 배경색(bg-gray-black), 폰트 색상, 헤더, footer, bottom navigation 수정이 구현되었습니다.
Out of Scope Changes check ✅ Passed 모든 변경사항이 마이페이지 화면 수정과 관련된 스타일링 및 쿼리 처리 개선으로, #421의 범위 내에 있습니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ 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 fix/#421/fix-mypage

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.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
src/shared/apis/user/user-queries.ts (1)

20-40: 방어적 응답 처리 패턴이 적절합니다.

API 응답이 이중으로 래핑될 수 있는 상황을 처리하는 로직이 잘 구현되어 있습니다. getUserInfoResponse 타입에는 status, message, data 속성이 없으므로 shape 체크 방식이 유효합니다.

다만, 동일한 패턴이 MATCH_CONDITION에도 중복되어 있으니 헬퍼 함수로 추출하는 것을 고려해 보세요.

♻️ 헬퍼 함수 추출 제안
function unwrapResponse<T>(res: T | ApiResponse<T>, errorMessage: string): T {
  if (
    typeof res === 'object' &&
    res !== null &&
    'status' in res &&
    'message' in res &&
    'data' in res
  ) {
    if (!res.data) {
      throw new Error(errorMessage);
    }
    return res.data;
  }
  return res as T;
}

사용 예시:

 USER_INFO: () =>
   queryOptions<getUserInfoResponse>({
     queryKey: USER_KEY.INFO(),
     queryFn: async () => {
       const res = await get<getUserInfoResponse | ApiResponse<getUserInfoResponse>>(
         END_POINT.GET_USER_INFO,
       );
-
-      if (
-        typeof res === 'object' &&
-        res !== null &&
-        'status' in res &&
-        'message' in res &&
-        'data' in res
-      ) {
-        if (!res.data) {
-          throw new Error('유저 정보 응답 데이터가 없습니다.');
-        }
-
-        return res.data;
-      }
-
-      return res as getUserInfoResponse;
+      return unwrapResponse(res, '유저 정보 응답 데이터가 없습니다.');
     },
   }),
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/shared/apis/user/user-queries.ts` around lines 20 - 40, Extract the
duplicate response-unwrapping logic into a generic helper like
unwrapResponse<T>(res, errorMessage) and use it from the queryFn in getUserInfo
and from MATCH_CONDITION handling; specifically remove the inline shape-check in
the anonymous queryFn and in MATCH_CONDITION and call
unwrapResponse<getUserInfoResponse>(res, '유저 정보 응답 데이터가 없습니다.') (or appropriate
error messages) so both places reuse the same function, keeping the helper
signature and behaviour exactly matching the provided pattern (check object/null
and 'status'|'message'|'data', throw when data is falsy, otherwise return data).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/shared/apis/user/user-queries.ts`:
- Around line 20-40: Extract the duplicate response-unwrapping logic into a
generic helper like unwrapResponse<T>(res, errorMessage) and use it from the
queryFn in getUserInfo and from MATCH_CONDITION handling; specifically remove
the inline shape-check in the anonymous queryFn and in MATCH_CONDITION and call
unwrapResponse<getUserInfoResponse>(res, '유저 정보 응답 데이터가 없습니다.') (or appropriate
error messages) so both places reuse the same function, keeping the helper
signature and behaviour exactly matching the provided pattern (check object/null
and 'status'|'message'|'data', throw when data is falsy, otherwise return data).

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 831b4f0a-95b8-4919-885d-1fd9e9983262

📥 Commits

Reviewing files that changed from the base of the PR and between a72259e and 262b216.

📒 Files selected for processing (6)
  • src/pages/profile/profile.tsx
  • src/shared/apis/user/user-queries.ts
  • src/shared/components/bottom-navigation/bottom-navigation.tsx
  • src/shared/components/footer/footer.tsx
  • src/shared/components/header/header.tsx
  • src/shared/components/header/utils/get-header.tsx

@bongtta bongtta merged commit 03033e9 into develop Apr 8, 2026
5 checks passed
bongtta added a commit that referenced this pull request Apr 8, 2026
* style: fotter color 수정 (#421)

* style: bottom navigation color 수정 (#421)

* style: 마이페이지 text color 수정 (#421)

* fix: 마이페이지 헤더 수정 (#421)

* fix: user query 수정 (#421)
bongtta added a commit that referenced this pull request Apr 8, 2026
* fix: 쿼리 수정 (#419)

* fix: 바텀시트 수정 (#419)

* fix: 메이트 프로필 카드 수정 (#419)

* fix: cta bottom sheet 연결 (#419)

* style: 자잘한 수정 (#419)

* feat: 가이드 메시지 추가 (#419)

* fix: 가이드 메시지 수정 (#419)

* fix: 그룹 매칭 생성 페이지 수정 (#419)

* fix: 매칭된 그룹원 리스트 상세 조회 쿼리 수정 (#419)

* feat: 전체 유저수 api 연결 (#419)

* fix: 1:1 매칭 생성 완료 페이지 로직 및 뷰 수정 (#419)

* chore: 네이밍 변경 (#419)

* feat: cta 바텀시트 연결 (#419)

* feat: 경기 매칭 페이지 cta 바텀 시트 연결 (#419)

* feat: 내가 만든 매칭일 경우 토스트 에러메시지 추가 (#419)

* fix: 리뷰 반영 (#419)

* chore: 충돌 해결 (#419)

* fix: SP2 마이페이지 화면 수정 (#422)

* style: fotter color 수정 (#421)

* style: bottom navigation color 수정 (#421)

* style: 마이페이지 text color 수정 (#421)

* fix: 마이페이지 헤더 수정 (#421)

* fix: user query 수정 (#421)

* chore: build 에러 해결 (#419)
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.

fix: 마이페이지 화면을 수정합니다

1 participant