minaChoi/o2o-negosium-original
1
0
Fork 0
Code Pull Requests Activity

style(design): FINDING-001 — 모바일(<md) 사이드바를 상단 네비로 전환

Browse Source 
375px에서 사이드바가 196px을 고정 점유해 콘텐츠가 낱글자로 세로
분해되고 /jobs 에 가로 스크롤(484px)이 생겼다. <md 에서 상단 바
+가로 스크롤 네비(터치 44px, FINDING-006)로 전환, 로고 그라디언트
hex 를 primary-400 토큰으로 승격. 검증: dashboard/jobs 375px
hscroll=false, 스크린샷 확인.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
민헌 2026-07-13 22:51:53 +09:00
parent 5e286d7949
commit a750c1098a
2 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
lps-admin/src/components/Layout.tsx
View File

@ -17,24 +17,31 @@ export default function Layout() {
const health = useQuery({ queryKey: ["healthz"], queryFn: healthz, refetchInterval: 10_000 });
const up = health.data === true;
return (
<div className="mx-auto flex min-h-screen max-w-[1280px]">
<aside className="w-[196px] shrink-0 border-r border-line-200 px-3 py-5">
<div className="mb-6 flex items-center gap-2.5 px-2">
<span className="grid h-8 w-8 place-items-center rounded-lg bg-gradient-to-br from-primary-600 to-[#8b7bff] text-[14px] font-extrabold text-white">L</span>
<div className="mx-auto flex min-h-screen max-w-[1280px] flex-col md:flex-row">
{/* 모바일(<md): 상단 바 + 가로 스크롤 네비(터치 44px). md 이상: 좌측 고정 사이드바. */}
<aside className="w-full shrink-0 border-b border-line-200 px-3 py-3 md:w-[196px] md:border-b-0 md:border-r md:py-5">
<div className="flex items-center justify-between md:block">
<div className="flex items-center gap-2.5 px-2 md:mb-6">
<span className="grid h-8 w-8 place-items-center rounded-lg bg-gradient-to-br from-primary-600 to-primary-400 text-[14px] font-extrabold text-white">L</span>
<div>
<div className="text-[14px] font-bold leading-tight">LPS 관리자</div>
<div className="text-[10.5px] font-medium text-ink-400">인터넷 최저가 검색</div>
</div>
</div>
<nav aria-label="주 메뉴">
<ul className="space-y-0.5">
<div className="flex items-center gap-2 px-2 text-[11.5px] font-semibold text-ink-500 md:hidden">
<span className={`h-2 w-2 rounded-full ${up ? "bg-ok-600" : "bg-dead-600"}`} aria-hidden />
{up ? "연결됨" : "연결 안 됨"}
</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">
{MENU.map((m) => (
<li key={m.to}>
<li key={m.to} className="shrink-0">
<NavLink
to={m.to}
end={m.end}
className={({ isActive }) =>
`block rounded-lg px-3 py-2 text-[13px] font-semibold transition-colors ${
`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"
}`
}
@ -45,7 +52,7 @@ export default function Layout() {
))}
</ul>
</nav>
<div className="mt-8 flex items-center gap-2 px-3 text-[11.5px] font-semibold text-ink-500">
<div className="mt-8 hidden items-center gap-2 px-3 text-[11.5px] font-semibold text-ink-500 md:flex">
<span
className={`h-2 w-2 rounded-full ${up ? "bg-ok-600" : "bg-dead-600"}`}
aria-hidden
@ -53,7 +60,7 @@ export default function Layout() {
{up ? "API 연결됨" : "API 연결 안 됨"}
</div>
</aside>
<main className="min-w-0 flex-1 px-6 py-5">
<main className="min-w-0 flex-1 px-4 py-4 md:px-6 md:py-5">
<Outlet />
</main>
</div>

1
lps-admin/src/index.css
View File

@ -17,6 +17,7 @@
--color-primary-700: #4338ca;
--color-primary-600: #4f46e5;
--color-primary-400: #8b7bff;
--color-primary-100: #e5e4fb;
--color-primary-50: #eef0ff;