UI 컴포넌트 개선: DialogV2 Size 체계 재설계 및 Tailwind 마이그레이션 by sumi-0011 · Pull Request #374 · git-goods/git-animal-client

sumi-0011 · 2026-04-01T12:14:34Z

💻 작업 내용

DialogV2 Size 체계 재설계

기존 Dialog 컴포넌트의 size 기준이 모호하고 패딩/간격이 일관되지 않은 문제를 해결하기 위해, Radix Themes 방식의 Size Context 기반 DialogV2를 새로 설계하고 구현했습니다.

이전: default / large / screen 3가지 사이즈. Title/Description 폰트가 size와 무관하여 사용처마다 className override 필요. 반응형 대응이 사이즈 간 차이 없이 거의 동일.

이후: sm / md / lg / full 4단계 용도별 사이즈. React Context로 size를 하위 컴포넌트에 전달하여 Title, Description, Footer가 자동으로 스타일 조정. 사이즈별 구조적 반응형 차이:

sm: 항상 센터 플로팅 (Alert/Confirm용)
md: 데스크톱/태블릿 센터 플로팅, 모바일 바텀시트
lg: 데스크톱 센터 플로팅, 태블릿/모바일 풀스크린
full: 데스크톱/태블릿 여백 있는 패널, 모바일 풀스크린

주요 변경 파일

dialog-v2.tsx — DialogV2 core (Size Context + CVA variants + 반응형 CloseButton)
alert-dialog-v2.tsx / confirm-dialog-v2.tsx — size prop 지원 래퍼
scroll-area.tsx — horizontal ScrollBar 추가
Storybook 스토리: DialogV2 (SM/MD/LG/Full), AlertDialogV2, ConfirmDialogV2, ScrollArea

기타 포함 작업

PandaCSS → Tailwind CSS 마이그레이션 (랜딩 페이지 등)
FSD 아키텍처 폴더 구조 리팩토링
ConfirmDialog/AlertDialog ui-tailwind 공통 컴포넌트 승격
Chromatic 스토리북 배포 설정
Button border 유틸리티 무효화 버그 수정

마이그레이션 전략

기존 dialog.tsx (v1)은 유지. v2를 별도 파일로 생성하여 사용처별로 점진적 교체 가능.

📸 스크린샷

Storybook에서 각 사이즈별 스토리 확인 가능 (UI/DialogV2, UI/AlertDialogV2, UI/ConfirmDialogV2, UI/ScrollArea)

Tailwind fontSize 설정이 fontFamily를 지원하지 않는 한계를 플러그인으로 해결하여, text-glyph-* 클래스 사용 시 font-product 없이도 Product Sans가 자동 적용되도록 함 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

# Conflicts: # apps/web/src/app/[locale]/game/quiz/_components/CreateOrSolve/QuizTypeCard.tsx # apps/web/src/app/[locale]/game/quiz/_components/CreateOrSolve/SolveQuizConfirmDialog.tsx # apps/web/src/app/[locale]/game/quiz/create/_components/QuizCreateForm.tsx # apps/web/src/app/[locale]/game/quiz/solve/_components/done/CompleteAlertDialog.tsx # apps/web/src/app/[locale]/game/quiz/solve/_components/fail/FailAlertDialog.tsx # apps/web/src/app/[locale]/game/quiz/solve/_components/success/CorrectConfirmDialog.tsx # apps/web/src/app/[locale]/guild/_components/GuildPeopleList.tsx # apps/web/src/app/[locale]/guild/_components/SelectPersonaList.tsx # apps/web/src/app/[locale]/laboratory/_component/ConfirmDialog.tsx # apps/web/src/app/[locale]/laboratory/multi-merge/PersonaItem.tsx # apps/web/src/app/[locale]/landing/AvailablePetSection/AvailablePetSection.tsx # apps/web/src/app/[locale]/landing/ChoosePetSection/ChoosePetSection.tsx # apps/web/src/app/[locale]/landing/Footer/Footer.style.ts # apps/web/src/app/[locale]/landing/MainSection/MainSection.style.ts # apps/web/src/app/[locale]/landing/MainSection/MainSection.tsx # apps/web/src/app/[locale]/landing/MainSection/MainSlider.tsx # apps/web/src/app/[locale]/landing/RankingSection/MobileRankingTable.tsx # apps/web/src/app/[locale]/landing/RankingSection/RankingSection.tsx # apps/web/src/app/[locale]/mypage/(github-custom)/FarmPersonaSelect.tsx # apps/web/src/app/[locale]/mypage/(github-custom)/FarmType.tsx # apps/web/src/app/[locale]/mypage/(github-custom)/LinePersonaSelect.tsx # apps/web/src/app/[locale]/mypage/PersonaList.tsx # apps/web/src/app/[locale]/mypage/my-pet/_components/SelectPersonaList.tsx # apps/web/src/app/[locale]/page.tsx # apps/web/src/app/[locale]/shop/_auction/index.tsx # apps/web/src/app/[locale]/shop/_petGotcha/OnePet.tsx # apps/web/src/components/CardGame/FanDrawingGame/FanDrawingGame.tsx # apps/web/src/components/Guild/MemeberSlider.tsx

ui-panda Dialog API와 맞추기 위해 ui-tailwind Dialog에 누락된 서브컴포넌트와 prop을 추가하고, quiz 컴포넌트에서 참조하는 ConfirmDialog 컴포넌트를 생성하여 type-check 오류 해결 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

# Conflicts: # apps/web/src/app/[locale]/guild/_components/GuildPeopleList.tsx # apps/web/src/app/[locale]/guild/_components/SelectPersonaList.tsx # apps/web/src/app/[locale]/laboratory/multi-merge/PersonaItem.tsx # apps/web/src/app/[locale]/landing/MainSection/MainSlider.tsx # apps/web/src/app/[locale]/mypage/(github-custom)/FarmType.tsx # apps/web/src/app/[locale]/mypage/(github-custom)/LinePersonaSelect.tsx # apps/web/src/app/[locale]/mypage/my-pet/_components/SelectPersonaList.tsx # apps/web/src/app/[locale]/shop/_petGotcha/OnePet.tsx # apps/web/src/components/Guild/MemeberSlider.tsx

Stories files reference @storybook/react types which are not available during the library type-check. Excluding them follows the standard pattern of separating storybook config from library builds. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Made-with: Cursor

… 제거) Made-with: Cursor

Made-with: Cursor

- shared/: constants, utils, hooks, lib, store, i18n, styles, auth, interceptor 통합 - entities/: persona(UI+model), guild(UI), user(model), product(model) 분리 - features/: auction, change-persona-visible, feedback, laboratory-feedback, auth 분리 - widgets/: GNB 위젯 분리 - apis/ 레거시 디렉토리 완전 제거, shared/api/로 인프라 이전 의존성 흐름: app → widgets → features → entities → shared Made-with: Cursor

- apps/web/ARCHITECTURE.md: 레이어 구조, 의존성 규칙, 코드 배치 기준 상세 가이드 - CLAUDE.md: FSD 아키텍처 참조, outdated 정보 업데이트 (PandaCSS→Tailwind, apis/→FSD) - .cursor/rules/web-fsd-architecture.mdc: apps/web 파일 편집 시 자동 적용되는 FSD 규칙 Made-with: Cursor

FSD 리팩토링으로 이동된 경로 반영 Made-with: Cursor

i18n/이 src/shared/i18n/으로 이동 후 messages 경로가 ../../messages/ → ../../../messages/로 변경 필요 Made-with: Cursor

# Conflicts: # .gitignore # apps/web/package.json # apps/web/src/app/[locale]/game/quiz/_components/MobileLayout.tsx # apps/web/src/app/[locale]/guild/(subpage)/[id]/MoreMenu.tsx # apps/web/src/app/[locale]/guild/(subpage)/create/page.tsx # apps/web/src/app/[locale]/guild/(subpage)/detail/[id]/join/page.tsx # apps/web/src/app/[locale]/guild/_components/GuildModalPageLayout.tsx # apps/web/src/app/[locale]/guild/layout.tsx # apps/web/src/app/[locale]/laboratory/layout.tsx # apps/web/src/app/[locale]/landing/AvailablePetSection/AnimalSlider.style.ts # apps/web/src/app/[locale]/landing/AvailablePetSection/AnimalSlider.tsx # apps/web/src/app/[locale]/landing/AvailablePetSection/AvailablePetSection.tsx # apps/web/src/app/[locale]/landing/ChoosePetSection/ChoosePetSection.tsx # apps/web/src/app/[locale]/mypage/ProfileSection.tsx # apps/web/src/app/[locale]/mypage/layout.tsx # apps/web/src/app/[locale]/mypage/my-pet/(evolution)/EvolutionPersona.tsx # apps/web/src/app/[locale]/mypage/my-pet/SelectedPetTable.tsx # apps/web/src/app/[locale]/shop/_auction/Tab.tsx # apps/web/src/app/[locale]/shop/_auction/index.tsx # apps/web/src/components/GNB/Notification/InboxList.tsx # apps/web/src/components/PageModal/index.tsx # apps/web/src/styles/prevTextToken.ts # apps/web/src/styles/scrollStyle.ts # packages/ui/tailwind/src/components/ui/dialog.tsx # packages/ui/tailwind/src/theme/screens.ts # pnpm-lock.yaml

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- @gitanimals/ui-tailwind에 ConfirmDialog, AlertDialog 생성 - laboratory 로컬 ConfirmDialog/AlertDialog 삭제 - Quiz, Mypage 사용처를 공통 컴포넌트로 교체 - useDialog hook 내부를 공통 컴포넌트 활용하도록 리팩토링 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

RouteModal로 통합 완료되어 더 이상 사용되지 않는 InterceptingDialog를 제거한다. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

삭제된 InterceptingDialog의 gap-8 레이아웃을 지원하기 위해 RouteModal에 gap prop('sm' | 'lg')을 추가한다. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- chromatic 패키지 설치 - dev 브랜치 push 시 자동 배포 워크플로우 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- render + useState 제거, isOpen: true를 meta args에 설정 - TS 에러 해결 (필수 props를 meta args에서 기본값 제공) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- gap-2, 반응형 타이틀, children 래퍼, mt-2 버튼 영역 적용 - 미사용 cn import 제거 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

border: transparent는 CSS shorthand로 border-style: none을 설정하여 Tailwind의 border 클래스가 적용되어도 렌더링되지 않음. border-color: transparent로 변경하여 border-style: solid 유지. Made-with: Cursor

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

coderabbitai · 2026-04-01T12:14:43Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 8ef3d9d7-8668-42cb-b211-63c6ca8f42d7

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/ui-checkbox

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

# Conflicts: # packages/ui/tailwind/src/components/ui/index.ts

sumi-0011 and others added 30 commits January 14, 2026 09:42

refactor: tailwind setting migration

c38c939

feat: landing 페이지 개선

bfb5740

feat: custom token error fix

e6a0d2c

refactor: ui panda 참조 제거

9875ff1

fix: dialog 수정

fac5c95

feat: tailwind 패키지 스토리북 추가

91aff0f

Merge branch 'main' into dev

4f94218

fix: layout fix

16ad68c

docs: my-pet 페이지 동작 정리 및 진화 모달 미사용 코드 제거

f612c68

Made-with: Cursor

refactor: PersonaListToolbar를 ui-tailwind SearchBar·Select로 전환 (Panda…

6dc0fab

… 제거) Made-with: Cursor

refactor: PersonaItem을 ui-tailwind Banner·LevelBanner로 전환 (Panda 제거)

c0e3735

Made-with: Cursor

fix: 판매 확인 Dialog 푸터 버튼 겹침 (flex 레이아웃)

a15ee67

Made-with: Cursor

fix: next-intl i18n request 경로를 shared/i18n/으로 수정

97d85c6

FSD 리팩토링으로 이동된 경로 반영 Made-with: Cursor

fix: i18n messages 동적 import 상대 경로 수정

09d4264

i18n/이 src/shared/i18n/으로 이동 후 messages 경로가 ../../messages/ → ../../../messages/로 변경 필요 Made-with: Cursor

refactor: Spring 랜딩 페이지 PandaCSS → Tailwind CSS 마이그레이션

827ac67

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

fix: cherry-blossom 데모 PandaCSS 제거 및 SelectPersonaList 중복 함수 수정

da3a83b

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

refactor: 미사용 InterceptingDialog 컴포넌트 삭제

955369a

RouteModal로 통합 완료되어 더 이상 사용되지 않는 InterceptingDialog를 제거한다. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

refactor: RouteModal에 gap prop 추가 (InterceptingDialog 통합)

cf4ac6b

삭제된 InterceptingDialog의 gap-8 레이아웃을 지원하기 위해 RouteModal에 gap prop('sm' | 'lg')을 추가한다. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

feat: ConfirmDialog, AlertDialog 스토리북 스토리 추가

48b7d34

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

feat: Chromatic 스토리북 배포 설정 추가

e8645da

- chromatic 패키지 설치 - dev 브랜치 push 시 자동 배포 워크플로우 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

refactor: ConfirmDialog/AlertDialog 스토리 기본 열림 상태로 변경

da42fc8

- render + useState 제거, isOpen: true를 meta args에 설정 - TS 에러 해결 (필수 props를 meta args에서 기본값 제공) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

sumi-0011 and others added 11 commits April 1, 2026 17:29

refactor: AlertDialog 디자인을 ConfirmDialog와 동일하게 통일

1c6fa3c

- gap-2, 반응형 타이틀, children 래퍼, mt-2 버튼 영역 적용 - 미사용 cn import 제거 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

feat: DialogV2 core - size context + responsive content variants

4a87860

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: AlertDialogV2, ConfirmDialogV2 - size prop 지원

f7457d6

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: DialogV2 컴포넌트 export 추가

808c648

feat: DialogV2 스토리북 - SM/MD/LG/Full 사이즈 스토리

300623e

feat: AlertDialogV2, ConfirmDialogV2 스토리북 스토리 추가

8ddf75b

feat: DialogV2Body에 ScrollArea 적용

b6a06af

feat: ScrollArea 스토리북 스토리 추가

cdb8787

fix: DialogV2Body에 min-h-0 추가하여 flex 내 ScrollArea 스크롤 동작 보장

1a5addb

fix: ScrollArea에 horizontal ScrollBar 추가

436f7b1

sumi-0011 requested a review from hyesungoh as a code owner April 1, 2026 12:14

auto-assign Bot assigned sumi-0011 Apr 1, 2026

github-actions Bot added area: Web area: Workflow diff: XL area: UI labels Apr 1, 2026

sumi-0011 added 4 commits April 1, 2026 21:31

fix: apps/web에서 삭제된 panda codegen prepare/prebuild 스크립트 제거

7df6960

fix: apps/web에서 삭제된 panda codegen prepare/prebuild 스크립트 제거

9233ad7

Merge branch 'feat/tailwind-dev' into feat/ui-checkbox

180d170

Merge remote-tracking branch 'origin/dev' into feat/ui-checkbox

58bb4c9

# Conflicts: # packages/ui/tailwind/src/components/ui/index.ts

github-actions Bot removed the area: Workflow label Apr 2, 2026

sumi-0011 merged commit 348df15 into dev Apr 2, 2026
3 checks passed

sumi-0011 deleted the feat/ui-checkbox branch April 2, 2026 11:07

github-actions Bot mentioned this pull request Apr 2, 2026

[RELEASE] v2.10.0 git-good-w/git-animal-client#35

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

UI 컴포넌트 개선: DialogV2 Size 체계 재설계 및 Tailwind 마이그레이션#374

UI 컴포넌트 개선: DialogV2 Size 체계 재설계 및 Tailwind 마이그레이션#374
sumi-0011 merged 45 commits into
devfrom
feat/ui-checkbox

sumi-0011 commented Apr 1, 2026

Uh oh!

coderabbitai Bot commented Apr 1, 2026 •

edited

Loading

Review skipped

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

sumi-0011 commented Apr 1, 2026

💻 작업 내용

DialogV2 Size 체계 재설계

주요 변경 파일

기타 포함 작업

마이그레이션 전략

📸 스크린샷

Uh oh!

coderabbitai Bot commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

coderabbitai Bot commented Apr 1, 2026 •

edited

Loading