style(frontend): PwC 로고 제거, 기본 라이트 모드, 삼성 팔레트 포인트 Samsung Blue

- LogoMark 는 null 렌더(호출부 6곳 그대로), logo.png·logo-dark.png 삭제, 파비콘 투명
- themeStore·index.html 기본 light. 예전 dark 저장값은 첫 실행 때 한 번만 초기화
- samsung 팔레트 primary/ring/link = #1428A0(브랜드 파랑). 바탕·글씨·면은 실측값 유지
- Message 테스트: 기본 라이트 기준으로 코드블럭 흰 배경 기대

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
lee-hyeon-cheol
2026-09-21 10:40:32 +09:00
co-authored by Claude Fable 5.1
parent efb9fb46de
commit 72a06d6c07
9 changed files with 22 additions and 28 deletions
+7 -3
View File
@@ -21,11 +21,15 @@
} }
document.documentElement.setAttribute("data-theme", pal) document.documentElement.setAttribute("data-theme", pal)
var raw = localStorage.getItem("theme-store") var raw = localStorage.getItem("theme-store")
var mode = "dark" // 저장값 없으면 다크 (themeStore 기본과 동일) var mode = "light" // 저장값 없으면 라이트 (themeStore 기본과 동일)
if (raw) { // 기본 모드를 라이트로 바꾸면서(2026-09) 예전 저장값 dark 는 한 번만 light 로. 이후 직접 고른 건 유지.
if (raw && localStorage.getItem("light-default-v1")) {
try { try {
mode = (JSON.parse(raw).state || {}).theme || "dark" mode = (JSON.parse(raw).state || {}).theme || "light"
} catch (e) {} } catch (e) {}
} else {
localStorage.removeItem("theme-store")
localStorage.setItem("light-default-v1", "1")
} }
var dark = var dark =
mode === "dark" || mode === "dark" ||
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 83 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

@@ -23,8 +23,8 @@ describe("Message 코드펜스 렌더", () => {
// 스크롤 컨테이너 있는 CodeBlock 으로 감싸져야 함 // 스크롤 컨테이너 있는 CodeBlock 으로 감싸져야 함
const block = container.querySelector("[data-code-block]") const block = container.querySelector("[data-code-block]")
expect(block).not.toBeNull() expect(block).not.toBeNull()
// 코드 상자 색은 앱 테마를 따름 — 기본(다크)에선 어두운 코드 상자, 라이트 모드면 흰 에디터 룩 // 코드 상자 색은 앱 테마를 따름 — 기본이 라이트(2026-09-21)라 언어 없는 블럭은 흰 에디터 룩, 다크면 bg-[#0d1117]
expect(block?.className).toContain("bg-[#0d1117]") expect(block?.className).toContain("bg-white")
// 인라인 code 스타일(bg-black/10)로 새지 않아야 함 // 인라인 code 스타일(bg-black/10)로 새지 않아야 함
expect(container.querySelector("code.rounded")).toBeNull() expect(container.querySelector("code.rounded")).toBeNull()
}) })
+3 -13
View File
@@ -1,19 +1,9 @@
import logo from "@/assets/logo.png"
import logoDark from "@/assets/logo-dark.png"
import { cn } from "@/lib/utils/cn"
interface LogoMarkProps { interface LogoMarkProps {
/** 로고 가로 폭(px) — 원본 비율(약 2.06:1) 유지 */
width?: number width?: number
className?: string className?: string
} }
/** 브랜드 마크 — ABAP_OPENCODE 와 같은 PwC 로고. 다크에선 밝은 글자 변형. */ /** 브랜드 마크 자리 — 지금은 아무것도 안 그림(PwC 로고 제거, 2026-09-21). 호출부 6곳은 그대로 두고 여기서만 끔. */
export function LogoMark({ width = 38, className }: LogoMarkProps) { export function LogoMark(_props: LogoMarkProps) {
return ( return null
<span className={cn("inline-flex shrink-0", className)} style={{ width }}>
<img src={logo} alt="PwC" className="block h-auto w-full dark:hidden" />
<img src={logoDark} alt="PwC" className="hidden h-auto w-full dark:block" />
</span>
)
} }
+2 -2
View File
@@ -35,8 +35,8 @@ const ORDER: Theme[] = ["light", "dark", "system"]
export const useThemeStore = create<ThemeState>()( export const useThemeStore = create<ThemeState>()(
persist( persist(
(set, get) => ({ (set, get) => ({
theme: "dark", // ABAP_OPENCODE 와 같이 다크가 기본 theme: "light", // 삼성향 팔레트가 라이트라 라이트 기본(2026-09-21)
resolved: resolve("dark"), resolved: resolve("light"),
setTheme: (theme) => { setTheme: (theme) => {
const resolved = resolve(theme) const resolved = resolve(theme)
applyToDocument(resolved) applyToDocument(resolved)
+7 -7
View File
@@ -83,8 +83,8 @@ export type DerivedTokens = {
// 의미색 — 모든 테마 공통 // 의미색 — 모든 테마 공통
const DESTRUCTIVE = "oklch(0.577 0.245 27.325)" const DESTRUCTIVE = "oklch(0.577 0.245 27.325)"
// 삼성향 — 삼성닷컴(sec) 공개 웹 2026-07 실측값. 검정 주색·흰 바탕·회색 면, 그림자 없음, 알약 버튼(20px). // 삼성향 — 삼성닷컴(sec) 공개 웹 2026-07 실측값(흰 바탕·검정 글씨·회색 면, 그림자 없음, 알약 20px)
// One UI 파랑(#0381fe)은 폰 앱용이라 안 씀. 링크만 #007aff. 폰트는 재배포 근거 없어 안 넣음. // 포인트로 Samsung Blue #1428A0(브랜드 로고 색) — 버튼·링·활성 표시. One UI 파랑(#0381fe)은 폰 앱용이라 안 씀.
const SAMSUNG_TOKENS: DerivedTokens = { const SAMSUNG_TOKENS: DerivedTokens = {
background: "#FFFFFF", // canvas background: "#FFFFFF", // canvas
foreground: "#000000", foreground: "#000000",
@@ -92,7 +92,7 @@ const SAMSUNG_TOKENS: DerivedTokens = {
cardForeground: "#000000", cardForeground: "#000000",
popover: "#FFFFFF", popover: "#FFFFFF",
popoverForeground: "#000000", popoverForeground: "#000000",
primary: "#000000", // contained CTA primary: "#1428A0", // Samsung Blue — 포인트
primaryForeground: "#FFFFFF", primaryForeground: "#FFFFFF",
secondary: "#F7F7F7", // surface secondary: "#F7F7F7", // surface
secondaryForeground: "#000000", secondaryForeground: "#000000",
@@ -103,15 +103,15 @@ const SAMSUNG_TOKENS: DerivedTokens = {
destructive: DESTRUCTIVE, destructive: DESTRUCTIVE,
border: "#DDDDDD", border: "#DDDDDD",
input: "#DDDDDD", input: "#DDDDDD",
ring: "#000000", ring: "#1428A0",
sidebar: "#F7F7F7", sidebar: "#F7F7F7",
sidebarForeground: "#000000", sidebarForeground: "#000000",
sidebarPrimary: "#000000", sidebarPrimary: "#1428A0",
sidebarPrimaryForeground: "#FFFFFF", sidebarPrimaryForeground: "#FFFFFF",
sidebarAccent: "#EDEDED", sidebarAccent: "#EDEDED",
sidebarAccentForeground: "#000000", sidebarAccentForeground: "#000000",
sidebarBorder: "#DDDDDD", sidebarBorder: "#DDDDDD",
sidebarRing: "#000000", sidebarRing: "#1428A0",
} }
// 기본 팔레트(id 는 하위호환으로 clean-blue 유지) — ABAP_OPENCODE DESIGN_SYSTEM.md §7 라이트 값. // 기본 팔레트(id 는 하위호환으로 clean-blue 유지) — ABAP_OPENCODE DESIGN_SYSTEM.md §7 라이트 값.
@@ -152,7 +152,7 @@ const FIXED_TOKENS: Record<string, DerivedTokens> = {
} }
// 팔레트별 추가 CSS — samsung 은 알약 radius(실측 20px) + 링크색 // 팔레트별 추가 CSS — samsung 은 알약 radius(실측 20px) + 링크색
const EXTRA_CSS: Record<string, string> = { const EXTRA_CSS: Record<string, string> = {
samsung: `[data-theme="samsung"]:not(.dark){--radius:20px;--link:#007aff}`, samsung: `[data-theme="samsung"]:not(.dark){--radius:20px;--link:#1428A0}`,
} }
export function derivePaletteTokens( export function derivePaletteTokens(
+1 -1
View File
@@ -12,7 +12,7 @@ export const PALETTES: RawPalette[] = [
{ {
id: "samsung", // 고정 토큰(derive.ts SAMSUNG_TOKENS) — 삼성닷컴 공개 웹 실측값. 라이트 전용, 다크는 공통 id: "samsung", // 고정 토큰(derive.ts SAMSUNG_TOKENS) — 삼성닷컴 공개 웹 실측값. 라이트 전용, 다크는 공통
name: "Samsung", name: "Samsung",
swatch: ["#FFFFFF", "#F7F7F7", "#000000", "#707070"], swatch: ["#FFFFFF", "#F7F7F7", "#1428A0", "#000000"],
}, },
{ {
id: "clean-blue", // id 는 저장된 값 호환 위해 유지 — 실제 토큰은 derive.ts 워크스페이스(ABAP_OPENCODE) 값 id: "clean-blue", // id 는 저장된 값 호환 위해 유지 — 실제 토큰은 derive.ts 워크스페이스(ABAP_OPENCODE) 값