Skip to content

[FE] [FEAT] 위젯 조회 API 연동#588

Merged
Kjiw0n merged 30 commits intodevelopfrom
feat/#551/widget-get-api
Feb 20, 2026
Merged

[FE] [FEAT] 위젯 조회 API 연동#588
Kjiw0n merged 30 commits intodevelopfrom
feat/#551/widget-get-api

Conversation

@Kjiw0n
Copy link
Copy Markdown
Collaborator

@Kjiw0n Kjiw0n commented Feb 19, 2026

관련 이슈

closes #551

작업 내용

  • 위젯 상세 조회 API 연동
  • -Chart 컴포넌트 중, 로직이 복잡해지는 경우 hook/utils로 분리
  • period 관련 타입 정리 및 적용

스크린샷

스크린샷 2026-02-19 23 54 09

✨ 리뷰 포인트

  • -Chart 컴포넌트의 로직 분리 부분이 과도한 지 체크해주세요
  • period 타입이 여기저기 퍼져있어서 정리했어요. 더 개선할 부분이 보이면 말씀해주세요.

💬 공유사항 to 리뷰어

  • 현재 DB 초기화 후 데이터가 다양하게 채워지지 않아서, 차트 UI가 어색한 점 양해부탁드립니다 😢
  • 현재 내 월간 소비 비교 차트는 API 응답 속도에 문제가 있어요. (be에서 고치는 중!)
    timeout error가 발생하고 있어서 api/config/constants.tsDEFAULT_TIMEOUT를 10초로 늘리면 확인 가능합니다.

@gemini-code-assist
Copy link
Copy Markdown
Contributor

Summary of Changes

Hello @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와 연동될 수 있도록 기능을 구현하고, 기존의 목업 데이터를 실제 데이터로 대체하는 작업을 포함합니다. 또한, 각 차트 컴포넌트 내에 있던 복잡한 데이터 처리 로직을 외부 유틸리티 함수와 커스텀 훅으로 분리하여 컴포넌트의 역할을 명확히 하고 유지보수성을 향상시켰습니다. 이로써 위젯들이 동적으로 데이터를 받아와 표시할 수 있게 되었으며, period 관련 타입 정의를 중앙화하여 일관된 데이터 처리를 가능하게 했습니다.

Highlights

  • 위젯 API 연동: 다양한 위젯(예산, 카테고리, 비교, 기간, 지출)에 대한 API 연동을 완료했습니다.
  • 차트 로직 분리 및 리팩토링: 복잡한 차트 로직을 hookutils 파일로 분리하여 코드 가독성과 재사용성을 높였습니다.
  • Period 타입 정리: period 관련 타입을 frontend/src/types/period.ts 파일로 통합하고 적용하여 타입 관리를 개선했습니다.
Changelog
  • frontend/src/api/widget/api.ts
    • 위젯 데이터를 가져오는 getWidget API 호출 함수를 추가했습니다.
  • frontend/src/api/widget/query.ts
    • React Query의 useWidgetQuery 훅을 추가하여 위젯 데이터 조회를 관리하도록 했습니다.
  • frontend/src/api/widget/type.ts
    • 위젯 API 요청 및 응답에 대한 타입 정의를 추가했습니다.
  • frontend/src/components/chart/budget/BudgetAmountSummary.tsx
    • localUsedBudget 속성을 추가하고 로컬 통화 사용 금액을 표시하도록 업데이트했습니다.
  • frontend/src/components/chart/budget/BudgetChart.tsx
    • 예산 차트 데이터를 useWidgetQuery 훅을 통해 가져오도록 변경하고, 기존 목업 데이터를 제거했습니다.
  • frontend/src/components/chart/budget/BudgetChartView.tsx
    • localUsedBudget, baseCode, localCode를 직접 받도록 속성을 업데이트했습니다.
  • frontend/src/components/chart/category/CategoryChart.tsx
    • 카테고리 차트 데이터를 useWidgetQuery 훅을 통해 가져오도록 변경하고, 데이터 변환 로직을 category.utils.ts로 분리했습니다.
  • frontend/src/components/chart/category/CategoryChartView.tsx
    • 차트 데이터의 색상 로직을 외부에서 관리하도록 변경하고, 속성을 간소화했습니다.
  • frontend/src/components/chart/category/category.utils.ts
    • 카테고리 위젯 API 응답을 차트 표시용 데이터로 변환하는 transformCategoryChartData 함수를 추가했습니다.
  • frontend/src/components/chart/chartType.ts
    • PERIOD_IDPERIOD_OPTIONS 상수를 제거하고, PeriodType을 사용하도록 변경했습니다.
  • frontend/src/components/chart/comparison/ComparisonChart.tsx
    • 비교 차트 데이터를 useWidgetQuery 훅을 통해 가져오도록 변경하고, 기존 목업 데이터를 제거했습니다.
  • frontend/src/components/chart/comparison/ComparisonChartView.tsx
    • 실제 비교 데이터를 받도록 속성을 업데이트하고, 목업 데이터 관련 로직을 제거했습니다.
  • frontend/src/components/chart/expense/ExpenseChart.tsx
    • 지출 차트(결제 수단별, 통화별) 데이터를 useWidgetQuery 훅을 통해 가져오도록 변경하고, 목업 데이터를 제거했습니다.
  • frontend/src/components/chart/expense/expense.utils.ts
    • 결제 수단 및 통화별 지출 위젯 API 응답을 차트 표시용 데이터로 변환하는 transformPaymentChartDatatransformCurrencyChartData 함수를 추가했습니다.
  • frontend/src/components/chart/layout/BlankChart.tsx
    • Icons.Add 컴포넌트에 cursor-pointer 스타일을 추가했습니다.
  • frontend/src/components/chart/period/PeriodChart.tsx
    • 기간별 지출 차트 로직을 usePeriodChart 훅으로 통합하고, PERIOD_WIDGET_OPTIONS를 사용하도록 변경했습니다.
  • frontend/src/components/chart/period/mock.ts
    • 기간별 차트 목업 데이터를 MOCK_DATA_MAP 객체로 구조화했습니다.
  • frontend/src/components/chart/period/period.utils.ts
    • API 응답의 PeriodWidgetItem 배열을 차트용 PeriodData 배열로 변환하는 parsePeriodItems 함수를 추가했습니다.
  • frontend/src/components/chart/period/usePeriodChart.ts
    • 기간별 차트의 상태 관리 및 API 호출 로직을 캡슐화하는 커스텀 훅을 추가했습니다.
  • frontend/src/components/chart/widget/type.ts
    • 위젯 아이템의 period 속성 타입을 PeriodType으로 변경했습니다.
  • frontend/src/components/chart/widgetPeriod.ts
    • 카테고리 및 기간 위젯에 특화된 기간 옵션(CATEGORY_PERIOD_OPTIONS, PERIOD_WIDGET_OPTIONS)을 정의했습니다.
  • frontend/src/types/period.ts
    • PeriodType 정의, PERIOD_ID, PERIOD_LABEL, PeriodOption 인터페이스 및 관련 유틸리티 함수를 포함하는 기간 관련 타입 정의 파일을 추가했습니다.
Activity
  • Kjiw0n님이 PR을 생성하고 초기 변경 사항을 푸시했습니다.
  • 위젯 상세 조회 API 연동, 복잡한 차트 로직 분리, period 관련 타입 정리 작업을 진행했습니다.
  • 리뷰어에게 -Chart 컴포넌트의 로직 분리 과도 여부와 period 타입 개선 사항에 대한 검토를 요청했습니다.
  • DB 초기화 후 데이터 부족으로 인한 차트 UI 어색함에 대한 양해를 구했습니다.
Using Gemini Code Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

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

Code Review

안녕하세요! 위젯 조회 API 연동 및 관련 리팩토링 작업에 대한 리뷰입니다. 전반적으로 API 연동을 위해 mock 데이터를 제거하고 react-query 기반의 useWidgetQuery 훅을 도입하여 잘 구현하셨습니다. 특히 복잡한 로직을 utils나 커스텀 훅(usePeriodChart)으로 분리하고, 분산되어 있던 period 관련 타입을 types/period.ts로 중앙화하여 코드의 구조와 유지보수성을 크게 향상시킨 점이 인상적입니다. 몇 가지 코드의 안정성과 일관성을 높일 수 있는 부분에 대해 아래에 의견을 남겼습니다. 확인 부탁드립니다.

Comment thread frontend/src/components/chart/category/CategoryChart.tsx Outdated
Comment thread frontend/src/components/chart/category/CategoryChart.tsx Outdated
Comment thread frontend/src/components/chart/comparison/ComparisonChart.tsx Outdated
Comment thread frontend/src/components/chart/comparison/ComparisonChart.tsx Outdated
Comment thread frontend/src/components/chart/comparison/ComparisonChart.tsx Outdated
Comment thread frontend/src/components/chart/period/usePeriodChart.ts Outdated
@Kjiw0n Kjiw0n requested a review from 1jiwoo27 February 19, 2026 15:27
@Kjiw0n Kjiw0n requested a review from minngyuseong February 19, 2026 15:27
@Kjiw0n Kjiw0n force-pushed the feat/#551/widget-get-api branch from 007a386 to 8ca7670 Compare February 20, 2026 02:35
Copy link
Copy Markdown
Collaborator

@1jiwoo27 1jiwoo27 left a comment

Choose a reason for hiding this comment

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

수고하셨습니다! 위젯 데이터 타입이 굉장히 복잡하네요 😵‍💫

Comment thread frontend/src/api/widget/type.ts
Comment thread frontend/src/components/chart/expense/ExpenseChart.tsx Outdated
minngyuseong
minngyuseong previously approved these changes Feb 20, 2026
Comment thread frontend/src/types/period.ts Outdated
1jiwoo27
1jiwoo27 previously approved these changes Feb 20, 2026
@Kjiw0n Kjiw0n merged commit 338bb5a into develop Feb 20, 2026
1 check passed
@Kjiw0n Kjiw0n deleted the feat/#551/widget-get-api branch February 20, 2026 05:05
minngyuseong pushed a commit that referenced this pull request Feb 20, 2026
* 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 찾는 핸들러 개선
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

위젯 조회 API 연동

3 participants