195 lines
5.2 KiB
Markdown
195 lines
5.2 KiB
Markdown
# Style Guide
|
|
|
|
라온누리 프로젝트의 코딩 스타일 가이드입니다.
|
|
|
|
---
|
|
|
|
## Color Usage Guidelines
|
|
|
|
### 핵심 원칙
|
|
|
|
**항상 브랜드 컬러를 우선 사용하세요:**
|
|
|
|
1. **버튼에는 항상 `colorPalette="brand"`** 사용:
|
|
```tsx
|
|
// ✅ Good
|
|
<Button colorPalette="brand">클릭</Button>
|
|
|
|
// ❌ Bad
|
|
<Button>클릭</Button> // 기본 gray 사용 금지
|
|
```
|
|
|
|
2. **Semantic 토큰 우선 사용** (하드코딩된 숫자 금지):
|
|
```tsx
|
|
// ✅ Good
|
|
color="fg" // 기본 텍스트
|
|
color="fg.muted" // 보조 텍스트
|
|
color="brand.fg" // 브랜드 텍스트
|
|
bg="bg" // 기본 배경
|
|
bg="brand.subtle" // 브랜드 배경
|
|
borderColor="border.muted"
|
|
|
|
// ❌ Bad
|
|
color="gray.600" // 숫자 사용 금지
|
|
bg="#FF6B9D" // 하드코딩 금지
|
|
```
|
|
|
|
3. **브랜드 컬러 활용**:
|
|
- Primary actions: `colorPalette="brand"` (핑크)
|
|
- Secondary: `colorPalette="teal"`, `colorPalette="blue"`
|
|
- Destructive: `colorPalette="red"`
|
|
- Success: `colorPalette="green"`
|
|
|
|
4. **다크 모드 대응**:
|
|
- Semantic 토큰 사용 시 자동으로 light/dark 변환
|
|
- ❌ **`useColorModeValue()` 사용 금지** - 전체 프로젝트에서 제거됨 (2025-11-10)
|
|
- ✅ **Semantic token 또는 conditional style 객체 사용**:
|
|
```tsx
|
|
// ✅ 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 페이지 전용 토큰
|
|
|
|
```tsx
|
|
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) - 보조 아이콘
|
|
- ❌ 이모티콘 (🌍📝🔐) - 사용 금지 (브라우저마다 다르게 표시)
|
|
|
|
### 사용 예시
|
|
|
|
```tsx
|
|
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 적용:
|
|
|
|
```typescript
|
|
// 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 컴포넌트
|
|
|
|
반투명 배경 + 블러 효과 통일:
|
|
|
|
```tsx
|
|
<GlassCard>
|
|
<CardHeader>제목</CardHeader>
|
|
<CardBody>내용</CardBody>
|
|
</GlassCard>
|
|
```
|
|
|
|
**특징**:
|
|
- 자동 배경 블러 (`backdrop-filter: blur(8px)`)
|
|
- 다크 모드 자동 대응
|
|
- 일관된 시각적 통일성
|
|
|
|
### 버튼 스타일
|
|
|
|
```tsx
|
|
// Primary action
|
|
<Button colorPalette="brand">저장</Button>
|
|
|
|
// Secondary action
|
|
<Button variant="outline" colorPalette="teal">취소</Button>
|
|
|
|
// Destructive action
|
|
<Button colorPalette="red">삭제</Button>
|
|
```
|
|
|
|
---
|
|
|
|
## 관련 문서
|
|
|
|
- chakra mcp
|
|
- [TECH_STACK.md](./TECH_STACK.md) - 기술 스택
|
|
- [CLAUDE.md](./CLAUDE.md) - 개발 가이드
|
|
|
|
---
|
|
|
|
© 2024 BlueNovaLab. All rights reserved. |