Conversation
Summary of ChangesHello @Kjiw0n, 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은 프론트엔드 위젯 컴포넌트들이 백엔드 API와 연동될 수 있도록 기능을 구현하고, 기존의 목업 데이터를 실제 데이터로 대체하는 작업을 포함합니다. 또한, 각 차트 컴포넌트 내에 있던 복잡한 데이터 처리 로직을 외부 유틸리티 함수와 커스텀 훅으로 분리하여 컴포넌트의 역할을 명확히 하고 유지보수성을 향상시켰습니다. 이로써 위젯들이 동적으로 데이터를 받아와 표시할 수 있게 되었으며, Highlights
Changelog
Activity
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
|
There was a problem hiding this comment.
Code Review
안녕하세요! 위젯 조회 API 연동 및 관련 리팩토링 작업에 대한 리뷰입니다. 전반적으로 API 연동을 위해 mock 데이터를 제거하고 react-query 기반의 useWidgetQuery 훅을 도입하여 잘 구현하셨습니다. 특히 복잡한 로직을 utils나 커스텀 훅(usePeriodChart)으로 분리하고, 분산되어 있던 period 관련 타입을 types/period.ts로 중앙화하여 코드의 구조와 유지보수성을 크게 향상시킨 점이 인상적입니다. 몇 가지 코드의 안정성과 일관성을 높일 수 있는 부분에 대해 아래에 의견을 남겼습니다. 확인 부탁드립니다.
007a386 to
8ca7670
Compare
1jiwoo27
left a comment
There was a problem hiding this comment.
수고하셨습니다! 위젯 데이터 타입이 굉장히 복잡하네요 😵💫
* chore: Period type 선언 * chore: widget 조회 API req/res 인터페이스 및 타입 선언 * feat: api 호출 함수 및 쿼리 구현 * refactor: api res의 국가코드 타입 지정(string -> CountryCode) * feat: Budget 위젯 조회 API 연동 * refactor: period 관련 type 정의 및 적용 * feat: Category 위젯 조회 API 연동 * feat: Comparison 위젯 조회 API 연동 * feat: Expense(Payment, Currency) 위젯 조회 API 연동 * feat: Period 위젯 조회 API 연동 * refactor: Period 차트 로직 훅으로 분리 * refactor: 기간 별 mock, view Map으로 처리 * feat: Expense 차트 data 정제 로직 유틸로 분리 * feat: Category 차트 data 정제 로직 유틸로 분리 * feat: API 명세 변경 반영(categoryName -> category(id)) * feat: 실제 가계부 id 적용 * refactor: 쿼리키 구조 개선(currencyType, period 객체화) * refactor: response 타입 매핑 * refactor: 가계부 id 기본값 제거 * refactor: PERIOD_WIDGET_OPTIONS 정의 필터링 방식으로 변경 * style: BlankChart의 아이콘에 cursor-pointer 추가 * refactor: useWidgetQuery에서 widgetType에 따라 타입 추론하므로 response타입 명시 제거 * refactor: 국가, 통화 타입 결정 시 헬퍼함수 or find 사용 * refactor: 값이 확실히 존재하는 경우 ! 추가하여 불필요한 조건 제거 * refactor: data 없을 시 렌더링 방지 * fix: data 경로 변경으로 인한 빌드 오류 수정 * refactor: data의 길이가 0일때 스켈레톤 UI 렌더링 * chore: response 인터페이스에 get 추가 * refactor: period id 찾는 핸들러 개선
관련 이슈
closes #551
작업 내용
-Chart컴포넌트 중, 로직이 복잡해지는 경우hook/utils로 분리스크린샷
✨ 리뷰 포인트
-Chart컴포넌트의 로직 분리 부분이 과도한 지 체크해주세요💬 공유사항 to 리뷰어
내 월간 소비 비교 차트는 API 응답 속도에 문제가 있어요. (be에서 고치는 중!)timeout error가 발생하고 있어서
api/config/constants.ts의DEFAULT_TIMEOUT를 10초로 늘리면 확인 가능합니다.