[Refactor/#200] 디자인 시스템 컬러 및 폰트 위계 점검 및 개선

.cursor/rules/private-always.mdc

@@ -0,0 +1,117 @@
+---
+description: Personal always-on rules + project context (local only)
+alwaysApply: true
+---
+
+# WhereYouAd Frontend — Cursor 규칙
+
+**로컬 전용.** 팀 규칙·레포와 **동기화하지 않음** (본인 Cursor에만 적용).
+
+## 강제 규칙 (에이전트 최우선)
+
+1. **색**: `tokens.css`의 `@theme` 토큰만. 토큰 **이름 변경·임의 색 추가 금지**.
+2. **컴포넌트/페이지**: `var(--*)`·인라인 hex **금지** → `bg-*` `text-*` `border-*` 유틸만.
+3. **SVG**: `fill`/`stroke="currentColor"`, 색은 `text-*`.
+4. **“디자인 변경 금지”** 요청 시: **색상 클래스만** (spacing·타이포·DOM 변경 금지).
+5. **상태**: UI → Zustand · 서버 → react-query(스토어에 서버 데이터 금지) · 폼 → RHF(전역에 폼값 금지).
+6. **커밋**: 제목 **1줄만** `type: subject`. 커밋 전 `eslint --fix`.
+7. **Git**: 요청 없으면 `push`·PR 생성·`commit --amend`·`push --force` 금지.
+8. **머지·리베이스**: 원격과 충돌 시 **디자인(UI·레이아웃·간격·타이포·`rounded` 등)은 로컬(현재 작업 브랜치) 우선**. API·타입·버그픽스 등은 합리적으로 합친다. 색·토큰은 규칙 1–2 유지.
+
+---
+
+## `#project-overview` — 프로젝트 개요
+
+- **프로젝트명**: WhereYouAd
+- **한 줄**: 광고 성과 및 워크스페이스 관리를 지원하는 웹 서비스 **프론트엔드**.
+- **성격**: 2026 Capstone · Graduation Project.
+- **목표**: 대시보드 UI, 안정적인 상태 관리, 확장 가능한 구조.
+- **팀 (Frontend)**: 서제경, 박재선, 임예림.
+- **기술 방향**: 빠른 렌더링·효율적 데이터 패칭, **UI State / Server State 분리**, 린트·컨벤션으로 품질 유지.
+
+### 기술 스택 (요약)
+
+| 구분         | 내용                                                |
+| ------------ | --------------------------------------------------- |
+| Core         | React 19, TypeScript, Vite                          |
+| Routing      | react-router-dom v7                                 |
+| Client state | zustand                                             |
+| Server state | @tanstack/react-query                               |
+| Styling      | Tailwind CSS v4, clsx, vite-plugin-svgr             |
+| Form         | react-hook-form, zod, @hookform/resolvers, sonner   |
+| 품질         | ESLint v9, Prettier, husky, lint-staged, commitlint |
+
+### 개발 환경
+
+- **Node**: v20.x LTS 권장. **패키지 매니저**: pnpm.
+- **스크립트**: `pnpm run dev` / `build` / `preview` / `lint` / `prepare`(Husky).
+
+### 브랜치 전략
+
+- `main`: 배포 가능. `develop`: 다음 버전 개발.
+- `feature/#[이슈번호]`: 기능 브랜치 (예: `feature/#1`).
+
+---
+
+## `#feature-requirements` — 기능 요구사항
+
+- 광고 **성과 지표 대시보드**.
+- **워크스페이스** 단위 광고·캠페인 관리.
+- 성과 데이터 **시각화·요약 리포트**.
+- **인증** 및 **권한** 기반 접근 제어.
+
+---
+
+## `#relevant-codes` — 경로·역할
+
+```
+src/
+├── api/          API 통신
+├── assets/       정적 리소스
+├── components/   UI 컴포넌트
+├── constants/    상수
+├── layout/       레이아웃
+├── pages/        라우트 단위 페이지
+├── routes/       라우터
+├── store/        Zustand
+├── types/        공통 타입
+└── utils/        유틸
+```
+
+- 스타일 토큰: `src/styles/tokens.css`, `utilities.css`, `base.css` · 엔트리: `src/index.css`.
+- 외부 차트 등 라이브러리 옵션 색은 `@theme`과 맞출 것(임의 hex 추가 지양).
+
+---
+
+## `#Current-file-instruction` — 현재 파일·작업 시
+
+- 연 파일·커서 위치를 기준으로 수정 범위를 좁힌다.
+- 색·디자인 제약은 **상단 강제 규칙 1–4**를 따른다.
+
+---
+
+## `#rules` — 보강·참고
+
+### 색상·스타일
+
+- **상단 강제 규칙 1–4**와 동일. 토큰 경로는 `#relevant-codes`.
+
+### 타입
+
+- 공통 타입(`Workspace`, `Campaign` 등): `src/types/`.
+- 컴포넌트 로컬 타입(props 등): 해당 파일 상단.
+- API 응답 타입: `src/types/api.ts` 또는 도메인별 파일.
+
+### 상태 관리
+
+- **상단 강제 규칙 5**와 동일.
+
+### 커밋
+
+- **상단 강제 규칙 6**과 동일.
+- 허용 `type`: `feat`, `fix`, `docs`, `style`, `refactor`, `test`, `chore`, `ci`, `setting`.
+
+### Git·PR
+
+- **상단 강제 규칙 7–8**과 동일.
+- PR 제목 예: `[Type/#이슈번호] 작업 요약`. 리뷰 라벨: P1 필수 · P2 권장 · P3 제안 · P4 Nit.

.gitignore

@@ -36,3 +36,4 @@ storybook-static
 scripts/strip-cursor-attribution.mjs
 scripts/strip-cursor-attribution 2.mjs
 scripts/optimize-landing-images.mjs
+

eslint/import.mjs

@@ -9,14 +9,8 @@ export default {
     "import-name": eslintName,
   },
   rules: {
-    // 패키지명을 camelCase화해서 사용하도록 강제하여 코드의 일관성을 유지합니다.
-    // 예외적으로 react와 clsx는 별도의 명명 규칙을 따릅니다.
-    "import-name/all-imports-name": [
-      "error",
-      {
-        clsx: "cx",
-      },
-    ],
+    // 패키지명을 camelCase화해서 사용하도록 강제합니다. (옵션 객체는 플러그인 스키마상 최소 1키 필요 — 별도 예외 없음)
+    "import-name/all-imports-name": "off",
     // 유사한 항목을 그룹으로 묶어서 import를 정렬합니다.
     "simple-import-sort/imports": [
       "error",

package.json

@@ -20,13 +20,11 @@
     "@tanstack/react-query": "^5.90.17",
     "apexcharts": "^5.7.0",
     "axios": "^1.13.4",
-    "clsx": "^2.1.1",
     "framer-motion": "^12.38.0",
     "react": "^19.2.0",
     "react-apexcharts": "^2.0.1",
     "react-dom": "^19.2.0",
     "react-hook-form": "^7.71.1",
-    "react-intersection-observer": "^10.0.3",
     "react-markdown": "^10.1.0",
     "react-remove-scroll": "^2.7.2",
     "react-router-dom": "^7.12.0",