feat : 대시보드 페이지 퍼블리싱

[junye0l]

Pull Request

관련 이슈

• close #이슈번호

작업 내용

• Dashboard.tsx

  • 대시보드 전체 레이아웃 구성

  • 헤더, 요약 카드, 차트 영역, 전체 API 목록 배치

  • 24시간 / 7일 조회 기간 상태 관리 추가

• DashboardHeader.tsx

  • 대시보드 헤더 UI 구성

  • 조회 기간 토글 배치

• DashboardTimeToggle.tsx

  • 24시간 / 7일 토글 버튼 UI 추가

  • 선택 상태에 따른 스타일 처리

• DashboardSummaryCard.tsx

  • 대시보드 요약 카드 UI 추가

  • 평균 응답 속도, Supabase 연결/조회 상태, 마지막 장애 발생, 장애 발생 API 정보 표시

• DashboardResponseTimeChart.tsx

  • 전체 API 응답 속도 추이 카드 UI 추가

  • 기존 ApiResponseTimeChart 컴포넌트로 차트 표시

  • 평균/최고/최저 응답 속도 및 최근 24시간 기준 상태 문구 표시

• DashboardResponseStatusChart.tsx

  • 응답 상태 분포 도넛 차트 UI 추가

  • 정상/지연/장애 상태별 분포 표시

  • 전체 API 수와 상태별 개수 표시

• DashboardApiList.tsx

  • 전체 API 목록 테이블 UI 추가

  • API 명, 출처, 카테고리, 마지막 테스트 날짜, 응답속도, 성공률, 상태 컬럼 구성

  • 컬럼 정의 기반 렌더링 구조 적용

  • 상태값에 따른 Badge 표시

• DashboardHeaderType.ts

  • 조회 기간 타입 및 토글 props 타입 정의

• DashboardApiListType.ts

  • 전체 API 목록 아이템 타입 정의

• dashboardApiList.ts

  • 전체 API 목록 mock 데이터 추가

참고사항

• 요약 카드와 차트 보조 문구는 UI 확인을 위한 고정값 기준입니다.

• 응답 속도 추이 차트는 기존 mock 응답 시간 데이터를 사용합니다.

• 전체 API 목록 데이터는 실제 API 연동 전 mock 데이터로 분리했습니다.

• 조회 기간 토글 값은 이후 데이터 필터링/API 요청 조건에 연결할 수 있도록 페이지 상태로 관리합니다.

• 각각 컴포넌트별로 향후 수정사항은 주석 ( TODO ) 형태로 남겨두었습니다.

체크리스트

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

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
finditem-monitoring	Ready	Preview, Comment	Jun 24, 2026 12:00pm
finditem-monitoring-server	Ready	Preview, Comment	Jun 24, 2026 12:00pm

[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!

이번 PR은 모니터링 서비스의 핵심인 대시보드 페이지를 퍼블리싱하는 작업을 포함합니다. 전체적인 시스템 상태를 한눈에 파악할 수 있도록 요약 정보, 차트, API 목록을 배치하였으며, 향후 실제 데이터 연동을 고려하여 상태 관리와 타입 정의를 구조화했습니다.

Highlights

• 대시보드 페이지 구현: 대시보드 페이지의 전체 레이아웃을 구성하고 헤더, 요약 카드, 차트, API 목록 컴포넌트를 배치했습니다.
• 조회 기간 상태 관리: 24시간/7일 조회 기간을 선택할 수 있는 토글 버튼을 추가하고 페이지 상태로 관리하도록 구현했습니다.
• 데이터 시각화 및 목록: 응답 속도 추이 차트와 응답 상태 분포 도넛 차트를 추가하고, 전체 API 목록을 테이블 형태로 렌더링하도록 했습니다.
• 컴포넌트 구조화: Dashboard 페이지를 모듈화하여 _components 및 _types 디렉토리로 컴포넌트와 타입을 분리했습니다.

Ignored Files

• Ignored by pattern: **/mock/** (2)
  • apps/monitor-web/src/mock/dashboardApiList.ts
  • apps/monitor-web/src/mock/index.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.

---

데이터가 흐르는 대시보드, 상태를 살피는 눈이 되네. 차트와 목록이 조화를 이루어, 시스템의 맥박을 읽어내리라.

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 refactors the Dashboard page by removing mock test code and modularizing the layout into several sub-components, including a header, summary cards, response time and status charts, and an API list table. It also updates a disabled button style constant. Feedback was provided regarding the accessibility of the DashboardTimeToggle component, recommending the use of aria-pressed instead of ARIA radio roles to ensure proper keyboard navigation without requiring custom event handlers.

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.

[junye0l]

gemini 리뷰 반영 하였습니다.

[wlrnjs]

수고하셨습니다. 간단한 코멘트 확인 부탁드립니다!

[junye0l]

말씀해주신 코멘트 부분 수정하였습니다!

확인 후 승인 부탁드립니다.

[wlrnjs]

수고하셨습니다!