release: Quire 디자인 시스템 Phase A~G · 모바일 코드블럭 넘침 수정 · 환영 화면 제거 by sabit1997 · Pull Request #63 · Qode-4/Qode-Fe

sabit1997 · 2026-09-28T14:05:48Z

요약

develop → main 배포. 지난 배포(#51) 이후 develop 에 머지된 PR 11개(#52~#62)를 포함해요.
디자인 시스템 Quire 도입(Phase A~G)이 중심이고, 모바일 가로 넘침 수정과 로그인 환영 화면 제거가 같이 들어가요.

왜

화면마다 제각각이던 색·글자 크기·모서리·문구·확인/오류/로딩 처리를 토큰과 패턴으로 통일하고, 그 규칙이 yarn tokens:check 와 PR CI 로 자동 검사되게 하려고요.
사용자 체감: 작은 글자 최소 10px, 오렌지 글자·선 대비 WCAG AA 충족, 브라우저 confirm 창 대신 앱 모달, 해요체 문구, 모바일 가로 넘침 해소, 로그인 직후 번쩍이던 환영 화면 제거.

포함된 PR

fix: wide 코드블럭이 모바일에서 가로 스크롤 만드는 문제 (모달 + 채팅 뷰) #52 fix: wide 코드블럭이 모바일에서 가로 스크롤 만드는 문제 (모달 + 채팅 뷰)
refactor: Quire 디자인 시스템 Phase A·B — 정체성 문서와 토큰 재편 #53 refactor: Quire Phase A·B — 정체성 문서(SYSTEM.md), 토큰 재편(색 raw/semantic 2층 · 타이포 역할 7단계 · radius 역할 이름), yarn tokens:check 도입
refactor: Quire Phase C 1차 — SourceList 추출과 cn() 도입 #54 refactor: Quire Phase C 1차 — SourceList 추출, cn() 도입
refactor: Quire Phase C 2차 — 컴포넌트 사용 규칙과 정비 #55 refactor: Quire Phase C 2차 — ui 컴포넌트 18개 사용 규칙 JSDoc, IconButton·TextField·OverlayModal size 통일, ProjectSwitcher 키보드 동작
refactor: Quire Phase C 3차 — 만든 컴포넌트를 앱에 흡수 #56 refactor: Quire Phase C 3차 — Avatar 신규, 입력창 8개·아이콘 버튼 6개·아바타 10곳을 공용 컴포넌트로 흡수
refactor: Quire Phase D — 확인·에러·피드백·빈 상태·로딩 패턴 #57 refactor: Quire Phase D — 확인·에러·피드백·빈 상태·로딩 패턴 (ConfirmDialog·Spinner·StateMessage 신규, window.confirm 제거)
feat: Quire Phase E — AI 컨텍스트 (컴포넌트 registry · 검수 체크리스트 · 패턴 규칙 자동 검사) #58 feat: Quire Phase E — 컴포넌트 registry(*.meta.ts → docs/registry.md), AI 검수 체크리스트, 패턴 규칙 자동 검사
refactor: Quire Phase F — 모션 토큰 · 해요체 문구 통일 · 문구 카탈로그 #59 refactor: Quire Phase F — 모션 토큰, 화면 문구 88곳 해요체 통일, 문구 카탈로그(docs/copy.md)
feat: Quire Phase G — PR CI · Storybook a11y · 운영 문서 #60 feat: Quire Phase G — PR CI, Storybook a11y addon(위반 16건 → 0), 운영 문서·PR/이슈 템플릿
docs: Quire 로고 확정 · 문구 검사가 놓친 ㅂ니다 문구 보강 #61 docs: Quire 로고 확정, 문구 검사 ㅂ니다 규칙 보강
fix: 로그인 직후 뜨던 환영 화면 제거 #62 fix: 로그인 직후 뜨던 환영 화면 제거

규모

159 files · +5,973 / −2,070

배포 후 (관리자)

main 브랜치 보호에서 CI 통과 필수를 켜야 머지가 실제로 막혀요 (feat: Quire Phase G — PR CI · Storybook a11y · 운영 문서 #60 에서 develop 에 대해 안내한 것과 동일)

화면이 바뀌는 곳

전/후 스크린샷은 각 PR 검증 단계에서 확인했고, 이 PR 에는 따로 첨부하지 않았어요. 바뀌는 곳은 아래와 같아요.

전체 글자·색 — 작은 글자 약 190곳이 커짐(최소 10px), 오렌지 글자 #b54700 · 선 #e05e00 로 진해짐, 대형 제목 2곳 26px (refactor: Quire 디자인 시스템 Phase A·B — 정체성 문서와 토큰 재편 #53)
전체 문구 — 안내·오류·빈 상태 문구 어미가 해요체로, ... → …, 팀채팅 → 팀 채팅 · 레포지토리 → 저장소 · 양도 → 방장 넘기기 (refactor: Quire Phase F — 모션 토큰 · 해요체 문구 통일 · 문구 카탈로그 #59, docs: Quire 로고 확정 · 문구 검사가 놓친 ㅂ니다 문구 보강 #61)
확인 창 — 브라우저 기본 confirm → ConfirmDialog. 팀 공유 카드 공유 취소, 팀 채팅 멤버 내보내기에 확인 단계 추가 (refactor: Quire Phase D — 확인·에러·피드백·빈 상태·로딩 패턴 #57)
오류·성공 안내 — 모달 안 작업 실패는 토스트 대신 모달 안 InlineAlert. 결과가 화면에 보이는 동작은 성공 토스트 제거, 보던 채팅·프로젝트가 사라질 때만 토스트 (refactor: Quire Phase D — 확인·에러·피드백·빈 상태·로딩 패턴 #57)
로딩·빈 상태 — 목록 로딩은 스피너 + "~를 불러오는 중…", 빈 채팅 목록에 다음 행동 한 줄, 버튼은 라벨 바꿔치기 대신 isLoading 스피너 (refactor: Quire Phase D — 확인·에러·피드백·빈 상태·로딩 패턴 #57)
참조 소스 목록 4곳(메인 채팅·원본 대화 모달·팀 공유 카드·공유 미리보기) — 같은 파일을 한 줄로 묶고 줄 범위를 오른쪽에 (refactor: Quire Phase C 1차 — SourceList 추출과 cn() 도입 #54)
모달 — 폭을 sm 440 · md 520 · lg 640 · xl 720 으로 통일(±40px 이내), 입력 라벨이 조금 진해지고 오류 시 연한 빨강 배경, 제목이 길 때 닫기 버튼이 접히던 문제 수정 (refactor: Quire Phase C 2차 — 컴포넌트 사용 규칙과 정비 #55, refactor: Quire Phase C 3차 — 만든 컴포넌트를 앱에 흡수 #56, refactor: Quire Phase D — 확인·에러·피드백·빈 상태·로딩 패턴 #57)
채팅 입력창 — 동기화 진행률을 placeholder 대신 입력창 위 상태 줄로 (refactor: Quire Phase C 2차 — 컴포넌트 사용 규칙과 정비 #55)
프로젝트 없는 빈 화면 — 눌러도 동작 없던 추천 질문 → 예시 목록, '새 프로젝트 만들기' 가 주 버튼 (refactor: Quire Phase C 2차 — 컴포넌트 사용 규칙과 정비 #55)
헤더·모바일·프로필 — 36px 아이콘 버튼 안 아이콘 16 → 20px, 팀 채팅 헤더 ⋯ 32 → 36px (refactor: Quire Phase C 2차 — 컴포넌트 사용 규칙과 정비 #55, refactor: Quire Phase C 3차 — 만든 컴포넌트를 앱에 흡수 #56)
모션 — 토스트·모바일 드로어 200ms, '동작 줄이기' 설정 시 LoadingDots 고정 (refactor: Quire Phase F — 모션 토큰 · 해요체 문구 통일 · 문구 카탈로그 #59)
접근성 — CodeBlock·SourceList 스크롤 영역에 Tab 포커스 링, 새 프로젝트 모달의 잠긴 3단계 inert (feat: Quire Phase G — PR CI · Storybook a11y · 운영 문서 #60)
모바일 — wide 코드블럭이 모달·채팅 뷰를 가로로 밀지 않음 (fix: wide 코드블럭이 모바일에서 가로 스크롤 만드는 문제 (모달 + 채팅 뷰) #52)
로그인 — 직후 "어서오세요, ○○님!" 화면 없이 바로 AppShell 진입 (fix: 로그인 직후 뜨던 환영 화면 제거 #62)

UI 를 바꿨다면 (`docs/ai-review-checklist.md`)

docs/registry.md 의 기존 컴포넌트를 썼다 (새로 만들었다면 JSDoc + *.meta.ts + 스토리) — 신규 Avatar·ConfirmDialog·SourceList·Spinner·StateMessage 모두 JSDoc + meta 있음. Spinner 는 단독 스토리 없이 StateMessage 스토리 안에서만 보임
상황이 패턴에 해당하면 docs/patterns/README.md 의 결정 트리를 따랐다 — 확인·에러·피드백·빈 상태·로딩 패턴을 이 배포에서 만들고 코드에 적용 (refactor: Quire Phase D — 확인·에러·피드백·빈 상태·로딩 패턴 #57)
문구는 docs/copy.md — 해요체, …, 용어집 — refactor: Quire Phase F — 모션 토큰 · 해요체 문구 통일 · 문구 카탈로그 #59 에서 정리, tokens:check 가 ~니다체·마침표 3개·폐기 용어를 검사 (refactor: Quire Phase F — 모션 토큰 · 해요체 문구 통일 · 문구 카탈로그 #59, docs: Quire 로고 확정 · 문구 검사가 놓친 ㅂ니다 문구 보강 #61)
로딩·오류·빈 상태·성공을 확인했다 — refactor: Quire Phase D — 확인·에러·피드백·빈 상태·로딩 패턴 #57 에서 패턴별 실제 앱 전/후 확인
스토리가 있다면 Storybook Accessibility 패널 위반 0 — feat: Quire Phase G — PR CI · Storybook a11y · 운영 문서 #60 에서 스토리 100개 전수 검사 위반 0. 이후 docs: Quire 로고 확정 · 문구 검사가 놓친 ㅂ니다 문구 보강 #61·fix: 로그인 직후 뜨던 환영 화면 제거 #62 는 스토리 문구만 바꿈
새 토큰·컴포넌트·패턴이면 문서를 먼저 고쳤다 (change-flow(docs/process/change-flow.md)) — change-flow 자체는 feat: Quire Phase G — PR CI · Storybook a11y · 운영 문서 #60 에서 생김. 이전 Phase 도 foundations.md·components.md·patterns/ 결정 기록을 먼저 쓰고 코드에 반영

검증

CI 통과 (lint · typecheck · test · tokens:check · build) — verify 1m20s, https://github.com/Qode-4/Qode-Fe/actions/runs/36433393869

🤖 Generated with Claude Code

Prism 코드블럭 pre 는 자체 overflow-x-auto 를 가지지만, 상위 flex 자식들이 기본 min-width:auto 라서 콘텐츠(넓은 code line) 폭에 맞춰 팽창해 pre 의 내부 스크롤이 발동하기 전에 article/모달 자체가 옆으로 넓어졌다. 결과적으로 모달 전체에 가로 스크롤이 생김. - OverlayModal body: min-w-0 추가 (flex 자식 팽창 차단, 모든 소비 모달에 파급) - Step2SummaryPreview 답변 article: min-w-0 - DigestSourceViewBody PairView article: min-w-0 이제 pre 가 자기 폭 안에서만 가로 스크롤을 소유하고 모달은 정상 폭 유지.

모바일은 뷰포트 폭 여유가 적어 flex 자식 팽창이 더 민감. min-w-0 만으로 안 잡히는 케이스(예: MarkdownAnswer 내부 컴포넌트)까지 대비해 이중으로 가둔다. - OverlayModal body: overflow-x-hidden 추가 (belt & suspenders) - MarkdownAnswer 래퍼: min-w-0 (article 이 flex 자식일 때 답변 콘텐츠가 부모를 밀지 못하게)

모달만이 아니라 실제 채팅 뷰에서도 wide code line 이 assistant 메시지 → 메시지 컨테이너 → 스크롤 뷰포트까지 순차 팽창시켜 모바일에서 가로 스크롤이 생겼다. 각 flex 계층에 min-w-0 을 걸고 스크롤 뷰포트에 overflow-x-hidden 을 세이프가드로 추가. - 메시지 리스트 컨테이너(flex-col): min-w-0 - assistant articleNode(flex-1): min-w-0 - streaming article: min-w-0 - messagesViewport(flex justify-center overflow-y-auto): overflow-x-hidden

…roll fix: wide 코드블럭이 모바일에서 가로 스크롤 만드는 문제 (모달 + 채팅 뷰)

…록 ignores 추가 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>