Skip to content

Commit 3d4079a

Browse files
sumi-0011claudesumi
authored
refactor: Dialog v1 → DialogV2 마이그레이션 및 ui-tailwind 패키지 전환 (#376)
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: sumi <sumi@sumiui-MacBookAir.local>
1 parent d376b94 commit 3d4079a

23 files changed

Lines changed: 752 additions & 174 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,4 +80,5 @@ apps/admin-main/docs/superpowers
8080

8181
docs/superpowers
8282
.superpowers
83+
.worktrees
8384

‎apps/admin-main/DIALOG_MIGRATION_TODO.md‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
# Dialog V2 마이그레이션 TODO
2+
3+
## 개요
4+
5+
`Dialog (v1)` → `DialogV2` 마이그레이션 작업 목록.
6+
7+
### V1 vs V2 차이점
8+
9+
| | V1 (`dialog.tsx`) | V2 (`dialog-v2.tsx`) |
10+
|---|---|---|
11+
| Size | `default` / `large` / `screen` | `sm` / `md` / `lg` / `full` |
12+
| Close 버튼 | 항상 X (isShowClose로 토글) | 사이즈별 자동 분기 (sm: 없음, md: X/드래그핸들, lg/full: X/뒤로가기) |
13+
| 모바일 | 기본 center float | md: bottom-sheet, lg/full: fullscreen |
14+
| Body 스크롤 | scrollable prop on Content | `DialogV2Body` + ScrollArea 내장 |
15+
| Context | 없음 | `DialogV2SizeContext` 하위 컴포넌트에서 size 참조 가능 |
16+
17+
### 고수준 컴포넌트 관계
18+
19+
```
20+
V1 계열 (제거 대상) V2 계열 (유지)
21+
───────────────── ─────────────────
22+
Dialog (v1) DialogV2
23+
├── AlertDialog ├── AlertDialogV2 (FlatDialog 기반)
24+
├── ConfirmDialog ├── ConfirmDialogV2 (FlatDialog 기반)
25+
└── CommonDialog └── FlatDialog
26+
```
27+
28+
---
29+
30+
## apps/web 마이그레이션
31+
32+
### 1. Global Dialog System
33+
- [ ] `src/components/Global/useDialog.tsx` — AlertDialogV2, ConfirmDialogV2 사용 중 (이미 V2)
34+
- [ ] `src/components/Global/GlobalComponent.tsx` — useDialog 연결 (이미 V2, 확인만)
35+
36+
### 2. Shop - Pet Gotcha
37+
- [ ] `src/app/[locale]/(default)/shop/_petGotcha/OnePet.tsx` — Dialog (v1) → DialogV2
38+
- [ ] `src/app/[locale]/(default)/shop/_petGotcha/TenPet.tsx` — Dialog (v1) → DialogV2
39+
40+
### 3. Shop - Auction
41+
- [ ] `src/app/[locale]/(default)/shop/_auction/SellSection/EditModal.tsx` — Dialog (v1) → DialogV2
42+
- [ ] `src/app/[locale]/(default)/shop/_auction/SellSection/SellInputRow.tsx` — Dialog (v1) → DialogV2
43+
- [ ] `src/app/[locale]/(default)/shop/_auction/PersonaSearch.tsx` — Dialog (v1) → DialogV2
44+
45+
### 4. Game - Quiz
46+
- [ ] `src/app/[locale]/(default)/game/quiz/solve/_components/done/CompleteAlertDialog.tsx` — Dialog (v1) → AlertDialogV2 또는 DialogV2
47+
- [ ] `src/app/[locale]/(default)/game/quiz/solve/_components/fail/FailAlertDialog.tsx` — Dialog (v1) → AlertDialogV2 또는 DialogV2
48+
- [ ] `src/app/[locale]/(default)/game/quiz/solve/_components/success/CorrectConfirmDialog.tsx` — Dialog (v1) → ConfirmDialogV2 또는 DialogV2
49+
- [ ] `src/app/[locale]/(default)/game/quiz/_components/CreateOrSolve/SelectQuizType.tsx` — ConfirmDialogV2 사용 중 (이미 V2, 확인만)
50+
- [ ] `src/app/[locale]/(default)/game/quiz/create/_components/QuizCreateForm.tsx` — ConfirmDialogV2 사용 중 (이미 V2, 확인만)
51+
52+
### 5. My Page - Pet Management
53+
- [ ] `src/app/[locale]/(default)/mypage/my-pet/(evolution)/EvolutionPersona.tsx` — CommonDialog → DialogV2 또는 FlatDialog
54+
- [ ] `src/app/[locale]/(default)/mypage/my-pet/(merge)/MergePersona.tsx` — CommonDialog + Dialog (v1) → DialogV2
55+
- [ ] `src/app/[locale]/(default)/mypage/my-pet/SelectedPetTable.tsx` — ConfirmDialogV2 사용 중 (이미 V2, 확인만)
56+
57+
### 6. My Page - GitHub Custom
58+
- [ ] `src/app/[locale]/(default)/mypage/(github-custom)/FarmPersonaSelect.tsx` — DialogV2 사용 중 (이미 V2, 확인만)
59+
- [ ] `src/app/[locale]/(default)/mypage/(github-custom)/LinePersonaSelect.tsx` — Dialog (v1) + ScrollArea → DialogV2
60+
61+
### 7. Guild
62+
- [ ] `src/app/[locale]/(default)/guild/_components/GuildPetSelectDialog.tsx` — 커스텀 다이얼로그, 내부 Dialog 확인 필요
63+
64+
### 8. Laboratory
65+
- [ ] `src/app/[locale]/(default)/laboratory/property-pet-sell/page.tsx` — useDialog hook (Global 시스템 경유, 확인만)
66+
67+
### 9. Route Modal
68+
- [ ] `src/components/RouteModal.tsx` — Dialog (v1) → DialogV2
69+
70+
---
71+
72+
## apps/webview 마이그레이션
73+
74+
> webview는 현재 `@gitanimals/ui-panda` Dialog를 사용 중. Tailwind 마이그레이션과 함께 진행 필요.
75+
76+
### 10. Shop
77+
- [ ] `src/pages/shop/_components/_petGotcha/OnePet.tsx` — Panda Dialog → DialogV2
78+
- [ ] `src/pages/shop/_components/_petGotcha/TenPet.tsx` — Panda Dialog → DialogV2
79+
- [ ] `src/pages/shop/_components/_auction/PersonaSearch.tsx` — Panda Dialog → DialogV2
80+
- [ ] `src/pages/shop/_components/_auction/SellSection/EditModal.tsx` — Panda Dialog → DialogV2
81+
- [ ] `src/pages/shop/_components/_auction/SellSection/SellInputRow.tsx` — Panda Dialog → DialogV2
82+
83+
### 11. Game - Quiz
84+
- [ ] `src/pages/game/quiz/_components/CreateOrSolve/SolveQuizConfirmDialog.tsx` — Panda Dialog → ConfirmDialogV2
85+
- [ ] `src/pages/game/quiz/solve/_components/done/CompleteAlertDialog.tsx` — Panda Dialog → AlertDialogV2
86+
- [ ] `src/pages/game/quiz/solve/_components/fail/FailAlertDialog.tsx` — Panda Dialog → AlertDialogV2
87+
- [ ] `src/pages/game/quiz/solve/_components/success/CorrectConfirmDialog.tsx` — Panda Dialog → ConfirmDialogV2
88+
89+
### 12. Pages
90+
- [ ] `src/pages/dev/page.tsx` — Panda Dialog → DialogV2
91+
- [ ] `src/pages/SettingsPage.tsx` — Panda Dialog → DialogV2
92+
93+
---
94+
95+
## packages/ui/tailwind 정리
96+
97+
### 13. V1 컴포넌트 제거 (모든 사용처 마이그레이션 완료 후)
98+
- [ ] `src/components/ui/dialog.tsx` — V1 Dialog 제거
99+
- [ ] `src/components/ui/alert-dialog.tsx` — V1 AlertDialog 제거
100+
- [ ] `src/components/ui/confirm-dialog.tsx` — V1 ConfirmDialog 제거
101+
- [ ] `src/components/common-dialog/CommonDialog.tsx` — CommonDialog 제거
102+
- [ ] package exports에서 V1 관련 export 제거
103+
104+
---
105+
106+
## 우선순위 제안
107+
108+
1. **apps/web V1 → V2** (항목 2~3, 5~6, 9) — 가장 많이 사용되는 앱, 이미 V2 인프라 존재
109+
2. **apps/web 확인만 필요** (항목 1, 4 일부, 5 일부, 8) — 이미 V2, 동작 확인
110+
3. **apps/webview** (항목 10~12) — Panda → Tailwind 전환과 묶어서 진행
111+
4. **V1 컴포넌트 제거** (항목 13) — 모든 마이그레이션 완료 후 최종 정리
112+
113+
---
114+
115+
## 진행 상태
116+
117+
| 영역 | 전체 | 완료 | 비고 |
118+
|------|------|------|------|
119+
| apps/web (V1→V2) | ~10 | 0 | |
120+
| apps/web (이미 V2) | ~7 | 0 | 확인만 |
121+
| apps/webview | ~11 | 0 | Panda→Tailwind 포함 |
122+
| packages 정리 | ~5 | 0 | 마지막 단계 |

‎apps/web/next.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const withPWA = NextPWA({
1717

1818
const nextConfig = withNextIntl({
1919
reactStrictMode: true,
20+
transpilePackages: ['@gitanimals/ui-tailwind'],
2021
compiler: {
2122
styledComponents: true,
2223
},

‎apps/web/src/app/[locale]/game/quiz/solve/_components/done/CompleteAlertDialog.tsx‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useState } from 'react';
22
import Image from 'next/image';
33
import { useTranslations } from 'next-intl';
4-
import { Button, Dialog } from '@gitanimals/ui-tailwind';
4+
import { Button, DialogV2 } from '@gitanimals/ui-tailwind';
55

66
import { customT } from '../../../_utils/quiz.intl';
77

@@ -24,21 +24,19 @@ const CompleteAlertDialog = ({ completePoint, onClose, isOpen }: CompleteAlertDi
2424
};
2525

2626
return (
27-
<Dialog open={isOpen} onOpenChange={onClose}>
28-
<Dialog.Content
29-
className="flex flex-col items-center gap-3 w-full"
30-
isShowClose={false}
27+
<DialogV2 open={isOpen} onOpenChange={onClose}>
28+
<DialogV2.Content
29+
size="sm"
30+
className="items-center"
3131
onInteractOutside={(e) => e.preventDefault()}
3232
onEscapeKeyDown={(e) => e.preventDefault()}
3333
>
34-
<div className="flex flex-col items-center gap-3 w-full">
35-
<Dialog.Title className="!font-product !text-glyph-24 !font-bold !text-center">
36-
{t('complete-dialog.title')}
37-
</Dialog.Title>
38-
<Dialog.Description className="font-product text-glyph-16 font-normal text-center text-white-75 break-keep">
34+
<DialogV2.Header className="items-center">
35+
<DialogV2.Title>{t('complete-dialog.title')}</DialogV2.Title>
36+
<DialogV2.Description className="text-center break-keep">
3937
{customT(t('complete-dialog.description'), { point: completePoint })}
40-
</Dialog.Description>
41-
</div>
38+
</DialogV2.Description>
39+
</DialogV2.Header>
4240
<div className="w-40 h-40 flex justify-center items-center my-1">
4341
<Image
4442
src="/assets/game/quiz/quiz-double-coin.webp"
@@ -48,13 +46,13 @@ const CompleteAlertDialog = ({ completePoint, onClose, isOpen }: CompleteAlertDi
4846
draggable={false}
4947
/>
5048
</div>
51-
<div className="w-full">
49+
<DialogV2.Footer className="w-full">
5250
<Button className="w-full" onClick={handleClose} variant="secondary" size="m">
5351
{t('complete-dialog.close-button')}
5452
</Button>
55-
</div>
56-
</Dialog.Content>
57-
</Dialog>
53+
</DialogV2.Footer>
54+
</DialogV2.Content>
55+
</DialogV2>
5856
);
5957
};
6058

‎apps/web/src/app/[locale]/game/quiz/solve/_components/fail/FailAlertDialog.tsx‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useState } from 'react';
22
import Image from 'next/image';
33
import { useTranslations } from 'next-intl';
4-
import { Button, Dialog } from '@gitanimals/ui-tailwind';
4+
import { Button, DialogV2 } from '@gitanimals/ui-tailwind';
55

66
interface FailAlertDialogProps {
77
onClose: () => void;
@@ -21,21 +21,19 @@ const FailAlertDialog = ({ onClose, isOpen }: FailAlertDialogProps) => {
2121
};
2222

2323
return (
24-
<Dialog open={isOpen} onOpenChange={onClose}>
25-
<Dialog.Content
26-
className="flex flex-col items-center gap-3 w-full"
27-
isShowClose={false}
24+
<DialogV2 open={isOpen} onOpenChange={onClose}>
25+
<DialogV2.Content
26+
size="sm"
27+
className="items-center"
2828
onInteractOutside={(e) => e.preventDefault()}
2929
onEscapeKeyDown={(e) => e.preventDefault()}
3030
>
31-
<div className="flex flex-col items-center gap-3 w-full">
32-
<Dialog.Title className="!font-product !text-glyph-24 !font-bold !text-center">
33-
{t('fail-dialog.title')}
34-
</Dialog.Title>
35-
<Dialog.Description className="font-product text-glyph-16 font-normal text-center text-white-75 break-keep">
31+
<DialogV2.Header className="items-center">
32+
<DialogV2.Title>{t('fail-dialog.title')}</DialogV2.Title>
33+
<DialogV2.Description className="text-center break-keep">
3634
{t('fail-dialog.description')}
37-
</Dialog.Description>
38-
</div>
35+
</DialogV2.Description>
36+
</DialogV2.Header>
3937
<div className="w-40 h-40 flex justify-center items-center my-1">
4038
<Image
4139
src="/assets/game/quiz/cursor-unchoiced.webp"
@@ -45,13 +43,13 @@ const FailAlertDialog = ({ onClose, isOpen }: FailAlertDialogProps) => {
4543
draggable={false}
4644
/>
4745
</div>
48-
<div className="w-full">
46+
<DialogV2.Footer className="w-full">
4947
<Button className="w-full" onClick={handleClose} variant="secondary" size="m">
5048
{t('fail-dialog.close-button')}
5149
</Button>
52-
</div>
53-
</Dialog.Content>
54-
</Dialog>
50+
</DialogV2.Footer>
51+
</DialogV2.Content>
52+
</DialogV2>
5553
);
5654
};
5755

‎apps/web/src/app/[locale]/game/quiz/solve/_components/success/CorrectConfirmDialog.tsx‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useState } from 'react';
22
import Image from 'next/image';
33
import { useTranslations } from 'next-intl';
4-
import { Button, Dialog } from '@gitanimals/ui-tailwind';
4+
import { Button, DialogV2 } from '@gitanimals/ui-tailwind';
55

66
import { customT } from '../../../_utils/quiz.intl';
77

@@ -36,21 +36,19 @@ const CorrectConfirmDialog = ({ correctPoint, onConfirm, onStop, onClose, isOpen
3636
};
3737

3838
return (
39-
<Dialog open={isOpen} onOpenChange={onClose}>
40-
<Dialog.Content
41-
className="flex flex-col items-center gap-3 w-full"
42-
isShowClose={false}
39+
<DialogV2 open={isOpen} onOpenChange={onClose}>
40+
<DialogV2.Content
41+
size="sm"
42+
className="items-center"
4343
onInteractOutside={(e) => e.preventDefault()}
4444
onEscapeKeyDown={(e) => e.preventDefault()}
4545
>
46-
<div className="flex flex-col items-center gap-3 w-full">
47-
<Dialog.Title className="!font-product !text-glyph-24 !font-bold !text-center">
48-
{t('correct-dialog.title')}
49-
</Dialog.Title>
50-
<Dialog.Description className="font-product text-glyph-16 font-normal text-center text-white-75 break-keep">
46+
<DialogV2.Header className="items-center">
47+
<DialogV2.Title>{t('correct-dialog.title')}</DialogV2.Title>
48+
<DialogV2.Description className="text-center break-keep">
5149
{t('correct-dialog.description')}
52-
</Dialog.Description>
53-
</div>
50+
</DialogV2.Description>
51+
</DialogV2.Header>
5452
<Image
5553
className="my-1"
5654
src="/assets/game/quiz/quiz-coin.svg"
@@ -59,16 +57,16 @@ const CorrectConfirmDialog = ({ correctPoint, onConfirm, onStop, onClose, isOpen
5957
height={160}
6058
draggable={false}
6159
/>
62-
<div className="flex flex-col gap-2 w-full">
60+
<DialogV2.Footer className="flex-col w-full">
6361
<Button className="w-full" onClick={handleConfirm} variant="primary" size="m" disabled={isLoading}>
6462
{t('correct-dialog.challenge-button')}
6563
</Button>
6664
<Button className="w-full" onClick={handleStop} variant="secondary" size="m">
6765
{customT(t('correct-dialog.stop-button'), { point: correctPoint })}
6866
</Button>
69-
</div>
70-
</Dialog.Content>
71-
</Dialog>
67+
</DialogV2.Footer>
68+
</DialogV2.Content>
69+
</DialogV2>
7270
);
7371
};
7472

‎apps/web/src/app/[locale]/mypage/(github-custom)/LinePersonaSelect.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import React, { useState } from 'react';
44
import { useTranslations } from 'next-intl';
55
import { cn } from '@gitanimals/ui-tailwind';
6-
import { Dialog, ScrollArea } from '@gitanimals/ui-tailwind';
6+
import { DialogV2, ScrollArea } from '@gitanimals/ui-tailwind';
77
import { ExpandIcon } from 'lucide-react';
88

99
import { SelectPersonaList } from '../PersonaList';
@@ -37,22 +37,23 @@ export const LinePersonaSelect = ({ selectPersona, onChangePersona }: Props) =>
3737
onSelectPersona={(persona) => onChangePersona(persona.id)}
3838
/>
3939
</ScrollArea>
40-
<Dialog open={isExtend} onOpenChange={() => setIsExtend(false)}>
41-
<Dialog.Content size="large" scrollable>
42-
<Dialog.Title>{t('line-type-select-pet')}</Dialog.Title>
40+
<DialogV2 open={isExtend} onOpenChange={() => setIsExtend(false)}>
41+
<DialogV2.Content size="lg">
42+
<DialogV2.CloseButton />
43+
<DialogV2.Header>
44+
<DialogV2.Title>{t('line-type-select-pet')}</DialogV2.Title>
45+
</DialogV2.Header>
4346
<SelectPersonaList
4447
selectPersona={selectPersona ? [selectPersona] : []}
4548
onSelectPersona={(persona) => onChangePersona(persona.id)}
4649
>
47-
<Dialog.TopSlot>
48-
<SelectPersonaList.Toolbar showSearch />
49-
</Dialog.TopSlot>
50-
<Dialog.Body>
50+
<SelectPersonaList.Toolbar showSearch />
51+
<DialogV2.Body>
5152
<SelectPersonaList.Grid />
52-
</Dialog.Body>
53+
</DialogV2.Body>
5354
</SelectPersonaList>
54-
</Dialog.Content>
55-
</Dialog>
55+
</DialogV2.Content>
56+
</DialogV2>
5657
</div>
5758
);
5859
};

‎apps/web/src/app/[locale]/mypage/my-pet/(evolution)/EvolutionPersona.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { useTranslations } from 'next-intl';
44
import { evolutionPersona, type Persona } from '@gitanimals/api';
55
import { userQueries } from '@gitanimals/react-query';
6-
import { Button, CommonDialog } from '@gitanimals/ui-tailwind';
6+
import { Button, DialogV2 } from '@gitanimals/ui-tailwind';
77
import { useMutation, useQueryClient } from '@tanstack/react-query';
88
import { MoveRight } from 'lucide-react';
99
import { overlay } from 'overlay-kit';
@@ -41,13 +41,19 @@ export function EvolutionPersona({ isOpen, onClose, targetPersona }: EvolutionPe
4141
};
4242

4343
return (
44-
<CommonDialog isOpen={isOpen} onClose={onClose} title="GitAnimals Evolution" size="large">
45-
<EvolutionPreview targetPersona={targetPersona} />
46-
<div className="flex justify-center">
47-
<Button onClick={onMergeAction}>{t('evolution')}</Button>
48-
</div>
49-
{isEvolving && <SpinningLoader />}
50-
</CommonDialog>
44+
<DialogV2 open={isOpen} onOpenChange={onClose}>
45+
<DialogV2.Content size="lg">
46+
<DialogV2.CloseButton />
47+
<DialogV2.Header>
48+
<DialogV2.Title>GitAnimals Evolution</DialogV2.Title>
49+
</DialogV2.Header>
50+
<EvolutionPreview targetPersona={targetPersona} />
51+
<DialogV2.Footer className="justify-center">
52+
<Button onClick={onMergeAction}>{t('evolution')}</Button>
53+
</DialogV2.Footer>
54+
{isEvolving && <SpinningLoader />}
55+
</DialogV2.Content>
56+
</DialogV2>
5157
);
5258
}
5359

0 commit comments

Comments
 (0)