Merge pull request #215 from edu-pi/feature/issue209

[#209] 코드 실행 버그 클래스룸 페이지 학생 상태정보 표시 에러 해결
edu-pi · Nov 7, 2024 · a1e9ddb · a1e9ddb
2 parents d2d125c + ae27494
commit a1e9ddb
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 14 deletions.
diff --git a/src/pages/Classroom/Classroom.tsx b/src/pages/Classroom/Classroom.tsx
@@ -35,6 +35,7 @@ interface TotalActionInfoType {
   result: {
     className: string;
     actionInfo: ActionInfoType;
+    totalInfo: { ing: number; complete: number; help: number };
   };
 }
 interface ClassAccessRightDataType {
@@ -84,7 +85,7 @@ const Classroom = () => {
 
   useEffect(() => {
     if (classroomData) {
-      setActionInfo(classroomData.result.actionInfo);
+      setActionInfo(classroomData.result.totalInfo);
     }
   }, [classroomData]);
 

diff --git a/src/pages/Visualization/components/LeftSection/LeftSection.tsx b/src/pages/Visualization/components/LeftSection/LeftSection.tsx
@@ -24,7 +24,6 @@ const LeftSection = () => {
   const mutation = useMutation({
     mutationFn: runCode,
     async onSuccess(data) {
-      console.log(data.result.output);
       // 타입 체크 함수
       setConsole([data.result.output]);
     },

diff --git a/src/pages/Visualization/components/RightSection/RightSection.tsx b/src/pages/Visualization/components/RightSection/RightSection.tsx
@@ -253,7 +253,6 @@ const RightSection = () => {
     const arrowTexts: string[] = [];
 
     for (let preprocessedCode of preprocessedCodes) {
-      console.log(preprocessedCode);
       let changedCodeFlows: any[] = [];
       if (preprocessedCode.type.toLowerCase() === "whiledefine") {
         continue;
@@ -302,7 +301,13 @@ const RightSection = () => {
           accDataStructures[callStackName].data.map((data: DataStructureVarsItem) => {
             if (data.name === variable.name) {
               data.highlightIdx = [data.expr.length - 1];
-              data.expr.push(variable.expr);
+              if (data.expr[0] === "") {
+                data.expr.shift();
+                data.expr.push(variable.expr);
+              } else {
+                data.expr.push(variable.expr);
+              }
+
               if (data.idx) {
                 data.idx.start = data.expr.length - 1;
                 data.idx.end = data.expr.length - 1;
@@ -324,6 +329,7 @@ const RightSection = () => {
         // 오른쪽에 변수로 함수를 넣을 때
         if ((preprocessedCode as VariablesDto).variables[0].type.toLowerCase() === "function".toLowerCase()) {
           const { id, expr, name, type, code } = (preprocessedCode as VariablesDto).variables[0];
+          highlightLine.push(id);
           const highlightIdx = new Array(expr.length).fill(0).map((_, idx) => idx + 1);
           const exprArray = [expr];
           accDataStructures[callStackName].data.push({ id, expr: exprArray as string[], name, type, highlightIdx });
@@ -338,7 +344,7 @@ const RightSection = () => {
               if (typeof variable.expr === "string") {
                 (variable as VariableExprArray).expr = variable.expr.slice(1, -1).split(",");
               }
-            } else if(variable.type.toLowerCase() === "tuple") {
+            } else if (variable.type.toLowerCase() === "tuple") {
               if (typeof variable.expr === "string") {
                 (variable as VariableExprArray).expr = variable.expr.slice(1, -1).split(",");
               }
@@ -374,13 +380,23 @@ const RightSection = () => {
       else if (preprocessedCode.type.toLowerCase() === "createCallStack".toLowerCase()) {
         accDataStructures[(preprocessedCode as CreateCallStackDto).callStackName] = { data: [], isLight: false };
         highlightLine.push((preprocessedCode as CreateCallStackDto).id);
+
         for (let arg of (preprocessedCode as CreateCallStackDto).args) {
-          accDataStructures[(preprocessedCode as CreateCallStackDto).callStackName].data.push({
-            expr: arg.expr.slice(1, -1).split(","),
-            name: arg.name,
-            type: arg.type,
-            idx: { start: arg.idx.start, end: arg.idx.end },
-          });
+          if (arg.type === "list" || arg.type === "tuple") {
+            accDataStructures[(preprocessedCode as CreateCallStackDto).callStackName].data.push({
+              expr: arg.expr.slice(1, -1).split(","),
+              name: arg.name,
+              type: arg.type,
+              idx: { start: arg.idx.start, end: arg.idx.end },
+            });
+          } else if (arg.type === "variable") {
+            accDataStructures[(preprocessedCode as CreateCallStackDto).callStackName].data.push({
+              expr: arg.expr.split(","),
+              name: arg.name,
+              type: arg.type,
+              idx: { start: arg.idx.start, end: arg.idx.end },
+            });
+          }
         }
         arrowTexts.push((preprocessedCode as CreateCallStackDto).code);
 

diff --git a/...pages/Visualization/components/RightSection/components/ListWrapper/ListWrapper.module.css b/...pages/Visualization/components/RightSection/components/ListWrapper/ListWrapper.module.css
@@ -2,7 +2,7 @@
 .wrapper {
   display: flex;
   width: fit-content;
-  margin: 0 10px 0 10px;
+  margin-top: 20px;
 }
 .var-data {
   display: flex;
@@ -14,6 +14,7 @@
   border-radius: 5px;
   min-width: 18px;
   min-height: 39px;
+  margin-bottom: 5px;
 }
 span {
   margin-bottom: 4px;
@@ -31,6 +32,7 @@ span {
 .index {
   color: rgba(24, 24, 24, 0.3);
   text-align: center;
+  font-size: 0.8rem;
 }
 .highlight {
   background-color: #364fce;

diff --git a/...pages/Visualization/components/RightSection/components/VariableBox/VariableBox.module.css b/...pages/Visualization/components/RightSection/components/VariableBox/VariableBox.module.css
@@ -5,7 +5,6 @@
   align-items: center;
   gap: 1px;
   background-color: #565656;
-  margin: 0px 10px;
   border-radius: 5px;
   font-weight: 500;
   min-width: 40px;
@@ -21,7 +20,7 @@ span {
   color: #fff;
   padding: 8px 15px;
   position: relative;
-  margin-top: 3px
+  margin-top: 3px;
 }
 .var-data > span > span {
   position: absolute;