Skip to content

[FE] [FEAT] Report Myself 컴포넌트 구현#401

Open
1jiwoo27 wants to merge 47 commits intodevelopfrom
feat/#264/report-myself
Open

[FE] [FEAT] Report Myself 컴포넌트 구현#401
1jiwoo27 wants to merge 47 commits intodevelopfrom
feat/#264/report-myself

Conversation

@1jiwoo27
Copy link
Collaborator

관련 이슈

closes #264

작업 내용

  • ReportLegend report-page 내 공통 컴포넌트로 분리
  • VerticalGrid report-page 내 공통 컴포넌트로 분리
  • ReportMyself 컴포넌트 구현

컴포넌트 구조

ReportMyself → ReportLegend, VerticalGrid, ReportLineGraph → ReportLineChart

스크린샷

Feb-12-2026 18-14-15

  • thisMonth의 마지막 날이 label에 표시됩니다
  • 왼쪽 위 컴포넌트는 아직 currency 연결을 안 하고 us로 고정해두어 달러로 표시되고 있습니다!
    • ReportMonthly 컴포넌트는 지금 안 보셔도 됩니다 (다음 pr에서 작업 예정)

✨ 리뷰 포인트

  • 분석 페이지 내 다른 그래프와 애니메이션 속도가 비슷한지 확인해주세요
    • 원래 animation 시간 관련된 상수를 불러와서 넣었었는데, 옆 그래프보다 훨씬 빠르게 애니메이션이 끝나서 비슷하게 맞춰보았습니다

💬 공유사항 to 리뷰어

  • 원래는 위에 텍스트가 '지난달 이맘때보다 15만원 더 쓰는 중이에요' 인데 금액과 단위에 따라 한 줄을 넘어가는 문제로, '지난달보다 15만원 더 쓰는 중이에요'로 바꿔서 넣어봤어요
    • 금액 전에 한 줄을 띄어서 구현하려하였으나 한 줄에 넣는 게 디자인 상 더 괜찮아 보여서 임의로 해두었습니다
  • ReportContent에서 제목 부분 빼는 거는 다음 pr에서 작업할게요
  • 그래프 끝 점에 동그랗게 반짝이는 애니메이션도 이후에 추가하겠습니다,,,
    • svg로 그래프를 그려봤는데 구조가 복잡해서 쉽지 않네요 🥲

1jiwoo27 and others added 30 commits February 11, 2026 18:22
@gemini-code-assist
Copy link

Summary of Changes

Hello @1jiwoo27, 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 컴포넌트들을 분리하여 코드의 재사용성과 유지보수성을 향상시키는 데 중점을 둡니다. 특히, 월별 지출 비교를 위한 라인 그래프와 범례, 그리고 수직 그리드 컴포넌트가 새롭게 구현되거나 기존 컴포넌트에서 분리되어, 다양한 리포트 섹션에서 일관된 디자인과 기능을 제공할 수 있도록 기반을 마련했습니다.

Highlights

  • 공통 컴포넌트 분리: 리포트 페이지 내에서 재사용될 ReportLegendVerticalGrid 컴포넌트가 공통 컴포넌트로 분리 및 리팩토링되었습니다.
  • ReportMyself 컴포넌트 구현: 전월 대비 지출을 비교하는 ReportMyself 컴포넌트가 새롭게 구현되었으며, 이는 ReportLineGraphReportLineChart를 포함합니다.
  • 기존 컴포넌트 업데이트: ReportBarGraphReportBarList 컴포넌트가 새로 분리된 ReportLegendVerticalGrid를 사용하도록 업데이트되어 일관성을 확보했습니다.
  • 라인 차트 애니메이션 추가: SVG 라인 차트의 동적인 그리기를 위한 draw-path CSS 키프레임 애니메이션이 추가되었습니다.
Changelog
  • frontend/src/components/report-page/ReportLegend.tsx
    • 리포트 페이지에서 사용할 범례 컴포넌트가 추가되었습니다.
  • frontend/src/components/report-page/VerticalGrid.tsx
    • 리포트 페이지에서 사용할 수직 그리드 컴포넌트가 추가되었습니다.
  • frontend/src/components/report-page/category/ReportBar.tsx
    • 코드 포맷팅이 수정되었습니다.
  • frontend/src/components/report-page/category/ReportBarGraph.tsx
    • 기존의 인라인 범례 정의가 제거되고, 새로 분리된 ReportLegend 컴포넌트를 사용하도록 업데이트되었습니다.
  • frontend/src/components/report-page/category/ReportBarList.tsx
    • VerticalGrid 컴포넌트의 임포트 경로가 변경되고, maxLabel 대신 labels prop을 사용하도록 업데이트되었습니다.
  • frontend/src/components/report-page/category/ReportCategory.tsx
    • ReportContent의 패딩과 텍스트 색상이 조정되었습니다.
  • frontend/src/components/report-page/category/VerticalGrid.tsx
    • 공통 VerticalGrid 컴포넌트 분리에 따라 기존 파일이 제거되었습니다.
  • frontend/src/components/report-page/layout/ReportContent.tsx
    • justify-between 스타일이 제거되어 유연한 레이아웃을 제공하도록 변경되었습니다.
  • frontend/src/components/report-page/mock.ts
    • MyselfItem 인터페이스가 추가되었고, compareWithLastMonth 목업 데이터 구조 및 타입 정의가 업데이트되었습니다.
  • frontend/src/components/report-page/monthly/ReportMonthly.tsx
    • 월별 지출 요약을 표시하는 ReportMonthly 컴포넌트가 추가되었습니다.
  • frontend/src/components/report-page/myself/ReportLineChart.tsx
    • 누적 지출을 라인 그래프로 시각화하는 ReportLineChart 컴포넌트가 추가되었습니다.
  • frontend/src/components/report-page/myself/ReportLineGraph.tsx
    • ReportLineChartReportLegend를 통합하여 라인 그래프를 표시하는 ReportLineGraph 컴포넌트가 추가되었습니다.
  • frontend/src/components/report-page/myself/ReportMyself.tsx
    • 전월 대비 지출 비교를 위한 ReportMyself 컴포넌트가 추가되었습니다.
  • frontend/src/components/report-page/myself/buildPath.ts
    • SVG 라인 및 영역 경로를 생성하는 유틸리티 함수들이 추가되었습니다.
  • frontend/src/pages/ReportPage.tsx
    • ReportMonthlyReportMyself 컴포넌트가 리포트 페이지에 통합되었습니다.
  • frontend/src/styles/animation.css
    • SVG 라인 그래프 애니메이션을 위한 draw-path 키프레임이 추가되었습니다.
Activity
  • ReportLegendVerticalGrid 컴포넌트가 report-page 내 공통 컴포넌트로 분리되었습니다.
  • ReportMyself 컴포넌트가 구현되었으며, ReportLegend, VerticalGrid, ReportLineGraph, ReportLineChart를 포함하는 구조를 가집니다.
  • 스크린샷을 통해 ReportMyself 컴포넌트의 UI가 공유되었습니다.
  • thisMonth의 마지막 날이 라벨에 표시되는 점과, 왼쪽 위 컴포넌트의 통화가 아직 US 달러로 고정되어 있다는 점이 언급되었습니다.
  • ReportMonthly 컴포넌트는 다음 PR에서 작업 예정이므로 현재는 검토 대상이 아님을 명시했습니다.
  • 리뷰 포인트로 분석 페이지 내 다른 그래프와 애니메이션 속도가 비슷한지 확인해달라는 요청이 있었습니다.
  • "지난달 이맘때보다 15만원 더 쓰는 중이에요" 텍스트의 줄바꿈 문제로 인해 "지난달보다 15만원 더 쓰는 중이에요"로 변경되었으며, 디자인상 한 줄에 표시하는 것이 더 낫다고 판단했습니다.
  • ReportContent에서 제목 부분을 제거하는 작업은 다음 PR에서 진행될 예정입니다.
  • 그래프 끝 점의 반짝이는 애니메이션도 이후에 추가될 예정이며, SVG 구조의 복잡성으로 인해 어려움이 있음을 공유했습니다.
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

@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

이번 PR은 'Report Myself' 컴포넌트를 구현하고, ReportLegendVerticalGrid를 공통 컴포넌트로 분리하는 작업을 포함하고 있습니다. 공통 컴포넌트로의 리팩토링은 코드 재사용성 측면에서 훌륭한 개선입니다. 새롭게 추가된 라인 그래프 관련 컴포넌트들도 구조가 잘 잡혀있습니다. 새로운 컴포넌트의 견고성과 유지보수성을 향상시키기 위한 몇 가지 제안을 남깁니다. 전반적으로 훌륭한 기여입니다.

Copy link
Collaborator

@Kjiw0n Kjiw0n left a comment

Choose a reason for hiding this comment

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

수고하셨습니다! 👍 👍

코멘트 확인 부탁드려요.
분석파트 API명세 아직 안나온 것 같은데, mock과 유사한 방향으로 부탁드려도 될 것 같아요!

Comment on lines +13 to +17
interface ReportLegendProps {
color: keyof typeof LEGEND_COLOR;
label: string;
variant?: 'box' | 'line';
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

colorkeyof typeof로 받고, variant는 직접 선언한 이유가 궁금합니다!

Comment on lines +11 to +25
interface ReportMyselfProps {
data: {
diff: string;
thisMonth: string;
thisMonthCount: number;
lastMonth: string;
lastMonthCount: number;
totalSpent: {
thisMonthToDate: string;
lastMonthTotal: string;
};
thisMonthItem: ChartItem[];
prevMonthItem: ChartItem[];
};
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

이번 달, 지난 달에 각각 {month, monthCount, monthItem} 을 들고있는 것 같아요.

해당 props들이 ReportMyselft -> ReportLineGraph -> ReportLineChart 로 내려가고 있는데, 공통으로 정의하면 더 알아보기 쉬울 것 같습니다!

+last/prev 용어 통일해주세요!

Comment on lines +30 to +31
<ReportLegend label="나" color="primary" />
<ReportLegend label="다른 학생" color="secondary" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

me&other과 primary&secondary 가 섞여서 사용되는 것 같은데, 구분되는 기준이 궁금합니다! 👀

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.

Report_monthly_myself (전월 대비 지출 비교) 컴포넌트 제작

2 participants