리펙토링

Author: seroak

src/pages/Classroom/Classroom.tsx

@@ -116,38 +116,45 @@ const Classroom = () => {
   };
 
   const useSSE = (url: string) => {
-    const [data, setData] = useState(null);
+    const [data, setData] = useState<unknown>(null);
     const queryClient = useQueryClient();
 
     const subscribe = useCallback(() => {
       const eventSource = new EventSource(url, { withCredentials: true });
 
       eventSource.onmessage = (event) => {
-        const newData = JSON.parse(event.data);
-        setData(newData);
-        // setQueryData로 값 캐싱
-        queryClient.setQueryData(["sse-data"], newData);
-        guestDataRefetch();
-        classroomDataRefetch();
+        try {
+          const newData = JSON.parse(event.data);
+          setData(newData);
+          queryClient.setQueryData(["sse-data"], newData);
+          guestDataRefetch();
+          classroomDataRefetch();
+        } catch (error) {
+          console.error("Failed to parse SSE message:", error);
+        }
       };
+
       eventSource.addEventListener("action", (event) => {
-        const newData = JSON.parse(event.data);
-        setData(newData);
-        // setQueryData로 값 캐싱
-        queryClient.setQueryData(["sse-data", classroomId], newData);
+        try {
+          const newData = JSON.parse(event.data);
+          setData(newData);
+          queryClient.setQueryData(["sse-data", classroomId], newData);
+          guestDataRefetch();
+          classroomDataRefetch();
+        } catch (error) {
+          console.error("Failed to parse SSE action event:", error);
+        }
+      });
 
-        guestDataRefetch();
-        classroomDataRefetch();
+      eventSource.addEventListener("error", (error) => {
+        console.error("SSE connection error:", error);
       });
-      // connection되면
-      eventSource.addEventListener("open", function () {});
 
       return () => {
         eventSource.close();
       };
-    }, [url, queryClient]);
+    }, [url, queryClient, classroomId, guestDataRefetch, classroomDataRefetch]);
 
-    // 요청을 끊을 때 일어나는 useEffect
     useEffect(() => {
       const unsubscribe = subscribe();
       return unsubscribe;

src/pages/Visualization/Visualization.tsx

@@ -20,7 +20,7 @@ import { useEditorStore } from "@/store/editor";
 import { useGptTooltipStore } from "@/store/gptTooltip";
 
 export default function Visualization() {
-  const [code, setCode] = useState<any>(
+  const [code, setCode] = useState<string>(
     [
       "for i in range(2, 10):\n" +
         "   for j in range(1, 10):\n" +

src/pages/Visualization/VisualizationClassroom.tsx

@@ -35,7 +35,7 @@ interface ClassAccessRightDataType {
 // 원본 코드 타입 정의
 
 const VisualizationClassroom = () => {
-  const [code, setCode] = useState<any>(
+  const [code, setCode] = useState<string>(
     [
       "for i in range(2, 10):\n" +
         "   for j in range(1, 10):\n" +

src/pages/Visualization/components/RightSection/hooks/processors/processCodeFlow.ts

@@ -6,7 +6,7 @@ import { WhileDto } from "@/pages/Visualization/types/dto/whileDto";
 import { PrintItem } from "@/pages/Visualization/types/codeFlow/printItem";
 import { InputItem } from "@/pages/Visualization/types/codeFlow/inputItem";
 import { CodeFlowVariableItem } from "@/pages/Visualization/types/codeFlow/codeFlowVariableItem";
-import { State } from "../../types";
+import { State, CodeFlowItem } from "../../types";
 import { createObjectToAdd } from "../../services/createObjectToAdd";
 import { updateCodeFlow } from "../../services/updateCodeFlow";
 import { refreshCodeFlow } from "../../services/refreshCodeFlow";
@@ -73,8 +73,7 @@ export const processCodeFlow = ({
     }
   }
 
-  // CodeFlow 업데이트 또는 추가
-  let changedCodeFlows: any[];
+  let changedCodeFlows: CodeFlowItem[];
   if (newUsedId.includes(toAddObject.id!)) {
     // 기존 항목 업데이트
     if (toAddObject.type === "for" || toAddObject.type === "while") {

src/pages/Visualization/components/RightSection/hooks/processors/processEndUserFunc.ts

@@ -1,5 +1,5 @@
 import { EndUserFuncDto } from "@/pages/Visualization/types/dto/endUserFuncDto";
-import { State } from "../../types";
+import { State, CodeFlowItem } from "../../types";
 import { createObjectToAdd } from "../../services/createObjectToAdd";
 import { deleteCodeFlow } from "../../services/deleteCodeFlow";
 import { insertIntoDepth } from "../../services/insertIntoDepth";
@@ -48,7 +48,7 @@ export const processEndUserFunc = ({
   const deletedCodeFlow = deleteCodeFlow(accCodeFlow.objects, preprocessedCode.id);
   let newAccCodeFlow = { objects: deletedCodeFlow };
 
-  let finallyCodeFlow: any;
+  let finallyCodeFlow: CodeFlowItem[];
   if (toAddObject.depth > prevTrackingDepth) {
     finallyCodeFlow = insertIntoDepth(newAccCodeFlow.objects, toAddObject, prevTrackingId);
   } else if (toAddObject.depth === prevTrackingDepth) {

src/pages/Visualization/components/RightSection/hooks/processors/processIfElseDefine.ts

@@ -1,5 +1,5 @@
 import { IfElseDto } from "@/pages/Visualization/types/dto/ifElseDto";
-import { State } from "../../types";
+import { State, CodeFlowItem } from "../../types";
 import { createObjectToAdd } from "../../services/createObjectToAdd";
 import { turnOffAllNodeLight } from "../../services/turnOffAllNodeLight";
 import { insertIntoDepth } from "../../services/insertIntoDepth";
@@ -45,7 +45,7 @@ export const processIfElseDefine = ({
 
     newUsedId.push(toAddObject.id!);
 
-    let finallyCodeFlow: any;
+    let finallyCodeFlow: CodeFlowItem[];
     if (toAddObject.depth > newTrackingDepth) {
       finallyCodeFlow = insertIntoDepth(newAccCodeFlow.objects, toAddObject, newTrackingId);
     } else if (toAddObject.depth === newTrackingDepth) {

src/pages/Visualization/components/RightSection/hooks/processors/utils.ts

@@ -2,51 +2,51 @@ import { WrapperDataStructureItem } from "@/pages/Visualization/types/dataStruct
 import { VariablesDto } from "@/pages/Visualization/types/dto/variablesDto";
 import { AppendDto } from "@/pages/Visualization/types/dto/appendDto";
 import { CreateCallStackDto } from "@/pages/Visualization/types/dto/createCallStackDto";
+import { ValidTypeDto } from "@/pages/Visualization/types/dto/ValidTypeDto";
 import { unLightCodeFlow } from "../../services/unLightCodeFlow";
 import { State } from "../../types";
 
 export const resetDataStructuresLight = (accDataStructures: WrapperDataStructureItem): WrapperDataStructureItem => {
   return Object.entries(accDataStructures).reduce((acc, [key, value]) => {
     acc[key] = {
-      data: value.data.map((structure) => ({
-        ...structure,
-      })),
+      data: value.data,
       isLight: false,
     };
     return acc;
   }, {} as WrapperDataStructureItem);
 };
 
+const initializeLightStructure = (toLightStructures: Record<string, string[]>, callStackName: string): void => {
+  if (!toLightStructures[callStackName]) {
+    toLightStructures[callStackName] = [];
+  }
+};
+
 export const calculateToLightStructures = (
-  preprocessedCode: any,
+  preprocessedCode: ValidTypeDto,
   accCodeFlow: State
 ): { toLightStructures: Record<string, string[]>; accCodeFlow: State } => {
   const toLightStructures: Record<string, string[]> = {};
   let newAccCodeFlow = accCodeFlow;
+  const codeType = preprocessedCode.type.toLowerCase();
 
-  if (preprocessedCode.type.toLowerCase() === "assign") {
+  if (codeType === "assign") {
     const code = preprocessedCode as VariablesDto;
     code.variables?.forEach((element) => {
-      const callStackName = code.callStackName;
-      if (!toLightStructures[callStackName]) {
-        toLightStructures[callStackName] = [];
-      }
-      toLightStructures[callStackName].push(element.name);
+      initializeLightStructure(toLightStructures, code.callStackName);
+      toLightStructures[code.callStackName].push(element.name);
     });
-  } else if (preprocessedCode.type.toLowerCase() === "append") {
+  } else if (codeType === "append") {
     const code = preprocessedCode as AppendDto;
     const variable = code.variable;
     if (variable.type.toLowerCase() === "variable") {
       toLightStructures[code.callStackName] = [variable.name];
     }
-  } else if (preprocessedCode.type.toLowerCase() === "createCallStack") {
+  } else if (codeType === "createcallstack") {
     const code = preprocessedCode as CreateCallStackDto;
     code.args?.forEach((element) => {
-      const callStackName = code.callStackName;
-      if (!toLightStructures[callStackName]) {
-        toLightStructures[callStackName] = [];
-      }
-      toLightStructures[callStackName].push(element.name);
+      initializeLightStructure(toLightStructures, code.callStackName);
+      toLightStructures[code.callStackName].push(element.name);
     });
     const unLightaccCodeFlow = unLightCodeFlow(accCodeFlow.objects);
     newAccCodeFlow = { objects: unLightaccCodeFlow };

src/pages/Visualization/components/RightSection/hooks/useCodeExecutionMutation.ts

@@ -7,6 +7,7 @@ import { PreprocessedCodesContext } from "../../../context/PreProcessedCodesCont
 import { InputErrorContext } from "@/pages/Visualization/context/InputErrorContext";
 import { useContext } from "react";
 import { ApiError } from "../types";
+import { handleExecutionError } from "../utils/errorHandler";
 
 export const useCodeExecutionMutation = () => {
   const { openAlert } = useCustomAlert();
@@ -35,35 +36,18 @@ export const useCodeExecutionMutation = () => {
       setPreprocessedCodes([]);
       setCodeFlowLength(0);
       setStepIdx(0);
-      setConsoleList([data.result.output]);
+      setConsoleList([data.result.output || ""]);
       setHighlightLines([]);
     },
     onError(error: ApiError) {
-      console.error(error);
-
-      if (error.message === "데이터 형식이 올바르지 않습니다") {
-        return;
-      } else if (error.code === "CA-400006" || error.code === "CA-400999") {
-        openAlert("지원하지 않는 코드가 포함되어 있습니다");
-        return;
-      } else if (error.code === "CA-400005") {
-        setIsInputError(true);
-        openAlert("입력된 input의 갯수가 적습니다.");
-      } else if (error.code === "CA-400002") {
-        // 잘못된 문법 에러처리
-        const linNumber = Number(error.result.lineNumber);
-        const errorMessage = error.result.errorMessage;
-        if (errorMessage) {
-          setErrorLine({ lineNumber: linNumber, message: errorMessage });
-          setConsoleList([errorMessage]);
-        }
-        setPreprocessedCodes([]);
-        return;
-      } else if (error.code === "CA-400007") {
-        openAlert("코드의 실행 횟수가 너무 많습니다.");
-        return;
-      }
-      setConsoleList([]);
+      handleExecutionError({
+        error,
+        openAlert,
+        setPreprocessedCodes,
+        setConsoleList,
+        setErrorLine,
+        setIsInputError,
+      });
     },
   });
 };

src/pages/Visualization/components/RightSection/hooks/useCodeVisualizationMutation.ts

@@ -10,6 +10,7 @@ import { useContext } from "react";
 import { isNotServiceDtoType } from "../services/isNotServiceDtoType";
 import { isValidTypeDtoArray } from "@/pages/Visualization/types/dto/ValidTypeDto";
 import { SuccessResponse, ApiError } from "../types";
+import { handleVisualizationError } from "../utils/errorHandler";
 
 interface UseCodeVisualizationMutationProps {
   setIsPlaying: (value: boolean) => void;
@@ -38,9 +39,7 @@ export const useCodeVisualizationMutation = ({ setIsPlaying }: UseCodeVisualizat
   return 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)) {
@@ -49,39 +48,18 @@ export const useCodeVisualizationMutation = ({ setIsPlaying }: UseCodeVisualizat
         setDisplayNone(false);
         setIsPlaying(true);
       } else {
-        console.error("데이터 형식이 올바르지 않습니다");
         throw new Error("데이터 형식이 올바르지 않습니다");
       }
     },
     onError(error) {
-      console.error(error);
-
-      if (error.message === "데이터 형식이 올바르지 않습니다") {
-        return;
-      } else if (error.code === "CA-400006" || error.code === "CA-400999") {
-        openAlert("지원하지 않는 코드가 포함되어 있습니다.");
-        return;
-      } else if (error.code === "CA-400005") {
-        setIsInputError(true);
-        openAlert("입력된 input의 개수가 적습니다.");
-      } else if (error.message === "시각화를 지원하지 않는 코드가 포함되어 있습니다.") {
-        openAlert("시각화를 지원하지 않는 코드가 포함되어 있습니다.");
-        return;
-      } else if (error.code === "CA-400002") {
-        const linNumber = Number(error.result.lineNumber);
-        const errorMessage = error.result.errorMessage;
-        if (errorMessage) {
-          setErrorLine({ lineNumber: linNumber, message: errorMessage });
-          setConsoleList([errorMessage]);
-        }
-        setPreprocessedCodes([]);
-        return;
-      } else if (error.code === "CA-400007") {
-        openAlert("코드의 실행 횟수가 너무 많습니다.");
-        return;
-      }
-      setConsoleList([]);
-      setPreprocessedCodes([]);
+      handleVisualizationError({
+        error,
+        openAlert,
+        setPreprocessedCodes,
+        setConsoleList,
+        setErrorLine,
+        setIsInputError,
+      });
     },
   });
 };

src/pages/Visualization/components/RightSection/hooks/usePreprocessedCodesProcessor.ts

@@ -104,9 +104,6 @@ export const usePreprocessedCodesProcessor = () => {
     const state = createInitialState();
 
     for (const preprocessedCode of preprocessedCodes) {
-      console.log(preprocessedCode);
-
-      // whiledefine 타입은 건너뛰기
       if (preprocessedCode.type.toLowerCase() === "whiledefine") {
         continue;
       }