Merge remote-tracking branch 'origin'

edu-pi · Nov 15, 2024 · 7934397 · 7934397
2 parents a55ec2a + a9a60d3
commit 7934397
Show file tree

Hide file tree

Showing 24 changed files with 617 additions and 266 deletions.
diff --git a/src/App.css b/src/App.css
@@ -223,6 +223,10 @@ input[type="checkbox"] {
   box-sizing: border-box; /* 패딩과 보더를 포함하여 너비 계산 */
   background-color: #fdfdfe;
   padding: 16px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 
 .view-section-title {
@@ -234,6 +238,7 @@ input[type="checkbox"] {
 }
 .data-name {
   font-weight: 600;
+  width: fit-content;
   display: inline-block;
   padding: 3px 8px;
   border-radius: 4px;
@@ -246,10 +251,6 @@ input[type="checkbox"] {
   position: relative;
   height: 100%;
   overflow-y: auto;
-  height: calc(100% - 51px);
-}
-.view-section2-2 .view-data {
-  height: 100%;
 }
 .split-contatiner {
   border-top: 1px solid var(--gray01);
@@ -499,7 +500,6 @@ var-list {
   position: relative;
   display: flex;
   flex-direction: column;
-  /* width: calc(100% - 40px); */
   width: 700px;
   max-width: 980px;
   max-height: 60%;
@@ -866,6 +866,11 @@ var-list {
 .section-data03 {
   grid-template-columns: 1fr 1fr 1fr 1fr;
 }
+@media screen and (max-width: 1100px) {
+  .section-data03 {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
 .section-data03 li {
   border-radius: 8px;
   overflow: hidden;
@@ -1197,10 +1202,10 @@ header .group-btn {
   text-align: left;
 }
 .true {
-  background-color: #10D190 !important;
+  background-color: #10d190 !important;
 }
 .border-true {
-  border: 1px solid #10D190 !important;
+  border: 1px solid #10d190 !important;
 }
 .false {
   background-color: #ff0000 !important;
@@ -1398,6 +1403,9 @@ header .group-btn {
 .btn-cancel:active {
   background-color: #dc2626;
 }
+.btn-manual {
+  background-color: #9a9a9a;
+}
 .btn img {
   width: 24px;
   height: 24px;
@@ -1679,7 +1687,7 @@ gpt-icon-small {
   width: calc(100% + 2px);
   transform: translateX(-1px);
 }
-.highlight-func-title{
+.highlight-func-title {
   background-color: #f5f5fc !important;
 }
 .func-title span {
@@ -1862,9 +1870,9 @@ gpt-icon-small {
 .feedback-btn:hover {
   background-color: #f5f5f5;
 }
-.login-header{
+.login-header {
   align-items: center;
   display: flex;
-  flex-direction:  row;
+  flex-direction: row;
   padding: 8px 16px;
-}
+}
diff --git a/src/index.css b/src/index.css
@@ -33,6 +33,7 @@ body {
   margin: 0; /* 기본 마진 제거 */
   background-color: #f9fafb;
   height: 100%;
+  overflow: hidden;
 }
 #root {
   height: 100%;

diff --git a/src/pages/Classroom/Classroom.tsx b/src/pages/Classroom/Classroom.tsx
@@ -129,14 +129,12 @@ const Classroom = () => {
         setData(newData);
         // setQueryData로 값 캐싱
         queryClient.setQueryData(["sse-data", classroomId], newData);
-        console.log("서버로 부터 데이터가 옴");
+
         guestDataRefetch();
         classroomDataRefetch();
       });
       // connection되면
-      eventSource.addEventListener("open", function() {
-        console.log("서버로 연결이 됨");
-      });
+      eventSource.addEventListener("open", function () {});
 
       return () => {
         eventSource.close();
@@ -176,7 +174,7 @@ const Classroom = () => {
               <li>
                 <img src="/image/progress02.svg" alt="미제출" />
                 <div>
-                  <p>제출 중</p>
+                  <p>미제출</p>
                   <p>{actionInfo?.ing}</p>
                 </div>
               </li>
@@ -190,7 +188,7 @@ const Classroom = () => {
               <li>
                 <img src="/image/progress04.svg" alt="실패" />
                 <div>
-                  <p>도움</p>
+                  <p>도움 요청</p>
                   <p>{actionInfo?.help}</p>
                 </div>
               </li>

diff --git a/src/pages/ClassroomDashboard/components/GuestRoom.tsx b/src/pages/ClassroomDashboard/components/GuestRoom.tsx
@@ -14,7 +14,6 @@ const GuestRoom = ({ classData }: props) => {
         <div className="data04-name">
           <p>{classData.name}</p>
           <span>인원 : {classData.totalPeople}명</span>
-          <span>초대 대기 : 1명</span>
         </div>
         <img src="/image/icon_right_arrow2.svg" alt="" />
       </Link>

diff --git a/src/pages/ClassroomDashboard/components/HostRoom.tsx b/src/pages/ClassroomDashboard/components/HostRoom.tsx
@@ -8,13 +8,13 @@ interface props {
   classData: ClassData;
 }
 const Room = ({ classData }: props) => {
+  console.log(classData);
   return (
     <li>
       <Link to={`/classroomdashboard/classroom/${classData.id}`}>
         <div className="data04-name">
           <p>{classData.name}</p>
           <span>인원 : {classData.totalPeople}명</span>
-          <span>초대 대기 : 1명</span>
         </div>
         <img src="/image/icon_right_arrow2.svg" alt="" />
       </Link>

diff --git a/src/pages/Manage/Manage.tsx b/src/pages/Manage/Manage.tsx
@@ -115,7 +115,7 @@ const Modify = () => {
     mutationFn: deleteClassroom,
     onSuccess: () => {
       alert("클래스룸이 삭제되었습니다.");
-      navigate("/classroomspace");
+      navigate("/classdashboard");
     },
     onError: (error) => {
       console.error("An error occurred:", error);
@@ -128,9 +128,7 @@ const Modify = () => {
   };
 
   // 검색어에 따른 필터링 적용
-  const filterGuests = guests?.filter((guest) =>
-      guest.name.toLowerCase().includes(searchGuestTerm.toLowerCase()),
-  );
+  const filterGuests = guests?.filter((guest) => guest.name.toLowerCase().includes(searchGuestTerm.toLowerCase()));
 
   return (
     <div className="bg">
@@ -177,17 +175,14 @@ const Modify = () => {
                 <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>
           ) : (
-            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="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}>

diff --git a/src/pages/Manage/components/Guest.tsx b/src/pages/Manage/components/Guest.tsx
@@ -31,7 +31,7 @@ const Guest = ({ guest, getClassroomRefetch }: props) => {
     emissionGuestMutation.mutate(id);
   };
   return (
-    <li style={{ minWidth: "300px" }}>
+    <li style={{ minWidth: "250px" }}>
       <div className="data03-name">
         <p>{guest.name}</p>
         <span>{guest.email}</span>

diff --git a/src/pages/Visualization/Visualization.module.css b/src/pages/Visualization/Visualization.module.css
@@ -1,7 +1,7 @@
 .main {
   display: flex;
   flex-direction: column;
-  height: 94.5%;
+  height: 93vh;
   width: 100%;
 }
 .s__select {

diff --git a/src/pages/Visualization/Visualization.tsx b/src/pages/Visualization/Visualization.tsx
@@ -12,18 +12,21 @@ import Split from "react-split";
 import { ValidTypeDto } from "@/pages/Visualization/types/dto/ValidTypeDto";
 import { CodeContext } from "./context/CodeContext";
 import { PreprocessedCodesContext } from "./context/PreProcessedCodesContext";
+
 //zustand store
 import { useEditorStore } from "@/store/editor";
 import { useGptTooltipStore } from "@/store/gptTooltip";
+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" +
-    "   print()\n"].join("\n")
+      "# example\n" +
+        "for i in range(2, 10):\n" +
+        "   for j in range(1, 10):\n" +
+        '      print(f"{i} x {j} = {i * j}")\n' +
+        "   print()\n",
+    ].join("\n")
   );
   const [preprocessedCodes, setPreprocessedCodes] = useState<ValidTypeDto[]>([]);
   // zustand store
@@ -36,7 +39,6 @@ export default function Visualization() {
     <CodeContext.Provider value={{ code, setCode }}>
       <PreprocessedCodesContext.Provider value={{ preprocessedCodes, setPreprocessedCodes }}>
         <Header />
-
         <main className={styles.main}>
           {focus && gptPin ? <GptIcon /> : (gptPin || isGptToggle) && <GptComment />}
 
@@ -50,11 +52,24 @@ export default function Visualization() {
             dragInterval={1}
             direction="horizontal"
             cursor="col-resize"
-            style={{ display: "flex", width: "99vw", height: "100%" }}
+            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"
+            >
+              <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>
       </PreprocessedCodesContext.Provider>
     </CodeContext.Provider>

diff --git a/src/pages/Visualization/components/LeftSection/LeftSection.module.css b/src/pages/Visualization/components/LeftSection/LeftSection.module.css
@@ -15,21 +15,6 @@
   align-items: center;
   gap: 16px;
 }
-.playcode-btn {
-  background-color: var(--blue);
-  color: var(--white);
-  width: 112px;
-  height: 35px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  flex-direction: row;
-  border-radius: 4px;
-}
-.playcode-btn-loading {
-  filter: brightness(0.9);
-}
 .select-box {
   position: relative;
   width: 193px;
@@ -105,7 +90,7 @@
   background: var(--white, #fff);
 }
 .default-option button {
-  /*color: var(--gray01, #dddee4);*/  /* 디폴트값 gray 주석 해제 */
+  /*color: var(--gray01, #dddee4);*/ /* 디폴트값 gray 주석 해제 */
   text-align: center;
   font-family: Pretendard;
   font-size: 16px;