From b895007c8d454301a062dd40e5d56b66dcd34773 Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Mon, 18 Nov 2024 00:55:32 +0900
Subject: [PATCH] =?UTF-8?q?[#288]feat:=20css=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.css                                 |   1 -
 .../Visualization/Visualization.module.css    |   2 +-
 src/pages/Visualization/Visualization.tsx     |  64 ++++-----
 .../Visualization/VisualizationClassroom.tsx  | 128 +++++++++---------
 4 files changed, 100 insertions(+), 95 deletions(-)

diff --git a/src/index.css b/src/index.css
index 2867f507..22fd6d3f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -33,7 +33,6 @@ body {
   margin: 0; /* 기본 마진 제거 */
   background-color: #f9fafb;
   height: 100%;
-  overflow: hidden;
 }
 #root {
   height: 100%;
diff --git a/src/pages/Visualization/Visualization.module.css b/src/pages/Visualization/Visualization.module.css
index 1e29c14f..79843173 100644
--- a/src/pages/Visualization/Visualization.module.css
+++ b/src/pages/Visualization/Visualization.module.css
@@ -1,7 +1,7 @@
 .main {
   display: flex;
   flex-direction: column;
-  height: 93vh;
+  height: 100%;
   width: 100%;
 }
 .s__select {
diff --git a/src/pages/Visualization/Visualization.tsx b/src/pages/Visualization/Visualization.tsx
index 969fcfc8..30a24741 100644
--- a/src/pages/Visualization/Visualization.tsx
+++ b/src/pages/Visualization/Visualization.tsx
@@ -38,39 +38,41 @@ export default function Visualization() {
   return (
     <CodeContext.Provider value={{ code, setCode }}>
       <PreprocessedCodesContext.Provider value={{ preprocessedCodes, setPreprocessedCodes }}>
-        <Header />
-        <main className={styles.main}>
-          {focus && gptPin ? <GptIcon /> : (gptPin || isGptToggle) && <GptComment />}
+        <div style={{ overflow: "hidden", height: "100%" }}>
+          <Header />
+          <main className={styles.main}>
+            {focus && gptPin ? <GptIcon /> : (gptPin || isGptToggle) && <GptComment />}
 
-          <Split
-            sizes={[30, 70]}
-            minSize={100}
-            expandToMin={false}
-            gutterSize={10}
-            gutterAlign="center"
-            snapOffset={30}
-            dragInterval={1}
-            direction="horizontal"
-            cursor="col-resize"
-            style={{ display: "flex", width: "100%", height: "100%" }}
-          >
-            <LeftSection />
-            <RightSection />
-          </Split>
-          <div className="floating-buttons">
-            <Link
-              className="btn btn-manual"
-              to="https://yielding-radio-61a.notion.site/edupi-13d86552b15980e4b359f38854d2b094?pvs=4"
-              target="_blank"
+            <Split
+              sizes={[30, 70]}
+              minSize={100}
+              expandToMin={false}
+              gutterSize={10}
+              gutterAlign="center"
+              snapOffset={30}
+              dragInterval={1}
+              direction="horizontal"
+              cursor="col-resize"
+              style={{ display: "flex", width: "100%", height: "100%" }}
             >
-              <img
-                src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18v16H3z'%3E%3C/path%3E%3Cpath d='M8 4v16M16 4v16'%3E%3C/path%3E%3C/svg%3E"
-                alt="완료 아이콘"
-              />
-              사용법
-            </Link>
-          </div>
-        </main>
+              <LeftSection />
+              <RightSection />
+            </Split>
+            <div className="floating-buttons">
+              <Link
+                className="btn btn-manual"
+                to="https://yielding-radio-61a.notion.site/edupi-13d86552b15980e4b359f38854d2b094?pvs=4"
+                target="_blank"
+              >
+                <img
+                  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18v16H3z'%3E%3C/path%3E%3Cpath d='M8 4v16M16 4v16'%3E%3C/path%3E%3C/svg%3E"
+                  alt="완료 아이콘"
+                />
+                사용법
+              </Link>
+            </div>
+          </main>
+        </div>
       </PreprocessedCodesContext.Provider>
     </CodeContext.Provider>
   );
diff --git a/src/pages/Visualization/VisualizationClassroom.tsx b/src/pages/Visualization/VisualizationClassroom.tsx
index eef3599e..52225674 100644
--- a/src/pages/Visualization/VisualizationClassroom.tsx
+++ b/src/pages/Visualization/VisualizationClassroom.tsx
@@ -34,11 +34,13 @@ interface ClassAccessRightDataType {
 
 const VisualizationClassroom = () => {
   const [code, setCode] = useState<any>(
-      ["# example\n" +
-      "for i in range(2, 10):\n" +
-      "   for j in range(1, 10):\n" +
-      "      print(f\"{i} x {j} = {i * j}\")\n" +
-      "   print()\n"].join("\n")
+    [
+      "# example\n" +
+        "for i in range(2, 10):\n" +
+        "   for j in range(1, 10):\n" +
+        '      print(f"{i} x {j} = {i * j}")\n' +
+        "   print()\n",
+    ].join("\n")
   );
   const [preprocessedCodes, setPreprocessedCodes] = useState<ValidTypeDto[]>([]);
   const navigate = useNavigate();
@@ -101,65 +103,67 @@ const VisualizationClassroom = () => {
   return (
     <CodeContext.Provider value={{ code, setCode }}>
       <PreprocessedCodesContext.Provider value={{ preprocessedCodes, setPreprocessedCodes }}>
-        <Header />
+        <div style={{ overflow: "hidden", height: "100%" }}>
+          <Header />
 
-        <main className={styles.main}>
-          {focus && gptPin ? <GptIcon /> : (gptPin || isGptToggle) && <GptComment />}
+          <main className={styles.main}>
+            {focus && gptPin ? <GptIcon /> : (gptPin || isGptToggle) && <GptComment />}
 
-          <Split
-            sizes={[30, 70]}
-            minSize={100}
-            expandToMin={false}
-            gutterSize={10}
-            gutterAlign="center"
-            snapOffset={30}
-            dragInterval={1}
-            direction="horizontal"
-            cursor="col-resize"
-            style={{ display: "flex", width: "99vw", height: "100%" }}
-          >
-            <LeftSection />
-            <RightSection />
-          </Split>
-          <div className="floating-buttons">
-            {guestStatus?.result === ActionType.HELP && (
-              <button className="btn btn-cancel" onClick={handelIngRequest}>
-                <img
-                  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18'%3E%3C/path%3E%3Cpath d='M6 6l12 12'%3E%3C/path%3E%3C/svg%3E"
-                  alt="취소 아이콘"
-                />
-                취소
-              </button>
-            )}
-            {guestStatus?.result === ActionType.ING && (
-              <button className="btn btn-help" onClick={handleHelpRequest}>
-                <img
-                  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E"
-                  alt="도움말 아이콘"
-                />
-                도움 요청
-              </button>
-            )}
-            {guestStatus?.result === ActionType.ING && (
-              <button className="btn btn-complete" onClick={handleCompleteRequest}>
-                <img
-                  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E"
-                  alt="완료 아이콘"
-                />
-                완료
-              </button>
-            )}
-            {guestStatus?.result === ActionType.COMPLETE && (
-              <button className="btn btn-cancel" onClick={handelIngRequest}>
-                <img
-                  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18'%3E%3C/path%3E%3Cpath d='M6 6l12 12'%3E%3C/path%3E%3C/svg%3E"
-                  alt="취소 아이콘"
-                />
-                취소
-              </button>
-            )}
-          </div>
-        </main>
+            <Split
+              sizes={[30, 70]}
+              minSize={100}
+              expandToMin={false}
+              gutterSize={10}
+              gutterAlign="center"
+              snapOffset={30}
+              dragInterval={1}
+              direction="horizontal"
+              cursor="col-resize"
+              style={{ display: "flex", width: "100%", height: "100%" }}
+            >
+              <LeftSection />
+              <RightSection />
+            </Split>
+            <div className="floating-buttons">
+              {guestStatus?.result === ActionType.HELP && (
+                <button className="btn btn-cancel" onClick={handelIngRequest}>
+                  <img
+                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18'%3E%3C/path%3E%3Cpath d='M6 6l12 12'%3E%3C/path%3E%3C/svg%3E"
+                    alt="취소 아이콘"
+                  />
+                  취소
+                </button>
+              )}
+              {guestStatus?.result === ActionType.ING && (
+                <button className="btn btn-help" onClick={handleHelpRequest}>
+                  <img
+                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E"
+                    alt="도움말 아이콘"
+                  />
+                  도움 요청
+                </button>
+              )}
+              {guestStatus?.result === ActionType.ING && (
+                <button className="btn btn-complete" onClick={handleCompleteRequest}>
+                  <img
+                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E"
+                    alt="완료 아이콘"
+                  />
+                  완료
+                </button>
+              )}
+              {guestStatus?.result === ActionType.COMPLETE && (
+                <button className="btn btn-cancel" onClick={handelIngRequest}>
+                  <img
+                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18'%3E%3C/path%3E%3Cpath d='M6 6l12 12'%3E%3C/path%3E%3C/svg%3E"
+                    alt="취소 아이콘"
+                  />
+                  취소
+                </button>
+              )}
+            </div>
+          </main>
+        </div>
       </PreprocessedCodesContext.Provider>
     </CodeContext.Provider>
   );