From 8e1f1e6bfcebb9b9404e41293057688c00947964 Mon Sep 17 00:00:00 2001
From: YuHyun <puh0128@gmail.com>
Date: Sun, 3 Dec 2023 17:42:52 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=ED=80=B4=EC=A6=88=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20useSolvedModal=20=ED=9B=85=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#2]
---
 packages/frontend/src/hooks/useSolvedModal.ts | 24 +++++++++++++++++++
 .../frontend/src/pages/quizzes/[id].page.tsx  | 12 ++++------
 2 files changed, 29 insertions(+), 7 deletions(-)
 create mode 100644 packages/frontend/src/hooks/useSolvedModal.ts

diff --git a/packages/frontend/src/hooks/useSolvedModal.ts b/packages/frontend/src/hooks/useSolvedModal.ts
new file mode 100644
index 00000000..c481cc9e
--- /dev/null
+++ b/packages/frontend/src/hooks/useSolvedModal.ts
@@ -0,0 +1,24 @@
+import { useCallback, useState } from "react";
+
+import useModal from "./useModal";
+
+export function useSolvedModal() {
+  const [shareLink, setShareLink] = useState("");
+  const { modalOpen, openModal, closeModal } = useModal();
+
+  const handleSolved = useCallback(
+    (link: string) => {
+      setShareLink(link);
+      openModal();
+    },
+    [openModal],
+  );
+
+  return {
+    shareLink,
+    modalOpen,
+    openModal,
+    closeModal,
+    onSolved: handleSolved,
+  };
+}
diff --git a/packages/frontend/src/pages/quizzes/[id].page.tsx b/packages/frontend/src/pages/quizzes/[id].page.tsx
index 1bf72162..be6e87fd 100644
--- a/packages/frontend/src/pages/quizzes/[id].page.tsx
+++ b/packages/frontend/src/pages/quizzes/[id].page.tsx
@@ -1,7 +1,7 @@
 import axios, { isAxiosError } from "axios";
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from "next";
 import { useRouter } from "next/router";
-import { RefObject, useEffect, useReducer, useRef, useState } from "react";
+import { RefObject, useEffect, useReducer, useRef } from "react";
 
 import { quizAPI } from "../../apis/quiz";
 import { Editor } from "../../components/editor";
@@ -10,8 +10,8 @@ import { SolvedModal } from "../../components/quiz";
 import { QuizGuide } from "../../components/quiz/QuizGuide";
 import { Terminal } from "../../components/terminal";
 import { Button, toast } from "../../design-system/components/common";
-import useModal from "../../hooks/useModal";
 import useResizableSplitView from "../../hooks/useResizableSplitView";
+import { useSolvedModal } from "../../hooks/useSolvedModal";
 import {
   TerminalActionTypes,
   initialTerminalState,
@@ -27,8 +27,7 @@ import * as styles from "./quiz.css";
 export default function QuizPage({ quiz }: { quiz: Quiz }) {
   const [{ terminalMode, editorFile, contentArray }, terminalDispatch] =
     useReducer(terminalReducer, initialTerminalState);
-  const [shareLink, setShareLink] = useState("");
-  const solvedModal = useModal();
+  const solvedModal = useSolvedModal();
 
   const {
     query: { id },
@@ -65,8 +64,7 @@ export default function QuizPage({ quiz }: { quiz: Quiz }) {
     try {
       const response = await quizAPI.submit(+id);
       if (response.solved) {
-        setShareLink(response.link);
-        solvedModal.openModal();
+        solvedModal.onSolved(response.link);
         return;
       }
       toast.error("다시 풀어보세요!");
@@ -156,7 +154,7 @@ export default function QuizPage({ quiz }: { quiz: Quiz }) {
       </main>
       {solvedModal.modalOpen && (
         <SolvedModal
-          link={shareLink}
+          link={solvedModal.shareLink}
           onClose={solvedModal.closeModal}
           onNextQuiz={console.log}
         />