# 개발환경

---

## 기술 스택

| 항목 | 버전 |
|---|---|
| Vite | ^8.0 |
| SCSS (sass) | ^1.101 |
| jQuery | ^4.0 |
| Prettier | ^3.8 |

---

## 명령어

```bash
npm run dev       # 개발 서버 실행 (localhost:3000, 자동 브라우저 오픈)
npm run build     # 프로덕션 빌드 → dist/
npm run preview   # 빌드 결과물 미리보기
npm run format    # SCSS, JS Prettier 포맷 (HTML 제외)
```

---

## 디렉터리 구조

```
src/              # Vite root
├── index.html
├── js/
│   └── main.js
├── scss/
│   ├── main.scss
│   ├── base/     # reset, variable, mixin, font
│   └── page/     # 페이지별 SCSS
├── font/
│   ├── SUIT/
│   │   └── SUIT-Variable.woff2
│   └── DMSerifDisplay/
│       ├── DMSerifDisplay-Italic-latin.woff2
│       └── DMSerifDisplay-Italic-latin-ext.woff2
└── assets/       # 이미지 등 정적 파일

dist/             # 빌드 결과물 (git 제외)
doc/              # 프로젝트 문서
```

---

## 빌드 설정

- **출력 경로**: `dist/`
- **포맷**: `iife` — `file://` 로 직접 열어도 동작하도록 모듈 속성 제거
- **이미지 압축**: `vite-plugin-imagemin`
  - jpg: mozjpeg quality 80
  - png: optipng level 5 / pngquant 0.7~0.9
  - gif: gifsicle level 3
  - svg: 빈 속성 제거, viewBox 유지
- **CSS sourcemap**: 개발 서버에서만 활성화 (`devSourcemap: true`)

---

## SCSS 설정

- `modern-compiler` API 사용 (`@use` 기반, `@import` 미사용)
- 7-1 패턴 구조

---

## Prettier 설정

- 대상: `src/**/*.scss`, `src/**/*.js` (HTML 제외)
- `printWidth: 1000` — 줄바꿈 최소화
- `tabWidth: 2`, `useTabs: false`
- `singleQuote: false`

---

## 웹폰트

외부 CDN 없이 셀프호스팅. `src/font/` 에 woff2 파일 포함.

| 폰트 | 용도 |
|---|---|
| SUIT Variable | 기본 본문 폰트 (weight 100~900) |
| DM Serif Display Italic | 포인트 serif 폰트 |