Marketing Ax Frontend Style Skill

Vite 템플릿에 이미 포함

Design System Overview

Color Palette

전체 토큰은 references/tokens.css 참조. 아래는 용도별 정리.

LG Red (브랜드)

Neutral (그레이스케일)

Semantic (상태)

컴포넌트 내 하드코딩 색상 (tokens.css 외)

Typography

Layout Dimensions

Z-index Hierarchy

File Structure

frontend/
├── index.html                          ← Google Fonts 로딩
├── src/
│   ├── main.tsx                        ← tokens.css + globals.css import
│   ├── shared/
│   │   ├── lib/cn.ts                   ← clsx wrapper
│   │   ├── styles/
│   │   │   ├── tokens.css              ← CSS custom properties
│   │   │   └── globals.css             ← 레이아웃, 컴포넌트 기본 스타일
│   │   └── ui/
│   │       ├── app-shell.tsx           ← 사이드바 + 톱바 + 본문 레이아웃
│   │       ├── card.tsx
│   │       ├── badge.tsx
│   │       ├── button.tsx
│   │       ├── field.tsx               ← FieldLabel, TextInput, TextArea
│   │       ├── step-indicator.tsx      ← 단계 표시 (pending/active/done)
│   │       ├── toast.tsx               ← 포탈 기반 토스트
│   │       └── modal.tsx               ← 포탈 기반 모달
│   └── app/
│       └── router.tsx                  ← AppShell 안에 라우트

Procedure (새 프로젝트에 적용)

Phase 1: 프로젝트 초기화

1. Vite 프로젝트 생성 (이미 있으면 건너뜀):

   npm create vite@latest my-project -- --template react-ts
   cd my-project
   

2. 의존성 설치:

   npm install
   npm install clsx react-router-dom
   

3. Vite 기본 파일 정리 — 아래 파일 삭제 (Marketing AX 스타일로 대체):

   • src/App.tsx — 삭제
   • src/App.css — 삭제
   • src/index.css — 삭제

4. @/ alias 설정 (두 곳 모두 필수):

   • vite.config.ts — references/vite-config-alias.ts (Vite 번들러용)
   • tsconfig.app.json — references/tsconfig-paths.json (TypeScript 컴파일러/IDE용)
   • 둘 중 하나라도 빠지면 빌드 또는 IDE에서 import 에러 발생

Phase 2: 디자인 시스템 파일 배치

5. index.html 교체 — references/index-html.html (__PROJECT_TITLE__ 수정)

   • Noto Sans KR (primary UI 폰트), Inter, Noto Serif KR, JetBrains Mono 포함 확인

6. 디렉토리 생성 + 파일 복사:

   src/shared/lib/cn.ts       ← references/cn-util.ts
   src/shared/styles/tokens.css ← references/tokens.css
   src/shared/styles/globals.css ← references/globals.css
   src/shared/ui/card.tsx      ← references/components/card.tsx
   src/shared/ui/badge.tsx     ← references/components/badge.tsx
   src/shared/ui/button.tsx    ← references/components/button.tsx
   src/shared/ui/field.tsx     ← references/components/field.tsx
   src/shared/ui/toast.tsx     ← references/components/toast.tsx
   src/shared/ui/modal.tsx     ← references/components/modal.tsx
   src/shared/ui/step-indicator.tsx ← references/components/step-indicator.tsx
   

Phase 3: 앱 구조 연결

7. src/shared/ui/app-shell.tsx 생성 — references/app-shell-skeleton.tsx를 기반으로 프로젝트에 맞게 수정

   • BRAND_TITLE 변경
   • mainNav 배열을 프로젝트 메뉴로 수정
   • GearMenu 내 메뉴 항목 수정

8. src/main.tsx 작성 — Vite 기본 코드를 아래로 교체:

   import React from 'react'
   import { createRoot } from 'react-dom/client'
   import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom'
   
   import '@/shared/styles/tokens.css'   // ← 순서 중요: tokens 먼저
   import '@/shared/styles/globals.css'   // ← globals 다음
   
   import { AppShell } from '@/shared/ui/app-shell'
   
   const router = createBrowserRouter([
     {
       path: '/',
       element: <AppShell><Outlet /></AppShell>,  // ← Outlet으로 자식 라우트 렌더링
       children: [
         { index: true, element: <div>홈</div> },
         // 프로젝트별 라우트 추가
       ],
     },
   ])
   
   createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
       <RouterProvider router={router} />
     </React.StrictMode>,
   )
   

   핵심: <AppShell><Outlet /></AppShell> 구조. AppShell이 사이드바+톱바를 그리고, <Outlet />이 현재 라우트의 페이지 컴포넌트를 렌더링한다.

컴포넌트별 사용 가이드

Card

<Card>카드 내용</Card>
<Card className="stack">여러 요소를 gap 0.8rem으로 배치</Card>

• 호버 시 약간 위로 떠오르는 효과 (translateY -1px)
• .stack 클래스 조합으로 내부 요소 간격 조절

Badge

<Badge tone="success">성공</Badge>
<Badge tone="danger">실패</Badge>
<Badge tone="warning">대기</Badge>
<Badge tone="primary">중요</Badge>
<Badge>기본</Badge>

Button

<Button>기본 (Primary)</Button>
<Button variant="secondary">보조</Button>
<Button variant="danger">위험</Button>
<Button variant="ghost">투명</Button>

Toast (서버 연결 실패 표시)

<Toast
  open={!sseConnected}
  variant="destructive"
  title="서버 연결 끊김"
  description="실시간 연결이 끊어졌습니다. 데이터가 자동 갱신되지 않을 수 있습니다."
/>

• Portal 기반 (document.body에 렌더링)
• open prop으로 표시/숨김 제어
• slide-in + fade-in 애니메이션
• destructive 변형: 빨간 배경 + 경고 아이콘

Modal

<Modal open={showModal} onClose={() => setShowModal(false)} title="확인">
  <p>정말 삭제하시겠습니까?</p>
  <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 16 }}>
    <Button variant="ghost" onClick={() => setShowModal(false)}>취소</Button>
    <Button variant="danger" onClick={handleDelete}>삭제</Button>
  </div>
</Modal>

• 백드롭 클릭 또는 ESC 키로 닫기
• fadeIn + slideUp 애니메이션

StepIndicator (단계 표시)

3가지 상태: pending / active / done

import { StepIndicator } from '@/shared/ui/step-indicator'

{/* 카드 안에 수평 배치 + 화살표 구분자 */}
<Card style={{ display: 'flex', gap: 16, alignItems: 'center', padding: '0.65rem 1rem' }}>
  <StepIndicator step={1} label="입력" active={false} done />
  <span style={{ color: 'var(--neutral-300)' }}>&rarr;</span>
  <StepIndicator step={2} label="처리 중" active done={false} />
  <span style={{ color: 'var(--neutral-300)' }}>&rarr;</span>
  <StepIndicator step={3} label="완료" active={false} done={false} />
</Card>

상태별 스타일:

치수:

• 원형 뱃지: 22x22px, borderRadius: '50%'
• 숫자/체크: fontSize: 12, fontWeight: 700
• 라벨: <small>, fontWeight: 600
• 원형과 라벨 간격: gap: 6
• 단계 간 간격: gap: 16 (카드 flex)
• 단계 구분 화살표: → (→), color: var(--neutral-300)

Field

<FieldLabel>라벨</FieldLabel>
<TextInput placeholder="입력" />
<TextArea placeholder="긴 텍스트" />

배경 스타일 특징

본문 배경은 단색이 아닌 LG Red 기반 미묘한 그라디언트: