Merge pull request #141 from ezcode-my/refactoring/code-history

Refactoring/code history

Author: grimza99

package.json

@@ -25,13 +25,15 @@
     "@tanstack/react-query": "^5.80.7",
     "@tanstack/react-query-devtools": "^5.81.2",
     "@types/js-cookie": "^3.0.6",
+    "@types/lodash.debounce": "^4.0.9",
     "@uiw/react-codemirror": "^4.23.14",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "jest": "^30.0.5",
     "jest-environment-jsdom": "^30.0.5",
     "js-cookie": "^3.0.5",
+    "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.515.0",
     "next": "15.3.3",
     "next-auth": "^4.24.11",

pnpm-lock.yaml

@@ -5,12 +5,10 @@ import { ProblemId } from '@/shared';
 import { useQuery } from '@tanstack/react-query';
 import { ISubmitPrepareData } from './submitCode.query.type';
 import { useProblemWebSocketStoreActions } from '@/features/submitCode/submission/model/useProblemWebSocketStore';
-import Cookies from 'js-cookie';
 
 /**코드 제출시 필요한 세션키, initcaseIds 를 리스폰스로 받음 */
 
-export const useGetSubmitPrepareData = (problemId: ProblemId) => {
-  const accessToken = Cookies.get('accessToken');
+export const useGetSubmitPrepareData = (problemId: ProblemId, hasAccessToken: boolean) => {
   const { setPrepareData } = useProblemWebSocketStoreActions();
 
   const path = getProblemIdPath(problemId, 'submit-prepare');
@@ -31,6 +29,6 @@ export const useGetSubmitPrepareData = (problemId: ProblemId) => {
         return { sessionKey: null, testcaseIds: null };
       }
     },
-    enabled: !!accessToken,
+    enabled: hasAccessToken,
   });
 };

src/entities/submitCode/submission/model/query/submitCode.query.ts

@@ -8,19 +8,47 @@ import {
   SOURCECODE,
 } from '@/shared';
 import { Select } from '@/shared/ui/select/Select';
+import { useEffect } from 'react';
+import { useAutoSave } from '@/shared/util/saveLocalStorage';
+import { ISourceCode } from '@/entities/submitCode';
 
 interface ICodeEditorProps {
   onChangeSourceCodeData: (key: 'sourceCode' | 'languageId', value: number | string) => void;
-  languageId: number;
+  sourceCodeData: ISourceCode;
+  problemId: string;
 }
-export default function CodeEditor({ onChangeSourceCodeData, languageId }: ICodeEditorProps) {
-  const handleChangeLanguage = (value: string) => {
-    const languageId = Number(value); //select option required only string type value ㅠ
+export default function CodeEditor({
+  onChangeSourceCodeData,
+  sourceCodeData,
+  problemId,
+}: ICodeEditorProps) {
+  const { languageId } = sourceCodeData;
+
+  const debouncedSave = useAutoSave(2000);
 
+  const handleChangeLanguage = (value: string) => {
+    const languageId = Number(value);
+    debouncedSave(`sourceCodeData-${problemId}`, {
+      sourceCode: SOURCECODE[languageId],
+      languageId: languageId,
+    });
     onChangeSourceCodeData('languageId', languageId);
     onChangeSourceCodeData('sourceCode', SOURCECODE[languageId]);
   };
 
+  const handleChangeCode = (value: string) => {
+    onChangeSourceCodeData('sourceCode', value);
+  };
+
+  useEffect(() => {
+    if (sourceCodeData.sourceCode !== SOURCECODE[languageId]) {
+      debouncedSave(`sourceCodeData-${problemId}`, {
+        sourceCode: sourceCodeData.sourceCode,
+        languageId: languageId,
+      });
+    }
+  }, [sourceCodeData.sourceCode]);
+
   return (
     <section className="flex-1 flex flex-col h-full gap-4">
       <Select
@@ -29,11 +57,12 @@ export default function CodeEditor({ onChangeSourceCodeData, languageId }: ICode
         option={LANGUAGE_SELECTOR_OPTIONS}
         setValue={(value) => handleChangeLanguage(value)}
       />
+
       <CodeMirror
         basicSetup={CodeMirrorBasicSetup}
-        value={SOURCECODE[languageId]}
+        value={sourceCodeData.sourceCode}
         theme={'dark'}
-        onChange={(value) => onChangeSourceCodeData('sourceCode', value)}
+        onChange={(value) => handleChangeCode(value)}
         extensions={[CODEMIRROR_EXTENSIONS[languageId]]}
         aria-autocomplete="none"
         autoCapitalize="off"

src/features/submitCode/submission/ui/CodeEditor.tsx

@@ -5,7 +5,7 @@ import TerminalOutput from './TerminalOutput';
 import TerminalPanel from './TerminalPanel';
 import { ISourceCode } from '@/entities/submitCode';
 import { useUserStore } from '@/entities/user/model/store';
-import { fetchSourceCodeData, INITIAL_SOURCE_CODE_DATA } from '@/shared';
+import { fetchSourceCodeData, INITIAL_SOURCE_CODE_DATA, SOURCECODE } from '@/shared';
 
 interface IProblemWorksSectionProps {
   problemId: string;
@@ -23,16 +23,34 @@ export default function ProblemWorksSection({ problemId }: IProblemWorksSectionP
 
   useEffect(() => {
     if (!user) return;
+    const storedData = localStorage.getItem(`sourceCodeData-${problemId}`);
 
     const fetchedSourceCodeData = fetchSourceCodeData(user?.language?.id as number);
+    if (
+      storedData &&
+      JSON.parse(storedData).sourceCode !== SOURCECODE[JSON.parse(storedData).languageId]
+    )
+      return;
     setSourceCodeData(fetchedSourceCodeData);
   }, [user?.language, user]);
 
+  useEffect(() => {
+    const storedData = localStorage.getItem(`sourceCodeData-${problemId}`);
+
+    setSourceCodeData(
+      storedData ? (JSON.parse(storedData) as ISourceCode) : INITIAL_SOURCE_CODE_DATA
+    );
+    if (!storedData) {
+      localStorage.setItem(`sourceCodeData-${problemId}`, JSON.stringify(sourceCodeData));
+    }
+  }, [problemId]);
+
   return (
     <section className="flex flex-col gap-5 h-full">
       <CodeEditor
+        problemId={problemId}
+        sourceCodeData={sourceCodeData}
         onChangeSourceCodeData={handleChangeSourceCodeData}
-        languageId={sourceCodeData.languageId}
       />
       <div className="flex flex-1 flex-col bg-secondary-background rounded-[10px] shadow-lg ">
         <TerminalPanel

src/features/submitCode/submission/ui/ProblemWorksSection.tsx

@@ -29,7 +29,7 @@ export default function TerminalPanel({
   const searchParams = useSearchParams();
   const accessToken = Cookies.get('accessToken');
 
-  useGetSubmitPrepareData(problemId);
+  useGetSubmitPrepareData(problemId, !!accessToken);
   const { submitPrepareData } = useProblemWebSocketStore();
 
   const authGuardTrigger = () => {

src/features/submitCode/submission/ui/TerminalPanel.tsx

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import debounce from 'lodash.debounce';
+
+export type AutoSaveStatus = 'idle' | 'saving' | 'saved' | 'error';
+type SetStatusType = (status: AutoSaveStatus) => void;
+
+/**@param delay- debounce 딜레이 */
+/**로컬스토리지 자동 저장 훅 */
+export function useAutoSave(delay = 2000) {
+  const debouncedSave = useMemo(
+    () =>
+      debounce((key: string, value: unknown, setStatus?: SetStatusType) => {
+        try {
+          setStatus?.('saving');
+          const serializedValue = JSON.stringify(value);
+          localStorage.setItem(key, serializedValue);
+          setStatus?.('saved');
+        } catch (err) {
+          setStatus?.('error');
+        }
+      }, delay),
+    [delay]
+  );
+
+  return debouncedSave;
+}