From e6005b4f94527616930a0bb9101cb401b5e3ea9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=AF=BC=ED=97=8C?= <min815371@gmail.com>
Date: Tue, 14 Jul 2026 11:44:59 +0900
Subject: [PATCH] =?UTF-8?q?feat(lps-admin):=20=ED=85=8C=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=20=EA=B2=80=EC=83=89=EC=9D=84=20=EC=95=B0=EB=B2=84=EB=A1=9C=20?=
 =?UTF-8?q?=EA=B5=AC=EB=B6=84=20=E2=80=94=20'=EC=8B=A4=EC=A0=9C=20?=
 =?UTF-8?q?=EB=B9=84=EC=9A=A9=20=EB=93=9C=EB=8A=94=20=EC=95=A1=EC=85=98'?=
 =?UTF-8?q?=20=EC=8B=A0=ED=98=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

테스트 검색은 다른 페이지(읽기전용 모니터링)와 달리 실제 크롤·프록시
비용이 발생하는 실행 액션이라 시각적으로 구분(협의).

- 네비 '테스트 검색': 앰버 점 마커 + 앰버 텍스트/활성색, 위에 구분선으로
  모니터링 페이지들과 분리(설정과 함께 실행/유틸 그룹).
- 테스트 페이지 '검색 실행' 버튼: primary(indigo) → warn-700(#a36a00).
  흰 텍스트 대비 4.55:1 로 AA 통과(실측). 상태색은 장식이 아니라
  '비용 주의' 의미로만 사용(디자인 규칙 준수).
- whitespace-nowrap 로 라벨 줄바꿈 방지. 모바일 hscroll 0 유지.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 lps-admin/src/components/Layout.tsx | 17 ++++++++++++-----
 lps-admin/src/pages/TestSearch.tsx  |  3 ++-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/lps-admin/src/components/Layout.tsx b/lps-admin/src/components/Layout.tsx
index 97cf906..83b13b2 100644
--- a/lps-admin/src/components/Layout.tsx
+++ b/lps-admin/src/components/Layout.tsx
@@ -4,13 +4,15 @@ import { useQuery } from "@tanstack/react-query";
 import { NavLink, Outlet } from "react-router";
 import { healthz } from "../api/client";
 
+// action: 실제 비용이 드는 실행 페이지(모니터링과 성격이 다름) — 앰버(warn) 마커로 구분.
+// group: 이 항목 앞에 구분선(모니터링 ↔ 실행/설정 경계).
 const MENU = [
   { to: "/", label: "대시보드", end: true },
   { to: "/jobs", label: "작업 큐" },
   { to: "/products", label: "상품·가격" },
   { to: "/crawl", label: "크롤 상태" },
   { to: "/costs", label: "비용" },
-  { to: "/test", label: "테스트 검색" },
+  { to: "/test", label: "테스트 검색", action: true, group: true },
   { to: "/settings", label: "설정" },
 ];
 
@@ -35,18 +37,23 @@ export default function Layout() {
           </div>
         </div>
         <nav aria-label="주 메뉴" className="mt-2 md:mt-0">
-          <ul className="flex gap-1 overflow-x-auto md:flex-col md:gap-0 md:space-y-0.5">
+          <ul className="flex items-center gap-1 overflow-x-auto md:flex-col md:items-stretch md:gap-0 md:space-y-0.5">
             {MENU.map((m) => (
-              <li key={m.to} className="shrink-0">
+              <li key={m.to} className="flex shrink-0 items-center">
+                {/* 모니터링 ↔ 실행/설정 경계: 모바일=세로 구분선, 데스크톱=가로 구분선 */}
+                {m.group && <span className="mx-1 h-5 w-px bg-line-200 md:my-1 md:h-px md:w-full" aria-hidden />}
                 <NavLink
                   to={m.to}
                   end={m.end}
                   className={({ isActive }) =>
-                    `flex min-h-[44px] items-center rounded-lg px-3 text-[13px] font-semibold transition-colors md:min-h-0 md:py-2 ${
-                      isActive ? "bg-primary-50 text-primary-700" : "text-ink-700 hover:bg-surface-2"
+                    `flex min-h-[44px] w-full items-center gap-1.5 whitespace-nowrap rounded-lg px-3 text-[13px] font-semibold transition-colors md:min-h-0 md:py-2 ${
+                      m.action
+                        ? isActive ? "bg-warn-50 text-warn-700" : "text-warn-700 hover:bg-warn-50"
+                        : isActive ? "bg-primary-50 text-primary-700" : "text-ink-700 hover:bg-surface-2"
                     }`
                   }
                 >
+                  {m.action && <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-warn-600" aria-hidden />}
                   {m.label}
                 </NavLink>
               </li>
diff --git a/lps-admin/src/pages/TestSearch.tsx b/lps-admin/src/pages/TestSearch.tsx
index e860836..5575a16 100644
--- a/lps-admin/src/pages/TestSearch.tsx
+++ b/lps-admin/src/pages/TestSearch.tsx
@@ -127,8 +127,9 @@ export default function TestSearch() {
             <Field id="price" label="현재가(원)" value={form.price} inputMode="numeric"
               onChange={(v) => setForm((f) => ({ ...f, price: v.replace(/[^0-9]/g, "") }))} placeholder="선택 — 있으면 가격밴드 필터 기준" />
             <div className="flex gap-2 pt-1">
+              {/* 앰버(warn) — 실제 크롤·프록시 비용이 드는 실행 액션임을 색으로 신호(모니터링 CTA 와 구분). */}
               <button type="submit" disabled={!form.product_name.trim() || submit.isPending || (!!jobId && status !== "DONE" && status !== "DEAD")}
-                className="flex-1 rounded-lg bg-primary-600 px-3 py-2 text-[13px] font-semibold text-white hover:bg-primary-700 disabled:opacity-50">
+                className="flex-1 rounded-lg bg-warn-700 px-3 py-2 text-[13px] font-semibold text-white hover:bg-warn-600 disabled:opacity-50">
                 {submit.isPending ? "제출 중…" : "검색 실행"}
               </button>
               {jobId && (