[FE] feat: 문제 보여주기

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;
+}

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,
 });

frontEnd/src/components/room/QuizViewSection.tsx

@@ -1,19 +1,40 @@
+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';
+import ClickToQuizInput from './quizView/ClickToQuizInput';
+import QuizIframe from './quizView/QuizIframe';
+import Loading from './quizView/Loading';
 
 export default function QuizViewSection() {
-  const { show, hide } = useModal(LinkInputModal);
+  const [url, setURL] = useState('');
+  const { show: showLinkInputModal } = useModal(LinkInputModal);
+  const { data, isLoading } = useQuery({ queryKey: [QUERY_KEYS, url], queryFn: () => getQuizData(url), enabled: !!url });
+
+  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>
+    );
+
+  if (isLoading) return <Loading />;
+
   return (
-    <button
-      type="button"
-      className="flex items-center justify-center w-full h-full text-white rounded-lg bg-primary "
-      onClick={() => show({ hide })}
-    >
-      <div className="flex gap-2">
-        <img src={clickSrc} width="20px" alt="clickIcon" />
-        <div>클릭해서 링크 입력하기</div>
+    <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>
-    </button>
+      <QuizIframe htmlData={data} />
+    </div>
   );
 }

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();
   };
 

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>
+  );
+}

frontEnd/src/components/room/quizView/Loading.tsx

@@ -0,0 +1,27 @@
+export default function Loading() {
+  return (
+    <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" />
+          <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 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>
+    </div>
+  );
+}

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>
+  );
+}

frontEnd/src/constants/queryKeys.ts

@@ -1,4 +1,5 @@
 const QUERY_KEYS = {
   LOAD_CODES: 'codes',
+  QUIZ: 'quiz',
 };
 export default QUERY_KEYS;