트랙 A — 새 앱을 처음부터 만들기

[대괄호] 부분은 지우고 본인 내용을 넣으세요.

내가 만들 앱은 [예: 원료 입고 검사 결과를 기록하고 판정하는 앱]이야.
주 사용자는 [예: 공장 품질팀 3명]이고, 주로 [예: PC, 가끔 휴대폰]으로 봐.

이 앱에 맞는 조판(Productive/Expressive), 컨테이너 폭(720/1200/1440),
모바일 하단탭 필요 여부를 추천해주고, 왜 그런지 한 줄씩 이유를 알려줘.
아직 코드는 만들지 마.

[대괄호] 부분은 지우고 본인 내용을 넣으세요.

이제 앱의 기본 뼈대를 만들어 줘.

- 앱 이름 : [앱 이름]
- 하는 일 : [한 줄 설명]
- 조판 : [Productive / Expressive]
- 본문 폭 : [720 / 1200 / 1440]
- 모바일 : [하단 탭바 있음 / PC만]
- 왼쪽 메뉴에 들어갈 것 : [메뉴1], [메뉴2], [메뉴3]

지킬 것:
- 화면 골격은 처음부터 그리지 말고
  https://ds.janytree.app/develop/patterns 의 패턴과
  https://ds.janytree.app/develop/templates 의 템플릿에서 골라서 써.
  어떤 것을 골랐는지 이유와 함께 알려줘.
- 클래스는 .jt-shell / .jt-sidebar / .jt-topbar / .jt-main 을 쓴다.
- 색·간격에 직접 값을 쓰지 않는다. 토큰 이름만 쓴다.
- 지금은 뼈대만. 개별 화면과 기능은 다음 단계에서 한다.

끝나면 (1) 만든 파일 목록 (2) 고른 패턴 이름과 이유를 알려줘.

[대괄호] 부분은 지우고 본인 내용을 넣으세요.

스티치 MCP에서 공통 뼈대(상단바, 왼쪽 메뉴, 본문 영역)를 읽어와서 구현해 줘.

중요 — 스티치가 준 코드를 그대로 붙이지 말고 반드시 아래를 정리한 뒤 넣어 줘.
- 임의 색(#305CDE 같은 hex)은 var(--color-*) 토큰으로 바꾼다.
- 임의 크기(p-[13px], text-[15px] 같은 대괄호 표기)는 토큰으로 바꾼다.
- Tailwind 기본 색(bg-blue-500, text-gray-600 등)은 뜻이 같은 우리 이름으로 바꾼다.
- 어느 이름으로 바꿔야 할지 애매하면 임의로 정하지 말고 먼저 나에게 물어봐.

끝나면 바꾼 것을 표로 보여 줘. (바꾸기 전 → 바꾼 후 → 이유)

[대괄호] 부분은 지우고 본인 내용을 넣으세요.

"[화면 이름]" 화면을 만들어 줘.

[이 화면이 하는 일]
[한두 줄 설명]

[화면에 들어가는 것]
1. [항목] — [예: 표, 검색창, 등록 버튼]
2. [항목] — [입력 방식]

지킬 것:
- 버튼·입력칸·표·배지는 새로 만들지 말고 .jt-* 기존 컴포넌트를 가져다 쓴다.
  목록: https://ds.janytree.app/components
- 색·크기·간격에 직접 값을 쓰지 않는다. 토큰만 쓴다.
- 빈 상태(데이터가 없을 때)와 로딩 상태도 함께 만든다.
- 지금은 화면(보이는 부분)만. 데이터 연결과 기능은 다음 단계.
  가짜 데이터를 5줄 정도 넣어서 화면이 어떻게 보이는지 볼 수 있게 해줘.

끝나면 어떤 .jt-* 컴포넌트를 썼는지 목록으로 알려줘.

[대괄호] 부분은 지우고 본인 내용을 넣으세요.

"[화면 이름]" 화면에 기능을 붙여 줘.

[이 화면에서 되어야 하는 일]
- [예: 목록을 데이터베이스에서 불러온다]
- [예: 검색창에 글자를 넣으면 이름으로 걸러진다]
- [예: 추가 버튼을 누르면 입력창이 뜨고, 저장하면 목록에 반영된다]
- [예: 삭제는 확인창을 거친 뒤에만 실행된다]

[주의할 것]
- 화면 모양은 바꾸지 말고, 기능만 붙여줘.
- 확인창은 브라우저 기본 팝업(alert, confirm) 대신 앱 안의 모달로 만들어줘.
- 저장에 실패했을 때 사용자에게 보여줄 문구도 만들어줘.
  문구 원칙: https://ds.janytree.app/develop/ux-writing
- 무엇이 잘못됐는지 나에게도 알려줘.

지금 화면을 아래 4가지로 점검하고, 문제가 있으면 어디인지 알려줘. 아직 고치지는 마.
1. 다크 모드 — document.documentElement.dataset.theme='dark' 로 바꿨을 때
   글자가 안 보이는 곳이 있는지
2. 모바일 — 폭 390px 에서 가로 스크롤이 생기는 곳이 있는지
3. 글자 팽창 — 버튼 글자를 3배 길게 넣었을 때 깨지는 곳이 있는지 (번역 대비)
4. 판정·상태를 색만으로 표시한 곳이 있는지 (글자가 함께 있어야 함)

배포 전 점검을 해줘.
https://ds.janytree.app/develop/checklist 의 16항목을 기준으로
프로젝트 전체를 검사하고, 파일 이름과 줄 번호를 표로 보여줘.

특히 이 3개는 실제로 사고가 났던 것이니 반드시 확인해줘.
1. --color-text-tertiary 를 글자 색으로 쓴 곳 (대비 부족)
2. 아이콘 폰트를 display=block 으로 로드했는지
   (swap 이면 아이콘 대신 settings 같은 영어 원문이 보입니다)
3. 판정·상태를 색만으로 전달한 곳

아직 고치지 말고, 무엇부터 고칠지는 내가 정할게.

[대괄호] 부분은 지우고 본인 내용을 넣으세요.

프로젝트 전체를 점검해 줘.

1. 색을 직접 박아 넣은 곳을 전부 찾아줘 (#305CDE 같은 hex, rgb())
2. 크기를 직접 박아 넣은 곳을 찾아줘 (p-[13px], text-[15px] 같은 대괄호 표기)
3. Tailwind 기본 색을 쓴 곳을 찾아줘 (bg-blue-*, text-gray-*, bg-slate-* 등)
4. style={{ }} 로 색이나 간격을 직접 지정한 곳을 찾아줘
5. .jt-* 공용 부품을 안 쓰고 따로 만든 버튼·입력칸이 있는지 찾아줘
6. jt-tokens.css 나 jt-utilities.css 를 수정한 흔적이 있는지 확인해줘

파일 이름과 줄 번호를 표로 보여 주고, 아직 고치지는 마.
무엇부터 고칠지는 내가 정할게.