시안 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) ADM_ITM_101(5227:3549)·ADM_ITM_102_p(5227:4629).
로직(백엔드 연동·Server Action·검증)은 이미 있었고 화면만 Tailwind 제거 이후 무스타일로
남아 있던 components/ui 위에 있었다 — 관리자·학생 화면과 같이 @fox로 옮겼다.

목록
  - FoxListContainer + 유형 탭(개별/셋트). 셋트는 별도 화면이 없어 탭이 조회 조건(itemType)만
    바꾼다 — 검색·페이지와 같은 층위라 URL이 소유하고, 탭을 바꾸면 검색어를 지운다(유형이
    다르면 아이템 집합 자체가 달라 이전 검색어는 "결과 없음"만 만든다).
  - href 대신 router.replace를 쓴다. 같은 화면 안의 전환이라 role="tablist" 의미가 맞고
    (FoxTabItem은 href를 주면 탭 역할을 뗀다), 평범한 는 App Router에서 문서를 다시 받는다.
  - 10개 열·사용여부는 FoxStatusIndicator(점+사용/미사용)·관리는 테두리 있는 FoxIconButton.

등록·수정 팝업
  - FoxModal(sm=400) + 폼 안의 유형 탭. FoxTab·FoxSelect는 폼 요소가 아니라 값은 hidden으로
    실어 보낸다.
  - 썸네일은 FoxFileUpload(image) — 네이티브 입력에 name을 주면 고른 파일이 폼 제출에 그대로
    실려 파일을 따로 들고 있지 않는다.

@fox (전부 추가·수정이고 기존 화면의 모양은 그대로다)
  - FoxListContainer.tabs — 머리말과 목록 사이 슬롯(시안이 탭을 그 자리에 둔다).
  - FoxInput.suffix — 입력 오른쪽 글자(시안 정렬순서의 "/ 총 39개").
  - FoxInput.requirement / FoxFileUpload.requirement — 라벨의 필수 표시. FoxSelect에만 있던
    prop을 같은 규약으로 맞췄다.
  - FoxFileUpload.name — 네이티브 파일 입력의 name 통과.
  - FoxTab(line) 밑줄을 border → inset 그림자로. Figma는 stroke를 상자 안쪽에 그려 시안의
    tab-item이 고름 여부와 무관하게 60px인데, border는 상자를 키워 고른 탭만 64px이 되고
    옆 탭과 3px 어긋났다.

검증 — 시안 대조(PC 1600): 열 폭 80/236/160/236/160/160/120/80/160/160 일치, 탭 60px 일치,
썸네일 80×80·1px #e6e8ea·radius 4, 사용여부 #267337·점 6px, 관리 버튼 28×28·1px #b1b8be·
아이콘 20, 팝업 400px·버튼 80×40, 정렬순서 suffix "/ 총 39개".

Co-Authored-By: Claude Opus 5 

Figma input(135:621)의 2타입 × 3크기 × 6상태를 옮긴다. 네이티브 을
감싸므로 시안에 없는 password·email·number 등 모든 타입이 그대로 통한다.

상태는 두 갈래다. 기본은 브라우저가 판단한다 — 포커스는 :focus-within,
비활성·읽기전용은 네이티브 속성, 오류는 aria-invalid. 시안의 completed는
default와 글자색만 다른데 그건 플레이스홀더와 입력값의 네이티브 차이라 규칙이
필요 없다. 모양을 못박아야 하면 루트에 data-state를 준다.

date는 브라우저가 그리는 달력 아이콘과 피커를 그대로 쓴다(사용자 승인).
지우기 버튼은 포커스 중이고 값이 있을 때만 뜨고 누르면 값을 비운다 —
비제어 입력은 DOM을 직접 비우고 제어 입력은 onChange()로 알린다.

헬퍼 메시지 색은 상태를 따라간다(기본 회색 · 포커스 파랑 · 완료 초록 ·
오류 빨강). 아이콘은 @fox에 아이콘 세트가 없어 슬롯으로 두었다.

Co-Authored-By: Claude Opus 5