Dialog 코어 5-size recipe 재설계 + Alert/Confirm sugar 도입 - #398
Merged
Conversation
…으로 재작성 - DialogSizeContext 도입: Content의 size를 Title/Description/Footer가 자동 consume - size별 폭/패딩/타이포/정렬 recipe 통합, 오버라이드 필요 없앰 - 기존 default→md, large→lg 매핑. hero(축하)와 screen(플레인 풀뷰포트) 분리 - dialogTitleStyle export는 스코프 밖 사용처 보호 위해 값 유지 - buttonSizeForDialogSize 내부 매핑 export (Alert/Confirm sugar 준비)
- size 별 recipe에 맞춰 Button size 자동 배정 - Confirm은 Promise onConfirm 로딩 상태 자동 관리 - i18n 텍스트는 소비자가 넘김 (라이브러리는 next-intl 무의존) - CommonDialog는 곧 삭제 예정 (Task 3)
훅 시그니처는 그대로 유지 (호출부 무변경). onConfirm 있으면 Confirm, 없으면 Alert 로 렌더.
…로 통합 FailAlertDialog, CompleteAlertDialog, CorrectConfirmDialog(퀴즈 풀이), laboratory AlertDialog(미사용) 를 삭제하고 SolvingQuizSection 에서 Dialog.Alert / Dialog.Confirm sugar 를 직접 사용하도록 마이그레이션. - laboratory AlertDialog 는 어떤 곳에서도 import 되지 않는 데드코드로 확인 후 삭제. - CorrectConfirmDialog 는 challenge(계속하기)/stop(중단) 두 버튼이 서로 다른 부수효과를 가지므로, Dialog.Confirm 의 onConfirm 성공 후 자동 onOpenChange(false) 호출과 cancel 버튼의 onOpenChange(false) 호출을 구분하기 위해 ref 플래그로 가드. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Task 6 리뷰 회귀 수정: - FailAlertDialog/CompleteAlertDialog/CorrectConfirmDialog 삭제 후 Dialog.Alert/Dialog.Confirm sugar 로 이관하며 누락된 160x160 보상 이미지 (cursor-unchoiced.webp, quiz-double-coin.webp, quiz-coin.svg) 복구 - CorrectConfirmDialog 원본의 ESC/외부클릭/X 닫기 차단(명시적 challenge/stop 선택 강제) 정책을 Dialog.Content(isShowClose=false, onEscapeKeyDown/onPointerDownOutside preventDefault)로 복구 - Dialog.Confirm 내부 호출 순서에 의존하던 취약한 useRef 이중발화 가드 제거, challenge/stop 버튼을 각각 moveToNextStage / stopQuiz+terminateQuiz 로 직접 연결 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- OnePet/TenPet: hero (celebration 카드 뽑기) - PersonaSearch/LinePersonaSelect/FarmPersonaSelect/RouteModal: lg - EditModal 등 기본: md (size 생략) - Dialog.Title/Description 의 recipe 중복 오버라이드 className 제거
size='hero' recipe는 items-center/justify-center을 포함하지 않아 카드 뽑기 컨텐츠가 상단 고정됨. 도메인 요구로 consumer에서 정렬 override 유지.
…og 기본 size md 복원 - Quiz Fail/Complete 다이얼로그: X/ESC/외부클릭 차단 (CorrectConfirm과 동일 정책) - Global useDialog: Alert/Confirm에 size="md" 명시 (원본 다이얼로그 크기 유지)
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
- 5-size recipe(sm/md/lg/screen/hero) 매트릭스 스토리 - Dialog.Alert / Dialog.Confirm sugar 스토리 - 도메인 override 패턴(MergePersona 스타일) 예제 - 루트 sb:tailwind 스크립트 추가 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- OverflowScrollable: scrollable + Dialog.Body 조합 권장 패턴 - OverflowUnmanaged: 미처리 시 Footer 밀림 안티패턴 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- sm/md/lg: max-w-[min(size,calc(100vw-40px))] + max-h-[calc(100vh-40px)]로 최소 20px 여백 보장 - lg 모바일 풀스크린 정책 제거 (일관된 20px 여백) - screen/hero는 의도적 풀뷰포트로 유지 - Dialog.Body를 Radix ScrollArea 기반으로 변경 (네이티브 스크롤바 대신 커스텀) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Radix ScrollArea는 flex-1 컨테이너 안에서 Viewport의 percentage height cascade가 깨져 스크롤이 동작하지 않음. native overflow-y-auto로 되돌리고 스크롤바만 tailwind arbitrary로 얇고 어둡게 커스텀 스타일링. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- sm/md/lg 의 max-width 를 arbitrary property 문법으로 변경: Tailwind JIT extractor 가 중첩된 min()+calc() 를 놓쳐 CSS 미생성되던 문제 (다이얼로그 폭이 100vw 로 확장) 해결 - dialogScrollableStyle 에 h-[calc(100vh-40px)] 추가: Content 가 콘텐츠에 맞춰 축소되면 flex-1 Body 가 0 이 되어 InventoryGrid(rows='auto') 가 렌더 안 되던 문제 수정 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
# Conflicts: # apps/web/src/app/[locale]/shop/_petGotcha/TenPet.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
💻 작업 내용
@gitanimals/ui-tailwindDialog를 5-size recipe 기반으로 재작성하고, 앱 전역의 confirm/alert 다이얼로그 중복을 sugar로 통합했습니다.핵심 변경
Dialog 코어 재작성 (
packages/ui/tailwind/src/components/dialog/Dialog.tsx)size = 'sm' | 'md' | 'lg' | 'screen' | 'hero'— 폭·패딩·gap·Title/Description 타이포·Footer 정렬을 recipe로 통합DialogSizeContext도입: Content가 size를 provide, Title/Description/Footer가 자동 consumeglyph20 left)에 맞춤. 히어로 타이포는size='hero'opt-inscreen(플레인 풀뷰포트)과hero(축하/결과) 분리 — 폼과 celebration이 같은 사이즈로 묶이던 문제 해소Alert / Confirm sugar 내장 (
Dialog.Alert,Dialog.Confirm)buttonSizeForDialogSize)t()넘김)Dialog.Confirm은 PromiseonConfirm로딩 상태 자체 관리6개 프리미티브 → 2개 sugar + compound로 축소
CommonDialog,apps/web/ConfirmDialog, quizFail/Complete/CorrectConfirmDialog, laboratoryAlertDialoguseDialog()공개 API는 유지,DialogComponent내부만 sugar로 재작성 (호출부 무변경)lg), EvolutionPersona(hero), OnePet/TenPet(hero) 등 사용처 재분류잔여 정리
size='large'→size='lg', 구size='screen'케이스별screen/hero재분류검증
pnpm --filter @gitanimals/web type-check→ 0 errorspnpm --filter @gitanimals/web lint→ 0 errorsOut of Scope (다음 PR)
useState/useEffect(pathname)재작성dialogTitleStyleraw 사용처 4곳 (guild subpage + PageModal)📸 스크린샷
시각적으로는 대부분 등가이지만 아래 3곳은 의도적 변경입니다:
hero사이즈 celebration recipe 적용 (풀뷰포트 + glyph48 히어로 title + 중앙 정렬)md, 560px)로 유지되도록 명시