Skip to content

Commit 9c818ff

Browse files
sumi-0011claude
sumi-0011
and
claude
authored
Dialog 코어 5-size recipe 재설계 + Alert/Confirm sugar 도입 (#398)
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
1 parent 9e59ba3 commit 9c818ff

26 files changed

Lines changed: 700 additions & 462 deletions

File tree

‎apps/web/src/app/[locale]/game/quiz/_components/CreateOrSolve/SelectQuizType.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
'use client';
22

33
import { useTranslations } from 'next-intl';
4+
import { Dialog } from '@gitanimals/ui-tailwind';
45
import { wrap } from '@suspensive/react';
56
import { overlay } from 'overlay-kit';
67

7-
import { ConfirmDialog } from '@/components/ConfirmDialog';
88
import { ROUTE } from '@/constants/route';
99
import { useRouter } from '@/i18n/routing';
1010

@@ -24,33 +24,38 @@ const SelectQuizType = wrap
2424
const router = useRouter();
2525
const { isSolved, quizSolveCard } = useTodayQuizData();
2626
const t = useTranslations('Quiz');
27+
const tCommon = useTranslations('Common');
2728

2829
const handleSolveQuiz = () => {
2930
overlay.open(({ isOpen, close }) => (
30-
<ConfirmDialog
31-
isOpen={isOpen}
32-
onClose={close}
31+
<Dialog.Confirm
32+
open={isOpen}
33+
onOpenChange={(open) => !open && close()}
3334
onConfirm={() => {
3435
handleCheckLanguage();
3536
close();
3637
}}
3738
title={t('solve-todays-quiz')}
3839
description={t('solve-todays-quiz-description')}
40+
confirmText={tCommon('confirm')}
41+
cancelText={tCommon('close')}
3942
/>
4043
));
4144
};
4245

4346
const handleCheckLanguage = () => {
4447
overlay.open(({ isOpen, close }) => (
45-
<ConfirmDialog
46-
isOpen={isOpen}
47-
onClose={close}
48+
<Dialog.Confirm
49+
open={isOpen}
50+
onOpenChange={(open) => !open && close()}
4851
onConfirm={() => {
4952
router.push(ROUTE.GAME.QUIZ.SOLVE());
5053
close();
5154
}}
5255
title={t('check-language-for-quiz-dialog-title')}
5356
description={t('check-language-for-quiz-dialog-description')}
57+
confirmText={tCommon('confirm')}
58+
cancelText={tCommon('close')}
5459
/>
5560
));
5661
};

‎apps/web/src/app/[locale]/game/quiz/create/_components/QuizCreateForm.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@
33
import React, { useState } from 'react';
44
import { useTranslations } from 'next-intl';
55
import { createQuiz } from '@gitanimals/api';
6-
import { Button } from '@gitanimals/ui-tailwind';
6+
import { Button, Dialog } from '@gitanimals/ui-tailwind';
77
import { overlay } from 'overlay-kit';
88
import { toast } from 'sonner';
99

1010
import QuizField from '@/app/[locale]/game/quiz/create/_components/QuizField';
1111
import QuizTextArea from '@/app/[locale]/game/quiz/create/_components/QuizTextArea';
12-
import { ConfirmDialog } from '@/components/ConfirmDialog';
1312
import Tabs from '@/components/Tabs/Tabs';
1413
import TabsList from '@/components/Tabs/TabsList';
1514
import TabsTrigger from '@/components/Tabs/TabsTrigger';
@@ -34,6 +33,7 @@ const QuizCreateForm = () => {
3433
setQuizContents(e.target.value);
3534
};
3635
const t = useTranslations('Quiz');
36+
const tCommon = useTranslations('Common');
3737

3838
const { tabsTriggerProps: languageRadioProps, selected: language } = useTabs<Locale>({
3939
initialSelectedValue: typedLocale,
@@ -45,15 +45,17 @@ const QuizCreateForm = () => {
4545

4646
const handleCheckToggleLanguage = () => {
4747
overlay.open(({ isOpen, close }) => (
48-
<ConfirmDialog
48+
<Dialog.Confirm
4949
title={t('toggle-language-title')}
5050
description={t('toggle-language-description')}
51-
isOpen={isOpen}
52-
onClose={close}
51+
open={isOpen}
52+
onOpenChange={(open) => !open && close()}
5353
onConfirm={() => {
5454
toggleLocale();
5555
close();
5656
}}
57+
confirmText={tCommon('confirm')}
58+
cancelText={tCommon('close')}
5759
/>
5860
));
5961
};

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

Lines changed: 0 additions & 61 deletions
This file was deleted.

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

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎apps/web/src/app/[locale]/game/quiz/solve/_components/solving/SolvingQuizSection.tsx‎

Lines changed: 102 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,15 @@
33
import { useEffect, useState } from 'react';
44
import Image from 'next/image';
55
import { useTranslations } from 'next-intl';
6-
import { cn } from '@gitanimals/ui-tailwind';
6+
import { Button, cn, Dialog } from '@gitanimals/ui-tailwind';
77
import { wrap } from '@suspensive/react';
88

99
import { Background } from '@/app/[locale]/game/quiz/_components/BackGround';
10-
import CompleteAlertDialog from '@/app/[locale]/game/quiz/solve/_components/done/CompleteAlertDialog';
11-
import FailAlertDialog from '@/app/[locale]/game/quiz/solve/_components/fail/FailAlertDialog';
1210
import QuizProgressBar from '@/app/[locale]/game/quiz/solve/_components/solving/QuizProgressBar';
13-
import CorrectConfirmDialog from '@/app/[locale]/game/quiz/solve/_components/success/CorrectConfirmDialog';
1411
import { QUIZ_ANSWER } from '@/app/[locale]/game/quiz/solve/_constants/solveQuiz.constants';
1512
import { customScrollStyle } from '@/styles/scrollStyle';
1613

14+
import { customT } from '../../../_utils/quiz.intl';
1715
import useQuizAction from '../../_hooks/useQuizAction';
1816
import useQuizData from '../../_hooks/useQuizData';
1917
import useQuizDialogStatus from '../../_hooks/useQuizDialogStatus';
@@ -90,18 +88,106 @@ const SolvingQuizSection = wrap
9088
</div>
9189
</div>
9290
</div>
93-
<CorrectConfirmDialog
94-
isOpen={correctDialog.isOpen}
95-
onClose={correctDialog.close}
96-
onStop={async () => {
97-
await stopQuiz();
98-
await terminateQuiz();
99-
}}
100-
onConfirm={moveToNextStage}
101-
correctPoint={prize}
102-
/>
103-
<FailAlertDialog isOpen={failDialog.isOpen} onClose={moveToQuizMain} />
104-
<CompleteAlertDialog isOpen={completeDialog.isOpen} onClose={terminateQuiz} completePoint={prize} />
91+
<Dialog open={correctDialog.isOpen} onOpenChange={(open) => !open && stopQuiz().then(() => terminateQuiz())}>
92+
<Dialog.Content
93+
className="flex w-full flex-col items-center gap-[12px]"
94+
isShowClose={false}
95+
onEscapeKeyDown={(e) => e.preventDefault()}
96+
onPointerDownOutside={(e) => e.preventDefault()}
97+
>
98+
<div className="flex w-full flex-col items-center gap-[12px]">
99+
<Dialog.Title className="!glyph24-bold !text-center [font-family:'Product_Sans'] font-bold">
100+
{t('correct-dialog.title')}
101+
</Dialog.Title>
102+
<Dialog.Description className="glyph16-regular text-center [font-family:'Product_Sans'] font-normal text-white-75 [word-break:keep-all]">
103+
{t('correct-dialog.description')}
104+
</Dialog.Description>
105+
</div>
106+
<Image
107+
className="my-[4px]"
108+
src="/assets/game/quiz/quiz-coin.svg"
109+
alt="quiz-coin"
110+
width={160}
111+
height={160}
112+
draggable={false}
113+
/>
114+
<div className="flex w-full flex-col gap-[8px]">
115+
<Button className="w-full" onClick={moveToNextStage} variant="primary" size="m">
116+
{t('correct-dialog.challenge-button')}
117+
</Button>
118+
<Button
119+
className="w-full"
120+
onClick={() => stopQuiz().then(() => terminateQuiz())}
121+
variant="secondary"
122+
size="m"
123+
>
124+
{customT(t('correct-dialog.stop-button'), { point: prize })}
125+
</Button>
126+
</div>
127+
</Dialog.Content>
128+
</Dialog>
129+
<Dialog open={failDialog.isOpen} onOpenChange={(open) => !open && moveToQuizMain()}>
130+
<Dialog.Content
131+
className="flex w-full flex-col items-center gap-[12px]"
132+
isShowClose={false}
133+
onEscapeKeyDown={(e) => e.preventDefault()}
134+
onPointerDownOutside={(e) => e.preventDefault()}
135+
>
136+
<div className="flex w-full flex-col items-center gap-[12px]">
137+
<Dialog.Title className="!glyph24-bold !text-center [font-family:'Product_Sans'] font-bold">
138+
{t('fail-dialog.title')}
139+
</Dialog.Title>
140+
<Dialog.Description className="glyph16-regular text-center [font-family:'Product_Sans'] font-normal text-white-75 [word-break:keep-all]">
141+
{t('fail-dialog.description')}
142+
</Dialog.Description>
143+
</div>
144+
<div className="my-[4px] flex h-[160px] w-[160px] items-center justify-center">
145+
<Image
146+
src="/assets/game/quiz/cursor-unchoiced.webp"
147+
alt="quiz-failed"
148+
width={100}
149+
height={100}
150+
draggable={false}
151+
/>
152+
</div>
153+
<div className="flex w-full">
154+
<Button className="w-full" onClick={moveToQuizMain} variant="secondary" size="m">
155+
{t('fail-dialog.close-button')}
156+
</Button>
157+
</div>
158+
</Dialog.Content>
159+
</Dialog>
160+
<Dialog open={completeDialog.isOpen} onOpenChange={(open) => !open && terminateQuiz()}>
161+
<Dialog.Content
162+
className="flex w-full flex-col items-center gap-[12px]"
163+
isShowClose={false}
164+
onEscapeKeyDown={(e) => e.preventDefault()}
165+
onPointerDownOutside={(e) => e.preventDefault()}
166+
>
167+
<div className="flex w-full flex-col items-center gap-[12px]">
168+
<Dialog.Title className="!glyph24-bold !text-center [font-family:'Product_Sans'] font-bold">
169+
{t('complete-dialog.title')}
170+
</Dialog.Title>
171+
<Dialog.Description className="glyph16-regular text-center [font-family:'Product_Sans'] font-normal text-white-75 [word-break:keep-all]">
172+
{customT(t('complete-dialog.description'), { point: prize })}
173+
</Dialog.Description>
174+
</div>
175+
<div className="my-[4px] flex h-[160px] w-[160px] items-center justify-center">
176+
<Image
177+
src="/assets/game/quiz/quiz-double-coin.webp"
178+
alt="quiz-complete"
179+
width={204}
180+
height={184}
181+
draggable={false}
182+
/>
183+
</div>
184+
<div className="flex w-full">
185+
<Button className="w-full" onClick={terminateQuiz} variant="secondary" size="m">
186+
{t('complete-dialog.close-button')}
187+
</Button>
188+
</div>
189+
</Dialog.Content>
190+
</Dialog>
105191
</>
106192
);
107193
});

0 commit comments

Comments
 (0)