공통 화면·디자인 시스템 연결

제품 개발 기록으로 · 디자인 시스템 · FE 성능

공통 UI를 사용하는 기능과 강제 규칙의 정본을 연결합니다. 개별 기능의 버튼·저장 사용법은 해당 기능 문서를 따릅니다. 디자인 시스템의 전체 규칙을 여기 복제하지 않습니다.

사용 상황별 정본

화면에서 하는 일	규칙·실제 예시	함께 확인할 기능
메뉴·페이지·내부 앱 이동	앱 구성, LNB, 임베드	조직·권한, 현재 메뉴 구조, 뒤로·새로고침·직접 진입
목록 정렬·페이지 변경	표, 페이지 이동	직원·재고·신고·공지, 필터와 선택 유지 여부
날짜별 근무 편집	근무표	스케줄러. 데이터 표와 별도 패턴
확인·입력·상세 창 열기	모달	각 기능의 저장·취소·Escape·배경 클릭·스크롤 복원
버튼 누르기·상태 읽기	버튼, 라벨	파괴적 확인도 제목·레이아웃은 동일, 확인 버튼 톤만 변화
오류·처리 중 이해	안내, 로딩, 툴팁	빈 데이터와 로딩 구별, 처리 완료·저장 결과 별도 확인
소식·신고·대화·AI 열기	알림 흐름, 신고, AI	알림·신고·메신저·AI 기능 문서, 도킹·FAB 겹침
작은 화면에서 사용	반응형, 접근성	md 768·xl 1280에서 메뉴·도킹 차이, 키보드·터치 경로
시각 속성 변경	서체, 간격, 색, 변경 이력	공유 토큰 변경이 여러 앱에 동시에 반영되는지

유지보수 순서

1. 변경할 기능 문서의 조작·권한·관련 앱을 먼저 읽습니다. 예를 들어 신고 위젯의 닫기는 아래쪽 팝업을 같이 닫지 않아야 하며 전송 중에는 제한됩니다.
2. 위 표에서 대상 디자인 시스템 페이지의 「규칙 (강제)」를 읽고 정본을 수정합니다. 라우터 .claude/rules/frontend/design-system-docs.md에는 정본 경로만 연결합니다.
3. 공유 CSS·컴포넌트와 앱별 중복/덮어쓰기 경로를 함께 확인합니다. packages/static/styles/design-system.css를 바꿨다는 사실만으로 모든 앱의 표시가 바뀌었다고 판단하지 않습니다.
4. 해당 기능 문서의 실제 사용 절차대로 데스크톱·모바일·임베드 중 영향받는 경로를 확인합니다. 내용이 긴 창, 중첩 창, 키보드 닫기, 스크롤 끝, 처리 중·실패 상태를 포함합니다.
5. 규칙 정본·현재 기능 설명·과거 변경 설명의 역할을 구분해 갱신합니다. 새로운 사용 단계가 없으면 외형 변화·촬영 영향만 정확히 적습니다.

강제 지침 진입점은 CLAUDE.md/AGENTS.md, 상세 소유 경로는 .claude/rules/frontend/design-system-architecture.md입니다. 디자인 시스템의 데모는 규칙을 설명하는 예제이며 모든 앱의 실제 동작 검증을 의미하지 않습니다.

여러 디자인 시스템 문서와 실제 기능 사용법 사이의 연결을 추가했습니다. 개별 56개 디자인 시스템 페이지를 모두 최신 화면으로 재촬영한 작업은 아닙니다. 파일별 목록은 기존 문서 원장에 있습니다.

좁은 목록의 필터와 검색

관리자 화면 구조 안내에 좁은 창에서 필터를 옆으로 넘기기, 돋보기로 검색창 열기·취소, 아이콘 툴팁, 접힌 목록 열기, 표 가로 스크롤을 설명합니다. PR #750의 공용 필터 줄과 각 앱 진입점에 근거합니다. 관리자·총무·드라이브·팀 관리자·급여 시트의 실제 모바일 폭과 iframe별 촬영은 남아 있습니다.

검색어 즐겨찾기와 실제 검색 구분

항목	안내
사용자	검색 기록을 지원하는 목록 사용자
시작 위치	목록의 검색창 또는 돋보기 > 검색 기록
관련 화면	직원·팀 등 해당 목록의 검색 결과

검색한 단어 옆 빈 별을 누르면 자주 찾는 검색어 위쪽에 고정하고, 채워진 별을 다시 누르면 해제합니다. 별은 검색을 실행하지 않습니다. 검색어 글자를 눌러야 해당 값으로 목록을 찾습니다. X는 해당 기록 삭제이므로 별 해제와 구분합니다. 검색창을 비우면 검색 조건을 풀며, 고정한 기록까지 지우는 동작은 아닙니다. 기록은 사용자와 화면별로 관리됩니다. 변경 후 다시 열어 고정 상태를 확인합니다. 다른 기기에도 반영됐는지는 그 기기에서 다시 확인합니다.

PR #1199를 대조하고 예제 직원 검색·고정·글자 선택 검색·고정 해제를 촬영했습니다.