feat(mobile): 마이페이지 기능 구현 #52
Conversation
- 바텀 네비게이션 아이콘 추가 - appLayout에 바텀 네비게이션 추가
- 리스트 행 UI 컴포넌트 구현
- Result 컴포넌트: 상태 결과를 표시하는 전체 화면 UI 추가 - Result.Button 서브컴포넌트 구현 - 관련 문서 및 테스트 추가
- spacingStyle에서 undefined 값 제외 처리 - clsx를 cn 유틸리티로 교체
- 마이페이지 화면 추가 (설정 메뉴, 로그아웃/탈퇴) - useGetMe를 useSuspenseQuery로 리팩토링
hijjoy
added
type: feat
Summary of ChangesHello @hijjoy, I'm Gemini Code Assist1! 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은 모바일 애플리케이션에 마이페이지 기능을 전반적으로 구현하고, 이를 지원하는 여러 UI 컴포넌트들을 도입합니다. 사용자 프로필 표시, 설정 메뉴, 로그아웃/탈퇴 기능 등을 포함하는 마이페이지 화면과 함께, 앱의 전반적인 사용자 경험을 향상시키기 위한 바텀 네비게이션이 추가되었습니다. 또한, 데이터 로딩 및 에러 처리의 견고성을 높이고 UI 컴포넌트의 유연성을 개선하기 위한 리팩토링 작업도 포함되어 있습니다. Highlights
Using Gemini Code AssistThe 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
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 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이 Pull Request는 마이페이지 기능과 관련 UI 컴포넌트들을 성공적으로 구현했습니다. Result, ListRow, QueryErrorBoundary와 같은 새로운 컴포넌트들은 재사용성과 유지보수성을 높이는 좋은 구조로 작성되었으며, 문서와 테스트가 잘 갖춰져 있습니다. 또한 useGetMe 훅을 useSuspenseQuery 기반으로 리팩토링하여 데이터 페칭 로직을 개선한 점도 훌륭합니다.
리뷰에서는 몇 가지 개선점을 제안했습니다. CSS 변수에서 색상 값을 가져올 때 발생할 수 있는 잠재적 버그 수정, 하드코딩된 값을 테마 변수로 대체하여 일관성을 높이는 방안, 미구현 기능에 대한 명시, 그리고 컴포넌트의 기본값 불일치 수정 등입니다. 전반적으로 훌륭한 기여이며, 제안된 사항들을 반영하면 코드가 더욱 견고해질 것입니다.
- createStyledIcon으로 SVG 아이콘에 colorClassName prop 지원 - 페이지 컴포넌트들에서 className 기반 스타일링으로 변경 - withUniwind로 래핑한 StyledSafeAreaView 추가
- 4개 config 파일을 단일 env.ts로 통합 - 환경별(development/preview/production) API URL 분기 처리 - 플랫폼별 URL 생성 함수 분리 (토스 가독성 원칙) - 조건에 이름 붙이기: isAndroid(), isPhysicalDeviceWithLocalIP() - Zod 스키마로 환경변수 런타임 검증 - production 빌드 시 EXPO_PUBLIC_API_URL 필수 체크
- ListRow.Icon 제거, ListRow.Image로 대체 - ListRow.Texts 타입 시스템 개선 (1RowTypeA, 2RowTypeA 등) - variants 파일 제거, 인라인 스타일로 단순화 - 문서 업데이트
- expo-router NativeTabs 사용으로 변경 - 마이페이지 ListRow 사용법 업데이트
- app.config.ts: Base64 Firebase 설정 파일 복원 로직 추가 - eas-build-pre-install.sh: EAS 빌드 전처리 스크립트 - EAS_SECRETS.md: EAS 시크릿 설정 가이드 문서 - README.md 업데이트 - 의존성 업데이트
📋 개요
마이페이지 화면 및 관련 UI 컴포넌트를 구현합니다.
🏷️ 변경 유형
feat- 새로운 기능 추가refactor- 코드 리팩토링build- 빌드 시스템 또는 외부 종속성 변경📦 영향 범위
apps/mobile- Expo 모바일 앱📝 변경 내용
새로운 화면
mypage.tsx) - 프로필, 설정 메뉴, 로그아웃/탈퇴feed.tsx) - placeholderUI 컴포넌트
Result컴포넌트 - 상태 결과 화면 (에러, 빈 상태 등)Result.Button서브컴포넌트QueryErrorBoundary- React Query 에러 바운더리ListRow컴포넌트 - 설정 메뉴용 리스트 행ProfileCard컴포넌트 - 프로필 카드 (스켈레톤 로딩 포함)리팩토링
useGetMe→useSuspenseQuery기반으로 변경Flex컴포넌트 개선 (undefined 값 제외, cn 유틸리티 사용)Buttondisplay inline에서 self-start 제거 (정렬은 부모가 담당)🧪 테스트
테스트 방법
pnpm test Result ListRow pnpm typecheck테스트 결과
✅ 체크리스트
작성자 확인
pnpm test)🔗 관련 이슈
Closes #44
📸 스크린샷 (UI 변경 시)
💬 추가 정보
🧎🏻♀️➡️ 바텀시트는 디자인 변경 예정 마이페이지 이슈 이므로 디자인 변경은 하지 않았음
참고
https://tossmini-docs.toss.im/tds-mobile/components/result/
https://docs.uniwind.dev/api/with-uniwind