기존 앱 가이드

# 제니트리(Janytree) 전역 규칙 — Antigravity Global Rules

## 0. 적용 범위
제니트리 사내 웹/앱 프로젝트 전체에 적용한다.
프로젝트 폴더에 `.agents/rules/`가 있으면 그 규칙이 더 구체적이며 우선한다.

## 1. 대화 방식
- 한국어로 답한다. 전문 용어를 쓸 때는 한 줄 쉬운 설명을 붙인다.
- 요청자는 **코딩 초보자**다. 바꾼 파일 경로와 "무엇을 왜 바꿨는지"를 항상 함께 알려준다.
- 화면·기능은 **한 번에 하나씩** 만든다. 하나가 끝나면 멈추고 확인을 받은 뒤 다음으로 넘어간다.
- 확신이 없으면 추측해서 진행하지 말고 **먼저 질문한다.**

## 2. 디자인 — 절대 규칙
1. 색·크기·간격 값을 코드에 직접 쓰지 않는다. `#hex`·`rgb()`·임의 px 금지. 반드시 CSS 변수 `var(--...)`로 참조한다.
2. `--color-primary`(먹색 #1F2328)는 주버튼·헤더·본문에, `--color-accent`(파랑)는 링크·포커스·활성 상태에만 쓴다. **주버튼을 파랑으로 만들지 않는다.**
3. 경고(warning)는 **노란 배경 + 어두운 글자**로 표시한다. 노란 배경에 흰 글자 금지.
4. 본문 글자 **12px 미만 금지**(캡션은 11px까지 허용).
5. 간격은 **4px의 배수**만 쓴다. 13px·17px 같은 값 금지.
6. 버튼·입력창·셀렉트 높이는 `--control-height`로 통일한다.
7. 아이콘은 **Google Material Symbols Rounded**만 쓴다. 이모지·타 아이콘 라이브러리·자체 제작 SVG 금지.
8. 로고는 `brand/` 폴더의 원본 파일을 그대로 쓴다. 색·비율 변경, 그림자 추가 금지. **헤더 로고 높이는 28px.**
9. 토큰에 없는 값이 필요하면 임의로 만들지 말고 **먼저 질문한다.**
10. 모바일·태블릿·데스크탑 모든 폭에서 **가로 스크롤이 없어야 한다.**

## 3. 토큰 파일
- `jt-tokens.css`는 **읽기 전용**이다. 편집·삭제·값 변경 금지.
- 디자인 시스템이 개정되면 이 파일을 **통째로 교체**한다. 파일 안 `--jt-ds-version` 값이 현재 적용 버전이다.
- 값이 문서와 다르면 **`jt-tokens.css`가 이긴다.**

## 4. 코드 안전
- 이미 동작하는 기능·화면 구조·데이터 처리 로직을 요청 없이 바꾸지 않는다.
- "더 예뻐 보인다"는 이유로 레이아웃을 바꾸지 않는다.
- 파일 삭제, 여러 파일 일괄 변경, 새 라이브러리 추가 전에는 먼저 알리고 확인받는다.
- API 키·비밀번호·접속 토큰을 코드에 직접 쓰지 않는다. 환경변수(`.env`)를 쓰고 `.env`는 `.gitignore`에 넣는다.
- Supabase를 쓰는 경우 새로 만드는 테이블에는 **RLS(행 단위 접근 제어)를 반드시 켠다.**

## 5. 작업 마무리 보고
작업이 끝나면 항상 3줄로 보고한다.
1. 바꾼 파일 목록
2. 무엇을 왜 바꿨는지
3. 내가 눈으로 확인하는 방법

---
trigger: always_on
description: 제니트리 디자인 시스템 v4.0 — 이 프로젝트의 화면 제작 규칙
---

# JT 디자인 시스템 — 이 프로젝트 적용 규칙

## 1. 앱 정보 (프로젝트 시작 시 채울 것)

- 앱 이름: [예: JT_디자인 시스템]
- 분야: [교육]
- 기술 스택: [Next.js]
- 디자인 시스템 버전: **v4.0**
- 채택 레벨: [L1 색만 / **L2 색+폰트+컴포넌트(권장)** / L3 +간격·크기]

## 2. 토큰 원본

이 프로젝트의 디자인 값 정본은 **@jt-tokens.css 하나**다.

- 모든 색·글자·간격은 이 파일의 CSS 변수로만 참조한다.
- **이 파일은 편집하지 않는다.** 값을 바꿔야 하면 디렉터에게 요청한다.
- 값의 배경 설명이 필요하면 `JT_디자인시스템_v4.0.md`를 참조하되, **값은 `jt-tokens.css`가 우선**한다.

## 3. 화면을 만들 때

1. **Alias 변수만 쓴다** — `--color-text`, `--color-bg-container`, `--color-border` 등. 팔레트 원시값(`--blue-500`, `--gray-300`)을 컴포넌트에서 직접 참조하지 않는다. 그래야 다크모드·밀도 전환이 자동으로 된다.
2. 컴포넌트 생김새는 디자인시스템 §12를 따른다. 다만 **화면 구조(무엇을 넣을지)는 강제하지 않는다** — 앱 사정에 맞게 구성한다.
3. 표의 숫자열은 우측 정렬 + `--font-num` + `font-variant-numeric: tabular-nums`.
4. 포커스 링은 `:focus-visible`에 `--color-focus`로 반드시 남긴다(키보드 접근성).
5. 다크모드를 지원하는 앱이면 `[data-theme="dark"]` 상태에서도 확인한다.
6. 표는 `overflow-x:auto` 컨테이너로 감싼다. 터치 대상은 최소 44×44px.

## 4. 화면 완성 시 자가 점검 (매번 실행)

아래를 스스로 점검하고, 위반이 있으면 고친 뒤 **무엇을 고쳤는지 보고**한다.

- [ ] `#hex`·`rgb()` 직접 사용 0건 (`jt-tokens.css` 제외)
- [ ] 주버튼이 먹색 `--color-primary`인가 (파랑 아님)
- [ ] `--color-accent`(파랑)가 링크·포커스·활성에만 쓰였는가
- [ ] warning이 노란 배경 + 어두운 글자인가 (흰 글자 아님)
- [ ] 12px 미만 글자 없음 (캡션 11px 예외)
- [ ] 간격 값이 모두 4px 배수
- [ ] 모바일 폭(≤639px)에서 가로 스크롤·글자 잘림 없음
- [ ] 아이콘이 모두 Material Symbols Rounded
- [ ] 토큰에 없는 값을 임의로 만든 곳 없음

## 5. 멈춤 신호

다음 상황에서는 진행하지 말고 **즉시 멈추고 질문**한다.

- 필요한 색·크기가 토큰에 없을 때
- 토큰 파일을 수정해야 할 것 같을 때
- 요청받지 않은 파일을 고쳐야 할 것 같을 때

---
trigger: always_on
description: 이미 운영 중인 기존 앱에 디자인 시스템을 안전하게 입히는 규칙
---

# 기존 앱 — 안전 마이그레이션 규칙

> 이 파일은 **이미 운영 중인 앱** 프로젝트에만 넣는다. 신규 앱 프로젝트에는 넣지 않는다.

이 프로젝트는 사람이 실제로 쓰고 있는 앱이다. **겉모습만 바꾸고 기능은 손대지 않는다.**
집으로 치면 구조는 그대로 두고 페인트와 조명만 바꾸는 리모델링이다.

## 1. 절대 금지

- 기능·화면 구조·데이터 처리 로직 변경
- 여러 화면을 한 번에 변경
- 전역 리셋(`* { }`) 이나 `body { }` 전역 스타일을 디자인 시스템에서 복사해 오는 것 — **토큰 변수 선언부만** 가져온다
- `body`에 `font-size`를 전역 지정하는 것 — 이 시스템은 14px 기준이고 기존 앱은 대개 16px 기준이라, 전역 지정하면 **모든 글자와 여백이 한꺼번에 줄어 화면이 뒤틀린다**

## 2. 진행 순서 (건너뛰지 않는다)

1. **조사만** — 하드코딩된 색·글자크기·간격을 파일명과 함께 목록으로만 만든다. **이 단계에서는 아무것도 수정하지 않는다.**
2. **색·글꼴만 교체** — 간격·크기·레이아웃은 건드리지 않는다. 화면 하나가 끝날 때마다 **멈추고 보고**한다.
3. **로고 교체** — 기존 로고 파일은 삭제하지 않고 그대로 둔다(되돌리기 위해).
4. **(선택) 간격·크기** — 급하지 않으면 생략한다. 레이아웃이 조금이라도 틀어지면 즉시 중단.

## 3. 변수명 충돌 방지

기존 앱에 `--color-text`·`--space-4` 같은 이름이 이미 있으면 값이 덮어써진다.
이 경우 **`--jt-` 접두사 버전**(`--jt-color-text`)을 쓴다. 한 앱 안에서 접두사 있는 것과 없는 것을 **섞지 않는다.**

## 4. 범위 좁혀 적용하기

전역 적용이 위험하면 `.jt-scope` 클래스 안쪽에만 적용하고, 화면 하나가 안정적으로 도는 것을 확인한 뒤 다음 화면으로 넓힌다.

```css
.jt-scope{
  font-family: var(--font-base);
  font-size: var(--fs-base);
  color: var(--color-text);
}
```

## 5. 멈춤 신호

다음 상황에서는 **즉시 멈추고 질문**한다.

- 레이아웃이 조금이라도 틀어졌을 때
- 기존 색과 딱 맞는 토큰이 없을 때 (비슷한 색을 임의로 고르지 않는다)
- 기능이 바뀔 것 같은 수정이 필요할 때
- 이 앱에만 있는 특별한 색(차트 전용색 등)을 만났을 때 — 유지할지 물어본다

docs/jt-tokens.css를 프로젝트에 추가하고 전역 스타일에서 import만 해줘.
아직 어떤 화면도 수정하지 마.

그다음, 이 프로젝트에 직접 박혀 있는(하드코딩된) 색상·글자크기·간격·라운드·그림자를
전부 찾아서 파일명과 사용 횟수를 표로 정리해줘. 수정은 절대 하지 말고 목록만 보여줘.

또한 이 프로젝트가 이미 쓰고 있는 CSS 변수 이름 목록도 함께 보여줘.
(--color-text, --space-4 같은 이름이 겹치면 화면이 깨질 수 있어서 먼저 확인이 필요해)

1단계에서 찾은 하드코딩된 색상을 jt-tokens.css의 변수로 바꿔줘.
이번 단계에서는 색상만 바꾸고, 글꼴·간격·크기·레이아웃은 절대 건드리지 마.

지킬 것:
- body나 * 같은 전역 스타일은 수정하지 마. 기존 앱의 기준 글자 크기를 바꾸면 안 돼.
- 기능, 화면 구조, 데이터 처리 로직은 절대 바꾸지 마.
- 화면(또는 컴포넌트) 하나씩 처리해줘. 하나 끝나면 무엇을 바꿨는지 알려주고 멈춰.
- 기존 색과 딱 맞는 토큰이 없으면 비슷한 색을 임의로 고르지 말고 나한테 먼저 물어봐.
- 레이아웃이 조금이라도 틀어지면 즉시 멈추고 알려줘.

첫 번째 화면부터 시작해줘.

방금 작업한 화면을 아래 기준으로 점검하고, 문제가 있으면 고친 뒤 무엇을 고쳤는지 알려줘.

1. 기능·화면 구조·데이터 처리 로직이 바뀐 곳이 있는지 확인해줘. 있다면 원래대로 되돌려줘.
2. body나 * 같은 전역 스타일을 건드린 곳이 있는지 확인해줘. 있다면 되돌려줘.
3. hex 색상(#으로 시작하는 값)이 아직 직접 쓰인 곳이 있으면 var(--color-*)로 바꿔줘.
4. --color-primary(먹색)는 주버튼·헤더에, --color-accent(파랑)는 링크·클릭 요소에만 쓰였는지 확인해줘.
5. 경고(warning) 표시가 노란 배경 + 어두운 글자 조합인지 확인해줘.
6. 휴대폰 폭에서 가로 스크롤이나 글자 잘림이 생기는지 확인해줘.