From ac47bbce73b25da0d7d1608859b48a11b7237976 Mon Sep 17 00:00:00 2001 From: junye0l Date: Sat, 27 Jun 2026 03:28:07 +0900 Subject: [PATCH 1/3] =?UTF-8?q?refactor(status-chart):=20none=20pointer=20?= =?UTF-8?q?=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/Dashboard/_components/DashboardResponseStatusChart.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/monitor-web/src/pages/Dashboard/_components/DashboardResponseStatusChart.tsx b/apps/monitor-web/src/pages/Dashboard/_components/DashboardResponseStatusChart.tsx index 63c3250..671736f 100644 --- a/apps/monitor-web/src/pages/Dashboard/_components/DashboardResponseStatusChart.tsx +++ b/apps/monitor-web/src/pages/Dashboard/_components/DashboardResponseStatusChart.tsx @@ -25,6 +25,7 @@ const DashboardResponseStatusChart = () => { innerRadius={80} outerRadius={120} paddingAngle={4} + pointerEvents="none" > {CHART_DATA.map((entry) => ( From 8e17804ea92be461d19fd28b2e2da896789dbc53 Mon Sep 17 00:00:00 2001 From: junye0l Date: Sat, 27 Jun 2026 03:38:10 +0900 Subject: [PATCH 2/3] =?UTF-8?q?refactor(dashboard-api-list):=20api=20?= =?UTF-8?q?=EA=B0=9C=EB=B3=84=20=EB=AA=A9=EB=A1=9D=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=EC=8B=9C=20=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Dashboard/_components/DashboardApiList.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/apps/monitor-web/src/pages/Dashboard/_components/DashboardApiList.tsx b/apps/monitor-web/src/pages/Dashboard/_components/DashboardApiList.tsx index 0602b34..b78fdff 100644 --- a/apps/monitor-web/src/pages/Dashboard/_components/DashboardApiList.tsx +++ b/apps/monitor-web/src/pages/Dashboard/_components/DashboardApiList.tsx @@ -4,6 +4,7 @@ import { Badge } from "@/components"; import { MOCK_DASHBOARD_API_LIST } from "@/mock"; import type { ApiStatus } from "@/types"; import type { ApiListItem } from "../_types"; +import { useNavigate } from "react-router-dom"; const API_STATUS_LABEL: Record = { healthy: "정상", @@ -60,6 +61,12 @@ const API_TABLE_COLUMNS: { ]; const DashboardApiList = () => { + const navigate = useNavigate(); + + const handleGoApiDetail = (apiId: string) => { + navigate(`/api/${apiId}`); + }; + return (

전체 API 목록

@@ -78,7 +85,12 @@ const DashboardApiList = () => { {MOCK_DASHBOARD_API_LIST.map((api) => ( - + handleGoApiDetail(api.id)} + > {API_TABLE_COLUMNS.map((column) => ( Date: Sat, 27 Jun 2026 03:49:51 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat(scroll):=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EA=B0=84=20=EC=9D=B4=EB=8F=99=EC=8B=9C=20=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A1=A4=20=EC=A0=9C=EC=96=B4=EB=A5=BC=20=EC=9C=84=ED=95=9C=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/monitor-web/src/App.tsx | 11 +++++-- .../src/components/routes/ScrollToTop.tsx | 29 +++++++++++++++++++ .../src/components/routes/index.ts | 1 + 3 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 apps/monitor-web/src/components/routes/ScrollToTop.tsx diff --git a/apps/monitor-web/src/App.tsx b/apps/monitor-web/src/App.tsx index ee37c8d..cf9d7a7 100644 --- a/apps/monitor-web/src/App.tsx +++ b/apps/monitor-web/src/App.tsx @@ -1,14 +1,21 @@ +import { useRef } from "react"; import { Routes, Route } from "react-router-dom"; import { Dashboard, Login, ErrorLog, ApiDetail, ApiEdit, ErrorDetail, NotFound } from "./pages"; import { Sidebar, ToastContainer } from "./layouts"; -import { AuthRoute } from "./components"; +import { AuthRoute, ScrollToTop } from "./components"; export default function App() { + const mainRef = useRef(null); + return (
-
+
+
} path="/" /> diff --git a/apps/monitor-web/src/components/routes/ScrollToTop.tsx b/apps/monitor-web/src/components/routes/ScrollToTop.tsx new file mode 100644 index 0000000..0d21cff --- /dev/null +++ b/apps/monitor-web/src/components/routes/ScrollToTop.tsx @@ -0,0 +1,29 @@ +import { useEffect, type RefObject } from "react"; +import { useLocation } from "react-router-dom"; + +/** + * 라우트 변경 시 지정한 스크롤 컨테이너의 위치를 최상단으로 초기화하는 컴포넌트입니다. + * + * @remarks + * - `window`가 아니라 `targetRef`로 전달된 스크롤 컨테이너를 직접 제어합니다. + * - `pathname` 변경 시 `top`, `left` 위치를 0으로 되돌립니다. + * - 화면에 렌더링되는 UI 없이 라우팅 사이드 이펙트만 처리합니다. + * + * @author junyeol + */ + +interface ScrollToTopProps { + targetRef: RefObject; +} + +const ScrollToTop = ({ targetRef }: ScrollToTopProps) => { + const { pathname } = useLocation(); + + useEffect(() => { + targetRef.current?.scrollTo({ top: 0, left: 0 }); + }, [pathname, targetRef]); + + return null; +}; + +export default ScrollToTop; diff --git a/apps/monitor-web/src/components/routes/index.ts b/apps/monitor-web/src/components/routes/index.ts index d571802..e036f29 100644 --- a/apps/monitor-web/src/components/routes/index.ts +++ b/apps/monitor-web/src/components/routes/index.ts @@ -1 +1,2 @@ export { default as AuthRoute } from "./AuthRoute"; +export { default as ScrollToTop } from "./ScrollToTop";