Style Guide

라온누리 프로젝트의 코딩 스타일 가이드입니다.

Color Usage Guidelines

핵심 원칙

항상 브랜드 컬러를 우선 사용하세요:

버튼에는 항상 colorPalette="brand" 사용:

// ✅ Good
<Button colorPalette="brand">클릭</Button>

// ❌ Bad
<Button>클릭</Button>  // 기본 gray 사용 금지

Semantic 토큰 우선 사용 (하드코딩된 숫자 금지):

// ✅ Good
color="fg"              // 기본 텍스트
color="fg.muted"        // 보조 텍스트
color="brand.fg"        // 브랜드 텍스트
bg="bg"                 // 기본 배경
bg="brand.subtle"       // 브랜드 배경
borderColor="border.muted"

// ❌ Bad
color="gray.600"        // 숫자 사용 금지
bg="#FF6B9D"           // 하드코딩 금지

브랜드 컬러 활용:
- Primary actions: colorPalette="brand" (핑크)
- Secondary: colorPalette="teal", colorPalette="blue"
- Destructive: colorPalette="red"
- Success: colorPalette="green"

다크 모드 대응:

Semantic 토큰 사용 시 자동으로 light/dark 변환
❌ useColorModeValue() 사용 금지 - 전체 프로젝트에서 제거됨 (2025-11-10)

✅ Semantic token 또는 conditional style 객체 사용:

// ✅ Good - Semantic token (단색)
<Box bg="bg" color="fg" borderColor="border.muted">

// ✅ Good - Semantic token (그라데이션은 var() 필수)
<Box bgGradient="var(--chakra-colors-landing-hero-bg)">

// ✅ Good - Conditional style 객체 (특수한 경우에만, 기본적으로는 Semantic token 우선)
<Box _hover={{bg: {_light: "gray.50", _dark: "gray.700"}}}>

// ✅ Good - Conditional style 객체 (그라데이션)
<Box bgGradient={{
  _light: "linear-gradient(to bottom right, #FFE5E5, #FFF5E5, #E5F5FF)",
  _dark: "linear-gradient(to bottom right, gray.900, gray.800, blue.900)"
}}>

// ❌ Bad - useColorModeValue 사용 금지
const bg = useColorModeValue("white", "gray.800");

Landing 페이지 전용 토큰

color="landing.text"           // 메인 텍스트 (#2C3E50 / gray.100)
color="landing.subtext"        // 보조 텍스트 (#5A6C7D / gray.300)
bg="landing.section.bg"        // 섹션 배경 (#F8F9FA / gray.800)
bg="landing.footer.bg"         // Footer 배경

// ⚠️ 그라데이션은 var() 사용 필수
bgGradient="var(--chakra-colors-landing-hero-bg)"

// Feature Card 색상 (11가지)
bg="landing.feature.pink.bg"     // 1. Pink (#FFE5EE / #FF6B9D)
bg="landing.feature.teal.bg"     // 2. Teal (#E5F9F7 / #4ECDC4)
bg="landing.feature.yellow.bg"   // 3. Yellow (#FFF9E5 / #FFD93D)
bg="landing.feature.mint.bg"     // 4. Mint (#E5F9F5 / #95E1D3)
bg="landing.feature.purple.bg"   // 5. Purple (#F3E5F5 / #9C27B0)
bg="landing.feature.blue.bg"     // 6. Blue (#E3F2FD / #2196F3)
bg="landing.feature.orange.bg"   // 7. Orange (#FFF3E0 / #FF9800)
bg="landing.feature.green.bg"    // 8. Green (#E8F5E9 / #4CAF50)
bg="landing.feature.red.bg"      // 9. Red (#FFEBEE / #F44336)
bg="landing.feature.indigo.bg"   // 10. Indigo (#E8EAF6 / #3F51B5)
bg="landing.feature.lime.bg"     // 11. Lime (#F9FBE7 / #CDDC39)

color="landing.feature.{color}.icon"  // 아이콘 색상 (500 shade)

Icon 사용 규칙

react-icons 필수 (이모티콘 사용 금지):

✅ react-icons/lu (Lucide) - 메인 아이콘 세트
✅ react-icons/fa (Font Awesome) - 보조 아이콘
❌ 이모티콘 (🌍📝🔐) - 사용 금지 (브라우저마다 다르게 표시)

사용 예시

import { LuGlobe, LuClipboardList, LuLock } from "react-icons/lu";
import { FaUserGraduate } from "react-icons/fa";

// ✅ Good
<Icon as={LuGlobe} />

// ❌ Bad
<Text>🌍</Text>  // 이모티콘 사용 금지

Chakra UI 테마 확장

위치

파일: src/theme/system.ts
Semantic tokens, recipes 패턴 따르기
Overlay UI (Dialog, Select, Menu): Portal 사용, bg 자동 적용

테마 슬롯 레시피

Dialog, Select 등 Overlay 컴포넌트는 slot recipe 적용:

// src/theme/system.ts
export default createSystem(defaultConfig, {
  theme: {
    recipes: {
      dialog: defineRecipe({
        base: {
          backdrop: {
            backdropFilter: "blur(4px)",
          },
          content: {
            bg: "bg",
            borderColor: "border.muted",
            shadow: "lg",
          },
        },
      }),
    },
  },
});

컴포넌트 스타일 가이드

GlassCard 컴포넌트

반투명 배경 + 블러 효과 통일:

<GlassCard>
  <CardHeader>제목</CardHeader>
  <CardBody>내용</CardBody>
</GlassCard>

특징:

자동 배경 블러 (backdrop-filter: blur(8px))
다크 모드 자동 대응
일관된 시각적 통일성

버튼 스타일

// Primary action
<Button colorPalette="brand">저장</Button>

// Secondary action
<Button variant="outline" colorPalette="teal">취소</Button>

// Destructive action
<Button colorPalette="red">삭제</Button>

5.2 KiB Raw Blame History