jt-legacy — 기존 앱 규칙

---
trigger: always_on
description: 제니트리 디자인 시스템 v5.0 — 이미 운영 중인 기존 앱에 안전하게 입히는 규칙
---
 
# JT 디자인 시스템 v5.0 — 기존 앱 규칙 (jt-legacy)
 
> 이 파일은 **이미 운영 중인 앱** 프로젝트에만 넣는다. 신규 앱에는 `jt-core`를 넣는다.
 
이 프로젝트는 사람이 실제로 쓰고 있는 앱이다. **겉모습만 바꾸고 기능은 손대지 않는다.**
집으로 치면 구조는 그대로 두고 페인트와 조명만 바꾸는 리모델링이다.
 
## 1. 절대 금지
 
- 기능 · 화면 구조 · 데이터 처리 로직 변경
- 클래스명 · 컴포넌트 이름 변경
- 여러 화면을 한 번에 변경
- 전역 리셋(`* { }`)이나 목업의 `body { }` 전역 스타일을 복사해 오는 것 — **CSS 파일 두 개를 링크**하고 필요한 값만 참조한다
- 요청받지 않은 파일 수정
 
## 2. v5.0에서 달라진 점 (기존 앱에 직접 영향)
 
- **본문 기준이 16px이다** (v4.0은 14px이었다). 대부분의 기존 앱이 이미 16px 기준이므로 **크기 충돌이 사라졌다.**
- 14px 기준으로 만든 앱이라면 `body`에 전역 적용 시 **글자와 여백이 함께 커진다.** 이는 정상 동작이다. 전역으로 되돌리지 말고, 데이터 밀집 화면만 `[data-density="compact"]`(14px)를 **그 영역에만** 건다.
- 이름은 같고 값만 바뀐 토큰이 많다 → **찾아 바꾸기가 아니라 파일 교체 + 화면 확인**이 방법이다.
 
## 3. 진행 순서 (건너뛰지 않는다)
 
한 번에 한 단계, 한 화면씩. 각 단계가 끝날 때마다 **멈추고 보고**한다.
 
1. **조사만** — 하드코딩된 색·글자크기·간격을 파일명·줄번호와 함께 **목록으로만** 만든다.
   **이 단계에서는 아무것도 수정하지 않는다.**
2. **L1 색만** — 화면 **하나**에서 색만 교체. 간격·크기·레이아웃·구조는 건드리지 않는다.
3. **L2 글꼴** — `jt-tokens.css`를 링크한 것만으로 웹폰트는 이미 실려 있다. 적용만 한다.
4. **L3 컴포넌트** — 새로 만드는 화면부터 `.jt-*` 클래스로. 기존 화면은 하나씩.
5. **L4 간격·크기 (선택)** — 급하지 않으면 생략한다. 레이아웃이 조금이라도 틀어지면 즉시 중단.
 
## 4. 색 대응표
 
| 기존 용도 | JT 토큰 |
|---|---|
| 주버튼 배경 · 헤더 · 본문 글자 | `--color-primary` / `--color-text` |
| 링크 · 포커스 · 활성 탭 | `--color-accent` |
| 카드 · 패널 배경 | `--color-bg-container` |
| 페이지 배경 | `--color-bg-layout` |
| 테두리 | `--color-border` (**입력칸은 `--color-border-strong`**) |
| 구분선 | `--color-split` |
| 보조 글자 | `--color-text-secondary` |
| 성공 / 경고 / 오류 | `--color-success` / `--color-warning` / `--color-error` |
| 시험·규격 판정 | `--color-pass` / `-fail` / `-hold` / `-oos` |
 
**주버튼이 파란색이었다면 먹색(`--color-primary`)으로 바뀐다.** 이는 의도된 것이다(2톤 규칙).
 
## 5. 변수명 충돌
 
기존 앱에 `--color-text`·`--space-4` 같은 이름이 이미 있으면 값이 덮어써진다.
이 경우 **범위를 좁혀** 적용하고, 한 앱 안에서 방식을 섞지 않는다.
 
```css
.jt-scope{
  font-family: var(--font-base);
  font-size: var(--fs-base);
  color: var(--color-text);
}
```
 
`.jt-scope` 안쪽 화면 하나가 안정적으로 도는 것을 확인한 뒤 다음 화면으로 넓힌다.
 
## 6. Tailwind를 쓰는 앱이라면
 
**버전을 먼저 확인한다.**
 
- **v4**: `tailwind.config.js`가 **에러 없이 조용히 무시된다.** `jt-tailwind-v4.css`(`@theme inline`)를 쓴다.
- **v3**: `tailwind.config.js` 브리지를 쓴다.
- `content` / `@source` 경로가 빠지면 **개발서버는 멀쩡하고 프로덕션 빌드에서만** 스타일이 사라진다. 배포 전 프로덕션 빌드로 확인한다.
 
## 7. 작업 후 보고 형식
 
수정한 내용을 반드시 **표로** 보고한다.
 
| 파일 | 줄 | 이전 값 | 바꾼 토큰 |
|---|---|---|---|
| `Header.jsx` | 12 | `#3B82F6` | `var(--color-accent)` |
 
## 8. 멈춤 신호 — 진행하지 말고 즉시 질문
 
- 레이아웃이 조금이라도 틀어졌을 때
- 기존 색과 딱 맞는 토큰이 없을 때 — **비슷한 색을 임의로 고르지 않는다**
- 기능이 바뀔 것 같은 수정이 필요할 때
- 이 앱에만 있는 특별한 색(차트 전용색 등)을 만났을 때 — 유지할지 물어본다
- 구조·클래스명을 바꿔야 할 것 같을 때