Merge pull request #4 from Tekiter/reset-result-on-change

feat: 입력 변경시 실행 결과 초기화

Author: Tekiter

src/commands/useTestcaseRunner.ts

@@ -44,10 +44,14 @@ const useTestcaseRunner = () => {
     [],
   );
 
-  const makeIdle = useRecoilCallback(({ set }) => (id: string) => {
+  const makeWaiting = useRecoilCallback(({ set }) => (id: string) => {
     set(executeStatusFamily(id), { status: "waiting" });
   });
 
+  const makeIdle = useRecoilCallback(({ set }) => (id: string) => {
+    set(executeStatusFamily(id), { status: "idle" });
+  });
+
   const stopAll = useRecoilCallback(({ snapshot, set }) => async () => {
     queue.clear();
 
@@ -65,6 +69,7 @@ const useTestcaseRunner = () => {
   return {
     runAll,
     run,
+    makeWaiting,
     makeIdle,
     stopAll,
   };

src/components/testcase/InputEditor.tsx

@@ -6,10 +6,13 @@ import { TestcaseInput } from "@/states/testcase";
 
 interface InputEditorProps {
   value: TestcaseInput;
+  editable?: boolean;
   onChange(newVal: TestcaseInput): void;
+  onKeyDown?(): void;
 }
 
-const InputEditor: FC<InputEditorProps> = ({ value, onChange }) => {
+const InputEditor: FC<InputEditorProps> = ({ value, editable, onChange, onKeyDown }) => {
+  console.log("Rerender");
   const updateData = (data: TestcaseInput) => {
     onChange(data);
   };
@@ -23,7 +26,12 @@ const InputEditor: FC<InputEditorProps> = ({ value, onChange }) => {
 
   return (
     <StyledInputEditor>
-      <ReactCodeMirror value={value.text} onChange={(value) => handlePlainTextChange(value)} />
+      <ReactCodeMirror
+        value={value.text}
+        onChange={(value) => handlePlainTextChange(value)}
+        onKeyDown={onKeyDown}
+        editable={editable}
+      />
     </StyledInputEditor>
   );
 };

src/components/testcase/TestcasePanel.tsx

@@ -1,10 +1,11 @@
 import { Tab, TabList, Tabs } from "@chakra-ui/react";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { FC, useState } from "react";
+import { FC, useMemo, useState } from "react";
 import { useRecoilValue } from "recoil";
 
 import useTestcaseCommand from "@/commands/useTestcaseCommand";
+import useTestcaseRunner from "@/commands/useTestcaseRunner";
 import { testcaseFamily, TestcaseID } from "@/states/testcase";
 
 import AnswerEditor from "./AnswerEditor";
@@ -18,31 +19,39 @@ interface TestcasePanelProps {
 
 const TestcasePanel: FC<TestcasePanelProps> = ({ testcaseId }) => {
   const testcaseCommand = useTestcaseCommand();
+  const runner = useTestcaseRunner();
   const testcase = useRecoilValue(testcaseFamily(testcaseId));
 
   const [selectedTabIndex, setSelectedTabIndex] = useState(0);
 
-  const tabs = [
-    {
-      title: "입력",
-      content: (
-        <InputEditor value={testcase.input} onChange={(input) => testcaseCommand.changeValue(testcaseId, { input })} />
-      ),
-    },
-    {
-      title: "정답",
-      content: (
-        <AnswerEditor
-          value={testcase.answer}
-          onChange={(answer) => testcaseCommand.changeValue(testcaseId, { answer })}
-        />
-      ),
-    },
-    {
-      title: "출력결과",
-      content: <Result testcaseId={testcaseId} />,
-    },
-  ];
+  const tabs = useMemo(
+    () => [
+      {
+        title: "입력",
+        content: (
+          <InputEditor
+            value={testcase.input}
+            onChange={(input) => testcaseCommand.changeValue(testcaseId, { input })}
+            onKeyDown={() => runner.makeIdle(testcaseId)}
+          />
+        ),
+      },
+      {
+        title: "정답",
+        content: (
+          <AnswerEditor
+            value={testcase.answer}
+            onChange={(answer) => testcaseCommand.changeValue(testcaseId, { answer })}
+          />
+        ),
+      },
+      {
+        title: "출력결과",
+        content: <Result testcaseId={testcaseId} />,
+      },
+    ],
+    [testcaseId, testcase],
+  );
 
   return (
     <StyledTestcasePanel>