From 5b69de921e26515916d3741e9dfb3ab2d764e1a1 Mon Sep 17 00:00:00 2001
From: leegwae <leegwae@gmail.com>
Date: Thu, 28 Sep 2023 23:17:26 +0900
Subject: [PATCH] =?UTF-8?q?refactor(qa-modal):=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=ED=97=A4=EB=8D=94=EB=A5=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EB=B6=84=EB=A6=AC=ED=95=9C=EB=8B=A4=20(#4?=
 =?UTF-8?q?71)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/panel/QAModal.tsx | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/panel/QAModal.tsx b/src/components/panel/QAModal.tsx
index ab48ecf..aabe136 100644
--- a/src/components/panel/QAModal.tsx
+++ b/src/components/panel/QAModal.tsx
@@ -137,13 +137,7 @@ export function QAModal({
       aria-label="질문과 답변 모달"
       className="fixed inset-0 flex flex-col gap-6 overflow-auto justify-start bg-white"
     >
-      <header className="flex justify-start items-center gap-2 bg-primary-dark shadow-md px-3 min-h-[64px]">
-        <button type="button" className="rounded-full p-1" onClick={close}>
-          <ArrowBack className="fill-white" />
-          <span className="sr-only">뒤로 가기</span>
-        </button>
-        <span className="text-white">{panel.title}</span>
-      </header>
+      <ModalHeader title={panel.title} onGoBackButtonClick={close} />
       <QuestionItem
         question={question}
         isActived={isActived}
@@ -270,3 +264,25 @@ export function QAModal({
     </div>
   );
 }
+
+function ModalHeader({
+  title,
+  onGoBackButtonClick,
+}: {
+  title: string;
+  onGoBackButtonClick: () => void;
+}): JSX.Element {
+  return (
+    <header className="flex justify-start items-center gap-2 bg-primary-dark shadow-md px-3 min-h-[64px]">
+      <button
+        type="button"
+        className="rounded-full p-1"
+        onClick={onGoBackButtonClick}
+      >
+        <ArrowBack className="fill-white" />
+        <span className="sr-only">뒤로 가기</span>
+      </button>
+      <span className="text-white">{title}</span>
+    </header>
+  );
+}