From a56e2250327397886a939e66c303cc1d856a4047 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=AF=BC=ED=97=8C?= <min815371@gmail.com>
Date: Wed, 17 Jun 2026 10:47:32 +0900
Subject: [PATCH] =?UTF-8?q?style(front):=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=EC=97=90=20=EB=B8=8C=EB=9E=9C=EB=93=9C=20=ED=86=A4=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 헤더 바 bg를 brand(primary)로, 콘텐츠 면 bg를 브랜드 틴트 쿨 그레이(surface)로 변경
- 불필요한 주석 정리

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 front/src/layouts/MainHeaderBar.tsx | 5 ++---
 front/src/layouts/MainLayout.tsx    | 8 ++++----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/front/src/layouts/MainHeaderBar.tsx b/front/src/layouts/MainHeaderBar.tsx
index 9e4652d..811d1f6 100644
--- a/front/src/layouts/MainHeaderBar.tsx
+++ b/front/src/layouts/MainHeaderBar.tsx
@@ -1,9 +1,8 @@
 import { type ReactNode } from 'react'
-import { cn } from '@/components'
+import { cn } from '@/lib'
 
-// 우측 상단 다크 헤더 바
 const HEADER_BASE =
-  'flex w-full h-[56px] py-[18px] items-center rounded-t-[8px] bg-foreground text-background'
+  'flex w-full h-[56px] py-[18px] items-center rounded-t-[8px] bg-primary text-primary-foreground'
 
 const HEADER_ALIGN = {
   left: 'justify-start',
diff --git a/front/src/layouts/MainLayout.tsx b/front/src/layouts/MainLayout.tsx
index 1ae4894..76c3751 100644
--- a/front/src/layouts/MainLayout.tsx
+++ b/front/src/layouts/MainLayout.tsx
@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react'
-import { Logo, cn } from '@/components'
+import { Logo } from '@/components'
+import { cn } from '@/lib'
 
 // 좌측 폭: list=반응형 비율 / chat=고정 350px
 const SIDEBAR_WIDTH = {
@@ -18,8 +19,8 @@ const styles = {
   logoHeader:
     'flex w-full h-[56px] pl-[32px] pr-[24px] py-[8px] items-center justify-between shrink-0',
   main: 'flex flex-1 flex-col h-screen overflow-hidden pt-2 pr-2 pb-2 pl-0',
-  // 헤더 아래 콘텐츠 면 (다크 헤더 rounded-t 와 합쳐져 카드 형태)
-  content: 'flex flex-1 flex-col min-h-0 w-full overflow-hidden rounded-b-[8px] bg-muted',
+  // 다크 헤더와 합쳐져 카드 형태
+  content: 'flex flex-1 flex-col min-h-0 w-full overflow-hidden rounded-b-[8px] bg-surface',
 } as const
 
 export type SidebarWidth = keyof typeof SIDEBAR_WIDTH
@@ -28,7 +29,6 @@ export interface MainLayoutProps {
   sidebarWidth?: SidebarWidth
   /** 루트 가로 스크롤 + 최소폭 (chat 전용) */
   scrollX?: boolean
-  /** 로고 우측 컨트롤 */
   logoAction?: ReactNode
   sidebar: ReactNode
   header: ReactNode