feat : chart 컴포넌트 1차 구현

[junye0l]

Pull Request

관련 이슈

• close #이슈번호

작업 내용

• chart 컴포넌트 1차 구현을 완료하였습니다.

  • chart 컴포넌트 내부에서 사용하는 컴포넌트들을 개별 파일로 분리하였습니다.

  • 각 컴포넌트에서 사용할 type들을 개별 파일로 분리했습니다.

  • 각 컴포넌트에서 필요한 포맷팅 함수 및 유틸 함수들을 개별 파일로 분리했습니다.

• 기존 공통 컴포넌트 예시 페이지 수정

  • 기존 Dashboard 페이지에 있던 공통 컴포넌트 예시들을 Example 페이지로 이동시켰습니다.

  • 따로 Sidebar에는 추가하지 않았고 URL로 localhost:3000/example 접속시 확인 가능합니다.

참고 사항

• 계속해서 개선해야할 점을 찾다보니 시간이 지체되는 경우가 있어 일단 1차적으로 PR을 올립니다.

• 대시보드 퍼블리싱 완료 후 24시간 or 7일 타입별 차트 컴포넌트로 개선 및 API 상세 페이지에서 사용할 차트 또한 같이 사용할 수 있도록 구조를 개선해보려고 합니다.

• 일단 어떤 방식으로 차트 컴포넌트를 사용하는지에 대한 코드로 봐주시면 감사하겠습니다.

• 폴더 구조 또한 고민이 많았는데 어떤 방향으로 개선하면 좋을지 코멘트 부탁드립니다.

체크리스트

• 기능이 정상 동작하는지 확인
• 불필요한 코드/주석 제거

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
finditem-monitoring	Ready	Preview, Comment	Jun 20, 2026 5:51am
finditem-monitoring-server	Ready	Preview, Comment	Jun 20, 2026 5:51am

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! 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!

This pull request introduces the first iteration of a chart component designed to visualize API response times. The changes focus on modularizing the chart's internal logic and UI components while cleaning up the existing Dashboard page by migrating component examples to a separate route. This structure sets a foundation for future improvements, such as time-range filtering and integration into API detail pages.

Highlights

• Chart Component Implementation: Implemented the initial version of the ApiResponseTimeChart component using Recharts, including custom tooltips and error indicators for outage states.
• Modularization: Separated chart-related components, types, utility functions, and constants into dedicated files to improve maintainability and structure.
• Example Page Migration: Moved common component examples from the Dashboard page to a new dedicated Example page, accessible via the '/example' route.

Ignored Files

• Ignored by pattern: **/mock/** (1)
  • apps/monitor-web/src/mock/ApiResponseTime.ts

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 the 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 counterproductive. 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.

---

Data flows in lines of light, Charting response, day and night. With modular code and structure clear, The API health is now quite near.

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. ↩

[gemini-code-assist]

Code Review

This pull request introduces an ApiResponseTimeChart component using Recharts to visualize API response times, along with custom tooltips, error indicators, and helper utilities. It also refactors the dashboard by moving mock component demonstrations to a new /example route. Key feedback highlights a potential bug in the X-axis tick generation when timestamps are before 9:00 AM, and suggests performance and reliability improvements in the chart component by utilizing useMemo and safely finding the minimum timestamp.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Code Review

This pull request introduces a new ApiResponseTimeChart component using Recharts to visualize API response times, complete with custom tooltips and error indicators. It also refactors the Dashboard page by moving mock components and playground code to a new Example page. The review feedback focuses on improving the robustness and performance of the chart component, specifically by adding defensive checks for the data prop, memoizing expensive calculations (such as grouping, sorting, and tick generation) to prevent unnecessary re-renders, and safely accessing array elements using optional chaining.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[wlrnjs]

수고하셨습니다.

types.ts, utils.ts 파일은 논의한 대로 각 파일로 분리 부탁드립니다.
gemini 코멘트도 확인 부탁드립니다!

[junye0l]

gemini 코드리뷰 수정하였고, 피드백 주신 부분들 수정하였습니다.

push 권한 설정되면 업데이트 하겠습니다!

[wlrnjs]

확인했습니다. 수고하셨습니다!