From 04679ca34bf695be3c46ebcea060d9ed89cfa829 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A4=80=EC=84=B1=EC=9D=98=20Macbook=20Pro?= Date: Thu, 17 Sep 2026 10:07:13 +0900 Subject: [PATCH] =?UTF-8?q?fix(dashboard):=20=EC=B9=B4=EB=93=9C=EB=81=BC?= =?UTF-8?q?=EB=A6=AC=20=EA=BA=BE=EC=87=A0=EA=B0=80=20=EC=9C=84=EC=95=84?= =?UTF-8?q?=EB=9E=98=EB=A1=9C=20=EC=A4=84=EC=9D=84=20=EB=A7=9E=EC=B6=98?= =?UTF-8?q?=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 칸 사이 칸의 폭이 `auto` 였다 — 꺾쇠(7px)·세로선(1px)·빈칸(0px)마다 폭이 달라, 카드마다 내용 칸이 조금씩 다른 넓이를 나눠 가졌다. 그래서 위아래 카드의 꺾쇠가 세로로 줄을 맞추지 못했다 (실측 3~5px — 「손익」 원가›수익 950px 과 「주문 진행 현황」 부가 작업›인도 완료 955px, 제보). · 칸 사이는 **무엇이 들어가든 같은 폭**(20px)으로 못 박는다 · 내용 칸은 `minmax(0, 1fr)` — 그냥 `1fr` 은 긴 금액이 칸을 넓혀 또 어긋난다 실측(1440px / 1024px) · 손익 꺾쇠 954 = 주문 진행 954 / 677 = 677 · 손익 세로선 252 = 주문 진행 첫 꺾쇠 252 / 183 = 183 · 영업 성과 가운데 꺾쇠 720 = 주문 진행 가운데 720 / 512 = 512 영업 성과는 칸이 넷이라 가운데 꺾쇠만 여섯 칸 카드와 겹칠 수 있다(수학적으로 그렇다). Co-Authored-By: Claude Opus 5 --- .../src/components/dashboard/AdminDashboard.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/dashboard/AdminDashboard.tsx b/frontend/src/components/dashboard/AdminDashboard.tsx index d5e65dd..ee0a481 100644 --- a/frontend/src/components/dashboard/AdminDashboard.tsx +++ b/frontend/src/components/dashboard/AdminDashboard.tsx @@ -246,6 +246,9 @@ interface Tile { * 「이름 + 숫자 + 아래 줄」 전체의 한가운데에 서서, 정작 맞춰야 할 **숫자 줄과 어긋났다**(제보). * 그래서 격자로 바꾸고 줄(이름/숫자/아래)과 칸을 좌표로 못 박는다 — 꺾쇠는 숫자 줄에만 놓인다. */ +/** 칸 사이 한 칸의 폭 — 모든 카드가 같은 값을 써야 꺾쇠가 위아래로 줄을 맞춘다 */ +const SEP_W = 20 + function TileRow({ tiles, isMobile, mobileCols, big, small }: { tiles: Tile[]; isMobile: boolean; mobileCols: number /** 첫 카드(영업 성과) — 한 단계 크게 */ @@ -278,8 +281,16 @@ function TileRow({ tiles, isMobile, mobileCols, big, small }: { ) } - // '1fr auto 1fr auto …' — 홀수 칸이 내용, 짝수 칸이 칸 사이 - const cols = tiles.map(() => '1fr').join(' auto ') + /* + * 홀수 칸이 내용, 짝수 칸이 칸 사이. **칸 사이는 무엇이 들어가든 같은 폭**이다(SEP_W). + * + * ⚠️ 예전에는 `auto` 였다 — 꺾쇠(7px)·세로선(1px)·빈칸(0px)마다 폭이 달라, 카드마다 내용 칸이 + * 조금씩 다른 넓이를 나눠 가졌다. 그래서 위아래 카드의 꺾쇠가 **세로로 줄을 맞추지 못했다** + * (실측 3~5px 어긋남, 제보). 폭을 못 박으면 같은 칸 수의 카드끼리는 꺾쇠가 정확히 겹치고, + * 칸 수가 달라도 한가운데 꺾쇠는 늘 폭의 절반에 선다. + * ⚠️ 내용 칸은 `minmax(0, 1fr)` — 그냥 `1fr` 은 긴 금액이 칸을 넓혀 또 어긋난다. + */ + const cols = tiles.map(() => 'minmax(0, 1fr)').join(` ${SEP_W}px `) return (
{tiles.map((x, i) => (