refactor : dashboard 일부 수정 및 공통 기능 추가

[junye0l]

Pull Request

관련 이슈

• close #이슈번호

작업 내용

• App.tsx

  • 라우트 변경 시 메인 스크롤 영역을 초기화할 수 있도록 mainRef 추가

  • ScrollToTop 컴포넌트를 메인 스크롤 컨테이너 내부에 배치

• ScrollToTop.tsx

  • 라우트 변경 시 지정한 스크롤 컨테이너를 최상단으로 이동시키는 컴포넌트 추가

  • useLocation의 pathname 변경을 기준으로 스크롤 위치 초기화 처리

  • window가 아닌 targetRef로 전달된 실제 스크롤 컨테이너를 제어하도록 구현

• DashboardApiList.tsx

  • 전체 API 목록 행 클릭 시 해당 API 상세 페이지로 이동하도록 라우팅 처리 추가

  • useNavigate를 사용해 /api/:apiId 경로로 이동

  • 클릭 가능한 행임을 인지할 수 있도록 hover 스타일과 cursor 스타일 추가

• DashboardResponseStatusChart.tsx

  • 응답 상태 도넛 차트 영역의 포인터 이벤트 비활성화

  • 차트 섹터 클릭/포커스 등 불필요한 인터랙션 방지

참고 사항

• 브라우저는 기본적으로 새 페이지로 이동할 때 문서를 다시 로드하면서 스크롤 위치를 최상단으로 초기화하지만, React Router 기반 SPA에서는 실제 문서 이동 없이 라우트에 해당하는 컴포넌트만 교체되기 때문에 기존 스크롤 위치가 유지될 수 있습니다.

• 프로젝트 기본 구조가 window가 아닌 main 요소가 스크롤 컨테이너이므로, 라우트 변경 시 해당 요소의 스크롤 위치를 직접 최상단으로 초기화했습니다.

체크리스트

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

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
finditem-monitoring	Ready	Preview, Comment	Jun 26, 2026 6:58pm
finditem-monitoring-server	Ready	Preview, Comment	Jun 26, 2026 6:58pm

[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 improvements to the dashboard's navigation and user experience. It addresses scroll position persistence issues common in SPA architectures by ensuring the main content area resets upon navigation. Additionally, it enhances interactivity by enabling row-based navigation in the API list and refining chart interactions.

Highlights

• Scroll Management: Implemented a ScrollToTop component that resets the scroll position of the main container to the top whenever the route changes.
• Dashboard Navigation: Added click navigation to the API list rows, allowing users to navigate directly to specific API detail pages.
• UI/UX Improvements: Disabled pointer events on the response status donut chart to prevent unnecessary interactions and added hover styles to the API list table rows.

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.

---

The routes shift fast in React's flow, / But scroll positions stayed below. / A ref was set, the top was found, / Now navigation feels quite sound.

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 a ScrollToTop component to reset the scroll position of the main container upon route changes, adds row-click navigation to the API list in the Dashboard, and disables pointer events on the response status chart. Regarding the feedback, it is recommended to replace the onClick navigation on the table row (tr) with a standard Link component for the API name column to improve accessibility and support native browser navigation features like opening in a new tab.

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]

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