From 392df7d2b1aeb5623061ac1fd93c113a5cbea4f7 Mon Sep 17 00:00:00 2001
From: GS_song98 <20003204@sju.ac.kr>
Date: Fri, 15 Nov 2024 12:51:53 +0900
Subject: [PATCH 01/41] =?UTF-8?q?[#279]fix:=20=EB=A1=9C=EA=B3=A0=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 8f51f5f9..832f5ebd 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/image/vite.png" />
     <script async src="https://www.googletagmanager.com/gtag/js?id=AW-16773927965"></script>
     <script>
       window.dataLayer = window.dataLayer || [];

From d13d7f625ee60b0f328b812146a03cf87549708b Mon Sep 17 00:00:00 2001
From: GS_song98 <20003204@sju.ac.kr>
Date: Fri, 15 Nov 2024 12:52:51 +0900
Subject: [PATCH 02/41] =?UTF-8?q?[#279]feat:=20=ED=95=99=EC=83=9D=20?=
 =?UTF-8?q?=EB=8F=84=EC=9B=80,=20=EC=99=84=EB=A3=8C=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=EB=88=84=EB=A5=B4=EB=A9=B4=20=EC=BD=94=EB=93=9C=20=EB=B3=B4?=
 =?UTF-8?q?=EB=82=B4=EC=84=9C=20=EC=A0=80=EC=9E=A5=ED=95=98=EA=B3=A0,=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=EC=B0=BD=20=EB=94=94=EC=9E=90=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.css                                   |   3 +
 src/pages/Classroom/Classroom.tsx             |   5 +
 .../components/ClassroomModal.module.css      | 142 ++++++++++++++++++
 .../Classroom/components/ClassroomModal.tsx   |  59 ++++++++
 .../Visualization/VisualizationClassroom.tsx  |  13 +-
 src/services/api.ts                           |   1 +
 6 files changed, 216 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/Classroom/components/ClassroomModal.module.css
 create mode 100644 src/pages/Classroom/components/ClassroomModal.tsx

diff --git a/src/App.css b/src/App.css
index 8f5faa31..da9477b7 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1406,6 +1406,9 @@ header .group-btn {
 .btn-manual {
   background-color: #9a9a9a;
 }
+.btn-complete-summit {
+  background-color: #959595;
+}
 .btn img {
   width: 24px;
   height: 24px;
diff --git a/src/pages/Classroom/Classroom.tsx b/src/pages/Classroom/Classroom.tsx
index 855079db..541a918c 100644
--- a/src/pages/Classroom/Classroom.tsx
+++ b/src/pages/Classroom/Classroom.tsx
@@ -11,6 +11,7 @@ import {
   getClassAccessRightData,
 } from "@/services/api";
 import Header from "../components/Header";
+import ClassroomModal from "@/pages/Classroom/components/ClassroomModal.tsx";
 
 const BASE_URL = import.meta.env.VITE_APP_BACKEND_BASE_URL;
 
@@ -55,6 +56,7 @@ const Classroom = () => {
   const params = useParams();
   const classroomId = Number(params.classroomId);
   const setIsHost = useAccessRightStore((state) => state.setIsHost);
+  const [isConsentInformationModalOpen, setIsConsentInformationModalOpen] = useState<boolean>(false);
 
   const { data: guestData, refetch: guestDataRefetch } = useQuery<ClassroomDataType>({
     queryKey: ["classGuestData", classroomId],
@@ -153,9 +155,12 @@ const Classroom = () => {
   };
 
   useSSE(`${BASE_URL}/edupi-lms/v1/progress/connect?classroomId=${classroomId}`);
+  const closeConsentInformationModal = (): void => setIsConsentInformationModalOpen(false);
+
   return (
     <div>
       <Header />
+      <ClassroomModal isOpen={true} onClose={closeConsentInformationModal} userName={"송관석"} email={"kho6812@naver.com"} code={"a = 10\nprint(a)\n"}/>
       <div className="group-wrap">
         <div className="group-left">
           <img src="/image/icon_group.svg" alt="그룹" />
diff --git a/src/pages/Classroom/components/ClassroomModal.module.css b/src/pages/Classroom/components/ClassroomModal.module.css
new file mode 100644
index 00000000..e03cad68
--- /dev/null
+++ b/src/pages/Classroom/components/ClassroomModal.module.css
@@ -0,0 +1,142 @@
+.popup__section {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: none;
+}
+
+.popup__section.is-open {
+  display: block;
+}
+
+.popup__dim {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.popup__inner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%;
+  max-width: 600px;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
+}
+
+.popup__inner.is-open {
+  opacity: 1;
+  visibility: visible;
+}
+
+.popup__container__group {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.popup__header__group {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.popup__header__title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+  margin: 0;
+}
+
+.popup__header__close {
+  background: none;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  position: relative;
+  width: 24px;
+  height: 24px;
+}
+
+.popup__header__close::before,
+.popup__header__close::after {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 2px;
+  background-color: #666;
+  top: 50%;
+  left: 50%;
+}
+
+.popup__header__close::before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.popup__header__close::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.screen-out {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.popup__contents__group {
+  padding: 20px;
+}
+
+.popup__content__title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 16px;
+}
+
+.popup__display__code {
+  background-color: #f8f9fa;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  padding: 16px;
+  margin: 0;
+  font-family: monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.code__line {
+  display: flex;
+  min-height: 24px;
+}
+
+.line__number {
+  color: #999;
+  text-align: right;
+  padding-right: 16px;
+  min-width: 40px;
+  user-select: none;
+}
+
+.line__content {
+  flex: 1;
+  white-space: pre;
+}
\ No newline at end of file
diff --git a/src/pages/Classroom/components/ClassroomModal.tsx b/src/pages/Classroom/components/ClassroomModal.tsx
new file mode 100644
index 00000000..e3be880c
--- /dev/null
+++ b/src/pages/Classroom/components/ClassroomModal.tsx
@@ -0,0 +1,59 @@
+import { useEffect } from "react";
+
+import styles from "./ClassroomModal.module.css";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  userName: string;
+  email: string;
+  code: string;
+}
+const ConsentInformationModal = ({ isOpen, onClose, userName, email, code }: Props) => {
+
+  useEffect(() => {
+    if (isOpen) {
+      // 모달이 열릴 때 body에 class를 추가합니다.
+      document.body.classList.add("scroll-off");
+    } else {
+      // 모달이 닫힐 때 body에서 class를 제거합니다.
+      document.body.classList.remove("scroll-off");
+    }
+
+    // 컴포넌트가 언마운트될 때 class를 제거합니다.
+    return () => {
+      document.body.classList.remove("scroll-off");
+    };
+  }, [isOpen]);
+
+  // if (!isOpen) return null;
+  return (
+    <div id="popupModal02" className="popup__section is-open" onClick={onClose}>
+      <div className="popup__dim"></div>
+      <div className="popup__inner is-open">
+        <div className="popup__container__group" onClick={(e) => e.stopPropagation()}>
+          <div className="popup__header__group">
+            <h2 className="popup__header__title">
+              {userName} ({email})
+            </h2>
+            <button className="popup__header__close" onClick={onClose}>
+              <span className="screen-out">닫기</span>
+            </button>
+          </div>
+          <div className={styles["popup__contents__group"]}>
+            <div className={styles["popup__content__title"]}>제출 코드</div>
+            <pre className={styles["popup__display__code"]}>
+              {code.split('\n').map((line, index) => (
+                <code key={index} className={styles["code__line"]}>
+                  <span className={styles["line__number"]}>{index + 1}</span>
+                  <span className={styles["line__content"]}>{line}</span>
+                </code>
+              ))}
+            </pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default ConsentInformationModal;
diff --git a/src/pages/Visualization/VisualizationClassroom.tsx b/src/pages/Visualization/VisualizationClassroom.tsx
index eef3599e..1ce021a3 100644
--- a/src/pages/Visualization/VisualizationClassroom.tsx
+++ b/src/pages/Visualization/VisualizationClassroom.tsx
@@ -89,14 +89,13 @@ const VisualizationClassroom = () => {
   };
   const guestActionMutation = useGuestActionMutation();
 
-  const handelIngRequest = () => {
-    guestActionMutation.mutate({ classroomId: classroomId, action: 1 });
+  const handelIngRequest = () => {7guestActionMutation.mutate({ classroomId: classroomId, action: 1, code: code });
   };
   const handleHelpRequest = () => {
-    guestActionMutation.mutate({ classroomId: classroomId, action: 2 });
+    guestActionMutation.mutate({ classroomId: classroomId, action: 2, code: code });
   };
   const handleCompleteRequest = () => {
-    guestActionMutation.mutate({ classroomId: classroomId, action: 3 });
+    guestActionMutation.mutate({ classroomId: classroomId, action: 3, code: code });
   };
   return (
     <CodeContext.Provider value={{ code, setCode }}>
@@ -123,12 +122,12 @@ const VisualizationClassroom = () => {
           </Split>
           <div className="floating-buttons">
             {guestStatus?.result === ActionType.HELP && (
-              <button className="btn btn-cancel" onClick={handelIngRequest}>
+              <button className="btn btn-complete-summit" disabled={true}>
                 <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="취소 아이콘"
+                  alt="제출 완료 아이콘"
                 />
-                취소
+                제출 완료
               </button>
             )}
             {guestStatus?.result === ActionType.ING && (
diff --git a/src/services/api.ts b/src/services/api.ts
index a121e242..8de9ada1 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -289,6 +289,7 @@ export const fetchGuestActionRequest = async (req: any) => {
       body: JSON.stringify({
         classroomId: req.classroomId,
         action: req.action,
+        code: req.code
       }),
     });
 

From 5cb63508a23616d0f0f956097d92f14c7f92bc14 Mon Sep 17 00:00:00 2001
From: GS_song98 <20003204@sju.ac.kr>
Date: Fri, 15 Nov 2024 12:52:51 +0900
Subject: [PATCH 03/41] =?UTF-8?q?[#279]feat:=20=ED=95=99=EC=83=9D=20?=
 =?UTF-8?q?=EB=8F=84=EC=9B=80,=20=EC=99=84=EB=A3=8C=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=EB=88=84=EB=A5=B4=EB=A9=B4=20=EC=BD=94=EB=93=9C=20=EB=B3=B4?=
 =?UTF-8?q?=EB=82=B4=EC=84=9C=20=EC=A0=80=EC=9E=A5=ED=95=98=EA=B3=A0,=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=EC=B0=BD=20=EB=94=94=EC=9E=90=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.css                                   |   3 +
 src/pages/Classroom/Classroom.tsx             |   5 +
 .../components/ClassroomModal.module.css      | 142 ++++++++++++++++++
 .../Classroom/components/ClassroomModal.tsx   |  59 ++++++++
 .../Visualization/VisualizationClassroom.tsx  |  12 +-
 src/services/api.ts                           |   1 +
 6 files changed, 216 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/Classroom/components/ClassroomModal.module.css
 create mode 100644 src/pages/Classroom/components/ClassroomModal.tsx

diff --git a/src/App.css b/src/App.css
index 8f5faa31..da9477b7 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1406,6 +1406,9 @@ header .group-btn {
 .btn-manual {
   background-color: #9a9a9a;
 }
+.btn-complete-summit {
+  background-color: #959595;
+}
 .btn img {
   width: 24px;
   height: 24px;
diff --git a/src/pages/Classroom/Classroom.tsx b/src/pages/Classroom/Classroom.tsx
index 529ca218..0a489193 100644
--- a/src/pages/Classroom/Classroom.tsx
+++ b/src/pages/Classroom/Classroom.tsx
@@ -11,6 +11,7 @@ import {
   getClassAccessRightData,
 } from "@/services/api";
 import Header from "../components/Header";
+import ClassroomModal from "@/pages/Classroom/components/ClassroomModal.tsx";
 
 const BASE_URL = import.meta.env.VITE_APP_BACKEND_BASE_URL;
 
@@ -55,6 +56,7 @@ const Classroom = () => {
   const params = useParams();
   const classroomId = Number(params.classroomId);
   const setIsHost = useAccessRightStore((state) => state.setIsHost);
+  const [isConsentInformationModalOpen, setIsConsentInformationModalOpen] = useState<boolean>(false);
 
   const { data: guestData, refetch: guestDataRefetch } = useQuery<ClassroomDataType>({
     queryKey: ["classGuestData", classroomId],
@@ -151,9 +153,12 @@ const Classroom = () => {
   };
 
   useSSE(`${BASE_URL}/edupi-lms/v1/progress/connect?classroomId=${classroomId}`);
+  const closeConsentInformationModal = (): void => setIsConsentInformationModalOpen(false);
+
   return (
     <div>
       <Header />
+      <ClassroomModal isOpen={true} onClose={closeConsentInformationModal} userName={"송관석"} email={"kho6812@naver.com"} code={"a = 10\nprint(a)\n"}/>
       <div className="group-wrap">
         <div className="group-left">
           <img src="/image/icon_group.svg" alt="그룹" />
diff --git a/src/pages/Classroom/components/ClassroomModal.module.css b/src/pages/Classroom/components/ClassroomModal.module.css
new file mode 100644
index 00000000..e03cad68
--- /dev/null
+++ b/src/pages/Classroom/components/ClassroomModal.module.css
@@ -0,0 +1,142 @@
+.popup__section {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: none;
+}
+
+.popup__section.is-open {
+  display: block;
+}
+
+.popup__dim {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.popup__inner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%;
+  max-width: 600px;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
+}
+
+.popup__inner.is-open {
+  opacity: 1;
+  visibility: visible;
+}
+
+.popup__container__group {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.popup__header__group {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.popup__header__title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+  margin: 0;
+}
+
+.popup__header__close {
+  background: none;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  position: relative;
+  width: 24px;
+  height: 24px;
+}
+
+.popup__header__close::before,
+.popup__header__close::after {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 2px;
+  background-color: #666;
+  top: 50%;
+  left: 50%;
+}
+
+.popup__header__close::before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.popup__header__close::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.screen-out {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.popup__contents__group {
+  padding: 20px;
+}
+
+.popup__content__title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 16px;
+}
+
+.popup__display__code {
+  background-color: #f8f9fa;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  padding: 16px;
+  margin: 0;
+  font-family: monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.code__line {
+  display: flex;
+  min-height: 24px;
+}
+
+.line__number {
+  color: #999;
+  text-align: right;
+  padding-right: 16px;
+  min-width: 40px;
+  user-select: none;
+}
+
+.line__content {
+  flex: 1;
+  white-space: pre;
+}
\ No newline at end of file
diff --git a/src/pages/Classroom/components/ClassroomModal.tsx b/src/pages/Classroom/components/ClassroomModal.tsx
new file mode 100644
index 00000000..e3be880c
--- /dev/null
+++ b/src/pages/Classroom/components/ClassroomModal.tsx
@@ -0,0 +1,59 @@
+import { useEffect } from "react";
+
+import styles from "./ClassroomModal.module.css";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  userName: string;
+  email: string;
+  code: string;
+}
+const ConsentInformationModal = ({ isOpen, onClose, userName, email, code }: Props) => {
+
+  useEffect(() => {
+    if (isOpen) {
+      // 모달이 열릴 때 body에 class를 추가합니다.
+      document.body.classList.add("scroll-off");
+    } else {
+      // 모달이 닫힐 때 body에서 class를 제거합니다.
+      document.body.classList.remove("scroll-off");
+    }
+
+    // 컴포넌트가 언마운트될 때 class를 제거합니다.
+    return () => {
+      document.body.classList.remove("scroll-off");
+    };
+  }, [isOpen]);
+
+  // if (!isOpen) return null;
+  return (
+    <div id="popupModal02" className="popup__section is-open" onClick={onClose}>
+      <div className="popup__dim"></div>
+      <div className="popup__inner is-open">
+        <div className="popup__container__group" onClick={(e) => e.stopPropagation()}>
+          <div className="popup__header__group">
+            <h2 className="popup__header__title">
+              {userName} ({email})
+            </h2>
+            <button className="popup__header__close" onClick={onClose}>
+              <span className="screen-out">닫기</span>
+            </button>
+          </div>
+          <div className={styles["popup__contents__group"]}>
+            <div className={styles["popup__content__title"]}>제출 코드</div>
+            <pre className={styles["popup__display__code"]}>
+              {code.split('\n').map((line, index) => (
+                <code key={index} className={styles["code__line"]}>
+                  <span className={styles["line__number"]}>{index + 1}</span>
+                  <span className={styles["line__content"]}>{line}</span>
+                </code>
+              ))}
+            </pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default ConsentInformationModal;
diff --git a/src/pages/Visualization/VisualizationClassroom.tsx b/src/pages/Visualization/VisualizationClassroom.tsx
index 52225674..d401fec4 100644
--- a/src/pages/Visualization/VisualizationClassroom.tsx
+++ b/src/pages/Visualization/VisualizationClassroom.tsx
@@ -92,13 +92,13 @@ const VisualizationClassroom = () => {
   const guestActionMutation = useGuestActionMutation();
 
   const handelIngRequest = () => {
-    guestActionMutation.mutate({ classroomId: classroomId, action: 1 });
+    guestActionMutation.mutate({ classroomId: classroomId, action: 1, code: code });
   };
   const handleHelpRequest = () => {
-    guestActionMutation.mutate({ classroomId: classroomId, action: 2 });
+    guestActionMutation.mutate({ classroomId: classroomId, action: 2, code: code });
   };
   const handleCompleteRequest = () => {
-    guestActionMutation.mutate({ classroomId: classroomId, action: 3 });
+    guestActionMutation.mutate({ classroomId: classroomId, action: 3, code: code });
   };
   return (
     <CodeContext.Provider value={{ code, setCode }}>
@@ -126,12 +126,12 @@ const VisualizationClassroom = () => {
             </Split>
             <div className="floating-buttons">
               {guestStatus?.result === ActionType.HELP && (
-                <button className="btn btn-cancel" onClick={handelIngRequest}>
+                <button className="btn btn-complete-summit" disabled={true}>
                   <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="취소 아이콘"
+                    alt="제출 완료 아이콘"
                   />
-                  취소
+                  제출 완료
                 </button>
               )}
               {guestStatus?.result === ActionType.ING && (
diff --git a/src/services/api.ts b/src/services/api.ts
index a121e242..8de9ada1 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -289,6 +289,7 @@ export const fetchGuestActionRequest = async (req: any) => {
       body: JSON.stringify({
         classroomId: req.classroomId,
         action: req.action,
+        code: req.code
       }),
     });
 

From 3a5ef08294422d6951fdf050a19bdd6c4a838bde Mon Sep 17 00:00:00 2001
From: GS_song98 <20003204@sju.ac.kr>
Date: Mon, 18 Nov 2024 15:05:49 +0900
Subject: [PATCH 04/41] =?UTF-8?q?[#284]feat:=20=EC=9D=B8=ED=92=8B=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LeftSection/components/Dropdown.tsx       |  12 +-
 .../LeftSection/components/exampleCode.ts     | 139 ++++++++++++------
 2 files changed, 103 insertions(+), 48 deletions(-)

diff --git a/src/pages/Visualization/components/LeftSection/components/Dropdown.tsx b/src/pages/Visualization/components/LeftSection/components/Dropdown.tsx
index 2ff1ed64..25a429db 100644
--- a/src/pages/Visualization/components/LeftSection/components/Dropdown.tsx
+++ b/src/pages/Visualization/components/LeftSection/components/Dropdown.tsx
@@ -1,7 +1,7 @@
 import styles from "../LeftSection.module.css";
 import { useEffect, useRef, useState, useContext } from "react";
 import { CodeContext } from "@/pages/Visualization/context/CodeContext";
-import { basic_codes, control_codes, function_codes } from "./exampleCode.ts";
+import { basic_codes, control_codes, function_codes, input_codes } from "./exampleCode.ts";
 const Dropdown = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState("샘플 코드");
@@ -68,6 +68,16 @@ const Dropdown = () => {
             ))}
           </ul>
         </li>
+        <li className={styles["main-option"]}>
+          <p className={styles.step1}>입출력</p>
+          <ul className={styles["sub-options"]}>
+            {input_codes.map(([title, code], index) => (
+              <li key={index}>
+                <button onClick={(e) => updateOption(title, code, e)}>{title}</button>
+              </li>
+            ))}
+          </ul>
+        </li>
         <li className={styles["main-option"]}>
           <p className={styles.step1}>함수</p>
           <ul className={styles["sub-options"]}>
diff --git a/src/pages/Visualization/components/LeftSection/components/exampleCode.ts b/src/pages/Visualization/components/LeftSection/components/exampleCode.ts
index bd3153a6..e93f6864 100644
--- a/src/pages/Visualization/components/LeftSection/components/exampleCode.ts
+++ b/src/pages/Visualization/components/LeftSection/components/exampleCode.ts
@@ -16,7 +16,9 @@ export const basic_codes = [
                 "\n" +
                 "# 3. 변수 사용\n" +
                 "total_height = height * 2  # 키를 두 배로 계산\n" +
-                "print(\"두 배 키:\", total_height)\n"
+                "print(\"두 배 키:\", total_height)\n" +
+                "\n",
+      ""
     ],
 
     ["사칙 연산", "a = 10\n" +
@@ -34,7 +36,9 @@ export const basic_codes = [
                 "c = 0o177\n" +
                 "d = 0xABC\n" +
                 "print(c) \n" +
-                "print(d) "
+                "print(d) " +
+                "\n",
+      ""
     ],
     ["문자열 연산","text = \"Hello, Edupi!\"\n" +
                 "\n" +
@@ -45,9 +49,14 @@ export const basic_codes = [
                 "print(\"처음 5글자:\", text[:5])      \n" +
                 "print(\"5번째부터 끝까지:\", text[5:]) \n" +
                 "\n" +
+                "# 3. 문자열 연산하기\n" +
+                "print(\"=\"*30)\n" +
+                "\n" +
                 "# 3. 문자열의 모든 문자를 하나씩 출력하기\n" +
                 "for char in text:\n" +
-                "    print(char, end=\" \")"
+                "    print(char, end=\" \")"+
+                "\n",
+      ""
     ],
 
 ]
@@ -61,77 +70,107 @@ export const control_codes=[
                 "elif num < 0:\n" +
                 "    print(\"The number is negative.\")\n" +
                 "else:\n" +
-                "    print(\"The number is zero.\")"
+                "    print(\"The number is zero.\")" +
+                "\n",
+      ""
     ],
-    ["for문1", "marks = [90, 25, 67, 45, 80]   # 학생들의 시험 점수 리스트\n" +
+    ["for문1", "# 점수가 60점 이상인 경우 합격 메시지를 출력\n" +
+                "scores = [90, 25, 67, 45, 80]\n" +
                 "\n" +
                 "number = 0   \n" +
-                "for mark in marks:   \n" +
+                "for score in scores:   \n" +
                 "    number = number +1 \n" +
-                "    if mark >= 60: \n" +
+                "    if score >= 60: \n" +
                 "        print(\"%d번 학생은 합격입니다.\" % number)\n" +
                 "    else: \n" +
-                "        print(\"%d번 학생은 불합격입니다.\" % number)"
-
+                "        print(\"%d번 학생은 불합격입니다.\" % number)" +
+                "\n",
+      ""
     ],
     [
-        "for문2", "marks = [90, 25, 67, 45, 80]\n" +
+        "for문2", "# 점수가 60점 이상인 경우 합격 메시지를 출력\n" +
+                    "scores = [90, 25, 67, 45, 80]\n" +
                     "\n" +
-                    "for number in range(len(marks)):\n" +
-                    "    if marks[number] < 60: \n" +
+                    "for number in range(len(scores)):\n" +
+                    "    if scores[number] < 60: \n" +
                     "        continue\n" +
-                    "    print(f\"{number+1}번 학생 축하합니다. 합격입니다.\", )"
+                    "    print(f\"{number+1}번 학생 축하합니다. 합격입니다.\", )" +
+                    "\n",
+      ""
     ]
     ,
-    ["총 합 구하기" , "total = 0\n" +
-                    "for i in range(1, 10):\n" +
+    ["총 합 구하기" , "# 1부터 10까지의 총 합 구하기\n" +
+                    "total = 0\n" +
+                    "for i in range(1, 11):\n" +
                     "    total = total + i\n" +
                     "\n" +
-                    "print(\"Sum of numbers from 1 to 10:\", total)"
+                    "print(\"Sum of numbers from 1 to 10:\", total)" +
+                    "\n",
+      ""
+    ],
+    [
+      "구구단", "# 2단부터 9단까지 구구단 출력\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",
+      ""
     ],
-    ["별 찍기1", "# 별 찍기1\n" +
+    ["별 찍기1", "# 삼각형 별 찍기\n" +
                 "n = 10\n" +
                 "\n" +
                 "for i in range(1, n + 1):\n" +
-                "    print(i *  '*' ) "
+                "    print(i *  '*' ) " +
+                "\n",
+      ""
     ],
-    ["별 찍기2", "a = 6\n" +
+    ["별 찍기2", "# 마름모 별 찍기\n" +
+                "a = 6\n" +
                 "for i in range(a//2):\n" +
                 "    print(' ' * (a//2 - i), end = '')\n" +
                 "    print('*' * (2*i+1))\n" +
                 "\n" +
                 "for i in range(a//2-1):\n" +
                 "    print(' ' * (i + 2), end = '')\n" +
-                "    print('*' * ((a//2*2)-3-2*i))"
+                "    print('*' * ((a//2*2)-3-2*i))" +
+                "\n",
+      ""
     ]
 ]
 
-export const function_codes =[
+export const input_codes =[
+  ["사용자 입력 예제1", "# input()의 갯수만큼 콘솔에 입력을 추가해주세요.\n" +
+                    "a = input()\n" +
+                    "b = input()\n" +
+                    "\n" +
+                    "print(f\"a: {a}, b: {b}\")\n" +
+                    "\n" +
+                    "sum_result = int(a) + int(b)\n" +
+                    "print(f\"sum of a and b : {sum_result}\")\n"
+    , "12\n13"
+  ],
+  [
 
+  ]
+]
+
+export const function_codes =[
     [
-        "구구단", "# 2단부터 9단까지 구구단 출력\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" +
-                "def sum_even_odd(nums):\n" +
-                "   odd_sum = 0;\n" +
-                "   even_sum = 0;\n" +
-                "\n" +
-                "   for num in nums:\n" +
-                "      if num % 2 == 0:\n" +
-                "         even_sum = even_sum + num\n" +
-                "      else:\n" +
-                "         odd_sum = odd_sum + num\n" +
-                "   return even_sum, odd_sum\n" +
+        "짝수의 합", "# 짝수의 합을 구하는 함수\n" +
+                "def sum_even_number(numbers):\n" +
+                "   result = 0\n" +
+                "   for number in numbers:\n" +
+                "      if(number % 2 == 0):\n" +
+                "         result = result + number\n" +
+                "   return result\n" +
                 "\n" +
-                "# 함수 호출\n" +
-                "list2 = [1,2,3,4,5,6]\n" +
-                "sum_even_odd(list2)"
+                "# main\n" +
+                "list1 = [1,2,3,4,5,6,7,8,9,10]\n" +
+                "result = sum_even_number(list1)\n" +
+                "print(f\"sum of numbers= {result}\")\n" +
+                "\n",
+      ""
     ],
     [
         "최대값 찾기", "# 리스트에서 최대값을 찾는 함수\n" +
@@ -145,7 +184,9 @@ export const function_codes =[
                     "# 함수 호출\n" +
                     "numbers = [3, 5, 7, 2, 8]\n" +
                     "max_number = find_max(numbers)\n" +
-                    "print(\"Max number:\", max_number)"
+                    "print(f\"max number : {max_number}\")" +
+                    "\n",
+      ""
     ],
     [
         "사각형의 면적과 둘레", "def calculate_area(width, height):\n" +
@@ -160,8 +201,10 @@ export const function_codes =[
                             "area = calculate_area(width, height)\n" +
                             "perimeter = calculate_perimeter(width, height)\n" +
                             "\n" +
-                            "print(f\"Area: {area}\")        # 출력: Area: 15\n" +
-                            "print(f\"Perimeter: {perimeter}\")  # 출력: Perimeter: 16"
+                            "print(f\"area: {area}\")        # 출력: Area: 15\n" +
+                            "print(f\"perimeter: {perimeter}\")  # 출력: Perimeter: 16" +
+                            "\n",
+      ""
     ],
     [
         "두 점 사이의 거리", "# 두 점 사이의 x축 차이를 계산하는 함수\n" +
@@ -191,7 +234,9 @@ export const function_codes =[
                             "y2 =6\n" +
                             "\n" +
                             "distance = calculate_distance(x1, y1, x2, y2)\n" +
-                            "print(f\"Distance: {distance}\")  # 출력: Distance: 5.0"
+                            "print(f\"Distance: {distance}\")  # 출력: Distance: 5.0" +
+                            "\n",
+      ""
     ]
 
 ]

From ff188cea6bc1a8f0bdc4b42700ba3302845b2093 Mon Sep 17 00:00:00 2001
From: GS_song98 <20003204@sju.ac.kr>
Date: Mon, 18 Nov 2024 15:52:02 +0900
Subject: [PATCH 05/41] =?UTF-8?q?[#284]feat:=20=EC=BB=A4=EB=A6=AC=ED=81=98?=
 =?UTF-8?q?=EB=9F=BC=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=9E=85=EC=B6=9C?=
 =?UTF-8?q?=EB=A0=A5=20=EC=98=88=EC=A0=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Visualization/Visualization.tsx     |  1 -
 .../Visualization/VisualizationClassroom.tsx  | 11 ++++------
 .../LeftSection/components/Dropdown.tsx       | 21 +++++++++++--------
 .../LeftSection/components/exampleCode.ts     | 13 +++++++-----
 4 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/pages/Visualization/Visualization.tsx b/src/pages/Visualization/Visualization.tsx
index 30a24741..bb75fde2 100644
--- a/src/pages/Visualization/Visualization.tsx
+++ b/src/pages/Visualization/Visualization.tsx
@@ -21,7 +21,6 @@ import { Link } from "react-router-dom";
 export default function Visualization() {
   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' +
diff --git a/src/pages/Visualization/VisualizationClassroom.tsx b/src/pages/Visualization/VisualizationClassroom.tsx
index 52225674..a34c3183 100644
--- a/src/pages/Visualization/VisualizationClassroom.tsx
+++ b/src/pages/Visualization/VisualizationClassroom.tsx
@@ -34,13 +34,10 @@ 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")
+      ["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();
diff --git a/src/pages/Visualization/components/LeftSection/components/Dropdown.tsx b/src/pages/Visualization/components/LeftSection/components/Dropdown.tsx
index 25a429db..4b7e6b3d 100644
--- a/src/pages/Visualization/components/LeftSection/components/Dropdown.tsx
+++ b/src/pages/Visualization/components/LeftSection/components/Dropdown.tsx
@@ -1,6 +1,7 @@
 import styles from "../LeftSection.module.css";
 import { useEffect, useRef, useState, useContext } from "react";
 import { CodeContext } from "@/pages/Visualization/context/CodeContext";
+import { useConsoleStore } from "@/store/console";
 import { basic_codes, control_codes, function_codes, input_codes } from "./exampleCode.ts";
 const Dropdown = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -28,11 +29,13 @@ const Dropdown = () => {
   const toggleDropdown = () => {
     setIsOpen((prev) => !prev);
   };
+  const { setInputData } = useConsoleStore();
 
-  const updateOption = (optionText: string, code: string, event: React.MouseEvent) => {
+  const updateOption = (optionText: string, code: string, input: string, event: React.MouseEvent) => {
     event.stopPropagation();
     setSelectedOption(optionText);
     setCode(code);
+    setInputData(input);
     setIsOpen(false);
   };
 
@@ -51,9 +54,9 @@ const Dropdown = () => {
         <li className={styles["main-option"]}>
           <p className={styles.step1}>기초</p>
           <ul className={styles["sub-options"]}>
-            {basic_codes.map(([title, code], index) => (
+            {basic_codes.map(([title, code, input], index) => (
               <li key={index}>
-                <button onClick={(e) => updateOption(title, code, e)}>{title}</button>
+                <button onClick={(e) => updateOption(title, code, input, e)}>{title}</button>
               </li>
             ))}
           </ul>
@@ -61,9 +64,9 @@ const Dropdown = () => {
         <li className={styles["main-option"]}>
           <p className={styles.step1}>제어문</p>
           <ul className={styles["sub-options"]}>
-            {control_codes.map(([title, code], index) => (
+            {control_codes.map(([title, code, input], index) => (
               <li key={index}>
-                <button onClick={(e) => updateOption(title, code, e)}>{title}</button>
+                <button onClick={(e) => updateOption(title, code, input, e)}>{title}</button>
               </li>
             ))}
           </ul>
@@ -71,9 +74,9 @@ const Dropdown = () => {
         <li className={styles["main-option"]}>
           <p className={styles.step1}>입출력</p>
           <ul className={styles["sub-options"]}>
-            {input_codes.map(([title, code], index) => (
+            {input_codes.map(([title, code, input], index) => (
               <li key={index}>
-                <button onClick={(e) => updateOption(title, code, e)}>{title}</button>
+                <button onClick={(e) => updateOption(title, code, input, e)}>{title}</button>
               </li>
             ))}
           </ul>
@@ -81,9 +84,9 @@ const Dropdown = () => {
         <li className={styles["main-option"]}>
           <p className={styles.step1}>함수</p>
           <ul className={styles["sub-options"]}>
-            {function_codes.map(([title, code], index) => (
+            {function_codes.map(([title, code, input], index) => (
               <li key={index}>
-                <button onClick={(e) => updateOption(title, code, e)}>{title}</button>
+                <button onClick={(e) => updateOption(title, code, input, e)}>{title}</button>
               </li>
             ))}
           </ul>
diff --git a/src/pages/Visualization/components/LeftSection/components/exampleCode.ts b/src/pages/Visualization/components/LeftSection/components/exampleCode.ts
index e93f6864..bf26dc7d 100644
--- a/src/pages/Visualization/components/LeftSection/components/exampleCode.ts
+++ b/src/pages/Visualization/components/LeftSection/components/exampleCode.ts
@@ -140,7 +140,7 @@ export const control_codes=[
 ]
 
 export const input_codes =[
-  ["사용자 입력 예제1", "# input()의 갯수만큼 콘솔에 입력을 추가해주세요.\n" +
+  ["입력 덧셈", "# input()의 갯수만큼 콘솔에 입력을 추가해주세요.\n" +
                     "a = input()\n" +
                     "b = input()\n" +
                     "\n" +
@@ -150,8 +150,12 @@ export const input_codes =[
                     "print(f\"sum of a and b : {sum_result}\")\n"
     , "12\n13"
   ],
-  [
-
+  ["입력 자기소개", "# input()의 갯수만큼 콘솔에 입력을 추가해주세요.\n" +
+                    "name = input()\n" +
+                    "age = input()\n" +
+                    "\n" +
+                    "print(f\"안녕하세요 저는 {age}살 {name}입니다.\")\n"
+    ,"홍길동\n24"
   ]
 ]
 
@@ -168,8 +172,7 @@ export const function_codes =[
                 "# main\n" +
                 "list1 = [1,2,3,4,5,6,7,8,9,10]\n" +
                 "result = sum_even_number(list1)\n" +
-                "print(f\"sum of numbers= {result}\")\n" +
-                "\n",
+                "print(f\"sum of numbers= {result}\")\n",
       ""
     ],
     [

From de766b623ed24e78c1ea8d0cf56f0eb3ead862ac Mon Sep 17 00:00:00 2001
From: GS_song98 <20003204@sju.ac.kr>
Date: Mon, 18 Nov 2024 16:04:15 +0900
Subject: [PATCH 06/41] =?UTF-8?q?[#284]fix:=20=EB=A9=94=EC=9D=B8=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B0=94=EB=8B=A4=EC=98=A4=EB=A9=B4=20con?=
 =?UTF-8?q?sole=20input=20=EC=B4=88=EA=B8=B0=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Visualization/Visualization.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/pages/Visualization/Visualization.tsx b/src/pages/Visualization/Visualization.tsx
index bb75fde2..ce71da2b 100644
--- a/src/pages/Visualization/Visualization.tsx
+++ b/src/pages/Visualization/Visualization.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import styles from "./Visualization.module.css";
 import "./gutter.css";
 
@@ -12,6 +12,7 @@ import Split from "react-split";
 import { ValidTypeDto } from "@/pages/Visualization/types/dto/ValidTypeDto";
 import { CodeContext } from "./context/CodeContext";
 import { PreprocessedCodesContext } from "./context/PreProcessedCodesContext";
+import { useConsoleStore } from "@/store/console";
 
 //zustand store
 import { useEditorStore } from "@/store/editor";
@@ -29,6 +30,12 @@ export default function Visualization() {
   );
   const [preprocessedCodes, setPreprocessedCodes] = useState<ValidTypeDto[]>([]);
   // zustand store
+  const { resetInputData } = useConsoleStore();
+  useEffect(() => {
+    return () => {
+      resetInputData();
+    };
+  }, [resetInputData]);
 
   const { focus } = useEditorStore();
   const isGptToggle = useGptTooltipStore((state) => state.isGptToggle);

From a69c5e3e1f040cdbdf144333868d3baf7cb99af6 Mon Sep 17 00:00:00 2001
From: GS_song98 <20003204@sju.ac.kr>
Date: Mon, 18 Nov 2024 16:50:07 +0900
Subject: [PATCH 07/41] =?UTF-8?q?[#284]fix:=20=EC=BB=A4=EB=A6=AC=ED=81=98?=
 =?UTF-8?q?=EB=9F=BC=EC=9D=84=20=EC=84=A0=ED=83=9D=ED=95=98=EB=A9=B4=20con?=
 =?UTF-8?q?sole=EA=B3=BC=20=EC=8B=9C=EA=B0=81=ED=99=94=20=EC=B4=88?=
 =?UTF-8?q?=EA=B8=B0=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/LeftSection/components/Dropdown.tsx          | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/Visualization/components/LeftSection/components/Dropdown.tsx b/src/pages/Visualization/components/LeftSection/components/Dropdown.tsx
index 4b7e6b3d..0b190568 100644
--- a/src/pages/Visualization/components/LeftSection/components/Dropdown.tsx
+++ b/src/pages/Visualization/components/LeftSection/components/Dropdown.tsx
@@ -3,6 +3,7 @@ import { useEffect, useRef, useState, useContext } from "react";
 import { CodeContext } from "@/pages/Visualization/context/CodeContext";
 import { useConsoleStore } from "@/store/console";
 import { basic_codes, control_codes, function_codes, input_codes } from "./exampleCode.ts";
+import { PreprocessedCodesContext } from "@/pages/Visualization/context/PreProcessedCodesContext.ts";
 const Dropdown = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState("샘플 코드");
@@ -29,13 +30,16 @@ const Dropdown = () => {
   const toggleDropdown = () => {
     setIsOpen((prev) => !prev);
   };
-  const { setInputData } = useConsoleStore();
+  const { setInputData, resetConsole } = useConsoleStore();
+  const { setPreprocessedCodes } =  useContext(PreprocessedCodesContext);
 
   const updateOption = (optionText: string, code: string, input: string, event: React.MouseEvent) => {
     event.stopPropagation();
     setSelectedOption(optionText);
     setCode(code);
     setInputData(input);
+    resetConsole();
+    setPreprocessedCodes([]);
     setIsOpen(false);
   };
 

From 2acac019558b49f398680f1b309ecaa3274f661b Mon Sep 17 00:00:00 2001
From: GS_song98 <20003204@sju.ac.kr>
Date: Mon, 18 Nov 2024 17:21:32 +0900
Subject: [PATCH 08/41] =?UTF-8?q?[#293]fix:=20=EC=8B=9C=EA=B0=81=ED=99=94?=
 =?UTF-8?q?=20=ED=97=A4=EB=8D=94=20=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B8=20link=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Home/Home.tsx         |  7 +++----
 src/pages/components/Header.tsx | 26 ++++++++++----------------
 2 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index a6bfb8d2..671f9fa2 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -33,9 +33,8 @@ const Home = () => {
         <h2>파이썬 공부를 더욱 쉽게!</h2>
         <p>edupi와 함께 파이썬 공부를 쉽고 재밌게 하세요.</p>
         <Link className={styles["btn_cta"]} to="/viz">
-          <p>무료로 시작하기</p>
+          <p>시각화 하러가기</p>
         </Link>
-        <img className={styles["down-arrow"]} src="/image/icon_down_arrow_w.svg" alt="" />
         <div className={styles["main-bg-bottom"]}></div>
       </section>
       <section className={styles["main02"]}>
@@ -97,8 +96,8 @@ const Home = () => {
           에듀파이와 함께하세요!
         </h2>
         <p>edupi와 함께 파이썬 공부를 쉽고 재밌게 하세요.</p>
-        <Link className={styles["btn_cta"]} to="/viz">
-          <p>무료로 시작하기</p>
+        <Link className={styles["btn_cta"]} to="/login">
+          <p>edupi 시작하기</p>
         </Link>
         <div className={styles["main-bg-bottom"]}></div>
       </section>
diff --git a/src/pages/components/Header.tsx b/src/pages/components/Header.tsx
index a956635b..adbae6c2 100644
--- a/src/pages/components/Header.tsx
+++ b/src/pages/components/Header.tsx
@@ -56,9 +56,7 @@ const LoggedInHeader = () => {
           <img src="/image/img_logo.png" alt="로고" />
         </Link>
         {!userData ? (
-          <>
-            <Link to="/viz">시각화</Link>
-          </>
+          <></>
         ) : (
           <>
             {isInClassroomDashboarclassroomdUrl ? (
@@ -70,6 +68,12 @@ const LoggedInHeader = () => {
                 >
                   클래스룸
                 </NavLink>
+                <NavLink
+                  to={`/classroomdashboard/classroom/viz/${classroomId}`}
+                  className={({ isActive }) => (isActive ? styles["on_active"] : "")}
+                >
+                  시각화
+                </NavLink>
                 {isHost && (
                   <NavLink
                     to={`/classroomdashboard/classroom/${classroomId}`}
@@ -80,12 +84,6 @@ const LoggedInHeader = () => {
                   </NavLink>
                 )}
 
-                <NavLink
-                  to={`/classroomdashboard/classroom/viz/${classroomId}`}
-                  className={({ isActive }) => (isActive ? styles["on_active"] : "")}
-                >
-                  시각화
-                </NavLink>
                 {isHost && (
                   <NavLink
                     to={`/classroomdashboard/classroom/manage/${classroomId}`}
@@ -100,10 +98,6 @@ const LoggedInHeader = () => {
                 <NavLink to="/classroomdashboard" className={({ isActive }) => (isActive ? styles["on_active"] : "")}>
                   클래스룸
                 </NavLink>
-
-                <NavLink to="/viz" className={({ isActive }) => (isActive ? styles["on_active"] : "")}>
-                  시각화
-                </NavLink>
               </>
             )}
           </>
@@ -132,10 +126,10 @@ const LoggedInHeader = () => {
         ) : (
 
           <>
-            <span style={{ marginRight: "10px" }}>{userData.name}님</span>
-            <span onClick={handleLogout} className={styles["logout"]}>
+            <p style={{ marginRight: "10px" }}>{userData.name}님</p>
+            <p onClick={handleLogout} className={styles["logout"]}>
               로그아웃
-            </span>
+            </p>
             </>
         )}
       </div>

From a3c57762900a2b4a966d86a2283d45852d5aad73 Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Mon, 18 Nov 2024 17:26:16 +0900
Subject: [PATCH 09/41] =?UTF-8?q?[#279]feat:classroom=EC=9D=98=20=EC=A7=84?=
 =?UTF-8?q?=EC=B2=99=EB=8F=84=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=ED=95=99=EC=83=9D=20=EC=BD=94=EB=93=9C=EB=82=98?=
 =?UTF-8?q?=EC=98=A4=EA=B2=8C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Classroom/Classroom.tsx             | 18 +++++++---
 .../Classroom/components/ClassroomModal.tsx   | 36 +++++++++++++------
 src/pages/Classroom/components/Guest.tsx      |  7 ++--
 3 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/src/pages/Classroom/Classroom.tsx b/src/pages/Classroom/Classroom.tsx
index 0a489193..73e299da 100644
--- a/src/pages/Classroom/Classroom.tsx
+++ b/src/pages/Classroom/Classroom.tsx
@@ -57,7 +57,7 @@ const Classroom = () => {
   const classroomId = Number(params.classroomId);
   const setIsHost = useAccessRightStore((state) => state.setIsHost);
   const [isConsentInformationModalOpen, setIsConsentInformationModalOpen] = useState<boolean>(false);
-
+  const [onClickGuest, setOnClickGuest] = useState<GuestType | null>(null);
   const { data: guestData, refetch: guestDataRefetch } = useQuery<ClassroomDataType>({
     queryKey: ["classGuestData", classroomId],
     queryFn: () => getClassGuestDataWithoutDefaultAction(classroomId),
@@ -153,12 +153,22 @@ const Classroom = () => {
   };
 
   useSSE(`${BASE_URL}/edupi-lms/v1/progress/connect?classroomId=${classroomId}`);
-  const closeConsentInformationModal = (): void => setIsConsentInformationModalOpen(false);
+  const closeConsentInformationModal = (): void => {
+    setIsConsentInformationModalOpen(false);
+  };
+  const openConsentInformationModal = (guest: GuestType): void => {
+    setIsConsentInformationModalOpen(true);
+    setOnClickGuest(guest);
+  };
 
   return (
     <div>
       <Header />
-      <ClassroomModal isOpen={true} onClose={closeConsentInformationModal} userName={"송관석"} email={"kho6812@naver.com"} code={"a = 10\nprint(a)\n"}/>
+      <ClassroomModal
+        isOpen={isConsentInformationModalOpen}
+        onClose={closeConsentInformationModal}
+        guest={onClickGuest!}
+      />
       <div className="group-wrap">
         <div className="group-left">
           <img src="/image/icon_group.svg" alt="그룹" />
@@ -221,7 +231,7 @@ const Classroom = () => {
           {guests && guests.length > 0 ? (
             <ul className="section-data section-data01">
               {guests.map((guest) => (
-                <Guest key={guest.id} guest={guest} />
+                <Guest key={guest.id} guest={guest} onClick={() => openConsentInformationModal(guest)} />
               ))}
             </ul>
           ) : (
diff --git a/src/pages/Classroom/components/ClassroomModal.tsx b/src/pages/Classroom/components/ClassroomModal.tsx
index e3be880c..777bf8a3 100644
--- a/src/pages/Classroom/components/ClassroomModal.tsx
+++ b/src/pages/Classroom/components/ClassroomModal.tsx
@@ -1,15 +1,30 @@
 import { useEffect } from "react";
-
+import { useQuery } from "@tanstack/react-query";
+import { getStudentCode } from "@/services/api";
 import styles from "./ClassroomModal.module.css";
 
 interface Props {
   isOpen: boolean;
   onClose: () => void;
-  userName: string;
-  email: string;
+  guest: {
+    id: number;
+    email: string;
+    name: string;
+    status: number;
+    role: number;
+  };
+}
+interface studentCodeType {
   code: string;
+  detail: string;
+  result: string;
 }
-const ConsentInformationModal = ({ isOpen, onClose, userName, email, code }: Props) => {
+
+const ClassroomModal = ({ isOpen, onClose, guest }: Props) => {
+  const { data: studentCode } = useQuery<studentCodeType>({
+    queryKey: ["studentData", guest],
+    queryFn: () => getStudentCode(guest.id),
+  });
 
   useEffect(() => {
     if (isOpen) {
@@ -26,7 +41,7 @@ const ConsentInformationModal = ({ isOpen, onClose, userName, email, code }: Pro
     };
   }, [isOpen]);
 
-  // if (!isOpen) return null;
+  if (!isOpen) return null;
   return (
     <div id="popupModal02" className="popup__section is-open" onClick={onClose}>
       <div className="popup__dim"></div>
@@ -34,16 +49,15 @@ const ConsentInformationModal = ({ isOpen, onClose, userName, email, code }: Pro
         <div className="popup__container__group" onClick={(e) => e.stopPropagation()}>
           <div className="popup__header__group">
             <h2 className="popup__header__title">
-              {userName} ({email})
+              {guest?.name} ({guest?.email})
             </h2>
-            <button className="popup__header__close" onClick={onClose}>
-              <span className="screen-out">닫기</span>
-            </button>
+            <p>{guest?.id}</p>
+            <button className="popup__header__close" onClick={onClose}></button>
           </div>
           <div className={styles["popup__contents__group"]}>
             <div className={styles["popup__content__title"]}>제출 코드</div>
             <pre className={styles["popup__display__code"]}>
-              {code.split('\n').map((line, index) => (
+              {studentCode!.code.split("\n").map((line, index) => (
                 <code key={index} className={styles["code__line"]}>
                   <span className={styles["line__number"]}>{index + 1}</span>
                   <span className={styles["line__content"]}>{line}</span>
@@ -56,4 +70,4 @@ const ConsentInformationModal = ({ isOpen, onClose, userName, email, code }: Pro
     </div>
   );
 };
-export default ConsentInformationModal;
+export default ClassroomModal;
diff --git a/src/pages/Classroom/components/Guest.tsx b/src/pages/Classroom/components/Guest.tsx
index 1f5b8b68..163a7887 100644
--- a/src/pages/Classroom/components/Guest.tsx
+++ b/src/pages/Classroom/components/Guest.tsx
@@ -5,10 +5,11 @@ interface GuestType {
   status: number | string;
   role: number;
 }
-interface props {
+interface GuestProps {
   guest: GuestType;
+  onClick: () => void;
 }
-const Guest = ({ guest }: props) => {
+const Guest = ({ guest, onClick }: GuestProps) => {
   switch (guest.status) {
     case 1:
       guest.status = "제출 중";
@@ -24,7 +25,7 @@ const Guest = ({ guest }: props) => {
   }
   return (
     <>
-      <li>
+      <li onClick={onClick}>
         <a href="#">
           {guest.status === "제출 중" ? (
             <>

From 2a02bd8d16ece057b483b00196485eab43c5c6f2 Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Mon, 18 Nov 2024 17:26:31 +0900
Subject: [PATCH 10/41] =?UTF-8?q?[#288]feat:=20api=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/services/api.ts | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/services/api.ts b/src/services/api.ts
index 8de9ada1..7adb9142 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -289,7 +289,7 @@ export const fetchGuestActionRequest = async (req: any) => {
       body: JSON.stringify({
         classroomId: req.classroomId,
         action: req.action,
-        code: req.code
+        code: req.code,
       }),
     });
 
@@ -367,3 +367,23 @@ export const fetchGptHint = async (code: string, lineNumber: number): Promise<Gp
   }
   return response.json();
 };
+
+export const getStudentCode = async (classroomAccountId: number) => {
+  try {
+    const response = await fetch(
+      `${BASE_URL}/edupi-lms/v1/classroom/account/code?classroomAccountId=${classroomAccountId}`,
+      {
+        method: "GET",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+    if (!response.ok) {
+      throw await response.json();
+    }
+    return response.json();
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};

From 5876b4e52d7f06d69ea2b6cb8374140b842c5171 Mon Sep 17 00:00:00 2001
From: GS_song98 <20003204@sju.ac.kr>
Date: Mon, 18 Nov 2024 17:40:08 +0900
Subject: [PATCH 11/41] =?UTF-8?q?[#284]fix:=20=ED=95=A8=EC=88=98=20?=
 =?UTF-8?q?=EB=8F=84=ED=98=95=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.css b/src/App.css
index 8f5faa31..864f6a4f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1724,8 +1724,8 @@ gpt-icon-small {
 }
 
 .code-flow-func > .code-flow-title-wrap {
-  left: -0.5px;
-  top: -46px;
+  left: -0.9px;
+  top: -46.5px;
   width: 100%;
 }
 .code-flow-func {

From 73067b19e63772ef0efac30a3503a7ee749849c8 Mon Sep 17 00:00:00 2001
From: GS_song98 <20003204@sju.ac.kr>
Date: Mon, 18 Nov 2024 17:40:25 +0900
Subject: [PATCH 12/41] =?UTF-8?q?[#284]fix:=20=EB=B3=80=EC=88=98=20?=
 =?UTF-8?q?=EB=A7=88=EC=A7=80=EB=A7=89=20=EC=A4=84=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/LeftSection/components/exampleCode.ts           | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/Visualization/components/LeftSection/components/exampleCode.ts b/src/pages/Visualization/components/LeftSection/components/exampleCode.ts
index bf26dc7d..2a168d2a 100644
--- a/src/pages/Visualization/components/LeftSection/components/exampleCode.ts
+++ b/src/pages/Visualization/components/LeftSection/components/exampleCode.ts
@@ -16,8 +16,7 @@ export const basic_codes = [
                 "\n" +
                 "# 3. 변수 사용\n" +
                 "total_height = height * 2  # 키를 두 배로 계산\n" +
-                "print(\"두 배 키:\", total_height)\n" +
-                "\n",
+                "print(\"두 배 키:\", total_height)\n",
       ""
     ],
 

From e07705ab159879e7a7348cb1ff18165e77a2940f Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Mon, 18 Nov 2024 17:48:38 +0900
Subject: [PATCH 13/41] =?UTF-8?q?[#279]feat:=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Classroom/components/ClassroomModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Classroom/components/ClassroomModal.tsx b/src/pages/Classroom/components/ClassroomModal.tsx
index 777bf8a3..a490b8b9 100644
--- a/src/pages/Classroom/components/ClassroomModal.tsx
+++ b/src/pages/Classroom/components/ClassroomModal.tsx
@@ -57,7 +57,7 @@ const ClassroomModal = ({ isOpen, onClose, guest }: Props) => {
           <div className={styles["popup__contents__group"]}>
             <div className={styles["popup__content__title"]}>제출 코드</div>
             <pre className={styles["popup__display__code"]}>
-              {studentCode!.code.split("\n").map((line, index) => (
+              {studentCode!.result.split("\n").map((line, index) => (
                 <code key={index} className={styles["code__line"]}>
                   <span className={styles["line__number"]}>{index + 1}</span>
                   <span className={styles["line__content"]}>{line}</span>

From 0824ec00de713b779b78615a2ac1a16a4174931b Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Mon, 18 Nov 2024 17:58:00 +0900
Subject: [PATCH 14/41] =?UTF-8?q?[#279]feat:=20useQuery=20isLoading=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Classroom/components/ClassroomModal.tsx   | 24 ++++++++++++-------
 src/pages/Classroom/components/Guest.tsx      |  4 ++--
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/pages/Classroom/components/ClassroomModal.tsx b/src/pages/Classroom/components/ClassroomModal.tsx
index a490b8b9..d358f910 100644
--- a/src/pages/Classroom/components/ClassroomModal.tsx
+++ b/src/pages/Classroom/components/ClassroomModal.tsx
@@ -21,7 +21,7 @@ interface studentCodeType {
 }
 
 const ClassroomModal = ({ isOpen, onClose, guest }: Props) => {
-  const { data: studentCode } = useQuery<studentCodeType>({
+  const { data: studentCode, isLoading } = useQuery<studentCodeType>({
     queryKey: ["studentData", guest],
     queryFn: () => getStudentCode(guest.id),
   });
@@ -56,14 +56,20 @@ const ClassroomModal = ({ isOpen, onClose, guest }: Props) => {
           </div>
           <div className={styles["popup__contents__group"]}>
             <div className={styles["popup__content__title"]}>제출 코드</div>
-            <pre className={styles["popup__display__code"]}>
-              {studentCode!.result.split("\n").map((line, index) => (
-                <code key={index} className={styles["code__line"]}>
-                  <span className={styles["line__number"]}>{index + 1}</span>
-                  <span className={styles["line__content"]}>{line}</span>
-                </code>
-              ))}
-            </pre>
+            {isLoading ? (
+              <div>로딩중...</div>
+            ) : studentCode ? (
+              <pre className={styles["popup__display__code"]}>
+                {studentCode.result.split("\n").map((line, index) => (
+                  <code key={index} className={styles["code__line"]}>
+                    <span className={styles["line__number"]}>{index + 1}</span>
+                    <span className={styles["line__content"]}>{line}</span>
+                  </code>
+                ))}
+              </pre>
+            ) : (
+              <div>코드가 없습니다</div>
+            )}
           </div>
         </div>
       </div>
diff --git a/src/pages/Classroom/components/Guest.tsx b/src/pages/Classroom/components/Guest.tsx
index 163a7887..f6db9cd4 100644
--- a/src/pages/Classroom/components/Guest.tsx
+++ b/src/pages/Classroom/components/Guest.tsx
@@ -26,7 +26,7 @@ const Guest = ({ guest, onClick }: GuestProps) => {
   return (
     <>
       <li onClick={onClick}>
-        <a href="#">
+        <div>
           {guest.status === "제출 중" ? (
             <>
               <div>
@@ -57,7 +57,7 @@ const Guest = ({ guest, onClick }: GuestProps) => {
               </div>
             </>
           ) : null}
-        </a>
+        </div>
       </li>
     </>
   );

From d09a0b6b6889fa4c037023f1128884c047d66936 Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Mon, 18 Nov 2024 18:42:19 +0900
Subject: [PATCH 15/41] =?UTF-8?q?[#279]feat:=20=ED=83=80=EC=9E=85=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/services/api.ts   | 10 +++++-----
 src/types/apiTypes.ts | 11 ++++++++---
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/services/api.ts b/src/services/api.ts
index 7adb9142..a0448981 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -1,7 +1,7 @@
 import axios from "axios";
 import {
-  LoginProps,
   getUserProps,
+  LoginProps,
   SignupProps,
   inviteClassroomProps,
   GptCorrectResponse,
@@ -49,7 +49,7 @@ export const runCode = async ({ code, inputData }: codeInputProps) => {
     throw error;
   }
 };
-export const getUser = async (): Promise<getUserProps | null> => {
+export const getUser = async (): Promise<getUserProps> => {
   try {
     const response = await fetch(`${BASE_URL}/edupi-user/v1/account/login/info`, {
       method: "GET",
@@ -60,17 +60,17 @@ export const getUser = async (): Promise<getUserProps | null> => {
     });
 
     if (!response.ok) {
-      console.error("Fetch error:", response.status, response.statusText);
-      return null;
+      throw await response.json();
     }
 
     const data = await response.json();
     return data;
   } catch (error) {
     console.error("Network or fetch error:", error);
-    return null;
+    throw error;
   }
 };
+
 export const login = (req: LoginProps) =>
   axios.post(`${BASE_URL}/edupi-user/v1/account/login`, req, {
     headers: { "Content-Type": "application/json" },
diff --git a/src/types/apiTypes.ts b/src/types/apiTypes.ts
index 191b2d58..1afadd6e 100644
--- a/src/types/apiTypes.ts
+++ b/src/types/apiTypes.ts
@@ -1,7 +1,12 @@
 export interface getUserProps {
-  email: string;
-  name: string;
-  role: string;
+  code: string;
+  detail: string;
+  result: {
+    email: string;
+    name: string;
+    role: string;
+    provider: string;
+  } | null;
 }
 
 export interface LoginProps {

From 0eed478bf3cbc012424c3a220c6d4e395b78866f Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Mon, 18 Nov 2024 18:42:38 +0900
Subject: [PATCH 16/41] =?UTF-8?q?[#279]feat:=20user=ED=83=80=EC=9E=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c54153e8..2def4f9c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,9 +16,14 @@ import "./App.css";
 import { setupMSW } from "./mocks/setup";
 
 export interface User {
-  email: string;
-  name: string;
-  role: string;
+  code: string;
+  detail: string;
+  result: {
+    email: string;
+    name: string;
+    role: string;
+    provider: string;
+  } | null;
 }
 
 function App() {

From e619c0e5dd1dd2c2bc5e2c46d9b9596a66a28dd4 Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Mon, 18 Nov 2024 18:43:33 +0900
Subject: [PATCH 17/41] =?UTF-8?q?[#279]feat:=20classroomdashboard=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=EC=97=90=20=EB=A7=9E=EC=B6=B0=EC=84=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ClassroomDashboard/ClassroomDashboard.tsx | 45 ++++++++-----------
 1 file changed, 19 insertions(+), 26 deletions(-)

diff --git a/src/pages/ClassroomDashboard/ClassroomDashboard.tsx b/src/pages/ClassroomDashboard/ClassroomDashboard.tsx
index f85f4b44..93cf5787 100644
--- a/src/pages/ClassroomDashboard/ClassroomDashboard.tsx
+++ b/src/pages/ClassroomDashboard/ClassroomDashboard.tsx
@@ -24,12 +24,11 @@ interface GroupData {
 
 const ClassroomDashboard = () => {
   const isMswReady = useMswReadyStore((state) => state.isMswReady);
-  const { data: userData } = useQuery<User | null>({
+  const { data: userData } = useQuery<User>({
     queryKey: ["user"],
     queryFn: getUser,
     staleTime: 1000 * 60,
     retry: 3,
-    placeholderData: null,
   });
   const { data, refetch } = useQuery<GroupData>({
     queryKey: ["classroomspace"],
@@ -75,11 +74,11 @@ const ClassroomDashboard = () => {
 
   // 검색어에 따른 필터링 적용
   const filteredHostClassRooms = hostClassRooms.filter((room) =>
-    room.name.toLowerCase().includes(searchHostTerm.toLowerCase()),
+    room.name.toLowerCase().includes(searchHostTerm.toLowerCase())
   );
 
   const filteredGuestClassRooms = guestClassRooms.filter((room) =>
-    room.name.toLowerCase().includes(searchGuestTerm.toLowerCase()),
+    room.name.toLowerCase().includes(searchGuestTerm.toLowerCase())
   );
 
   return (
@@ -98,8 +97,8 @@ const ClassroomDashboard = () => {
       <div className="group-data-wrap">
         <div className="group-data-left">
           <div className="user-info">
-            <p>{userData?.name}님</p>
-            <span>{userData?.email}</span>
+            <p>{userData?.result?.name}님</p>
+            <span>{userData?.result?.email}</span>
             <ul className="user-group-data">
               <li>
                 <p>강의방 수</p>
@@ -148,17 +147,14 @@ const ClassroomDashboard = () => {
                 <HostRoom key={item.id} classData={item} />
               ))}
             </ul>
+          ) : searchHostTerm !== "" ? (
+            <div className="section-empty-search-classrooom">
+              <img src="/image/img_empty_search_class.png" alt="empty host classroom" />
+            </div>
           ) : (
-            searchHostTerm !== "" ?
-              (
-                <div className="section-empty-search-classrooom">
-                <img src="/image/img_empty_search_class.png" alt="empty host classroom" />
-              </div>
-              ) : (
-                <div className="section-empty-classroom">
-                <img src="/image/img_none_host_classroom.png" alt="empty search host classroom" />
-              </div>
-              )
+            <div className="section-empty-classroom">
+              <img src="/image/img_none_host_classroom.png" alt="empty search host classroom" />
+            </div>
           )}
           <div className="section-title">
             <div className="title-left">
@@ -184,17 +180,14 @@ const ClassroomDashboard = () => {
                 <GuestRoom key={item.id} classData={item} />
               ))}
             </ul>
+          ) : searchHostTerm !== "" ? (
+            <div className="section-empty-search-classrooom">
+              <img src="/image/img_empty_search_class.png" alt="empty host classroom" />
+            </div>
           ) : (
-            searchHostTerm !== "" ?
-              (
-                <div className="section-empty-search-classrooom">
-                  <img src="/image/img_empty_search_class.png" alt="empty host classroom" />
-                </div>
-              ) : (
-                <div className="section-empty-classroom">
-                  <img src="/image/img_none_host_classroom.png" alt="empty search host classroom" />
-                </div>
-              )
+            <div className="section-empty-classroom">
+              <img src="/image/img_none_host_classroom.png" alt="empty search host classroom" />
+            </div>
           )}
         </div>
       </div>

From 21f29fd82c5a7a6d1e835a6f2b841ee58d43a9d4 Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Mon, 18 Nov 2024 18:43:47 +0900
Subject: [PATCH 18/41] =?UTF-8?q?[#279]feat:=20=ED=83=80=EC=9E=85=EC=97=90?=
 =?UTF-8?q?=20=EB=A7=9E=EC=B6=B0=EC=84=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Signup/components/SignupWrap.tsx | 10 ++---
 src/pages/components/Header.tsx            | 47 +++++++++++-----------
 2 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/pages/Signup/components/SignupWrap.tsx b/src/pages/Signup/components/SignupWrap.tsx
index a3b24921..0b302c19 100644
--- a/src/pages/Signup/components/SignupWrap.tsx
+++ b/src/pages/Signup/components/SignupWrap.tsx
@@ -73,9 +73,9 @@ const SignupWrap = () => {
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     const trimmedValue = value.replace(/\s/g, "");
-    if(trimmedValue === "") {
+    if (trimmedValue === "") {
       setValidName(CheckType.Red);
-    }else{
+    } else {
       setValidName(CheckType.Green);
     }
 
@@ -207,8 +207,8 @@ const SignupWrap = () => {
     onError(error) {
       console.error("회원가입 에러", error);
       const apiError = error as any;
-      if (apiError.response.data.code == "AC-400003"){
-        alert("중복 이메일입니다.")
+      if (apiError.response.data.code == "AC-400003") {
+        alert("중복 이메일입니다.");
         return;
       }
       alert("회원가입 중 오류가 발생했습니다.");
@@ -217,7 +217,7 @@ const SignupWrap = () => {
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if(isValidName === CheckType.Red || isValidPhoneNumber === CheckType.Gray) {
+    if (isValidName === CheckType.Red || isValidPhoneNumber === CheckType.Gray) {
       emailRef.current?.focus();
       setValidName(CheckType.Red);
     }
diff --git a/src/pages/components/Header.tsx b/src/pages/components/Header.tsx
index a956635b..a9e12015 100644
--- a/src/pages/components/Header.tsx
+++ b/src/pages/components/Header.tsx
@@ -5,8 +5,17 @@ import { useQuery, useMutation } from "@tanstack/react-query";
 import { useAccessRightStore } from "@/store/accessRight";
 import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
 import { useLocation } from "react-router-dom";
-import { User } from "@/App";
 
+export interface User {
+  code: string;
+  detail: string;
+  result: {
+    email: string;
+    name: string;
+    role: string;
+    provider: string;
+  } | null;
+}
 const LoggedInHeader = () => {
   const params = useParams();
   let isFixed = false;
@@ -14,12 +23,11 @@ const LoggedInHeader = () => {
 
   const isHost = useAccessRightStore((state) => state.isHost);
   const classroomId = Number(params.classroomId);
-  const { data: userData, refetch } = useQuery<User | null>({
+  const { data: userData, refetch } = useQuery<User>({
     queryKey: ["user"],
     queryFn: getUser,
     staleTime: 1000 * 60,
     retry: 3,
-    placeholderData: null,
   });
 
   const navigate = useNavigate();
@@ -55,7 +63,7 @@ const LoggedInHeader = () => {
         <Link className={styles["header-logo"]} to="/">
           <img src="/image/img_logo.png" alt="로고" />
         </Link>
-        {!userData ? (
+        {userData && userData?.code !== "CM-200000" ? (
           <>
             <Link to="/viz">시각화</Link>
           </>
@@ -111,32 +119,25 @@ const LoggedInHeader = () => {
       </div>
 
       <div className="login-header">
-        <a
-            href="https://forms.gle/fufPJjH4Gfmavtqw5"
-            target="_blank"
-            rel="noopener noreferrer"
-        >
-          <button className="feedback-btn">
-            피드백 남기기
-          </button>
+        <a href="https://forms.gle/fufPJjH4Gfmavtqw5" target="_blank" rel="noopener noreferrer">
+          <button className="feedback-btn">피드백 남기기</button>
         </a>
         {!userData ? (
-            <div>
-              <Link to="/login" className={styles["login-btn"]}>
-                로그인
-              </Link>
-              <Link to="/signup" className={styles["join-btn"]}>
-                회원가입
-              </Link>
-            </div>
+          <div>
+            <Link to="/login" className={styles["login-btn"]}>
+              로그인
+            </Link>
+            <Link to="/signup" className={styles["join-btn"]}>
+              회원가입
+            </Link>
+          </div>
         ) : (
-
           <>
-            <span style={{ marginRight: "10px" }}>{userData.name}님</span>
+            <span style={{ marginRight: "10px" }}>{userData.result?.name}님</span>
             <span onClick={handleLogout} className={styles["logout"]}>
               로그아웃
             </span>
-            </>
+          </>
         )}
       </div>
     </header>

From c86163effd35fb9335c168136bfbe5e8f5709098 Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Mon, 18 Nov 2024 18:51:52 +0900
Subject: [PATCH 19/41] =?UTF-8?q?[#279]feat:=20=ED=83=80=EC=9E=85=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/components/Header.tsx | 15 +++------------
 src/types/apiTypes.ts           |  2 +-
 2 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/pages/components/Header.tsx b/src/pages/components/Header.tsx
index a9e12015..685430cb 100644
--- a/src/pages/components/Header.tsx
+++ b/src/pages/components/Header.tsx
@@ -5,17 +5,8 @@ import { useQuery, useMutation } from "@tanstack/react-query";
 import { useAccessRightStore } from "@/store/accessRight";
 import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
 import { useLocation } from "react-router-dom";
+import { getUserProps } from "@/types/apiTypes";
 
-export interface User {
-  code: string;
-  detail: string;
-  result: {
-    email: string;
-    name: string;
-    role: string;
-    provider: string;
-  } | null;
-}
 const LoggedInHeader = () => {
   const params = useParams();
   let isFixed = false;
@@ -23,7 +14,7 @@ const LoggedInHeader = () => {
 
   const isHost = useAccessRightStore((state) => state.isHost);
   const classroomId = Number(params.classroomId);
-  const { data: userData, refetch } = useQuery<User>({
+  const { data: userData, refetch } = useQuery<getUserProps>({
     queryKey: ["user"],
     queryFn: getUser,
     staleTime: 1000 * 60,
@@ -122,7 +113,7 @@ const LoggedInHeader = () => {
         <a href="https://forms.gle/fufPJjH4Gfmavtqw5" target="_blank" rel="noopener noreferrer">
           <button className="feedback-btn">피드백 남기기</button>
         </a>
-        {!userData ? (
+        {userData?.code !== "CM-200000" ? (
           <div>
             <Link to="/login" className={styles["login-btn"]}>
               로그인
diff --git a/src/types/apiTypes.ts b/src/types/apiTypes.ts
index 1afadd6e..13a81302 100644
--- a/src/types/apiTypes.ts
+++ b/src/types/apiTypes.ts
@@ -6,7 +6,7 @@ export interface getUserProps {
     name: string;
     role: string;
     provider: string;
-  } | null;
+  };
 }
 
 export interface LoginProps {

From 219d7d59aa64945e619e094c4368df071be43600 Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Mon, 18 Nov 2024 18:59:35 +0900
Subject: [PATCH 20/41] =?UTF-8?q?[#279]feat:=20css=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Classroom/Classroom.tsx        | 1 +
 src/pages/Classroom/components/Guest.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/pages/Classroom/Classroom.tsx b/src/pages/Classroom/Classroom.tsx
index 6144b320..2f634b2c 100644
--- a/src/pages/Classroom/Classroom.tsx
+++ b/src/pages/Classroom/Classroom.tsx
@@ -158,6 +158,7 @@ const Classroom = () => {
     setIsConsentInformationModalOpen(false);
   };
   const openConsentInformationModal = (guest: GuestType): void => {
+    if (guest.status === 1) return;
     setIsConsentInformationModalOpen(true);
     setOnClickGuest(guest);
   };
diff --git a/src/pages/Classroom/components/Guest.tsx b/src/pages/Classroom/components/Guest.tsx
index f6db9cd4..df653369 100644
--- a/src/pages/Classroom/components/Guest.tsx
+++ b/src/pages/Classroom/components/Guest.tsx
@@ -12,7 +12,7 @@ interface GuestProps {
 const Guest = ({ guest, onClick }: GuestProps) => {
   switch (guest.status) {
     case 1:
-      guest.status = "제출 중";
+      guest.status = "미제출";
       break;
     case 2:
       guest.status = "도움 요청";
@@ -26,8 +26,8 @@ const Guest = ({ guest, onClick }: GuestProps) => {
   return (
     <>
       <li onClick={onClick}>
-        <div>
-          {guest.status === "제출 중" ? (
+        <a style={{ cursor: "pointer" }}>
+          {guest.status === "미제출" ? (
             <>
               <div>
                 <p>{guest.name}</p>
@@ -57,7 +57,7 @@ const Guest = ({ guest, onClick }: GuestProps) => {
               </div>
             </>
           ) : null}
-        </div>
+        </a>
       </li>
     </>
   );

From 39a44b491e268cd1a47794cfc0424b1b19875c15 Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Mon, 18 Nov 2024 19:00:24 +0900
Subject: [PATCH 21/41] =?UTF-8?q?[#279]feat:=20=EB=B2=88=ED=98=B8=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Classroom/components/ClassroomModal.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/Classroom/components/ClassroomModal.tsx b/src/pages/Classroom/components/ClassroomModal.tsx
index d358f910..689acb5f 100644
--- a/src/pages/Classroom/components/ClassroomModal.tsx
+++ b/src/pages/Classroom/components/ClassroomModal.tsx
@@ -51,7 +51,6 @@ const ClassroomModal = ({ isOpen, onClose, guest }: Props) => {
             <h2 className="popup__header__title">
               {guest?.name} ({guest?.email})
             </h2>
-            <p>{guest?.id}</p>
             <button className="popup__header__close" onClick={onClose}></button>
           </div>
           <div className={styles["popup__contents__group"]}>

From 527b16a6c56030a84d33c030d3d3448e23e01ff8 Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Mon, 18 Nov 2024 19:10:33 +0900
Subject: [PATCH 22/41] =?UTF-8?q?[#279]feat:=20gust=20=ED=83=80=EC=9E=85?=
 =?UTF-8?q?=20let=EC=9C=BC=EB=A1=9C=20=ED=95=B4=EC=84=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Classroom/Classroom.tsx        |  2 +-
 src/pages/Classroom/components/Guest.tsx | 27 ++++++++++--------------
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/pages/Classroom/Classroom.tsx b/src/pages/Classroom/Classroom.tsx
index 2f634b2c..607d3e78 100644
--- a/src/pages/Classroom/Classroom.tsx
+++ b/src/pages/Classroom/Classroom.tsx
@@ -16,7 +16,7 @@ import ClassroomModal from "@/pages/Classroom/components/ClassroomModal.tsx";
 
 const BASE_URL = import.meta.env.VITE_APP_BACKEND_BASE_URL;
 
-interface GuestType {
+export interface GuestType {
   id: number;
   email: string;
   name: string;
diff --git a/src/pages/Classroom/components/Guest.tsx b/src/pages/Classroom/components/Guest.tsx
index df653369..fa4b5cc3 100644
--- a/src/pages/Classroom/components/Guest.tsx
+++ b/src/pages/Classroom/components/Guest.tsx
@@ -1,24 +1,19 @@
-interface GuestType {
-  id: number;
-  email: string;
-  name: string;
-  status: number | string;
-  role: number;
-}
+import { GuestType } from "../Classroom";
 interface GuestProps {
   guest: GuestType;
   onClick: () => void;
 }
 const Guest = ({ guest, onClick }: GuestProps) => {
+  let guestStatus = "";
   switch (guest.status) {
     case 1:
-      guest.status = "미제출";
+      guestStatus = "미제출";
       break;
     case 2:
-      guest.status = "도움 요청";
+      guestStatus = "도움 요청";
       break;
     case 3:
-      guest.status = "제출 완료";
+      guestStatus = "제출 완료";
       break;
     default:
       null;
@@ -27,33 +22,33 @@ const Guest = ({ guest, onClick }: GuestProps) => {
     <>
       <li onClick={onClick}>
         <a style={{ cursor: "pointer" }}>
-          {guest.status === "미제출" ? (
+          {guestStatus === "미제출" ? (
             <>
               <div>
                 <p>{guest.name}</p>
               </div>
               <div className="progress-not">
-                <p>{guest.status}</p>
+                <p>{guestStatus}</p>
               </div>
             </>
           ) : null}
-          {guest.status === "도움 요청" ? (
+          {guestStatus === "도움 요청" ? (
             <>
               <div>
                 <p>{guest.name}</p>
               </div>
               <div className="progress-fail">
-                <p>{guest.status}</p>
+                <p>{guestStatus}</p>
               </div>
             </>
           ) : null}
-          {guest.status === "제출 완료" ? (
+          {guestStatus === "제출 완료" ? (
             <>
               <div>
                 <p>{guest.name}</p>
               </div>
               <div className="progress-success">
-                <p>{guest.status}</p>
+                <p>{guestStatus}</p>
               </div>
             </>
           ) : null}

From a03aa0512993c8c02bb89143bdf0517ff2cc0081 Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Mon, 18 Nov 2024 19:30:26 +0900
Subject: [PATCH 23/41] =?UTF-8?q?[#279]feat:=20linenumber=20=EB=B3=B4?=
 =?UTF-8?q?=EB=82=B4=EC=A3=BC=EB=8A=94=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/LeftSection/components/GptComment.tsx          | 4 ++--
 src/services/api.ts                                           | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Visualization/components/LeftSection/components/GptComment.tsx b/src/pages/Visualization/components/LeftSection/components/GptComment.tsx
index 66eb131d..e357a37b 100644
--- a/src/pages/Visualization/components/LeftSection/components/GptComment.tsx
+++ b/src/pages/Visualization/components/LeftSection/components/GptComment.tsx
@@ -71,7 +71,7 @@ const GptComment = () => {
   };
 
   const gptCorrectMutation = useMutation({
-    mutationFn: fetchGptCorrect,
+    mutationFn: () => fetchGptCorrect(code, errorLine?.lineNumber || 1),
     async onSuccess(data) {
       console.log(data);
       setReason(data.result.reason);
@@ -145,7 +145,7 @@ const GptComment = () => {
     clearCurrentTimeout();
     setIsGptToggle(true);
     resetEditor();
-    gptCorrectMutation.mutate(code);
+    gptCorrectMutation.mutate();
   };
 
   const handleHint = () => {
diff --git a/src/services/api.ts b/src/services/api.ts
index a0448981..00afac5f 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -343,12 +343,12 @@ export const logout = async (): Promise<null> => {
   }
 };
 
-export const fetchGptCorrect = async (code: string): Promise<GptCorrectResponse> => {
+export const fetchGptCorrect = async (code: string, lineNumber: number): Promise<GptCorrectResponse> => {
   const response = await fetch(`${BASE_URL}/edupi-assist/v1/advice/correction`, {
     method: "POST",
     credentials: "include",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ source_code: code }),
+    body: JSON.stringify({ line: lineNumber, source_code: code }),
   });
   if (!response.ok) {
     throw new Error("Network response was not ok");

From 5eb85a80abf30aca45f7e75e5dad3b0d9d68c6e3 Mon Sep 17 00:00:00 2001
From: GS_song98 <20003204@sju.ac.kr>
Date: Mon, 18 Nov 2024 20:06:47 +0900
Subject: [PATCH 24/41] =?UTF-8?q?[#284]feat:=20=EC=BB=A4=EB=A6=AC=ED=81=98?=
 =?UTF-8?q?=EB=9F=BC=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LeftSection/components/Dropdown.tsx       |  58 ++-
 .../LeftSection/components/exampleCode.ts     | 491 ++++++++++--------
 2 files changed, 313 insertions(+), 236 deletions(-)

diff --git a/src/pages/Visualization/components/LeftSection/components/Dropdown.tsx b/src/pages/Visualization/components/LeftSection/components/Dropdown.tsx
index 0b190568..532d024b 100644
--- a/src/pages/Visualization/components/LeftSection/components/Dropdown.tsx
+++ b/src/pages/Visualization/components/LeftSection/components/Dropdown.tsx
@@ -2,7 +2,7 @@ import styles from "../LeftSection.module.css";
 import { useEffect, useRef, useState, useContext } from "react";
 import { CodeContext } from "@/pages/Visualization/context/CodeContext";
 import { useConsoleStore } from "@/store/console";
-import { basic_codes, control_codes, function_codes, input_codes } from "./exampleCode.ts";
+import { data_codes, string_codes, operation_codes, control_codes, list_codes, repeat_codes, function_codes } from "./exampleCode.ts";
 import { PreprocessedCodesContext } from "@/pages/Visualization/context/PreProcessedCodesContext.ts";
 const Dropdown = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -30,14 +30,14 @@ const Dropdown = () => {
   const toggleDropdown = () => {
     setIsOpen((prev) => !prev);
   };
-  const { setInputData, resetConsole } = useConsoleStore();
+  const { resetInputData, resetConsole } = useConsoleStore();
   const { setPreprocessedCodes } =  useContext(PreprocessedCodesContext);
 
-  const updateOption = (optionText: string, code: string, input: string, event: React.MouseEvent) => {
+  const updateOption = (optionText: string, code: string, event: React.MouseEvent) => {
     event.stopPropagation();
     setSelectedOption(optionText);
     setCode(code);
-    setInputData(input);
+    resetInputData();
     resetConsole();
     setPreprocessedCodes([]);
     setIsOpen(false);
@@ -56,11 +56,31 @@ const Dropdown = () => {
       </div>
       <ul className={styles["dropdown-menu"]} style={{ display: isOpen ? "block" : "none" }}>
         <li className={styles["main-option"]}>
-          <p className={styles.step1}>기초</p>
+          <p className={styles.step1}>자료형</p>
           <ul className={styles["sub-options"]}>
-            {basic_codes.map(([title, code, input], index) => (
+            {data_codes.map(([title, code], index) => (
               <li key={index}>
-                <button onClick={(e) => updateOption(title, code, input, e)}>{title}</button>
+                <button onClick={(e) => updateOption(title, code, e)}>{title}</button>
+              </li>
+            ))}
+          </ul>
+        </li>
+        <li className={styles["main-option"]}>
+          <p className={styles.step1}>문자열 다루기</p>
+          <ul className={styles["sub-options"]}>
+            {string_codes.map(([title, code], index) => (
+              <li key={index}>
+                <button onClick={(e) => updateOption(title, code, e)}>{title}</button>
+              </li>
+            ))}
+          </ul>
+        </li>
+        <li className={styles["main-option"]}>
+          <p className={styles.step1}>연산자</p>
+          <ul className={styles["sub-options"]}>
+            {operation_codes.map(([title, code], index) => (
+              <li key={index}>
+                <button onClick={(e) => updateOption(title, code, e)}>{title}</button>
               </li>
             ))}
           </ul>
@@ -68,19 +88,29 @@ const Dropdown = () => {
         <li className={styles["main-option"]}>
           <p className={styles.step1}>제어문</p>
           <ul className={styles["sub-options"]}>
-            {control_codes.map(([title, code, input], index) => (
+            {control_codes.map(([title, code], index) => (
+              <li key={index}>
+                <button onClick={(e) => updateOption(title, code, e)}>{title}</button>
+              </li>
+            ))}
+          </ul>
+        </li>
+        <li className={styles["main-option"]}>
+          <p className={styles.step1}>리스트</p>
+          <ul className={styles["sub-options"]}>
+            {list_codes.map(([title, code], index) => (
               <li key={index}>
-                <button onClick={(e) => updateOption(title, code, input, e)}>{title}</button>
+                <button onClick={(e) => updateOption(title, code, e)}>{title}</button>
               </li>
             ))}
           </ul>
         </li>
         <li className={styles["main-option"]}>
-          <p className={styles.step1}>입출력</p>
+          <p className={styles.step1}>반복문</p>
           <ul className={styles["sub-options"]}>
-            {input_codes.map(([title, code, input], index) => (
+            {repeat_codes.map(([title, code], index) => (
               <li key={index}>
-                <button onClick={(e) => updateOption(title, code, input, e)}>{title}</button>
+                <button onClick={(e) => updateOption(title, code, e)}>{title}</button>
               </li>
             ))}
           </ul>
@@ -88,9 +118,9 @@ const Dropdown = () => {
         <li className={styles["main-option"]}>
           <p className={styles.step1}>함수</p>
           <ul className={styles["sub-options"]}>
-            {function_codes.map(([title, code, input], index) => (
+            {function_codes.map(([title, code], index) => (
               <li key={index}>
-                <button onClick={(e) => updateOption(title, code, input, e)}>{title}</button>
+                <button onClick={(e) => updateOption(title, code, e)}>{title}</button>
               </li>
             ))}
           </ul>
diff --git a/src/pages/Visualization/components/LeftSection/components/exampleCode.ts b/src/pages/Visualization/components/LeftSection/components/exampleCode.ts
index 2a168d2a..25b1e947 100644
--- a/src/pages/Visualization/components/LeftSection/components/exampleCode.ts
+++ b/src/pages/Visualization/components/LeftSection/components/exampleCode.ts
@@ -1,29 +1,76 @@
-export const basic_codes = [
-    ["변수",  "# 1. 변수 선언 및 할당\n" +
-                "name = \"Edupi\"        # 문자열 변수\n" +
-                "age = 10              # 정수형 변수\n" +
-                "height = 1.75         # 실수형 변수\n" +
-                "is_student = True     # 불리언(boolean) 변수\n" +
-                "\n" +
-                "print(\"이름:\", name)\n" +
-                "print(\"나이:\", age)\n" +
-                "print(\"키:\", height)\n" +
-                "print(\"학생 여부:\", is_student)\n" +
-                "\n" +
-                "# 2. 변수 값 변경\n" +
-                "age = age + 1  # 나이에 1을 더함\n" +
-                "print(\"내년 나이:\", age)\n" +
-                "\n" +
-                "# 3. 변수 사용\n" +
-                "total_height = height * 2  # 키를 두 배로 계산\n" +
-                "print(\"두 배 키:\", total_height)\n",
-      ""
-    ],
+export const data_codes = [
+  ["기본 변수 선언", "# 예제 1: 기본적인 변수 선언\n" +
+                  "name = \"Alice\"\n" +
+                  "age = 25\n" +
+                  "is_student = True\n",
+  ],
+  ["변수의 이름 규칙", "# 예제 2: 변수 이름 규칙 (유효한 변수 이름)\n" +
+                    "my_var = 10\n" +
+                    "my_var2 = 20\n" +
+                    "_var_starting_with_underscore = 30\n" +
+                    "\n" +
+                    "# 2var = 10  # 숫자로 시작 불가\n" +
+                    "# my-var = 20  # 하이픈 사용 불가\n" +
+                    "# my var = 30  # 공백 사용 불가\n",
+  ],
+  ["대소문자 구분", "# 예제 3: 대소문자 구분\n" +
+                "Var = 5\n" +
+                "var = 10\n" +
+                "print(Var, var)  # 5와 10 출력",
+  ],
+  ["여러 변수 선언", "# 예제 4: 여러 변수 선언\n" +
+                  "x, y, z = 1, 2, 3\n" +
+                  "print(x, y, z)",
+  ],
+  ["종합", "# 1. 변수 선언 및 할당\n" +
+          "name = \"Edupi\"        # 문자열 변수\n" +
+          "age = 10              # 정수형 변수\n" +
+          "height = 1.75         # 실수형 변수\n" +
+          "is_student = True     # 불리언(boolean) 변수\n" +
+          "\n" +
+          "print(\"이름:\", name)\n" +
+          "print(\"나이:\", age)\n" +
+          "print(\"키:\", height)\n" +
+          "print(\"학생 여부:\", is_student)\n" +
+          "\n" +
+          "# 2. 변수 값 변경\n" +
+          "age = age + 1  # 나이에 1을 더함\n" +
+          "print(\"내년 나이:\", age)\n" +
+          "\n" +
+          "# 3. 변수 사용\n" +
+          "total_height = height * 2  # 키를 두 배로 계산\n" +
+          "print(\"두 배 키:\", total_height)\n",
+  ],
+];
+
+
+export const string_codes = [
+  ["문자열 인덱싱", "# 예제 1: 문자열 인덱싱\n" +
+                "text = input()\n" +
+                "print(text[0])  # P\n" +
+                "print(text[-1])  # n"],
+  ["문자열 슬라이싱", "# 예제 2: 문자열 슬라이싱\n" +
+                  "text = \"Hello, Edupi!\"\n" +
+                  "\n" +
+                  "print(\"처음 5글자:\", text[:5])      \n" +
+                  "print(\"5번째부터 끝까지:\", text[5:]) "],
+  ["문자열 연산", "# 예제 4: 문자열 연산\n" +
+                  "greeting = \"Hello\"\n" +
+                  "name = \"World\"\n" +
+                  "message = greeting + name + \"!\"  # 문자열 합치기\n" +
+                  "print(message)\n" +
+                  "\n" +
+                  "repeat = \"Ha\" * 3\n" +
+                  "print(repeat)  # HaHaHa\n",
+  ],
 
-    ["사칙 연산", "a = 10\n" +
-                "b = 3\n" +
+];
+
+export const operation_codes = [
+  ["산술 연산자", "# 예제 1: 산술 연산자\n" +
+                "a = int(input())\n" +
+                "b = int(input())\n" +
                 "\n" +
-                "# 연산\n" +
                 "print(a + b)\n" +
                 "print(a - b) \n" +
                 "print(a * b) \n" +
@@ -35,213 +82,213 @@ export const basic_codes = [
                 "c = 0o177\n" +
                 "d = 0xABC\n" +
                 "print(c) \n" +
-                "print(d) " +
-                "\n",
-      ""
-    ],
-    ["문자열 연산","text = \"Hello, Edupi!\"\n" +
-                "\n" +
-                "# 1. 특정 인덱스의 문자 가져오기\n" +
-                "print(\"첫 번째 문자:\", text[0])      \n" +
-                "print(\"마지막 문자:\", text[5])   \n\n" +
-                "# 2. 문자열 슬라이싱 (일부분 잘라내기)\n" +
-                "print(\"처음 5글자:\", text[:5])      \n" +
-                "print(\"5번째부터 끝까지:\", text[5:]) \n" +
-                "\n" +
-                "# 3. 문자열 연산하기\n" +
-                "print(\"=\"*30)\n" +
+                "print(d)\n ",
+  ],
+  ["비교 연산자", "# 예제 2: 비교 연산자\n" +
+                "a = 10\n" +
+                "b = 20\n" +
                 "\n" +
-                "# 3. 문자열의 모든 문자를 하나씩 출력하기\n" +
-                "for char in text:\n" +
-                "    print(char, end=\" \")"+
-                "\n",
-      ""
-    ],
+                "print(a > b)\n" +
+                "print(a < b)\n" +
+                "print(a == b)\n" +
+                "print(a != b)\n",
+  ],
+  ["다향 연산자", "# 예제 3: 다항 연산자\n" +
+              "result = 10 + 5 * 2 - 3  # 우선순위: *, +, -\n" +
+              "print(result)\n",
+  ],
 
-]
+];
 
-export const control_codes=[
-    ["if문", "# 숫자가 양수, 음수 또는 0인지 판별\n" +
-                "num = 281\n" +
-                "\n" +
-                "if num > 0:\n" +
-                "    print(\"The number is positive.\")\n" +
-                "elif num < 0:\n" +
-                "    print(\"The number is negative.\")\n" +
+export const control_codes = [
+  ["if-else문", "# 예제 1: if-else문\n" +
+                "number = int(input())\n" +
+                "if number > 0:\n" +
+                "    print(\"Positive\")\n" +
                 "else:\n" +
-                "    print(\"The number is zero.\")" +
-                "\n",
-      ""
-    ],
-    ["for문1", "# 점수가 60점 이상인 경우 합격 메시지를 출력\n" +
-                "scores = [90, 25, 67, 45, 80]\n" +
-                "\n" +
-                "number = 0   \n" +
-                "for score in scores:   \n" +
-                "    number = number +1 \n" +
-                "    if score >= 60: \n" +
-                "        print(\"%d번 학생은 합격입니다.\" % number)\n" +
-                "    else: \n" +
-                "        print(\"%d번 학생은 불합격입니다.\" % number)" +
-                "\n",
-      ""
-    ],
-    [
-        "for문2", "# 점수가 60점 이상인 경우 합격 메시지를 출력\n" +
-                    "scores = [90, 25, 67, 45, 80]\n" +
-                    "\n" +
-                    "for number in range(len(scores)):\n" +
-                    "    if scores[number] < 60: \n" +
-                    "        continue\n" +
-                    "    print(f\"{number+1}번 학생 축하합니다. 합격입니다.\", )" +
-                    "\n",
-      ""
-    ]
-    ,
-    ["총 합 구하기" , "# 1부터 10까지의 총 합 구하기\n" +
-                    "total = 0\n" +
-                    "for i in range(1, 11):\n" +
-                    "    total = total + i\n" +
-                    "\n" +
-                    "print(\"Sum of numbers from 1 to 10:\", total)" +
-                    "\n",
-      ""
-    ],
-    [
-      "구구단", "# 2단부터 9단까지 구구단 출력\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",
-      ""
-    ],
-    ["별 찍기1", "# 삼각형 별 찍기\n" +
-                "n = 10\n" +
-                "\n" +
-                "for i in range(1, n + 1):\n" +
-                "    print(i *  '*' ) " +
-                "\n",
-      ""
-    ],
-    ["별 찍기2", "# 마름모 별 찍기\n" +
-                "a = 6\n" +
-                "for i in range(a//2):\n" +
-                "    print(' ' * (a//2 - i), end = '')\n" +
-                "    print('*' * (2*i+1))\n" +
-                "\n" +
-                "for i in range(a//2-1):\n" +
-                "    print(' ' * (i + 2), end = '')\n" +
-                "    print('*' * ((a//2*2)-3-2*i))" +
-                "\n",
-      ""
-    ]
-]
+                "    print(\"Negative or Zero\")\n",
+  ],
+  ["if-elif-else문", "# 예제 2: if-elif-else문\n" +
+                    "grade = int(input())\n" +
+                    "if grade >= 90:\n" +
+                    "    print(\"A\")\n" +
+                    "elif grade >= 80:\n" +
+                    "    print(\"B\")\n" +
+                    "elif grade >= 70:\n" +
+                    "    print(\"C\")\n" +
+                    "else:\n" +
+                    "    print(\"F\")\n",
+  ],
+  ["중첩 if문", "# 예제 3: 중첩 if문\n" +
+                "age = 20\n" +
+                "if age >= 18:\n" +
+                "    if age >= 65:\n" +
+                "        print(\"Senior citizen\")\n" +
+                "    else:\n" +
+                "        print(\"Adult\")\n",
+  ],
+];
 
-export const input_codes =[
-  ["입력 덧셈", "# input()의 갯수만큼 콘솔에 입력을 추가해주세요.\n" +
-                    "a = input()\n" +
-                    "b = input()\n" +
-                    "\n" +
-                    "print(f\"a: {a}, b: {b}\")\n" +
-                    "\n" +
-                    "sum_result = int(a) + int(b)\n" +
-                    "print(f\"sum of a and b : {sum_result}\")\n"
-    , "12\n13"
+export const list_codes = [
+
+  ["리스트 인덱싱", "# 예제 1: 리스트 인덱싱\n" +
+                "nums = [10, 20, 30, 40]\n" +
+                "print(nums[0], nums[-1])  # 첫 번째, 마지막 요소\n",
   ],
-  ["입력 자기소개", "# input()의 갯수만큼 콘솔에 입력을 추가해주세요.\n" +
-                    "name = input()\n" +
-                    "age = input()\n" +
-                    "\n" +
-                    "print(f\"안녕하세요 저는 {age}살 {name}입니다.\")\n"
-    ,"홍길동\n24"
-  ]
-]
+  ["리스트 슬라이싱", "# 예제 2: 리스트 슬라이싱\n" +
+                  "nums = [10, 20, 30, 40]\n" +
+                  "\n" +
+                  "n1 = nums[1:3] # [20, 30]\n" +
+                  "n2 = nums[:2] # [10, 20]\n" +
+                  "n3 = nums[2:] # [30, 40]\n",
+  ],
+  ["리스트 정렬", "# 예제 3: 리스트 정렬\n" +
+              "nums = [3, 1, 4, 1, 5, 9]\n" +
+              "sorted_nums = sorted(nums)\n",
+  ],
+  ["리스트 합치기", "# 예제 4: 리스트 합치기\n" +
+                "nums1 = [3, 1, 4, 1, 5, 9]\n" +
+                "nums2 = [7, 8, 9]\n" +
+                "combined = nums1 + nums2\n" +
+                "print(combined)\n",
+  ],
+];
+
+export const repeat_codes = [
+  ["for문 기본", "# 예제 1: for문 기본 사용\n" +
+                "for i in range(1, 10, 2):\n" +
+                "    print(i)\n"],
+  ["리스트 요소 반복", "# 예제 2: 리스트 요소 반복\n" +
+                  "marks = [90, 25, 67, 45, 80]\n" +
+                  "\n" +
+                  "for number in range(len(marks)):\n" +
+                  "    if marks[number] < 60: \n" +
+                  "        continue\n" +
+                  "    print(f\"{number+1}번 학생 축하합니다. 합격입니다.\")\n",
+  ],
+  ["while문 기본", "# 예제 3: while문 기본 사용\n" +
+                  "count = 0\n" +
+                  "while count < 3:\n" +
+                  "    print(count)\n" +
+                  "    count = count + 1\n" +
+                  "    \n" +
+                  "print(\"END\")\n",
+  ],
+  ["반복문에서 break", "# 예제 4: 반복문에서 break 사용\n" +
+                        "for i in range(10):\n" +
+                        "    if i == 2:\n" +
+                        "        break\n" +
+                        "    print(i)\n" +
+                        "\n" +
+                        "print(\"END\")\n",
+  ],
+  ["반복문에서 continue", "# 예제 5: 반복문에서 continue 사용\n" +
+                            "for i in range(10):\n" +
+                            "    if i % 2 == 0:\n" +
+                            "        continue\n" +
+                            "    print(i)\n" +
+                            "   \n" +
+                            "print(\"END\")\n"],
+];
+
+export const function_codes = [
 
-export const function_codes =[
-    [
-        "짝수의 합", "# 짝수의 합을 구하는 함수\n" +
-                "def sum_even_number(numbers):\n" +
-                "   result = 0\n" +
-                "   for number in numbers:\n" +
-                "      if(number % 2 == 0):\n" +
-                "         result = result + number\n" +
-                "   return result\n" +
+  [
+    "기본 함수", "# 예제 1: 기본 함수\n" +
+                "def greet(name):\n" +
+                "    return f\"Hello, {name}!\"\n" +
                 "\n" +
-                "# main\n" +
-                "list1 = [1,2,3,4,5,6,7,8,9,10]\n" +
-                "result = sum_even_number(list1)\n" +
-                "print(f\"sum of numbers= {result}\")\n",
-      ""
-    ],
-    [
-        "최대값 찾기", "# 리스트에서 최대값을 찾는 함수\n" +
-                    "def find_max(numbers):\n" +
-                    "   max_num = numbers[0]\n" +
-                    "   for num in numbers:\n" +
-                    "      if num > max_num:\n" +
-                    "         max_num = num\n" +
-                    "   return max_num\n" +
-                    "\n" +
-                    "# 함수 호출\n" +
-                    "numbers = [3, 5, 7, 2, 8]\n" +
-                    "max_number = find_max(numbers)\n" +
-                    "print(f\"max number : {max_number}\")" +
-                    "\n",
-      ""
-    ],
-    [
-        "사각형의 면적과 둘레", "def calculate_area(width, height):\n" +
-                            "   return width * height\n" +
-                            "\n" +
-                            "def calculate_perimeter(width, height):\n" +
-                            "   return 2 * (width + height)\n" +
-                            "\n" +
-                            "width = 5\n" +
-                            "height = 3\n" +
-                            "\n" +
-                            "area = calculate_area(width, height)\n" +
-                            "perimeter = calculate_perimeter(width, height)\n" +
-                            "\n" +
-                            "print(f\"area: {area}\")        # 출력: Area: 15\n" +
-                            "print(f\"perimeter: {perimeter}\")  # 출력: Perimeter: 16" +
-                            "\n",
-      ""
-    ],
-    [
-        "두 점 사이의 거리", "# 두 점 사이의 x축 차이를 계산하는 함수\n" +
-                            "def delta_x(x1, x2):\n" +
-                            "   if x1 > x2:\n" +
-                            "      return x1 - x2\n" +
-                            "   else:\n" +
-                            "      return x2 - x1\n" +
-                            "\n" +
-                            "# 두 점 사이의 y축 차이를 계산하는 함수\n" +
-                            "def delta_y(y1, y2):\n" +
-                            "   if y1 > y2:\n" +
-                            "      return y1 - y2\n" +
-                            "   else:\n" +
-                            "      return y2 - y1\n" +
-                            "\n" +
-                            "# 두 점 사이의 거리를 계산하는 함수\n" +
-                            "def calculate_distance(x1, y1, x2, y2):\n" +
-                            "   dx = delta_x(x1, x2)\n" +
-                            "   dy = delta_y(y1, y2)\n" +
-                            "   return (dx**2 + dy**2)**0.5\n" +
-                            "\n" +
-                            "# 사용 예제\n" +
-                            "x1 = 1\n" +
-                            "y1 = 2\n" +
-                            "x2 = 4\n" +
-                            "y2 =6\n" +
-                            "\n" +
-                            "distance = calculate_distance(x1, y1, x2, y2)\n" +
-                            "print(f\"Distance: {distance}\")  # 출력: Distance: 5.0" +
-                            "\n",
-      ""
-    ]
+                "result = greet(\"Alice\")\n" +
+                "print(result)\n",
+  ],
+  [
+    "지역 변수", "# 예제 2: 지역 변수\n" +
+                "def local_example():\n" +
+                "    x = 10  # 지역 변수\n" +
+                "    print(x)\n" +
+                "\n" +
+                "local_example()\n" +
+                "# print(x)  # 오류 발생 (x는 함수 외부에서 사용 불가)\n",
+  ],
+  [
+    "홀수 짝수 합", "# 숫자가 홀수인지 짝수인지 확인하는 함수\n" +
+                  "def sum_even_odd(nums):\n" +
+                  "   odd_sum = 0;\n" +
+                  "   even_sum = 0;\n" +
+                  "\n" +
+                  "   for num in nums:\n" +
+                  "      if num % 2 == 0:\n" +
+                  "         even_sum = even_sum + num\n" +
+                  "      else:\n" +
+                  "         odd_sum = odd_sum + num\n" +
+                  "   return even_sum, odd_sum\n" +
+                  "\n" +
+                  "# 함수 호출\n" +
+                  "list2 = [1,2,3,4,5,6]\n" +
+                  "sum_even_odd(list2)\n",
+  ],
+  [
+    "최대값 찾기", "# 리스트에서 최대값을 찾는 함수\n" +
+                "def find_max(numbers):\n" +
+                "   max_num = numbers[0]\n" +
+                "   for num in numbers:\n" +
+                "      if num > max_num:\n" +
+                "         max_num = num\n" +
+                "   return max_num\n" +
+                "\n" +
+                "# 함수 호출\n" +
+                "numbers = [3, 5, 7, 2, 8]\n" +
+                "max_number = find_max(numbers)\n" +
+                "print(\"Max number:\", max_number)\n",
+  ],
+  [
+    "사각형의 면적과 둘레", "def calculate_area(width, height):\n" +
+                        "   return width * height\n" +
+                        "\n" +
+                        "def calculate_perimeter(width, height):\n" +
+                        "   return 2 * (width + height)\n" +
+                        "\n" +
+                        "width = 5\n" +
+                        "height = 3\n" +
+                        "\n" +
+                        "area = calculate_area(width, height)\n" +
+                        "perimeter = calculate_perimeter(width, height)\n" +
+                        "\n" +
+                        "print(f\"Area: {area}\")        # 출력: Area: 15\n" +
+                        "print(f\"Perimeter: {perimeter}\")  # 출력: Perimeter: 16\n",
+  ],
+  [
+    "두 점 사이의 거리", "# 두 점 사이의 x축 차이를 계산하는 함수\n" +
+                      "def delta_x(x1, x2):\n" +
+                      "   if x1 > x2:\n" +
+                      "      return x1 - x2\n" +
+                      "   else:\n" +
+                      "      return x2 - x1\n" +
+                      "\n" +
+                      "# 두 점 사이의 y축 차이를 계산하는 함수\n" +
+                      "def delta_y(y1, y2):\n" +
+                      "   if y1 > y2:\n" +
+                      "      return y1 - y2\n" +
+                      "   else:\n" +
+                      "      return y2 - y1\n" +
+                      "\n" +
+                      "# 두 점 사이의 거리를 계산하는 함수\n" +
+                      "def calculate_distance(x1, y1, x2, y2):\n" +
+                      "   dx = delta_x(x1, x2)\n" +
+                      "   dy = delta_y(y1, y2)\n" +
+                      "   return (dx**2 + dy**2)**0.5\n" +
+                      "\n" +
+                      "# 사용 예제\n" +
+                      "x1 = 1\n" +
+                      "y1 = 2\n" +
+                      "x2 = 4\n" +
+                      "y2 =6\n" +
+                      "\n" +
+                      "distance = calculate_distance(x1, y1, x2, y2)\n" +
+                      "print(f\"Distance: {distance}\")  # 출력: Distance: 5.0\n",
+  ],
 
-]
+];
 
 
 

From 16112415c8fa3b9ed26c83e7c952e7a95f8ae610 Mon Sep 17 00:00:00 2001
From: GS_song98 <20003204@sju.ac.kr>
Date: Mon, 18 Nov 2024 20:26:01 +0900
Subject: [PATCH 25/41] =?UTF-8?q?[#279]fix:=20=ED=95=99=EC=83=9D=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=20SyntaxHighlighter=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Classroom/components/ClassroomModal.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/Classroom/components/ClassroomModal.tsx b/src/pages/Classroom/components/ClassroomModal.tsx
index 689acb5f..c11121d0 100644
--- a/src/pages/Classroom/components/ClassroomModal.tsx
+++ b/src/pages/Classroom/components/ClassroomModal.tsx
@@ -1,7 +1,9 @@
 import { useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { getStudentCode } from "@/services/api";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import styles from "./ClassroomModal.module.css";
+import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 interface Props {
   isOpen: boolean;
@@ -58,11 +60,13 @@ const ClassroomModal = ({ isOpen, onClose, guest }: Props) => {
             {isLoading ? (
               <div>로딩중...</div>
             ) : studentCode ? (
-              <pre className={styles["popup__display__code"]}>
+              <pre className="highlighted-code">
                 {studentCode.result.split("\n").map((line, index) => (
                   <code key={index} className={styles["code__line"]}>
                     <span className={styles["line__number"]}>{index + 1}</span>
-                    <span className={styles["line__content"]}>{line}</span>
+                    <SyntaxHighlighter key={`code-${index}-${line}`} language={"python"} style={oneLight}>
+                      {line}
+                    </SyntaxHighlighter>
                   </code>
                 ))}
               </pre>

From 76d6bc33a839b49cca699206175cab251714fdfb Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Tue, 19 Nov 2024 10:10:27 +0900
Subject: [PATCH 26/41] =?UTF-8?q?[#294]feat:=20pop,=20remove=EB=93=B1=20?=
 =?UTF-8?q?=EC=A7=80=EC=9B=90=EC=95=88=ED=95=98=EB=8A=94=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=81=ED=99=94=20=EC=98=88=EC=99=B8=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/RightSection/RightSection.tsx       | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/pages/Visualization/components/RightSection/RightSection.tsx b/src/pages/Visualization/components/RightSection/RightSection.tsx
index 0976190a..ce2cd7ad 100644
--- a/src/pages/Visualization/components/RightSection/RightSection.tsx
+++ b/src/pages/Visualization/components/RightSection/RightSection.tsx
@@ -40,6 +40,7 @@ import { turnOffAllNodeLight } from "./services/turnOffAllNodeLight";
 import { findTargetChild } from "./services/findTargetChild";
 import { findDeleteUsedId } from "./services/findDeleteUsedId";
 import { unLightCodeFlow } from "./services/unLightCodeFlow";
+import { isNotServiceDtoType } from "./services/isNotServiceDtoType";
 //rendUtils에서 가져온 함수
 import { renderingStructure } from "./renderingStructure";
 import { renderingCodeFlow } from "./renderingCodeFlow";
@@ -137,10 +138,13 @@ const RightSection = () => {
   }, [setStepIdx, location]);
 
   const codeVizMutation = useMutation<SuccessResponse, ApiError, Parameters<typeof visualize>[0]>({
-
     mutationFn: visualize,
     async onSuccess(data) {
       // 타입 체크 함수
+      if (isNotServiceDtoType(data.result.code)) {
+        console.error("시각화를 지원하지 않는 코드가 포함되어 있습니다.");
+        throw new Error("시각화를 지원하지 않는 코드가 포함되어 있습니다.");
+      }
       if (isValidTypeDtoArray(data.result.code)) {
         resetConsole();
         setPreprocessedCodes(data.result.code);
@@ -159,6 +163,9 @@ const RightSection = () => {
       } else if (error.code === "CA-400006" || error.code === "CA-400999") {
         alert("지원하지 않는 코드가 포함되어 있습니다.");
         return;
+      } else if (error.message === "시각화를 지원하지 않는 코드가 포함되어 있습니다.") {
+        alert("시각화를 지원하지 않는 코드가 포함되어 있습니다.");
+        return;
       } else if (error.code === "CA-400002") {
         const linNumber = Number((error as any).result.lineNumber);
         const errorMessage = (error as any).result.errorMessage;
@@ -180,6 +187,10 @@ const RightSection = () => {
   const codeExecMutation = useMutation({
     mutationFn: runCode,
     async onSuccess(data) {
+      if (isNotServiceDtoType(data.result.code)) {
+        console.error("지원하지 않는 코드가 포함되어 있습니다");
+        throw new Error("지원하지 않는 코드가 포함되어 있습니다");
+      }
       setPreprocessedCodes([]);
       setCodeFlowLength(0);
       setStepIdx(0);
@@ -337,6 +348,7 @@ const RightSection = () => {
       if (preprocessedCode.type.toLowerCase() === "whiledefine") {
         continue;
       }
+
       accDataStructures = Object.entries(accDataStructures).reduce((acc, [key, value]) => {
         acc[key] = {
           data: value.data.map((structure) => ({

From 3ea832fe8251ecb054b7043bf046de0f6f76a0d0 Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Tue, 19 Nov 2024 10:13:33 +0900
Subject: [PATCH 27/41] =?UTF-8?q?[#294]feat:=20=EC=A7=80=EC=9B=90=ED=95=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=83=80=EC=9E=85=EB=A7=89?=
 =?UTF-8?q?=EC=95=84=EC=A3=BC=EB=8A=94=20=ED=95=A8=EC=88=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RightSection/services/isNotServiceDtoType.ts   | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/pages/Visualization/components/RightSection/services/isNotServiceDtoType.ts

diff --git a/src/pages/Visualization/components/RightSection/services/isNotServiceDtoType.ts b/src/pages/Visualization/components/RightSection/services/isNotServiceDtoType.ts
new file mode 100644
index 00000000..b7814592
--- /dev/null
+++ b/src/pages/Visualization/components/RightSection/services/isNotServiceDtoType.ts
@@ -0,0 +1,14 @@
+export const isNotServiceDto = (item: any): boolean => {
+  const result = ["pop", "remove", "insert", "extend", "dict"].includes(item?.type);
+  return result;
+};
+
+export const isNotServiceDtoType = (data: any): boolean => {
+  for (let item of data) {
+    const isValid = isNotServiceDto(item);
+    if (isValid) {
+      return true;
+    }
+  }
+  return false;
+};

From 29847c73d23e15b0db440c7c7b7db23b9de10fa8 Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Tue, 19 Nov 2024 11:09:37 +0900
Subject: [PATCH 28/41] =?UTF-8?q?[#294]feat:=20resetEditor=20resetErrorLin?=
 =?UTF-8?q?e=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20=EC=88=98=EB=9D=BD?=
 =?UTF-8?q?=20=EB=98=90=EB=8A=94=20=ED=99=95=EC=9D=B8=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=EC=9D=84=20=EB=88=84=EB=A5=BC=EB=95=8C=20=EC=B4=88=EA=B8=B0?=
 =?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/LeftSection/components/CodeEditor.tsx |  3 +--
 .../components/LeftSection/components/GptComment.tsx |  8 +++-----
 src/store/editor.ts                                  | 12 ++++++++----
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/pages/Visualization/components/LeftSection/components/CodeEditor.tsx b/src/pages/Visualization/components/LeftSection/components/CodeEditor.tsx
index adf51818..36e1dc38 100644
--- a/src/pages/Visualization/components/LeftSection/components/CodeEditor.tsx
+++ b/src/pages/Visualization/components/LeftSection/components/CodeEditor.tsx
@@ -22,7 +22,7 @@ const CodeEditor = () => {
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const stepIdx = useConsoleStore((state) => state.stepIdx);
   const errorLine = useEditorStore((state) => state.errorLine);
-  const resetEditor = useEditorStore((state) => state.resetEditor);
+
   const { setFocus } = useEditorStore();
   const setIsGptToggle = useGptTooltipStore((state) => state.setIsGptToggle);
   const { setGptTop, setGptLeft } = useGptTooltipStore();
@@ -55,7 +55,6 @@ const CodeEditor = () => {
     }
   }, [errorLine]);
   const handleResetEditor = () => {
-    resetEditor();
     setGptPin(false);
     setIsGptToggle(false);
     if (editorRef.current) {
diff --git a/src/pages/Visualization/components/LeftSection/components/GptComment.tsx b/src/pages/Visualization/components/LeftSection/components/GptComment.tsx
index e357a37b..6dd3cf58 100644
--- a/src/pages/Visualization/components/LeftSection/components/GptComment.tsx
+++ b/src/pages/Visualization/components/LeftSection/components/GptComment.tsx
@@ -25,7 +25,7 @@ const GptComment = () => {
   const context = useContext(CodeContext);
   const { setTimeoutId, clearCurrentTimeout } = useTimeoutStore();
   const { setIsGptToggle, gptPin, setGptPin, gptLeft, gptTop } = useGptTooltipStore();
-  const { resetEditor, errorLine } = useEditorStore();
+  const { resetErrorLine, errorLine } = useEditorStore();
   const { resetTrigger, setResetTrigger } = useResetEditor();
   const { openAlert, CustomAlert } = useCustomAlert();
   const {
@@ -72,8 +72,7 @@ const GptComment = () => {
 
   const gptCorrectMutation = useMutation({
     mutationFn: () => fetchGptCorrect(code, errorLine?.lineNumber || 1),
-    async onSuccess(data) {
-      console.log(data);
+    onSuccess(data) {
       setReason(data.result.reason);
       const newModifiedCode = data.result.modified_codes.reduce((acc: ModifiedCode[], cur: ModifiedCode) => {
         if (acc.length === 0) {
@@ -129,7 +128,7 @@ const GptComment = () => {
     setGptPin(false);
     setIsGptToggle(false);
     resetState();
-    resetEditor();
+    resetErrorLine();
     setResetTrigger(!resetTrigger);
   };
 
@@ -144,7 +143,6 @@ const GptComment = () => {
     setGptPin(true);
     clearCurrentTimeout();
     setIsGptToggle(true);
-    resetEditor();
     gptCorrectMutation.mutate();
   };
 
diff --git a/src/store/editor.ts b/src/store/editor.ts
index 00dbf15a..6f4f077a 100644
--- a/src/store/editor.ts
+++ b/src/store/editor.ts
@@ -1,11 +1,15 @@
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
+interface ErrorLine {
+  lineNumber: number;
+  message: string;
+}
 interface EditorState {
   highlightLines: number[];
   setHighlightLines: (highlightLine: number[]) => void;
-  errorLine: { lineNumber: number; message: string } | null;
-  setErrorLine: (errorLine: { lineNumber: number; message: string } | null) => void;
-  resetEditor: () => void;
+  errorLine: ErrorLine | null;
+  setErrorLine: (errorLine: ErrorLine | null) => void;
+  resetErrorLine: () => void;
   focus: boolean;
   setFocus: (focus: boolean) => void;
 }
@@ -15,7 +19,7 @@ export const useEditorStore = create(
     setHighlightLines: (highlightLines) => set({ highlightLines }),
     errorLine: null,
     setErrorLine: (errorLine) => set({ errorLine }),
-    resetEditor: () => set({ errorLine: null }),
+    resetErrorLine: () => set({ errorLine: null }),
     focus: false,
     setFocus: (focus) => set({ focus }),
   }))

From 1c8ed00711290cd0b1c93b42254eaec0395956fa Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Tue, 19 Nov 2024 11:19:04 +0900
Subject: [PATCH 29/41] =?UTF-8?q?[#294]feat:=20resetEditor=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/LeftSection/components/CodeEditor.tsx           | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/Visualization/components/LeftSection/components/CodeEditor.tsx b/src/pages/Visualization/components/LeftSection/components/CodeEditor.tsx
index 36e1dc38..bb0685a3 100644
--- a/src/pages/Visualization/components/LeftSection/components/CodeEditor.tsx
+++ b/src/pages/Visualization/components/LeftSection/components/CodeEditor.tsx
@@ -22,7 +22,7 @@ const CodeEditor = () => {
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const stepIdx = useConsoleStore((state) => state.stepIdx);
   const errorLine = useEditorStore((state) => state.errorLine);
-
+  const resetErrorLine = useEditorStore((state) => state.resetErrorLine);
   const { setFocus } = useEditorStore();
   const setIsGptToggle = useGptTooltipStore((state) => state.setIsGptToggle);
   const { setGptTop, setGptLeft } = useGptTooltipStore();
@@ -55,6 +55,7 @@ const CodeEditor = () => {
     }
   }, [errorLine]);
   const handleResetEditor = () => {
+    resetErrorLine();
     setGptPin(false);
     setIsGptToggle(false);
     if (editorRef.current) {

From 5b58f39eb2cae51787f02d17049c2158da1dfa7e Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Tue, 19 Nov 2024 11:48:12 +0900
Subject: [PATCH 30/41] =?UTF-8?q?[#294]feat:=20css=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/LeftSection/components/Console.module.css       | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/Visualization/components/LeftSection/components/Console.module.css b/src/pages/Visualization/components/LeftSection/components/Console.module.css
index 1e3ed3ca..5b4f5ec3 100644
--- a/src/pages/Visualization/components/LeftSection/components/Console.module.css
+++ b/src/pages/Visualization/components/LeftSection/components/Console.module.css
@@ -62,3 +62,6 @@
   padding: 10px 24px;
   border-bottom: 1px solid var(--gray01);
 }
+.input-error {
+  box-shadow: inset 0 0 16px rgba(72, 102, 255, 0.2);
+}

From 8e7f116176978fcb41d97ae6962286ad6b1d158e Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Tue, 19 Nov 2024 11:48:49 +0900
Subject: [PATCH 31/41] =?UTF-8?q?[#294]feat:=20signup=20=EC=98=88=EC=99=B8?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Signup/components/SignupWrap.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/Signup/components/SignupWrap.tsx b/src/pages/Signup/components/SignupWrap.tsx
index 0b302c19..d8cecb7d 100644
--- a/src/pages/Signup/components/SignupWrap.tsx
+++ b/src/pages/Signup/components/SignupWrap.tsx
@@ -26,7 +26,13 @@ interface CheckboxState {
   privacy: boolean;
   marketing: boolean;
 }
-
+interface errorType {
+  response: {
+    data: {
+      code: string;
+    };
+  };
+}
 const SignupWrap = () => {
   const [formData, setFormData] = useState<FormData>({
     username: "",
@@ -206,7 +212,7 @@ const SignupWrap = () => {
     },
     onError(error) {
       console.error("회원가입 에러", error);
-      const apiError = error as any;
+      const apiError = error as unknown as errorType;
       if (apiError.response.data.code == "AC-400003") {
         alert("중복 이메일입니다.");
         return;

From 115117fcb9236a1057a0ddead8ff9ab80bc648aa Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Tue, 19 Nov 2024 11:49:17 +0900
Subject: [PATCH 32/41] =?UTF-8?q?[#294]feat:=20visualization=EC=97=90=20co?=
 =?UTF-8?q?ntextapiProvider=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Visualization/Visualization.tsx | 73 ++++++++++++-----------
 1 file changed, 38 insertions(+), 35 deletions(-)

diff --git a/src/pages/Visualization/Visualization.tsx b/src/pages/Visualization/Visualization.tsx
index 30a24741..c726a114 100644
--- a/src/pages/Visualization/Visualization.tsx
+++ b/src/pages/Visualization/Visualization.tsx
@@ -12,7 +12,7 @@ import Split from "react-split";
 import { ValidTypeDto } from "@/pages/Visualization/types/dto/ValidTypeDto";
 import { CodeContext } from "./context/CodeContext";
 import { PreprocessedCodesContext } from "./context/PreProcessedCodesContext";
-
+import { InputErrorContext } from "./context/InputErrorContext";
 //zustand store
 import { useEditorStore } from "@/store/editor";
 import { useGptTooltipStore } from "@/store/gptTooltip";
@@ -29,8 +29,9 @@ export default function Visualization() {
     ].join("\n")
   );
   const [preprocessedCodes, setPreprocessedCodes] = useState<ValidTypeDto[]>([]);
-  // zustand store
+  const [isInputError, setIsInputError] = useState(false);
 
+  // zustand store
   const { focus } = useEditorStore();
   const isGptToggle = useGptTooltipStore((state) => state.isGptToggle);
   const gptPin = useGptTooltipStore((state) => state.gptPin);
@@ -38,41 +39,43 @@ export default function Visualization() {
   return (
     <CodeContext.Provider value={{ code, setCode }}>
       <PreprocessedCodesContext.Provider value={{ preprocessedCodes, setPreprocessedCodes }}>
-        <div style={{ overflow: "hidden", height: "100%" }}>
-          <Header />
-          <main className={styles.main}>
-            {focus && gptPin ? <GptIcon /> : (gptPin || isGptToggle) && <GptComment />}
+        <InputErrorContext.Provider value={{ isInputError, setIsInputError }}>
+          <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>
-        </div>
+                <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>
+        </InputErrorContext.Provider>
       </PreprocessedCodesContext.Provider>
     </CodeContext.Provider>
   );

From 49087981341cdb6f0f33dc6c8e297f56123b2b8a Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Tue, 19 Nov 2024 11:50:53 +0900
Subject: [PATCH 33/41] =?UTF-8?q?[#294]feat:=20visualizationClassroom=20co?=
 =?UTF-8?q?ntextapi=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Visualization/VisualizationClassroom.tsx  | 122 +++++++++---------
 1 file changed, 63 insertions(+), 59 deletions(-)

diff --git a/src/pages/Visualization/VisualizationClassroom.tsx b/src/pages/Visualization/VisualizationClassroom.tsx
index d401fec4..3c0c502f 100644
--- a/src/pages/Visualization/VisualizationClassroom.tsx
+++ b/src/pages/Visualization/VisualizationClassroom.tsx
@@ -13,6 +13,7 @@ import { ValidTypeDto } from "@/pages/Visualization/types/dto/ValidTypeDto";
 import { fetchGuestActionRequest, getGuestStatus, getClassAccessRightData } from "@/services/api";
 import { CodeContext } from "./context/CodeContext";
 import { PreprocessedCodesContext } from "./context/PreProcessedCodesContext";
+import { InputErrorContext } from "./context/InputErrorContext";
 //zustand store
 import { useAccessRightStore } from "@/store/accessRight";
 import { useEditorStore } from "@/store/editor";
@@ -43,6 +44,7 @@ const VisualizationClassroom = () => {
     ].join("\n")
   );
   const [preprocessedCodes, setPreprocessedCodes] = useState<ValidTypeDto[]>([]);
+  const [isInputError, setIsInputError] = useState(false);
   const navigate = useNavigate();
 
   // zustand store
@@ -103,67 +105,69 @@ const VisualizationClassroom = () => {
   return (
     <CodeContext.Provider value={{ code, setCode }}>
       <PreprocessedCodesContext.Provider value={{ preprocessedCodes, setPreprocessedCodes }}>
-        <div style={{ overflow: "hidden", height: "100%" }}>
-          <Header />
+        <InputErrorContext.Provider value={{ isInputError, setIsInputError }}>
+          <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: "100%", height: "100%" }}
-            >
-              <LeftSection />
-              <RightSection />
-            </Split>
-            <div className="floating-buttons">
-              {guestStatus?.result === ActionType.HELP && (
-                <button className="btn btn-complete-summit" disabled={true}>
-                  <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>
+              <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-complete-summit" disabled={true}>
+                    <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>
+        </InputErrorContext.Provider>
       </PreprocessedCodesContext.Provider>
     </CodeContext.Provider>
   );

From 8862eb9da464a20cf8b2b427c6c5cf441a444bba Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Tue, 19 Nov 2024 11:51:31 +0900
Subject: [PATCH 34/41] =?UTF-8?q?[#294]=20=EC=98=88=EC=99=B8=20=EB=B0=9C?=
 =?UTF-8?q?=EC=83=9D=ED=95=A0=EB=95=8C=20=EC=83=81=ED=83=9C=EB=B3=80?=
 =?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LeftSection/components/Console.tsx        | 26 +++++++++++++------
 .../components/RightSection/RightSection.tsx  | 13 ++++++++--
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/pages/Visualization/components/LeftSection/components/Console.tsx b/src/pages/Visualization/components/LeftSection/components/Console.tsx
index a10bb0b6..575c6672 100644
--- a/src/pages/Visualization/components/LeftSection/components/Console.tsx
+++ b/src/pages/Visualization/components/LeftSection/components/Console.tsx
@@ -1,31 +1,41 @@
-import { useEffect } from "react";
+import { useEffect, useContext } from "react";
 import { useConsoleStore } from "@/store/console";
+import { InputErrorContext } from "@/pages/Visualization/context/InputErrorContext";
+import cx from "classnames";
 import styles from "./Console.module.css";
 
 const Console = () => {
   const { consoleList, setConsoleList } = useConsoleStore();
   const stepIdx = useConsoleStore((state) => state.stepIdx);
+  const inputErrorContext = useContext(InputErrorContext);
+  if (!inputErrorContext) {
+    throw new Error("InputErrorContext not found");
+  }
   const { inputData, setInputData } = useConsoleStore();
+  const { isInputError, setIsInputError } = inputErrorContext;
+
+  useEffect(() => {
+    setConsoleList([]);
+  }, []);
   const handleConsoleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setInputData(e.target.value);
 
     e.target.style.height = "auto";
     e.target.style.height = `${e.target.scrollHeight}px`;
   };
-
-  useEffect(() => {
-    setConsoleList([]);
-  }, []);
+  const clickInput = () => {
+    setIsInputError(false);
+  };
   return (
     <div className={styles["console-wrapper"]}>
       <div className={styles["view-section1-2"]}>
-
         <p className={styles["view-section-title"]}>Console</p>
         <textarea
-          className={styles["input-area"]}
+          className={cx(styles["input-area"], isInputError && styles["input-error"])}
           value={inputData}
+          onClick={clickInput}
           onChange={(e) => handleConsoleTextChange(e)}
-            placeholder="input()을 사용하는 경우 입력해주세요."
+          placeholder="input()을 사용하는 경우 입력해주세요."
         />
         <div className={styles["view-data"]}>
           <div className={styles.consoleText}>
diff --git a/src/pages/Visualization/components/RightSection/RightSection.tsx b/src/pages/Visualization/components/RightSection/RightSection.tsx
index ce2cd7ad..df00ee32 100644
--- a/src/pages/Visualization/components/RightSection/RightSection.tsx
+++ b/src/pages/Visualization/components/RightSection/RightSection.tsx
@@ -59,7 +59,7 @@ import { useArrowStore } from "@/store/arrow";
 //api
 import { runCode, visualize } from "@/services/api";
 import { CodeFlowVariableItem } from "../../types/codeFlow/codeFlowVariableItem";
-
+import { InputErrorContext } from "@/pages/Visualization/context/InputErrorContext";
 interface State {
   objects: any[];
 }
@@ -89,18 +89,23 @@ const RightSection = () => {
   const [StructuresList, setStructuresList] = useState<any>([]); // 변수 데이터 시각화 리스트의 변화과정을 담아두는 리스트
   const preprocessedCodesContext = useContext(PreprocessedCodesContext); // context API로 데이터 가져오기
   const codeContext = useContext(CodeContext);
+  const inputErrorContext = useContext(InputErrorContext);
+
   if (!preprocessedCodesContext) {
     throw new Error("preprocessedCodesContext not found"); //context가 없을 경우 에러 출력 패턴 처리안해주면 에러 발생
   }
   if (!codeContext) {
     throw new Error("CodeContext not found");
   }
-
+  if (!inputErrorContext) {
+    throw new Error("InputErrorContext not found");
+  }
   const setConsoleList = useConsoleStore((state) => state.setConsoleList);
   const stepIdx = useConsoleStore((state) => state.stepIdx);
   const setStepIdx = useConsoleStore((state) => state.setStepIdx);
   const { inputData } = useConsoleStore();
   const { preprocessedCodes, setPreprocessedCodes } = preprocessedCodesContext;
+  const { setIsInputError } = inputErrorContext;
   const [arrowTextList, setArrowTextList] = useState<string[]>([]);
 
   const [, setRightSectionSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 });
@@ -205,6 +210,9 @@ const RightSection = () => {
       } else if ((error as any).code === "CA-400006" || (error as any).code === "CA-400999") {
         alert("지원하지 않는 코드가 포함되어 있습니다");
         return;
+      } else if ((error as any).code === "CA-400005") {
+        setIsInputError(true);
+        alert("입력된 input의 갯수가 적습니다.");
       } else if ((error as any).code === "CA-400002") {
         // 잘못된 문법 에러처리
         const linNumber = Number((error as any).result.lineNumber);
@@ -212,6 +220,7 @@ const RightSection = () => {
         setErrorLine({ lineNumber: linNumber, message: errorMessage });
         setConsoleList([errorMessage]);
         setPreprocessedCodes([]);
+
         return;
       } else if ((error as any).code == "CA-400007") {
         alert("코드의 실행 횟수가 너무 많습니다.");

From 73b218015c36148e9be2b1173baaed8d4bff673a Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Tue, 19 Nov 2024 11:51:45 +0900
Subject: [PATCH 35/41] =?UTF-8?q?[#294]feat:=20contextapi=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Visualization/context/InputErrorContext.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 src/pages/Visualization/context/InputErrorContext.ts

diff --git a/src/pages/Visualization/context/InputErrorContext.ts b/src/pages/Visualization/context/InputErrorContext.ts
new file mode 100644
index 00000000..89af0ae9
--- /dev/null
+++ b/src/pages/Visualization/context/InputErrorContext.ts
@@ -0,0 +1,11 @@
+import { createContext, SetStateAction, Dispatch } from "react";
+
+// Create contexts
+interface InputErrorContextType {
+  isInputError: boolean;
+  setIsInputError: Dispatch<SetStateAction<boolean>>;
+}
+export const InputErrorContext = createContext<InputErrorContextType>({
+  isInputError: false,
+  setIsInputError: () => {},
+});

From c3f8d4aff98985172af41038b3593675df39cad8 Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Tue, 19 Nov 2024 11:55:31 +0900
Subject: [PATCH 36/41] =?UTF-8?q?[#294]feat:=20=EC=8B=9C=EA=B0=81=ED=99=94?=
 =?UTF-8?q?=EC=AA=BD=EC=97=90=20padding=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.css b/src/App.css
index da9477b7..13c65327 100644
--- a/src/App.css
+++ b/src/App.css
@@ -226,7 +226,7 @@ input[type="checkbox"] {
   height: 100%;
   display: flex;
   flex-direction: column;
-  flex: 1;
+  padding-bottom: 100px;
 }
 
 .view-section-title {

From f557c7be5a4b2a0934c1e63b9e5e51a1c617cd70 Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Tue, 19 Nov 2024 12:03:56 +0900
Subject: [PATCH 37/41] =?UTF-8?q?[#294]feat:=20=EC=98=88=EC=99=B8=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Visualization/components/RightSection/RightSection.tsx     | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/Visualization/components/RightSection/RightSection.tsx b/src/pages/Visualization/components/RightSection/RightSection.tsx
index df00ee32..e33a5f09 100644
--- a/src/pages/Visualization/components/RightSection/RightSection.tsx
+++ b/src/pages/Visualization/components/RightSection/RightSection.tsx
@@ -168,6 +168,9 @@ const RightSection = () => {
       } else if (error.code === "CA-400006" || error.code === "CA-400999") {
         alert("지원하지 않는 코드가 포함되어 있습니다.");
         return;
+      } else if ((error as any).code === "CA-400005") {
+        setIsInputError(true);
+        alert("입력된 input의 갯수가 적습니다.");
       } else if (error.message === "시각화를 지원하지 않는 코드가 포함되어 있습니다.") {
         alert("시각화를 지원하지 않는 코드가 포함되어 있습니다.");
         return;

From 2ad2ddfe3583abf5e829345e3b0d434b4df61851 Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Tue, 19 Nov 2024 12:16:20 +0900
Subject: [PATCH 38/41] =?UTF-8?q?[#294]feat:=20=EC=8B=9C=EA=B0=81=ED=99=94?=
 =?UTF-8?q?=20=EC=A7=80=EC=9B=90=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20?=
 =?UTF-8?q?=ED=95=AD=EB=AA=A9=20=EC=BD=94=EB=93=9C=EC=8B=A4=ED=96=89?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=EB=8A=94=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Visualization/components/RightSection/RightSection.tsx    | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/pages/Visualization/components/RightSection/RightSection.tsx b/src/pages/Visualization/components/RightSection/RightSection.tsx
index e33a5f09..ee0ab7af 100644
--- a/src/pages/Visualization/components/RightSection/RightSection.tsx
+++ b/src/pages/Visualization/components/RightSection/RightSection.tsx
@@ -195,10 +195,6 @@ const RightSection = () => {
   const codeExecMutation = useMutation({
     mutationFn: runCode,
     async onSuccess(data) {
-      if (isNotServiceDtoType(data.result.code)) {
-        console.error("지원하지 않는 코드가 포함되어 있습니다");
-        throw new Error("지원하지 않는 코드가 포함되어 있습니다");
-      }
       setPreprocessedCodes([]);
       setCodeFlowLength(0);
       setStepIdx(0);

From ae580a9c761aa23b2b236a2cb2c06cdec628f166 Mon Sep 17 00:00:00 2001
From: GS_song98 <20003204@sju.ac.kr>
Date: Mon, 18 Nov 2024 15:29:49 +0900
Subject: [PATCH 39/41] =?UTF-8?q?[#287]feat:=20=EB=AA=A8=EB=93=A0=20alert?=
 =?UTF-8?q?=20=EC=BB=A4=EC=8A=A4=ED=85=80=20alert=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Classroom/Classroom.tsx             | 188 ++++++++------
 .../ClassroomDashboard/ClassroomDashboard.tsx | 230 ++++++++++--------
 src/pages/Login/Login.tsx                     |   7 +-
 src/pages/Manage/Manage.tsx                   | 124 +++++-----
 src/pages/Manage/components/Guest.tsx         |  34 ++-
 src/pages/Signup/components/SignupWrap.tsx    |   5 +-
 .../components/RightSection/RightSection.tsx  | 191 ++++++++-------
 7 files changed, 441 insertions(+), 338 deletions(-)

diff --git a/src/pages/Classroom/Classroom.tsx b/src/pages/Classroom/Classroom.tsx
index 607d3e78..729ba775 100644
--- a/src/pages/Classroom/Classroom.tsx
+++ b/src/pages/Classroom/Classroom.tsx
@@ -4,6 +4,7 @@ import { useMswReadyStore } from "@/store/mswReady";
 import { useParams, useNavigate } from "react-router-dom";
 import { useQuery, useQueryClient, useMutation } from "@tanstack/react-query";
 import { useAccessRightStore } from "@/store/accessRight";
+import { useCustomAlert } from "@/pages/components/CustomAlert";
 import {
   getClassGuestDataWithoutDefaultAction,
   getTotalActionInfo,
@@ -97,6 +98,8 @@ const Classroom = () => {
     }
   }, [classroomData]);
 
+  const { openAlert, CustomAlert } = useCustomAlert();
+
   const classOverMutation = useMutation({
     mutationFn: ClassEnd,
     onSuccess: () => {
@@ -104,7 +107,7 @@ const Classroom = () => {
       navigate("/classroomdashboard");
     },
     onError: () => {
-      alert("정상적으로 수업이 종료되지 않았습니다");
+      openAlert("정상적으로 수업이 종료되지 않았습니다");
     },
   });
 
@@ -164,86 +167,125 @@ const Classroom = () => {
   };
 
   return (
-    <div>
-      <Header />
-      <ClassroomModal
-        isOpen={isConsentInformationModalOpen}
-        onClose={closeConsentInformationModal}
-        guest={onClickGuest!}
-      />
-      <div className="group-wrap">
-        <div className="group-left">
-          <img src="/image/icon_group.svg" alt="그룹" />
-          <h2 className="group-title">{classroomData?.result.className}</h2>
-        </div>
-      </div>
-      <div className="s__container">
-        <div className="s__row">
-          <div className="progress-info">
-            <ul className="progress-data">
-              <li>
-                <img src="/image/progress01.svg" alt="전체" />
-                <div>
-                  <p>전체</p>
-                  <p>{actionInfo && actionInfo?.ing + actionInfo?.complete + actionInfo?.help}</p>
-                </div>
-              </li>
-              <li>
-                <img src="/image/progress02.svg" alt="미제출" />
-                <div>
-                  <p>미제출</p>
-                  <p>{actionInfo?.ing}</p>
-                </div>
-              </li>
-              <li>
-                <img src="/image/progress03.svg" alt="성공" />
-                <div>
-                  <p>제출 완료</p>
-                  <p>{actionInfo?.complete}</p>
-                </div>
-              </li>
-              <li>
-                <img src="/image/progress04.svg" alt="실패" />
-                <div>
-                  <p>도움 요청</p>
-                  <p>{actionInfo?.help}</p>
-                </div>
-              </li>
-            </ul>
+    <>
+      <div>
+        <Header />
+        <CustomAlert />
+        <ClassroomModal
+          isOpen={isConsentInformationModalOpen}
+          onClose={closeConsentInformationModal}
+          guest={onClickGuest!}
+        />
+        <div className="group-wrap">
+          <div className="group-left">
+            <img src="/image/icon_group.svg" alt="그룹" />
+            <h2 className="group-title">{classroomData?.result.className}</h2>
           </div>
-          <div className="section-title">
-            <div className="title-left">
-              <h3>제출현황</h3>
+        </div>
+        <div className="s__container">
+          <div className="s__row">
+            <div className="progress-info">
+              <ul className="progress-data">
+                <li>
+                  <img src="/image/progress01.svg" alt="전체" />
+                  <div>
+                    <p>전체</p>
+                    <p>{actionInfo && actionInfo?.ing + actionInfo?.complete + actionInfo?.help}</p>
+                  </div>
+                </li>
+                <li>
+                  <img src="/image/progress02.svg" alt="미제출" />
+                  <div>
+                    <p>미제출</p>
+                    <p>{actionInfo?.ing}</p>
+                  </div>
+                </li>
+                <li>
+                  <img src="/image/progress03.svg" alt="성공" />
+                  <div>
+                    <p>제출 완료</p>
+                    <p>{actionInfo?.complete}</p>
+                  </div>
+                </li>
+                <li>
+                  <img src="/image/progress04.svg" alt="실패" />
+                  <div>
+                    <p>도움 요청</p>
+                    <p>{actionInfo?.help}</p>
+                  </div>
+                </li>
+              </ul>
             </div>
+          </div>
+          <div className="s__container">
+            <div className="s__row">
+              <div className="progress-info">
+                <ul className="progress-data">
+                  <li>
+                    <img src="/image/progress01.svg" alt="전체" />
+                    <div>
+                      <p>전체</p>
+                      <p>{actionInfo && actionInfo?.ing + actionInfo?.complete + actionInfo?.help}</p>
+                    </div>
+                  </li>
+                  <li>
+                    <img src="/image/progress02.svg" alt="미제출" />
+                    <div>
+                      <p>미제출</p>
+                      <p>{actionInfo?.ing}</p>
+                    </div>
+                  </li>
+                  <li>
+                    <img src="/image/progress03.svg" alt="성공" />
+                    <div>
+                      <p>제출 완료</p>
+                      <p>{actionInfo?.complete}</p>
+                    </div>
+                  </li>
+                  <li>
+                    <img src="/image/progress04.svg" alt="실패" />
+                    <div>
+                      <p>도움 요청</p>
+                      <p>{actionInfo?.help}</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <div className="section-title">
+                <div className="title-left">
+                  <h3>제출현황</h3>
+                </div>
 
-            <div className="classroom-right">
-              <div className="right-btns" style={{ marginRight: "15px" }}>
-                <button className="red" onClick={handleClassOver}>
-                  <img src="/image/icon_on_off.svg" alt="그룹삭제" />
-                  수업 종료
-                </button>
+                <div className="classroom-right">
+                  <div className="right-btns" style={{ marginRight: "15px" }}>
+                    <button className="red" onClick={handleClassOver}>
+                      <img src="/image/icon_on_off.svg" alt="그룹삭제" />
+                      수업 종료
+                    </button>
+                  </div>
+                  <select name="" id="" className="s__select">
+                    <option value="1">이름순</option>
+                    <option value="2">제출순</option>
+                    <option value="3">학번순</option>
+                  </select>
+                </div>
               </div>
-              <select name="" id="" className="s__select">
-                <option value="1">이름순</option>
-                <option value="2">제출순</option>
-                <option value="3">학번순</option>
-              </select>
             </div>
+            {guests && guests.length > 0 ? (
+              <ul className="section-data section-data01">
+                {guests.map((guest) => (
+                  <Guest key={guest.id} guest={guest} onClick={() => openConsentInformationModal(guest)} />
+                ))}
+              </ul>
+            ) : (
+              <div className="section-empty-progress">
+                <img src="/image/img_empty_progress.png" alt="empty guests" />
+              </div>
+            )}
           </div>
-          {guests && guests.length > 0 ? (
-            <ul className="section-data section-data01">
-              {guests.map((guest) => (
-                <Guest key={guest.id} guest={guest} onClick={() => openConsentInformationModal(guest)} />
-              ))}
-            </ul>
-          ) : (
-            <div className="section-empty-progress">
-              <img src="/image/img_empty_progress.png" alt="empty guests" />
-            </div>
-          )}
         </div>
       </div>
-    </div>
+    </>
   );
 };
 export default Classroom;
diff --git a/src/pages/ClassroomDashboard/ClassroomDashboard.tsx b/src/pages/ClassroomDashboard/ClassroomDashboard.tsx
index 93cf5787..1ee7f0df 100644
--- a/src/pages/ClassroomDashboard/ClassroomDashboard.tsx
+++ b/src/pages/ClassroomDashboard/ClassroomDashboard.tsx
@@ -4,7 +4,7 @@ import HostRoom from "./components/HostRoom";
 import GuestRoom from "./components/GuestRoom";
 import { useMswReadyStore } from "@/store/mswReady";
 import { useQuery, useMutation } from "@tanstack/react-query";
-
+import { useCustomAlert } from "@/pages/components/CustomAlert";
 import { createClass, getHostGuestData, getUser } from "@/services/api";
 import { User } from "@/App";
 import { ErrorResponse } from "@/types/apiTypes";
@@ -23,6 +23,7 @@ interface GroupData {
 }
 
 const ClassroomDashboard = () => {
+  const { openAlert, CustomAlert } = useCustomAlert();
   const isMswReady = useMswReadyStore((state) => state.isMswReady);
   const { data: userData } = useQuery<User>({
     queryKey: ["user"],
@@ -64,10 +65,10 @@ const ClassroomDashboard = () => {
     onError(error) {
       const apiError = error as unknown as ErrorResponse;
       if (apiError.code === "LM-400001") {
-        alert("클래스룸은 최소 두 글자 이상부터 생성할 수 있습니다.");
+        openAlert("클래스룸은 최소 두 글자 이상부터 생성할 수 있습니다.");
       }
       if (apiError.code === "LM-400003") {
-        alert("이미 존재하는 클래스룸입니다.");
+        openAlert("이미 존재하는 클래스룸입니다.");
       }
     },
   });
@@ -82,116 +83,149 @@ const ClassroomDashboard = () => {
   );
 
   return (
-    <div className="bg2" style={{ minWidth: "1521px" }}>
-      <Header />
-      <div className="group-copywriting">
-        <div className="s__container">
-          <div className="s__row">
-            <p>Classroom</p>
-            <h2>함께 배우고, 더 빨리 성장하세요!</h2>
-            <span>혼자보다 함께할 때 더 많이, 더 빨리 배울 수 있습니다.</span>
-          </div>
-        </div>
-        <img src="/image/img_copywriting.png" alt="클래스룸 이미지" />
-      </div>
-      <div className="group-data-wrap">
-        <div className="group-data-left">
-          <div className="user-info">
-            <p>{userData?.result?.name}님</p>
-            <span>{userData?.result?.email}</span>
-            <ul className="user-group-data">
-              <li>
-                <p>강의방 수</p>
-                <p>{hostClassRooms.length}</p>
-              </li>
-              <li>
-                <p>학습방 수</p>
-                <p>{guestClassRooms.length}</p>
-              </li>
-            </ul>
-            <label htmlFor="addgroup">클래스룸 생성</label>
-            <div>
-              <input
-                type="text"
-                id="addgroup"
-                placeholder="클래스룸 이름"
-                value={createClassName}
-                onChange={changeCreateClassName} // 입력값 변경시 상태 업데이트
-              />
-              <button onClick={submitCreateClassName}>생성</button>
+    <>
+      <div className="bg2" style={{ minWidth: "1521px" }}>
+        <Header />
+        <CustomAlert />
+        <div className="group-copywriting">
+          <div className="s__container">
+            <div className="s__row">
+              <p>Classroom</p>
+              <h2>함께 배우고, 더 빨리 성장하세요!</h2>
+              <span>혼자보다 함께할 때 더 많이, 더 빨리 배울 수 있습니다.</span>
             </div>
           </div>
+          <img src="/image/img_copywriting.png" alt="클래스룸 이미지" />
         </div>
-        <div className="group-right">
-          <div className="section-title">
-            <div className="title-left">
-              <h3>강의방</h3>
-            </div>
-            <div className="title-right">
-              <div className="search-wrap">
+        <div className="group-data-wrap">
+          <div className="group-data-left">
+            <div className="user-info">
+              <p>{userData?.result?.name}님</p>
+              <span>{userData?.result?.email}</span>
+              <ul className="user-group-data">
+                <li>
+                  <p>강의방 수</p>
+                  <p>{hostClassRooms.length}</p>
+                </li>
+                <li>
+                  <p>학습방 수</p>
+                  <p>{guestClassRooms.length}</p>
+                </li>
+              </ul>
+              <label htmlFor="addgroup">클래스룸 생성</label>
+              <div>
                 <input
                   type="text"
-                  placeholder="클래스룸 검색"
-                  value={searchHostTerm}
-                  onChange={(e) => setHostSearchTerm(e.target.value)} // 검색어 업데이트
+                  id="addgroup"
+                  placeholder="클래스룸 이름"
+                  value={createClassName}
+                  onChange={changeCreateClassName} // 입력값 변경시 상태 업데이트
                 />
-                <button>
-                  <img src="/image/icon_search.svg" alt="검색" />
-                </button>
+                <button onClick={submitCreateClassName}>생성</button>
               </div>
             </div>
+            <img src="/image/img_copywriting.png" alt="클래스룸 이미지" />
           </div>
-          {filteredHostClassRooms && filteredHostClassRooms.length > 0 ? (
-            <ul className="section-data section-data04">
-              {filteredHostClassRooms.map((item) => (
-                <HostRoom key={item.id} classData={item} />
-              ))}
-            </ul>
-          ) : searchHostTerm !== "" ? (
-            <div className="section-empty-search-classrooom">
-              <img src="/image/img_empty_search_class.png" alt="empty host classroom" />
-            </div>
-          ) : (
-            <div className="section-empty-classroom">
-              <img src="/image/img_none_host_classroom.png" alt="empty search host classroom" />
-            </div>
-          )}
-          <div className="section-title">
-            <div className="title-left">
-              <h3>학습방</h3>
+          <div className="group-data-wrap">
+            <div className="group-data-left">
+              <div className="user-info">
+                <p>{userData?.result?.name}님</p>
+                <span>{userData?.result?.email}</span>
+                <ul className="user-group-data">
+                  <li>
+                    <p>강의방 수</p>
+                    <p>{hostClassRooms.length}</p>
+                  </li>
+                  <li>
+                    <p>학습방 수</p>
+                    <p>{guestClassRooms.length}</p>
+                  </li>
+                </ul>
+                <label htmlFor="addgroup">클래스룸 생성</label>
+                <div>
+                  <input
+                    type="text"
+                    id="addgroup"
+                    placeholder="클래스룸 이름"
+                    value={createClassName}
+                    onChange={changeCreateClassName} // 입력값 변경시 상태 업데이트
+                  />
+                  <button onClick={submitCreateClassName}>생성</button>
+                </div>
+              </div>
             </div>
-            <div className="title-right">
-              <div className="search-wrap">
-                <input
-                  type="text"
-                  placeholder="클래스룸 검색"
-                  value={searchGuestTerm}
-                  onChange={(e) => setGuestSearchTerm(e.target.value)} // 검색어 업데이트
-                />
-                <button>
-                  <img src="/image/icon_search.svg" alt="검색" />
-                </button>
+            <div className="group-right">
+              <div className="section-title">
+                <div className="title-left">
+                  <h3>강의방</h3>
+                </div>
+                <div className="title-right">
+                  <div className="search-wrap">
+                    <input
+                      type="text"
+                      placeholder="클래스룸 검색"
+                      value={searchHostTerm}
+                      onChange={(e) => setHostSearchTerm(e.target.value)} // 검색어 업데이트
+                    />
+                    <button>
+                      <img src="/image/icon_search.svg" alt="검색" />
+                    </button>
+                  </div>
+                </div>
               </div>
+              {filteredHostClassRooms && filteredHostClassRooms.length > 0 ? (
+                <ul className="section-data section-data04">
+                  {filteredHostClassRooms.map((item) => (
+                    <HostRoom key={item.id} classData={item} />
+                  ))}
+                </ul>
+              ) : searchHostTerm !== "" ? (
+                <div className="section-empty-search-classrooom">
+                  <img src="/image/img_empty_search_class.png" alt="empty host classroom" />
+                </div>
+              ) : (
+                <div className="section-empty-classroom">
+                  <img src="/image/img_none_host_classroom.png" alt="empty search host classroom" />
+                </div>
+              )}
+              <div className="section-title">
+                <div className="title-left">
+                  <h3>학습방</h3>
+                </div>
+                <div className="title-right">
+                  <div className="search-wrap">
+                    <input
+                      type="text"
+                      placeholder="클래스룸 검색"
+                      value={searchGuestTerm}
+                      onChange={(e) => setGuestSearchTerm(e.target.value)} // 검색어 업데이트
+                    />
+                    <button>
+                      <img src="/image/icon_search.svg" alt="검색" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+              {filteredGuestClassRooms && filteredGuestClassRooms.length > 0 ? (
+                <ul className="section-data section-data04">
+                  {filteredGuestClassRooms.map((item) => (
+                    <GuestRoom key={item.id} classData={item} />
+                  ))}
+                </ul>
+              ) : searchHostTerm !== "" ? (
+                <div className="section-empty-search-classrooom">
+                  <img src="/image/img_empty_search_class.png" alt="empty host classroom" />
+                </div>
+              ) : (
+                <div className="section-empty-classroom">
+                  <img src="/image/img_none_host_classroom.png" alt="empty search host classroom" />
+                </div>
+              )}
             </div>
           </div>
-          {filteredGuestClassRooms && filteredGuestClassRooms.length > 0 ? (
-            <ul className="section-data section-data04">
-              {filteredGuestClassRooms.map((item) => (
-                <GuestRoom key={item.id} classData={item} />
-              ))}
-            </ul>
-          ) : searchHostTerm !== "" ? (
-            <div className="section-empty-search-classrooom">
-              <img src="/image/img_empty_search_class.png" alt="empty host classroom" />
-            </div>
-          ) : (
-            <div className="section-empty-classroom">
-              <img src="/image/img_none_host_classroom.png" alt="empty search host classroom" />
-            </div>
-          )}
         </div>
       </div>
-    </div>
+    </>
   );
 };
 export default ClassroomDashboard;
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index 6882280f..bed39a8e 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -3,6 +3,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { Link, useNavigate } from "react-router-dom";
 import { getUser, login } from "@/services/api";
 import Header from "@/pages/components/Header";
+import { useCustomAlert } from "@/pages/components/CustomAlert";
 const BACK_BASE_URL = import.meta.env.VITE_APP_BACKEND_BASE_URL;
 const FRONT_BASE_URL = import.meta.env.VITE_APP_FRONT_BASE_URL;
 const Login = () => {
@@ -23,11 +24,12 @@ const Login = () => {
       navigate("/");
     },
     onError(error) {
-      alert("아이디 또는 비밀번호가 틀렸습니다.");
+      openAlert("아이디 또는 비밀번호가 틀렸습니다.");
       console.error("Login error:", error);
     },
   });
 
+  const { openAlert, CustomAlert } = useCustomAlert();
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     mutation.mutate({ userId, userPassword });
@@ -48,13 +50,14 @@ const Login = () => {
   useEffect(() => {
     const errorMessage = new URLSearchParams(location.search).get("error");
     if (errorMessage) {
-      alert("이미 존재하는 회원입니다");
+      openAlert("이미 존재하는 회원입니다");
       // 에러 메시지 표시 후 쿼리 파라미터 제거
       navigate(location.pathname, { replace: true });
     }
   }, [location.search, navigate]);
   return (
     <Fragment>
+      <CustomAlert />
       <div className={"bg-gray"}>
         <Header />
 
diff --git a/src/pages/Manage/Manage.tsx b/src/pages/Manage/Manage.tsx
index 189b8f0f..2e697b01 100644
--- a/src/pages/Manage/Manage.tsx
+++ b/src/pages/Manage/Manage.tsx
@@ -6,6 +6,7 @@ import { ChangeEvent, useEffect, useState } from "react";
 //zustand store
 import { useAccessRightStore } from "@/store/accessRight";
 import { ErrorResponse } from "@/types/apiTypes";
+import { useCustomAlert } from "@/pages/components/CustomAlert";
 import {
   getClassGuestData,
   deleteClassroom,
@@ -21,6 +22,7 @@ interface GuestType {
   name: string;
   status: number;
 }
+
 interface ActionInfoType {
   ing: number;
   complete: number;
@@ -32,18 +34,21 @@ interface ClassroomData {
     guests: GuestType[];
   };
 }
+
 interface GetTotalActionInfoType {
   result: {
     className: string;
     actionInfo: ActionInfoType;
   };
 }
+
 interface ClassAccessRightDataType {
   isAccess: boolean;
   isHost: boolean;
 }
 
 const Modify = () => {
+  const { openAlert, CustomAlert } = useCustomAlert();
   const params = useParams();
   const classroomId = Number(params.classroomId);
   const [guests, setGuests] = useState<GuestType[]>();
@@ -90,10 +95,10 @@ const Modify = () => {
     onError(error) {
       const apiError = error as unknown as ErrorResponse;
       if (apiError.code === "LM-400006") {
-        alert("이미 등록된 학생입니다.");
+        openAlert("이미 등록된 학생입니다.");
       }
       if (apiError.code === "LM-400005") {
-        alert("해당 하는 학생이 없습니다.");
+        openAlert("해당 하는 학생이 없습니다.");
       }
     },
   });
@@ -114,12 +119,12 @@ const Modify = () => {
   const deleteClassroomMutation = useMutation({
     mutationFn: deleteClassroom,
     onSuccess: () => {
-      alert("클래스룸이 삭제되었습니다.");
+      openAlert("클래스룸이 삭제되었습니다.");
       navigate("/classdashboard");
     },
     onError: (error) => {
       console.error("An error occurred:", error);
-      alert("클래스룸 삭제에 실패했습니다.");
+      openAlert("클래스룸 삭제에 실패했습니다.");
     },
   });
 
@@ -131,68 +136,71 @@ const Modify = () => {
   const filterGuests = guests?.filter((guest) => guest.name.toLowerCase().includes(searchGuestTerm.toLowerCase()));
 
   return (
-    <div className="bg">
-      <Header />
-      <div id="header02" className="bg-blue"></div>
-      <div className="group-wrap">
-        <div className="group-left">
-          <img src="/image/icon_group.svg" alt="그룹" />
-          <h2 className="group-title">{classroomData?.result.className}</h2>
-        </div>
-        <div className="group-link">
-          <p className="link-name">클래스룸 초대</p>
-          <div className="invite-wrap">
-            <input className="invite-input" value={guestEmail} onChange={changeGuestEmail}></input>
-            <button className="invite-button" onClick={submitInviteGuest}>
-              <p>초대하기</p>
-            </button>
+    <>
+      <CustomAlert />
+      <div className="bg">
+        <Header />
+        <div id="header02" className="bg-blue"></div>
+        <div className="group-wrap">
+          <div className="group-left">
+            <img src="/image/icon_group.svg" alt="그룹" />
+            <h2 className="group-title">{classroomData?.result.className}</h2>
           </div>
-        </div>
-      </div>
-      <div className="s__container">
-        <div className="modify-s__row">
-          <div className="section-title">
-            <div className="title-left">
-              <h3>가입된 학생</h3>
-            </div>
-            <div className="title-right">
-              <div className="search-wrap">
-                <input
-                  type="text"
-                  placeholder="학생 검색"
-                  value={searchGuestTerm}
-                  onChange={(e) => setGuestSearchTerm(e.target.value)} // 검색어 업데이트
-                />
-                <button>
-                  <img src="/image/icon_search.svg" alt="검색" />
-                </button>
-              </div>
+          <div className="group-link">
+            <p className="link-name">클래스룸 초대</p>
+            <div className="invite-wrap">
+              <input className="invite-input" value={guestEmail} onChange={changeGuestEmail}></input>
+              <button className="invite-button" onClick={submitInviteGuest}>
+                <p>초대하기</p>
+              </button>
             </div>
           </div>
-          {filterGuests && filterGuests.length > 0 ? (
-            <ul className="section-data section-data03">
-              {filterGuests.map((guest) => (
-                <Guest key={guest.id} guest={guest} getClassroomRefetch={getClassroomRefetch} />
-              ))}
-            </ul>
-          ) : searchGuestTerm !== "" ? (
-            <div className="section-empty-progress">
-              <img src="/image/img_empty_search_guest.png" alt="empty guests" />
+        </div>
+        <div className="s__container">
+          <div className="modify-s__row">
+            <div className="section-title">
+              <div className="title-left">
+                <h3>가입된 학생</h3>
+              </div>
+              <div className="title-right">
+                <div className="search-wrap">
+                  <input
+                    type="text"
+                    placeholder="학생 검색"
+                    value={searchGuestTerm}
+                    onChange={(e) => setGuestSearchTerm(e.target.value)} // 검색어 업데이트
+                  />
+                  <button>
+                    <img src="/image/icon_search.svg" alt="검색" />
+                  </button>
+                </div>
+              </div>
             </div>
-          ) : (
-            <div className="section-empty-classroom">
-              <img src="/image/img_empty_guest.png" alt="empty search host classroom" />
+            {filterGuests && filterGuests.length > 0 ? (
+              <ul className="section-data section-data03">
+                {filterGuests.map((guest) => (
+                  <Guest key={guest.id} guest={guest} getClassroomRefetch={getClassroomRefetch} />
+                ))}
+              </ul>
+            ) : searchGuestTerm !== "" ? (
+              <div className="section-empty-progress">
+                <img src="/image/img_empty_search_guest.png" alt="empty guests" />
+              </div>
+            ) : (
+              <div className="section-empty-classroom">
+                <img src="/image/img_empty_guest.png" alt="empty search host classroom" />
+              </div>
+            )}
+            <div className="right-btns">
+              <button className="red" onClick={handleDeleteClassroom}>
+                <img src="/image/icon_delete.svg" alt="그룹삭제" />
+                클래스룸 삭제
+              </button>
             </div>
-          )}
-          <div className="right-btns">
-            <button className="red" onClick={handleDeleteClassroom}>
-              <img src="/image/icon_delete.svg" alt="그룹삭제" />
-              클래스룸 삭제
-            </button>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 export default Modify;
diff --git a/src/pages/Manage/components/Guest.tsx b/src/pages/Manage/components/Guest.tsx
index 50ed9e99..ad954298 100644
--- a/src/pages/Manage/components/Guest.tsx
+++ b/src/pages/Manage/components/Guest.tsx
@@ -1,27 +1,31 @@
 import { useMutation } from "@tanstack/react-query";
 import { emissionGuest } from "@/services/api";
+import { useCustomAlert } from "@/pages/components/CustomAlert";
+
 interface GuestType {
   id: number;
   name: string;
   email: string;
   status: number | string;
 }
+
 interface props {
   guest: GuestType;
   getClassroomRefetch: () => void;
 }
 
 const Guest = ({ guest, getClassroomRefetch }: props) => {
+  const { openAlert, CustomAlert } = useCustomAlert();
   const useEmissoionGuestMutation = () => {
     return useMutation({
       mutationFn: emissionGuest,
       onSuccess: () => {
-        alert("방출되었습니다.");
+        openAlert("방출되었습니다.");
         getClassroomRefetch();
       },
       onError: (error) => {
         console.error("An error occurred:", error);
-        alert("방출에 실패했습니다.");
+        openAlert("방출에 실패했습니다.");
       },
     });
   };
@@ -30,18 +34,22 @@ const Guest = ({ guest, getClassroomRefetch }: props) => {
   const handleEmissionGuest = () => {
     emissionGuestMutation.mutate(id);
   };
+
   return (
-    <li style={{ minWidth: "250px" }}>
-      <div className="data03-name">
-        <p>{guest.name}</p>
-        <span>{guest.email}</span>
-      </div>
-      <div className="data03-btns">
-        <button className="red" onClick={handleEmissionGuest}>
-          방출
-        </button>
-      </div>
-    </li>
+    <>
+      <CustomAlert />
+      <li style={{ minWidth: "250px" }}>
+        <div className="data03-name">
+          <p>{guest.name}</p>
+          <span>{guest.email}</span>
+        </div>
+        <div className="data03-btns">
+          <button className="red" onClick={handleEmissionGuest}>
+            방출
+          </button>
+        </div>
+      </li>
+    </>
   );
 };
 export default Guest;
diff --git a/src/pages/Signup/components/SignupWrap.tsx b/src/pages/Signup/components/SignupWrap.tsx
index d8cecb7d..674f425f 100644
--- a/src/pages/Signup/components/SignupWrap.tsx
+++ b/src/pages/Signup/components/SignupWrap.tsx
@@ -2,6 +2,7 @@ import { useState, useRef, ChangeEvent, FormEvent, useContext, useEffect } from
 import ConsentInformationModal from "./ConsentInformationModal";
 import TermsOfServiceModal from "./TermsOfServiceModal";
 import { useMutation } from "@tanstack/react-query";
+import { useCustomAlert } from "@/pages/components/CustomAlert";
 import { Link } from "react-router-dom";
 import { TrySignupContext } from "../Signup";
 import { signup } from "@/services/api";
@@ -48,6 +49,7 @@ const SignupWrap = () => {
     privacy: false,
     marketing: false,
   });
+  const { openAlert, CustomAlert } = useCustomAlert();
   const emailRef = useRef<HTMLInputElement>(null);
   const phoneNumberRef = useRef<HTMLInputElement>(null);
   const passwordRef = useRef<HTMLInputElement>(null);
@@ -217,7 +219,7 @@ const SignupWrap = () => {
         alert("중복 이메일입니다.");
         return;
       }
-      alert("회원가입 중 오류가 발생했습니다.");
+      openAlert("회원가입 중 오류가 발생했습니다.");
     },
   });
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
@@ -311,6 +313,7 @@ const SignupWrap = () => {
 
   return (
     <>
+      <CustomAlert />
       <TermsOfServiceModal isOpen={isTermsOfServiceModalOpen} onClose={closeTermsOfServiceModal} />
       <ConsentInformationModal isOpen={isConsentInformationModalOpen} onClose={closeConsentInformationModal} />
       <div className="login-wrap">
diff --git a/src/pages/Visualization/components/RightSection/RightSection.tsx b/src/pages/Visualization/components/RightSection/RightSection.tsx
index ee0ab7af..f5bc86a1 100644
--- a/src/pages/Visualization/components/RightSection/RightSection.tsx
+++ b/src/pages/Visualization/components/RightSection/RightSection.tsx
@@ -2,6 +2,7 @@ import { useState, useContext, useEffect, useRef, useCallback } from "react";
 import { useLocation } from "react-router-dom";
 import { CodeContext } from "../../context/CodeContext";
 import { PreprocessedCodesContext } from "../../context/PreProcessedCodesContext";
+import { useCustomAlert } from "@/pages/components/CustomAlert";
 import Split from "react-split";
 import _ from "lodash";
 import ResizeObserver from "resize-observer-polyfill";
@@ -80,6 +81,7 @@ interface SuccessResponse {
 }
 
 const RightSection = () => {
+  const { openAlert, CustomAlert } = useCustomAlert();
   const location = useLocation();
   const [codeFlowList, setCodeFlowList] = useState<State[]>([
     {
@@ -166,7 +168,7 @@ const RightSection = () => {
       if (error.message === "데이터 형식이 올바르지 않습니다") {
         return;
       } else if (error.code === "CA-400006" || error.code === "CA-400999") {
-        alert("지원하지 않는 코드가 포함되어 있습니다.");
+        openAlert("지원하지 않는 코드가 포함되어 있습니다.");
         return;
       } else if ((error as any).code === "CA-400005") {
         setIsInputError(true);
@@ -182,7 +184,7 @@ const RightSection = () => {
         setPreprocessedCodes([]);
         return;
       } else if (error.code == "CA-400007") {
-        alert("코드의 실행 횟수가 너무 많습니다.");
+        openAlert("코드의 실행 횟수가 너무 많습니다.");
 
         return;
       }
@@ -207,7 +209,7 @@ const RightSection = () => {
       if (error.message === "데이터 형식이 올바르지 않습니다") {
         return;
       } else if ((error as any).code === "CA-400006" || (error as any).code === "CA-400999") {
-        alert("지원하지 않는 코드가 포함되어 있습니다");
+        openAlert("지원하지 않는 코드가 포함되어 있습니다");
         return;
       } else if ((error as any).code === "CA-400005") {
         setIsInputError(true);
@@ -222,7 +224,7 @@ const RightSection = () => {
 
         return;
       } else if ((error as any).code == "CA-400007") {
-        alert("코드의 실행 횟수가 너무 많습니다.");
+        openAlert("코드의 실행 횟수가 너무 많습니다.");
         return;
       }
       setConsoleList([]);
@@ -421,7 +423,7 @@ const RightSection = () => {
         usedId = usedId.filter((id) => id !== variable.id);
         accCodeFlow = { objects: deletedCodeFlow };
       }
-      // 자료구조 시각화 부분이 들어왔을 때
+        // 자료구조 시각화 부분이 들어왔을 때
       // 나타나고 바로 사라지는건 traking id와 depth를 사용하지 않는다
       else if (preprocessedCode.type.toLowerCase() === "assign".toLowerCase()) {
         const callStackName = (preprocessedCode as VariablesDto).callStackName;
@@ -459,7 +461,7 @@ const RightSection = () => {
                 targetName,
                 accDataStructures,
                 variable as VariableExprArray,
-                callStackName
+                callStackName,
               );
             }
             // 처음 시각화해주는 자료구조인 경우
@@ -550,7 +552,7 @@ const RightSection = () => {
           highlightLine.push((preprocessedCode as ForDto | PrintDto | IfElseChangeDto | CodeFlowVariableDto).id);
 
           const toAddObject = createObjectToAdd(
-            preprocessedCode as ForDto | PrintDto | IfElseChangeDto | CodeFlowVariableDto
+            preprocessedCode as ForDto | PrintDto | IfElseChangeDto | CodeFlowVariableDto,
           );
 
           // print 타입일 때 console창의 로그를 만드는 부분
@@ -660,7 +662,7 @@ const RightSection = () => {
           };
           return acc;
         },
-        {} as WrapperDataStructureItem
+        {} as WrapperDataStructureItem,
       );
 
       // 자료구조리스트에서 얕은 복사 문제가 생겨서 깊은 복사를 해준다
@@ -681,96 +683,99 @@ const RightSection = () => {
   }, [preprocessedCodes]);
 
   return (
-    <div id="split-2" ref={rightSectionRef} style={{ display: "flex", flexDirection: "column", flex: "1" }}>
-      <div className={styles["top-bar"]}>
-        <p className={styles["view-section-title"]}>시각화</p>
-        <div className={styles["play-wrap"]}>
-          <div className="flex items-center gap-4">
-            <button
-              type="button"
-              className={`${styles["playcode-btn"]} ${
-                codeExecMutation.isPending ? styles["playcode-btn-loading"] : ""
-              }`}
-              onClick={handleRunCode}
-              disabled={codeExecMutation.isPending} // 로딩 중에는 버튼 비활성화
-            >
-              <img src="/image/icon_play_w.svg" alt="" />
-              코드실행
-            </button>
-          </div>
-          <form onSubmit={handleSubmit}>
-            <button
-              type="submit"
-              className={`${styles["view-btn"]} ${codeVizMutation.isPending ? styles["view-btn-loading"] : ""}`}
-              disabled={codeVizMutation.isPending} // 로딩 중에는 버튼 비활성화
-            >
-              <img src="/image/icon_play_w.svg" alt="" />
-              시각화
-            </button>
-          </form>
-          <div>
-            <button>
-              <img src="/image/icon_play_back.svg" onClick={onBack} alt="뒤로" />
-            </button>
-            <button className="ml8">
-              {isPlaying ? (
-                <img src="/image/icon_play_stop.svg" onClick={onPlay} alt="일시정지" />
-              ) : (
-                <img src="/image/icon_play.svg" onClick={onPlay} alt="재생" />
-              )}
-            </button>
-            <button className="ml8" onClick={onForward}>
-              <img src="/image/icon_play_next.svg" alt="다음" />
-            </button>
-            <p className="ml14 fz14">
-              ({consoleIdx}/{codeFlowLength - 1 == -1 ? 0 : codeFlowLength - 1})
-            </p>
-            <p className="ml24 fz14">Play Speed</p>
-            <select name="" id="" className="s__select ml14" value={selectedValue} onChange={handleChange}>
-              <option value="0.5x">0.5X</option>
-              <option value="1x">1X</option>
-              <option value="2x">2X</option>
-              <option value="3x">3X</option>
-            </select>
+    <>
+      <CustomAlert />
+      <div id="split-2" ref={rightSectionRef} style={{ display: "flex", flexDirection: "column", flex: "1" }}>
+        <div className={styles["top-bar"]}>
+          <p className={styles["view-section-title"]}>시각화</p>
+          <div className={styles["play-wrap"]}>
+            <div className="flex items-center gap-4">
+              <button
+                type="button"
+                className={`${styles["playcode-btn"]} ${
+                  codeExecMutation.isPending ? styles["playcode-btn-loading"] : ""
+                }`}
+                onClick={handleRunCode}
+                disabled={codeExecMutation.isPending} // 로딩 중에는 버튼 비활성화
+              >
+                <img src="/image/icon_play_w.svg" alt="" />
+                코드실행
+              </button>
+            </div>
+            <form onSubmit={handleSubmit}>
+              <button
+                type="submit"
+                className={`${styles["view-btn"]} ${codeVizMutation.isPending ? styles["view-btn-loading"] : ""}`}
+                disabled={codeVizMutation.isPending} // 로딩 중에는 버튼 비활성화
+              >
+                <img src="/image/icon_play_w.svg" alt="" />
+                시각화
+              </button>
+            </form>
+            <div>
+              <button>
+                <img src="/image/icon_play_back.svg" onClick={onBack} alt="뒤로" />
+              </button>
+              <button className="ml8">
+                {isPlaying ? (
+                  <img src="/image/icon_play_stop.svg" onClick={onPlay} alt="일시정지" />
+                ) : (
+                  <img src="/image/icon_play.svg" onClick={onPlay} alt="재생" />
+                )}
+              </button>
+              <button className="ml8" onClick={onForward}>
+                <img src="/image/icon_play_next.svg" alt="다음" />
+              </button>
+              <p className="ml14 fz14">
+                ({consoleIdx}/{codeFlowLength - 1 == -1 ? 0 : codeFlowLength - 1})
+              </p>
+              <p className="ml24 fz14">Play Speed</p>
+              <select name="" id="" className="s__select ml14" value={selectedValue} onChange={handleChange}>
+                <option value="0.5x">0.5X</option>
+                <option value="1x">1X</option>
+                <option value="2x">2X</option>
+                <option value="3x">3X</option>
+              </select>
+            </div>
           </div>
         </div>
-      </div>
-      <Arrow code={arrowTextList[stepIdx]} />
-      <Split
-        sizes={[50, 50]}
-        minSize={100}
-        expandToMin={false}
-        gutterSize={10}
-        gutterAlign="center"
-        snapOffset={30}
-        dragInterval={1}
-        direction="horizontal"
-        cursor="col-resize"
-        style={{ display: "flex", flexDirection: "row", height: "100%", flex: 1, overflow: "hidden" }}
-        className="split-container"
-      >
-        <div id="split-2-1" className="view-section2-1">
-          <div className="view-data" onScroll={handleScrollCodeFlow}>
-            <p className="data-name">코드흐름</p>
-            <div style={{ width: "600px", display: "flex", flexDirection: "column", flex: 1 }}>
-              {codeFlowList?.length > 0 &&
-                stepIdx >= 0 &&
-                renderingCodeFlow(codeFlowList[stepIdx].objects[0].child, width, height, codeFlowScrollTop)}
+        <Arrow code={arrowTextList[stepIdx]} />
+        <Split
+          sizes={[50, 50]}
+          minSize={100}
+          expandToMin={false}
+          gutterSize={10}
+          gutterAlign="center"
+          snapOffset={30}
+          dragInterval={1}
+          direction="horizontal"
+          cursor="col-resize"
+          style={{ display: "flex", flexDirection: "row", height: "100%", flex: 1, overflow: "hidden" }}
+          className="split-container"
+        >
+          <div id="split-2-1" className="view-section2-1">
+            <div className="view-data" onScroll={handleScrollCodeFlow}>
+              <p className="data-name">코드흐름</p>
+              <div style={{ width: "600px", display: "flex", flexDirection: "column", flex: 1 }}>
+                {codeFlowList?.length > 0 &&
+                  stepIdx >= 0 &&
+                  renderingCodeFlow(codeFlowList[stepIdx].objects[0].child, width, height, codeFlowScrollTop)}
+              </div>
             </div>
           </div>
-        </div>
-        <div id="split-2-2" className="view-section2-2" ref={rightSection2Ref}>
-          <div className="view-data" onScroll={handleScrollStructures}>
-            <p className="data-name">콜스택</p>
-            <ul className="var-list">
-              {StructuresList?.length > 0 &&
-                stepIdx >= 0 &&
-                renderingStructure(StructuresList[stepIdx], width, height, structuresScrollTop)}
-            </ul>
+          <div id="split-2-2" className="view-section2-2" ref={rightSection2Ref}>
+            <div className="view-data" onScroll={handleScrollStructures}>
+              <p className="data-name">콜스택</p>
+              <ul className="var-list">
+                {StructuresList?.length > 0 &&
+                  stepIdx >= 0 &&
+                  renderingStructure(StructuresList[stepIdx], width, height, structuresScrollTop)}
+              </ul>
+            </div>
           </div>
-        </div>
-      </Split>
-    </div>
+        </Split>
+      </div>
+    </>
   );
 };
 

From 356cfc59bb44207579ca48046dffc927aa586b7b Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Tue, 19 Nov 2024 13:04:50 +0900
Subject: [PATCH 40/41] =?UTF-8?q?=EC=BB=A4=EC=8A=A4=ED=85=80=20alert?=
 =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Signup/components/SignupWrap.tsx         |  2 +-
 .../components/RightSection/RightSection.tsx       | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/pages/Signup/components/SignupWrap.tsx b/src/pages/Signup/components/SignupWrap.tsx
index 674f425f..bf98bfba 100644
--- a/src/pages/Signup/components/SignupWrap.tsx
+++ b/src/pages/Signup/components/SignupWrap.tsx
@@ -216,7 +216,7 @@ const SignupWrap = () => {
       console.error("회원가입 에러", error);
       const apiError = error as unknown as errorType;
       if (apiError.response.data.code == "AC-400003") {
-        alert("중복 이메일입니다.");
+        openAlert("중복 이메일입니다.");
         return;
       }
       openAlert("회원가입 중 오류가 발생했습니다.");
diff --git a/src/pages/Visualization/components/RightSection/RightSection.tsx b/src/pages/Visualization/components/RightSection/RightSection.tsx
index f5bc86a1..9f5866de 100644
--- a/src/pages/Visualization/components/RightSection/RightSection.tsx
+++ b/src/pages/Visualization/components/RightSection/RightSection.tsx
@@ -172,9 +172,9 @@ const RightSection = () => {
         return;
       } else if ((error as any).code === "CA-400005") {
         setIsInputError(true);
-        alert("입력된 input의 갯수가 적습니다.");
+        openAlert("입력된 input의 갯수가 적습니다.");
       } else if (error.message === "시각화를 지원하지 않는 코드가 포함되어 있습니다.") {
-        alert("시각화를 지원하지 않는 코드가 포함되어 있습니다.");
+        openAlert("시각화를 지원하지 않는 코드가 포함되어 있습니다.");
         return;
       } else if (error.code === "CA-400002") {
         const linNumber = Number((error as any).result.lineNumber);
@@ -213,7 +213,7 @@ const RightSection = () => {
         return;
       } else if ((error as any).code === "CA-400005") {
         setIsInputError(true);
-        alert("입력된 input의 갯수가 적습니다.");
+        openAlert("입력된 input의 갯수가 적습니다.");
       } else if ((error as any).code === "CA-400002") {
         // 잘못된 문법 에러처리
         const linNumber = Number((error as any).result.lineNumber);
@@ -423,7 +423,7 @@ const RightSection = () => {
         usedId = usedId.filter((id) => id !== variable.id);
         accCodeFlow = { objects: deletedCodeFlow };
       }
-        // 자료구조 시각화 부분이 들어왔을 때
+      // 자료구조 시각화 부분이 들어왔을 때
       // 나타나고 바로 사라지는건 traking id와 depth를 사용하지 않는다
       else if (preprocessedCode.type.toLowerCase() === "assign".toLowerCase()) {
         const callStackName = (preprocessedCode as VariablesDto).callStackName;
@@ -461,7 +461,7 @@ const RightSection = () => {
                 targetName,
                 accDataStructures,
                 variable as VariableExprArray,
-                callStackName,
+                callStackName
               );
             }
             // 처음 시각화해주는 자료구조인 경우
@@ -552,7 +552,7 @@ const RightSection = () => {
           highlightLine.push((preprocessedCode as ForDto | PrintDto | IfElseChangeDto | CodeFlowVariableDto).id);
 
           const toAddObject = createObjectToAdd(
-            preprocessedCode as ForDto | PrintDto | IfElseChangeDto | CodeFlowVariableDto,
+            preprocessedCode as ForDto | PrintDto | IfElseChangeDto | CodeFlowVariableDto
           );
 
           // print 타입일 때 console창의 로그를 만드는 부분
@@ -662,7 +662,7 @@ const RightSection = () => {
           };
           return acc;
         },
-        {} as WrapperDataStructureItem,
+        {} as WrapperDataStructureItem
       );
 
       // 자료구조리스트에서 얕은 복사 문제가 생겨서 깊은 복사를 해준다

From 9a522c19908c496759a36165beb36df03f563ff3 Mon Sep 17 00:00:00 2001
From: lee gyu yeol-mac <i1004gy@gmail.com>
Date: Tue, 19 Nov 2024 13:05:00 +0900
Subject: [PATCH 41/41] =?UTF-8?q?=EB=B6=99=EC=9D=B4=EB=A9=B4=EC=84=9C=20?=
 =?UTF-8?q?=EA=B9=A8=EC=A7=84=20=EB=B6=80=EB=B6=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Classroom/Classroom.tsx             |  87 ++++-------
 .../ClassroomDashboard/ClassroomDashboard.tsx | 145 +++++++-----------
 2 files changed, 84 insertions(+), 148 deletions(-)

diff --git a/src/pages/Classroom/Classroom.tsx b/src/pages/Classroom/Classroom.tsx
index 729ba775..8aebb5ec 100644
--- a/src/pages/Classroom/Classroom.tsx
+++ b/src/pages/Classroom/Classroom.tsx
@@ -182,6 +182,7 @@ const Classroom = () => {
             <h2 className="group-title">{classroomData?.result.className}</h2>
           </div>
         </div>
+
         <div className="s__container">
           <div className="s__row">
             <div className="progress-info">
@@ -216,73 +217,37 @@ const Classroom = () => {
                 </li>
               </ul>
             </div>
-          </div>
-          <div className="s__container">
-            <div className="s__row">
-              <div className="progress-info">
-                <ul className="progress-data">
-                  <li>
-                    <img src="/image/progress01.svg" alt="전체" />
-                    <div>
-                      <p>전체</p>
-                      <p>{actionInfo && actionInfo?.ing + actionInfo?.complete + actionInfo?.help}</p>
-                    </div>
-                  </li>
-                  <li>
-                    <img src="/image/progress02.svg" alt="미제출" />
-                    <div>
-                      <p>미제출</p>
-                      <p>{actionInfo?.ing}</p>
-                    </div>
-                  </li>
-                  <li>
-                    <img src="/image/progress03.svg" alt="성공" />
-                    <div>
-                      <p>제출 완료</p>
-                      <p>{actionInfo?.complete}</p>
-                    </div>
-                  </li>
-                  <li>
-                    <img src="/image/progress04.svg" alt="실패" />
-                    <div>
-                      <p>도움 요청</p>
-                      <p>{actionInfo?.help}</p>
-                    </div>
-                  </li>
-                </ul>
+            <div className="section-title">
+              <div className="title-left">
+                <h3>제출현황</h3>
               </div>
-              <div className="section-title">
-                <div className="title-left">
-                  <h3>제출현황</h3>
-                </div>
 
-                <div className="classroom-right">
-                  <div className="right-btns" style={{ marginRight: "15px" }}>
-                    <button className="red" onClick={handleClassOver}>
-                      <img src="/image/icon_on_off.svg" alt="그룹삭제" />
-                      수업 종료
-                    </button>
-                  </div>
-                  <select name="" id="" className="s__select">
-                    <option value="1">이름순</option>
-                    <option value="2">제출순</option>
-                    <option value="3">학번순</option>
-                  </select>
+              <div className="classroom-right">
+                <div className="right-btns" style={{ marginRight: "15px" }}>
+                  <button className="red" onClick={handleClassOver}>
+                    <img src="/image/icon_on_off.svg" alt="그룹삭제" />
+                    수업 종료
+                  </button>
                 </div>
+                <select name="" id="" className="s__select">
+                  <option value="1">이름순</option>
+                  <option value="2">제출순</option>
+                  <option value="3">학번순</option>
+                </select>
               </div>
             </div>
-            {guests && guests.length > 0 ? (
-              <ul className="section-data section-data01">
-                {guests.map((guest) => (
-                  <Guest key={guest.id} guest={guest} onClick={() => openConsentInformationModal(guest)} />
-                ))}
-              </ul>
-            ) : (
-              <div className="section-empty-progress">
-                <img src="/image/img_empty_progress.png" alt="empty guests" />
-              </div>
-            )}
           </div>
+          {guests && guests.length > 0 ? (
+            <ul className="section-data section-data01">
+              {guests.map((guest) => (
+                <Guest key={guest.id} guest={guest} onClick={() => openConsentInformationModal(guest)} />
+              ))}
+            </ul>
+          ) : (
+            <div className="section-empty-progress">
+              <img src="/image/img_empty_progress.png" alt="empty guests" />
+            </div>
+          )}
         </div>
       </div>
     </>
diff --git a/src/pages/ClassroomDashboard/ClassroomDashboard.tsx b/src/pages/ClassroomDashboard/ClassroomDashboard.tsx
index 1ee7f0df..c87722c4 100644
--- a/src/pages/ClassroomDashboard/ClassroomDashboard.tsx
+++ b/src/pages/ClassroomDashboard/ClassroomDashboard.tsx
@@ -97,6 +97,7 @@ const ClassroomDashboard = () => {
           </div>
           <img src="/image/img_copywriting.png" alt="클래스룸 이미지" />
         </div>
+
         <div className="group-data-wrap">
           <div className="group-data-left">
             <div className="user-info">
@@ -124,104 +125,74 @@ const ClassroomDashboard = () => {
                 <button onClick={submitCreateClassName}>생성</button>
               </div>
             </div>
-            <img src="/image/img_copywriting.png" alt="클래스룸 이미지" />
           </div>
-          <div className="group-data-wrap">
-            <div className="group-data-left">
-              <div className="user-info">
-                <p>{userData?.result?.name}님</p>
-                <span>{userData?.result?.email}</span>
-                <ul className="user-group-data">
-                  <li>
-                    <p>강의방 수</p>
-                    <p>{hostClassRooms.length}</p>
-                  </li>
-                  <li>
-                    <p>학습방 수</p>
-                    <p>{guestClassRooms.length}</p>
-                  </li>
-                </ul>
-                <label htmlFor="addgroup">클래스룸 생성</label>
-                <div>
+          <div className="group-right">
+            <div className="section-title">
+              <div className="title-left">
+                <h3>강의방</h3>
+              </div>
+              <div className="title-right">
+                <div className="search-wrap">
                   <input
                     type="text"
-                    id="addgroup"
-                    placeholder="클래스룸 이름"
-                    value={createClassName}
-                    onChange={changeCreateClassName} // 입력값 변경시 상태 업데이트
+                    placeholder="클래스룸 검색"
+                    value={searchHostTerm}
+                    onChange={(e) => setHostSearchTerm(e.target.value)} // 검색어 업데이트
                   />
-                  <button onClick={submitCreateClassName}>생성</button>
+                  <button>
+                    <img src="/image/icon_search.svg" alt="검색" />
+                  </button>
                 </div>
               </div>
             </div>
-            <div className="group-right">
-              <div className="section-title">
-                <div className="title-left">
-                  <h3>강의방</h3>
-                </div>
-                <div className="title-right">
-                  <div className="search-wrap">
-                    <input
-                      type="text"
-                      placeholder="클래스룸 검색"
-                      value={searchHostTerm}
-                      onChange={(e) => setHostSearchTerm(e.target.value)} // 검색어 업데이트
-                    />
-                    <button>
-                      <img src="/image/icon_search.svg" alt="검색" />
-                    </button>
-                  </div>
-                </div>
+            {filteredHostClassRooms && filteredHostClassRooms.length > 0 ? (
+              <ul className="section-data section-data04">
+                {filteredHostClassRooms.map((item) => (
+                  <HostRoom key={item.id} classData={item} />
+                ))}
+              </ul>
+            ) : searchHostTerm !== "" ? (
+              <div className="section-empty-search-classrooom">
+                <img src="/image/img_empty_search_class.png" alt="empty host classroom" />
               </div>
-              {filteredHostClassRooms && filteredHostClassRooms.length > 0 ? (
-                <ul className="section-data section-data04">
-                  {filteredHostClassRooms.map((item) => (
-                    <HostRoom key={item.id} classData={item} />
-                  ))}
-                </ul>
-              ) : searchHostTerm !== "" ? (
-                <div className="section-empty-search-classrooom">
-                  <img src="/image/img_empty_search_class.png" alt="empty host classroom" />
-                </div>
-              ) : (
-                <div className="section-empty-classroom">
-                  <img src="/image/img_none_host_classroom.png" alt="empty search host classroom" />
-                </div>
-              )}
-              <div className="section-title">
-                <div className="title-left">
-                  <h3>학습방</h3>
-                </div>
-                <div className="title-right">
-                  <div className="search-wrap">
-                    <input
-                      type="text"
-                      placeholder="클래스룸 검색"
-                      value={searchGuestTerm}
-                      onChange={(e) => setGuestSearchTerm(e.target.value)} // 검색어 업데이트
-                    />
-                    <button>
-                      <img src="/image/icon_search.svg" alt="검색" />
-                    </button>
-                  </div>
-                </div>
+            ) : (
+              <div className="section-empty-classroom">
+                <img src="/image/img_none_host_classroom.png" alt="empty search host classroom" />
               </div>
-              {filteredGuestClassRooms && filteredGuestClassRooms.length > 0 ? (
-                <ul className="section-data section-data04">
-                  {filteredGuestClassRooms.map((item) => (
-                    <GuestRoom key={item.id} classData={item} />
-                  ))}
-                </ul>
-              ) : searchHostTerm !== "" ? (
-                <div className="section-empty-search-classrooom">
-                  <img src="/image/img_empty_search_class.png" alt="empty host classroom" />
-                </div>
-              ) : (
-                <div className="section-empty-classroom">
-                  <img src="/image/img_none_host_classroom.png" alt="empty search host classroom" />
+            )}
+            <div className="section-title">
+              <div className="title-left">
+                <h3>학습방</h3>
+              </div>
+              <div className="title-right">
+                <div className="search-wrap">
+                  <input
+                    type="text"
+                    placeholder="클래스룸 검색"
+                    value={searchGuestTerm}
+                    onChange={(e) => setGuestSearchTerm(e.target.value)} // 검색어 업데이트
+                  />
+                  <button>
+                    <img src="/image/icon_search.svg" alt="검색" />
+                  </button>
                 </div>
-              )}
+              </div>
             </div>
+            {filteredGuestClassRooms && filteredGuestClassRooms.length > 0 ? (
+              <ul className="section-data section-data04">
+                {filteredGuestClassRooms.map((item) => (
+                  <GuestRoom key={item.id} classData={item} />
+                ))}
+              </ul>
+            ) : searchHostTerm !== "" ? (
+              <div className="section-empty-search-classrooom">
+                <img src="/image/img_empty_search_class.png" alt="empty host classroom" />
+              </div>
+            ) : (
+              <div className="section-empty-classroom">
+                <img src="/image/img_none_host_classroom.png" alt="empty search host classroom" />
+              </div>
+            )}
           </div>
         </div>
       </div>
