From f75db41878dbcc0a98a702085a78e673bea92e1f Mon Sep 17 00:00:00 2001
From: d0422 <rlfehd2013@naver.com>
Date: Tue, 28 Nov 2023 19:29:02 +0900
Subject: [PATCH 1/6] =?UTF-8?q?feat:=20[FE]=20=ED=80=B4=EC=A6=88=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=EB=A5=BC=20=EB=B0=9B=EC=95=84=EC=98=A4?=
 =?UTF-8?q?=EB=8A=94=20=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84=20=ED=80=B4?=
 =?UTF-8?q?=EC=A6=88=EB=8D=B0=EC=9D=B4=ED=84=B0=EB=A5=BC=20=EB=B0=9B?=
 =?UTF-8?q?=EC=95=84=EC=98=A4=EB=8A=94=20=ED=95=A8=EC=88=98=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20(#151)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontEnd/src/apis/getQuizData.ts | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 frontEnd/src/apis/getQuizData.ts

diff --git a/frontEnd/src/apis/getQuizData.ts b/frontEnd/src/apis/getQuizData.ts
new file mode 100644
index 0000000..998bf85
--- /dev/null
+++ b/frontEnd/src/apis/getQuizData.ts
@@ -0,0 +1,6 @@
+import Request from './Request';
+
+export default async function getQuizData(problemURL: string) {
+  const result = await Request.get(`/cache?url=${problemURL}`);
+  return result.data;
+}

From 2ec4a582de60ebe97f172f4120d32d4ae4a2c8fe Mon Sep 17 00:00:00 2001
From: d0422 <rlfehd2013@naver.com>
Date: Tue, 28 Nov 2023 19:34:26 +0900
Subject: [PATCH 2/6] =?UTF-8?q?feat:=20[FE]=20=EA=B3=B5=ED=86=B5=20Dark?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80=20=EA=B3=B5=ED=86=B5=20?=
 =?UTF-8?q?Dark=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontEnd/src/components/common/Button.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontEnd/src/components/common/Button.tsx b/frontEnd/src/components/common/Button.tsx
index 0e33ba2..4a24a39 100644
--- a/frontEnd/src/components/common/Button.tsx
+++ b/frontEnd/src/components/common/Button.tsx
@@ -40,7 +40,20 @@ function White({ children, onClick, fontSize }: ButtonProps) {
   return (
     <button
       type="button"
-      className="border-2 border-light-gray text-gray rounded-[15px] px-[1.6vw] py-[14px]"
+      className="border-2 border-light-gray text-gray rounded-[15px] px-[1.6vw] py-[14px] bg-white"
+      onClick={onClick}
+      style={{ fontSize }}
+    >
+      {children}
+    </button>
+  );
+}
+
+function Dark({ children, onClick, fontSize }: ButtonProps) {
+  return (
+    <button
+      type="button"
+      className="text-gray rounded-[15px] px-[1.6vw] py-[14px] bg-secondary text-white"
       onClick={onClick}
       style={{ fontSize }}
     >
@@ -53,4 +66,5 @@ export default Object.assign(Button, {
   Default,
   Full,
   White,
+  Dark,
 });

From ec5d768fd51235e29bf61affff0b5846db290be3 Mon Sep 17 00:00:00 2001
From: d0422 <rlfehd2013@naver.com>
Date: Tue, 28 Nov 2023 19:37:22 +0900
Subject: [PATCH 3/6] =?UTF-8?q?feat:=20[FE]=20=EB=AC=B8=EC=A0=9C=EB=A5=BC?=
 =?UTF-8?q?=20=EB=AA=A8=EB=8B=AC=EB=A1=9C=20=EC=9E=85=EB=A0=A5=EB=B0=9B?=
 =?UTF-8?q?=EA=B3=A0=20=EB=B3=B4=EC=97=AC=EC=A3=BC=EB=8A=94=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=EC=B6=94=EA=B0=80=20=EB=AC=B8=EC=A0=9C=EB=A5=BC=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=EB=A1=9C=20=EC=9E=85=EB=A0=A5=EB=B0=9B?=
 =?UTF-8?q?=EA=B3=A0=20=EB=B3=B4=EC=97=AC=EC=A3=BC=EB=8A=94=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=EC=B6=94=EA=B0=80=20=EB=B3=80=EA=B2=BD=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=EC=9D=84=20=EB=88=8C=EB=9F=AC=20?=
 =?UTF-8?q?=EB=8B=A4=EC=8B=9C=20=EC=9E=85=EB=A0=A5=EB=B0=9B=EA=B3=A0,=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20(#151)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/room/QuizViewSection.tsx   | 73 +++++++++++++++++--
 .../components/room/modal/LinkInputModal.tsx  |  3 +-
 frontEnd/src/constants/queryKeys.ts           |  1 +
 3 files changed, 69 insertions(+), 8 deletions(-)

diff --git a/frontEnd/src/components/room/QuizViewSection.tsx b/frontEnd/src/components/room/QuizViewSection.tsx
index 0a2ecff..438e2f1 100644
--- a/frontEnd/src/components/room/QuizViewSection.tsx
+++ b/frontEnd/src/components/room/QuizViewSection.tsx
@@ -1,19 +1,78 @@
+import { useEffect, useRef, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import useModal from '@/hooks/useModal';
 import LinkInputModal from './modal/LinkInputModal';
 import clickSrc from '@/assets/click.svg';
+import QUERY_KEYS from '@/constants/queryKeys';
+import getQuizData from '@/apis/getQuizData';
+import Button from '../common/Button';
+
+const overFlowXHidden = (document: Document) => {
+  document.body.style.overflowX = 'hidden';
+};
+const clickDisable = (document: Document) => {
+  document.body.addEventListener(
+    'click',
+    (e) => {
+      e.preventDefault();
+    },
+    true,
+  );
+};
+
+function ClickToQuizInput() {
+  return (
+    <div className="flex gap-2">
+      <img src={clickSrc} width="20px" alt="clickIcon" />
+      <div>클릭해서 링크 입력하기</div>
+    </div>
+  );
+}
+
+function QuizView({ htmlData }: { htmlData?: string }) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    const handleLoad = () => {
+      const innerDocument = iframe?.contentDocument;
+      if (innerDocument) {
+        overFlowXHidden(innerDocument);
+        clickDisable(innerDocument);
+      }
+    };
+    if (iframe && htmlData) {
+      iframe.srcdoc = htmlData;
+      iframe.onload = handleLoad;
+    }
+  }, [htmlData]);
 
-export default function QuizViewSection() {
-  const { show, hide } = useModal(LinkInputModal);
   return (
+    <div className="w-full h-[90%]">
+      <iframe ref={iframeRef} title="quiz" className="flex items-center justify-center w-full h-full overflow-hidden text-white" />
+    </div>
+  );
+}
+
+export default function QuizViewSection() {
+  const [url, setURL] = useState('');
+  const { show: showLinkInputModal } = useModal(LinkInputModal);
+  const { data } = useQuery({ queryKey: [QUERY_KEYS, url], queryFn: () => getQuizData(url), enabled: !!url });
+  return url === '' && !data ? (
     <button
       type="button"
       className="flex items-center justify-center w-full h-full text-white rounded-lg bg-primary "
-      onClick={() => show({ hide })}
+      onClick={() => showLinkInputModal({ setURL })}
     >
-      <div className="flex gap-2">
-        <img src={clickSrc} width="20px" alt="clickIcon" />
-        <div>클릭해서 링크 입력하기</div>
-      </div>
+      <ClickToQuizInput />
     </button>
+  ) : (
+    <div className="flex flex-col w-full h-full gap-2 p-4 rounded-lg ovelrflow-hidden bg-primary">
+      <div className="flex justify-end w-full">
+        <Button.Dark fontSize="0.8rem" onClick={() => showLinkInputModal({ setURL })}>
+          변경하기
+        </Button.Dark>
+      </div>
+      <QuizView htmlData={data} />
+    </div>
   );
 }
diff --git a/frontEnd/src/components/room/modal/LinkInputModal.tsx b/frontEnd/src/components/room/modal/LinkInputModal.tsx
index 58b07a8..55bec90 100644
--- a/frontEnd/src/components/room/modal/LinkInputModal.tsx
+++ b/frontEnd/src/components/room/modal/LinkInputModal.tsx
@@ -2,12 +2,13 @@ import useFocus from '@/hooks/useFocus';
 import useInput from '@/hooks/useInput';
 import useModal from '@/hooks/useModal';
 
-export default function LinkInputModal() {
+export default function LinkInputModal({ setURL }: { setURL: React.Dispatch<React.SetStateAction<string>> }) {
   const inputRef = useFocus<HTMLInputElement>();
   const { inputValue, onChange } = useInput('');
   const { hide } = useModal();
 
   const handleOK = () => {
+    setURL(inputValue);
     hide();
   };
 
diff --git a/frontEnd/src/constants/queryKeys.ts b/frontEnd/src/constants/queryKeys.ts
index e7a9153..89e62cb 100644
--- a/frontEnd/src/constants/queryKeys.ts
+++ b/frontEnd/src/constants/queryKeys.ts
@@ -1,4 +1,5 @@
 const QUERY_KEYS = {
   LOAD_CODES: 'codes',
+  QUIZ: 'quiz',
 };
 export default QUERY_KEYS;

From 8cc503b25bd2f555fda9e30141be0a1f3a2c6e73 Mon Sep 17 00:00:00 2001
From: d0422 <rlfehd2013@naver.com>
Date: Tue, 28 Nov 2023 19:46:40 +0900
Subject: [PATCH 4/6] =?UTF-8?q?refactor:=20[FE]=20QuizViewSection=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=8C=8C=EC=9D=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC=20QuizViewSection=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=ED=8C=8C=EC=9D=BC=EB=A1=9C=20=EB=B6=84=EB=A6=AC=20?=
 =?UTF-8?q?(#151)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/room/QuizViewSection.tsx   | 75 +++++--------------
 .../room/quizView/ClickToQuizInput.tsx        | 10 +++
 .../components/room/quizView/QuizIframe.tsx   | 39 ++++++++++
 3 files changed, 66 insertions(+), 58 deletions(-)
 create mode 100644 frontEnd/src/components/room/quizView/ClickToQuizInput.tsx
 create mode 100644 frontEnd/src/components/room/quizView/QuizIframe.tsx

diff --git a/frontEnd/src/components/room/QuizViewSection.tsx b/frontEnd/src/components/room/QuizViewSection.tsx
index 438e2f1..a59798e 100644
--- a/frontEnd/src/components/room/QuizViewSection.tsx
+++ b/frontEnd/src/components/room/QuizViewSection.tsx
@@ -1,78 +1,37 @@
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import useModal from '@/hooks/useModal';
 import LinkInputModal from './modal/LinkInputModal';
-import clickSrc from '@/assets/click.svg';
 import QUERY_KEYS from '@/constants/queryKeys';
 import getQuizData from '@/apis/getQuizData';
 import Button from '../common/Button';
-
-const overFlowXHidden = (document: Document) => {
-  document.body.style.overflowX = 'hidden';
-};
-const clickDisable = (document: Document) => {
-  document.body.addEventListener(
-    'click',
-    (e) => {
-      e.preventDefault();
-    },
-    true,
-  );
-};
-
-function ClickToQuizInput() {
-  return (
-    <div className="flex gap-2">
-      <img src={clickSrc} width="20px" alt="clickIcon" />
-      <div>클릭해서 링크 입력하기</div>
-    </div>
-  );
-}
-
-function QuizView({ htmlData }: { htmlData?: string }) {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  useEffect(() => {
-    const iframe = iframeRef.current;
-    const handleLoad = () => {
-      const innerDocument = iframe?.contentDocument;
-      if (innerDocument) {
-        overFlowXHidden(innerDocument);
-        clickDisable(innerDocument);
-      }
-    };
-    if (iframe && htmlData) {
-      iframe.srcdoc = htmlData;
-      iframe.onload = handleLoad;
-    }
-  }, [htmlData]);
-
-  return (
-    <div className="w-full h-[90%]">
-      <iframe ref={iframeRef} title="quiz" className="flex items-center justify-center w-full h-full overflow-hidden text-white" />
-    </div>
-  );
-}
+import ClickToQuizInput from './quizView/ClickToQuizInput';
+import QuizIframe from './quizView/QuizIframe';
 
 export default function QuizViewSection() {
   const [url, setURL] = useState('');
   const { show: showLinkInputModal } = useModal(LinkInputModal);
   const { data } = useQuery({ queryKey: [QUERY_KEYS, url], queryFn: () => getQuizData(url), enabled: !!url });
-  return url === '' && !data ? (
-    <button
-      type="button"
-      className="flex items-center justify-center w-full h-full text-white rounded-lg bg-primary "
-      onClick={() => showLinkInputModal({ setURL })}
-    >
-      <ClickToQuizInput />
-    </button>
-  ) : (
+
+  if (url === '' && !data)
+    return (
+      <button
+        type="button"
+        className="flex items-center justify-center w-full h-full text-white rounded-lg bg-primary "
+        onClick={() => showLinkInputModal({ setURL })}
+      >
+        <ClickToQuizInput />
+      </button>
+    );
+
+  return (
     <div className="flex flex-col w-full h-full gap-2 p-4 rounded-lg ovelrflow-hidden bg-primary">
       <div className="flex justify-end w-full">
         <Button.Dark fontSize="0.8rem" onClick={() => showLinkInputModal({ setURL })}>
           변경하기
         </Button.Dark>
       </div>
-      <QuizView htmlData={data} />
+      <QuizIframe htmlData={data} />
     </div>
   );
 }
diff --git a/frontEnd/src/components/room/quizView/ClickToQuizInput.tsx b/frontEnd/src/components/room/quizView/ClickToQuizInput.tsx
new file mode 100644
index 0000000..ffd4be3
--- /dev/null
+++ b/frontEnd/src/components/room/quizView/ClickToQuizInput.tsx
@@ -0,0 +1,10 @@
+import clickSrc from '@/assets/click.svg';
+
+export default function ClickToQuizInput() {
+  return (
+    <div className="flex gap-2">
+      <img src={clickSrc} width="20px" alt="clickIcon" />
+      <div>클릭해서 링크 입력하기</div>
+    </div>
+  );
+}
diff --git a/frontEnd/src/components/room/quizView/QuizIframe.tsx b/frontEnd/src/components/room/quizView/QuizIframe.tsx
new file mode 100644
index 0000000..82177eb
--- /dev/null
+++ b/frontEnd/src/components/room/quizView/QuizIframe.tsx
@@ -0,0 +1,39 @@
+import { useEffect, useRef } from 'react';
+
+const overFlowXHidden = (document: Document) => {
+  document.body.style.overflowX = 'hidden';
+};
+
+const clickDisable = (document: Document) => {
+  document.body.addEventListener(
+    'click',
+    (e) => {
+      e.preventDefault();
+    },
+    true,
+  );
+};
+
+export default function QuizIframe({ htmlData }: { htmlData?: string }) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    const handleLoad = () => {
+      const innerDocument = iframe?.contentDocument;
+      if (innerDocument) {
+        overFlowXHidden(innerDocument);
+        clickDisable(innerDocument);
+      }
+    };
+    if (iframe && htmlData) {
+      iframe.srcdoc = htmlData;
+      iframe.onload = handleLoad;
+    }
+  }, [htmlData]);
+
+  return (
+    <div className="w-full h-[90%]">
+      <iframe ref={iframeRef} title="quiz" className="flex items-center justify-center w-full h-full overflow-hidden text-white" />
+    </div>
+  );
+}

From 480f9012aee8803dad8c4ab73b205ecc58b40fe0 Mon Sep 17 00:00:00 2001
From: d0422 <rlfehd2013@naver.com>
Date: Tue, 28 Nov 2023 20:42:50 +0900
Subject: [PATCH 5/6] =?UTF-8?q?feat:=20[FE]=20=EB=AC=B8=EC=A0=9C=20?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=EC=A4=91=20=EB=A1=9C=EB=94=A9=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20=EB=B3=B4=EC=97=AC?=
 =?UTF-8?q?=EC=A3=BC=EB=8F=84=EB=A1=9D=20=EC=B2=98=EB=A6=AC=20=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C=20=EB=A1=9C=EB=93=9C=EC=A4=91=20=EB=A1=9C=EB=94=A9=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20=EB=B3=B4?=
 =?UTF-8?q?=EC=97=AC=EC=A3=BC=EB=8F=84=EB=A1=9D=20=EC=B2=98=EB=A6=AC=20(#1?=
 =?UTF-8?q?51)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/room/QuizViewSection.tsx   |  5 ++++-
 .../src/components/room/quizView/Loading.tsx  | 22 +++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 frontEnd/src/components/room/quizView/Loading.tsx

diff --git a/frontEnd/src/components/room/QuizViewSection.tsx b/frontEnd/src/components/room/QuizViewSection.tsx
index a59798e..a508bb5 100644
--- a/frontEnd/src/components/room/QuizViewSection.tsx
+++ b/frontEnd/src/components/room/QuizViewSection.tsx
@@ -7,11 +7,12 @@ import getQuizData from '@/apis/getQuizData';
 import Button from '../common/Button';
 import ClickToQuizInput from './quizView/ClickToQuizInput';
 import QuizIframe from './quizView/QuizIframe';
+import Loading from './quizView/Loading';
 
 export default function QuizViewSection() {
   const [url, setURL] = useState('');
   const { show: showLinkInputModal } = useModal(LinkInputModal);
-  const { data } = useQuery({ queryKey: [QUERY_KEYS, url], queryFn: () => getQuizData(url), enabled: !!url });
+  const { data, isLoading } = useQuery({ queryKey: [QUERY_KEYS, url], queryFn: () => getQuizData(url), enabled: !!url });
 
   if (url === '' && !data)
     return (
@@ -24,6 +25,8 @@ export default function QuizViewSection() {
       </button>
     );
 
+  if (isLoading) return <Loading />;
+
   return (
     <div className="flex flex-col w-full h-full gap-2 p-4 rounded-lg ovelrflow-hidden bg-primary">
       <div className="flex justify-end w-full">
diff --git a/frontEnd/src/components/room/quizView/Loading.tsx b/frontEnd/src/components/room/quizView/Loading.tsx
new file mode 100644
index 0000000..d3f2a55
--- /dev/null
+++ b/frontEnd/src/components/room/quizView/Loading.tsx
@@ -0,0 +1,22 @@
+export default function Loading() {
+  return (
+    <div className="flex flex-col items-center justify-center w-full h-full p-4 mx-auto border rounded-md shadow bg-primary">
+      <div className="flex flex-col justify-center w-full">
+        <div className="flex flex-col justify-center gap-8 animate-pulse">
+          <div className="h-3 rounded bg-slate-200" />
+          <div className="flex-1 py-1 space-y-6">
+            <div className="h-3 rounded bg-slate-200" />
+            <div className="space-y-3">
+              <div className="grid grid-cols-3 gap-4">
+                <div className="h-3 col-span-2 rounded bg-slate-200" />
+                <div className="h-3 col-span-1 rounded bg-slate-200" />
+              </div>
+              <div className="h-3 rounded bg-slate-200" />
+              <div className="h-3 rounded bg-slate-200" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

From cf1d28e14f1f2c1b81e7024c227b90b561bd021e Mon Sep 17 00:00:00 2001
From: d0422 <rlfehd2013@naver.com>
Date: Tue, 28 Nov 2023 20:48:44 +0900
Subject: [PATCH 6/6] =?UTF-8?q?chore:=20[FE]=20=EB=A1=9C=EB=94=A9=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B0=9C=EC=84=A0=20?=
 =?UTF-8?q?=EB=A1=9C=EB=94=A9=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0=20(#151)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontEnd/src/components/room/quizView/Loading.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontEnd/src/components/room/quizView/Loading.tsx b/frontEnd/src/components/room/quizView/Loading.tsx
index d3f2a55..c6beca9 100644
--- a/frontEnd/src/components/room/quizView/Loading.tsx
+++ b/frontEnd/src/components/room/quizView/Loading.tsx
@@ -1,6 +1,6 @@
 export default function Loading() {
   return (
-    <div className="flex flex-col items-center justify-center w-full h-full p-4 mx-auto border rounded-md shadow bg-primary">
+    <div className="flex flex-col items-center justify-center w-full h-full px-12 border rounded-md shadow mx4-auto bg-primary">
       <div className="flex flex-col justify-center w-full">
         <div className="flex flex-col justify-center gap-8 animate-pulse">
           <div className="h-3 rounded bg-slate-200" />
@@ -14,6 +14,11 @@ export default function Loading() {
               <div className="h-3 rounded bg-slate-200" />
               <div className="h-3 rounded bg-slate-200" />
             </div>
+            <div className="h-3 rounded bg-slate-200" />
+            <div className="grid grid-cols-3 gap-4">
+              <div className="h-3 col-span-1 rounded bg-slate-200" />
+              <div className="h-3 col-span-2 rounded bg-slate-200" />
+            </div>
           </div>
         </div>
       </div>