feat: 오답 터뜨리기 마지막 dialog

src/features/quiz/components/finished-bomb-dialog.tsx

@@ -0,0 +1,47 @@
+import { Button } from '@/shared/components/ui/button'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/shared/components/ui/dialog'
+import Text from '@/shared/components/ui/text'
+import Image from 'next/image'
+
+interface Props {
+  open: boolean
+  onOpenChange: (value: boolean) => void
+}
+
+const FinishedBombDialog = ({ open, onOpenChange }: Props) => {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        displayCloseButton={false}
+        onPointerDownOutside={(e) => {
+          e.preventDefault()
+        }}
+        className="flex flex-col px-[24px] pb-[24px] pt-[28px]"
+      >
+        <DialogHeader className="flex-center mb-[8px] flex-col">
+          <Image
+            src={'/images/bomb-complete.png'}
+            alt=""
+            width={83.1}
+            height={139}
+            className="mb-[24px]"
+          />
+          <DialogTitle className="flex items-center gap-[16px]">
+            <Text typography="title3">모든 오답을 터뜨렸어요!</Text>
+          </DialogTitle>
+        </DialogHeader>
+
+        <Text typography="text1-regular" color="sub" className="text-center">
+          틀렸던 문제를 모두 복습했으니 <br />
+          픽토스님의 실력은 더 상승할 거예요
+        </Text>
+
+        <Button onClick={() => onOpenChange(false)} className="mt-[36px] w-full">
+          확인
+        </Button>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default FinishedBombDialog

src/features/quiz/screen/bomb-quiz-view/index.tsx

@@ -10,6 +10,7 @@ import BombQuiz from '../../components/bomb-quiz'
 import BombAnimation from '../../components/bomb-animation'
 import WrongAnswerDialog from '../../components/wrong-answer-dialog'
 import { getAnswerText } from '../../utils'
+import FinishedBombDialog from '../../components/finished-bomb-dialog'
 
 const BombQuizView = () => {
   const [key] = useState(new Date())
@@ -20,6 +21,8 @@ const BombQuizView = () => {
 
     openExplanation,
     setOpenExplanation,
+    openFinished,
+    setOpenFinished,
 
     bombQuizList,
 
@@ -50,6 +53,8 @@ const BombQuizView = () => {
 
           <div className="flex-center size-full grow"></div>
         </div>
+
+        <FinishedBombDialog open={openFinished} onOpenChange={setOpenFinished} />
       </div>
     )
   }

src/features/quiz/screen/quiz-view/hooks/use-bomb-quiz.ts

@@ -11,7 +11,9 @@ import { useToast } from '@/shared/hooks/use-toast'
 export const useBombQuiz = (key: Date) => {
   const router = useRouter()
   const { toast } = useToast()
+
   const [openExplanation, setOpenExplanation] = useState(false)
+  const [openFinished, setOpenFinished] = useState(false)
 
   const [shouldFetchInitial, setShouldFetchInitial] = useState(true)
   const [bombQuizList, setBombQuizList] = useState<Quiz.Item[]>([])
@@ -143,6 +145,7 @@ export const useBombQuiz = (key: Date) => {
               window.location.replace('/quiz/bomb')
             } else {
               setBombQuizList([])
+              setOpenFinished(true)
             }
           }
         },
@@ -171,6 +174,8 @@ export const useBombQuiz = (key: Date) => {
 
     openExplanation,
     setOpenExplanation,
+    openFinished,
+    setOpenFinished,
 
     bombQuizList,