Release

src/entities/student/ui/AssignmentProgressCard.tsx

@@ -2,6 +2,7 @@ import React, {useState} from 'react';
 import type {StudentDetail} from '@/entities/student/model/types';
 import {ProgressIndicators} from '@/shared/ui/ProgressIndicators';
 import Correct from '@/assets/svg/correct.svg?react';
+import Incorrect from '@/assets/svg/incorrect.svg?react';
 import Unsubmitted from '@/assets/svg/unsubmitted.svg?react';
 import CodePreview from '@/features/student/ui/CodePreview';
 
@@ -16,14 +17,21 @@ export const AssignmentProgressCard = ({
     new Set()
   );
 
-  const getStatusIcon = (isCorrect: boolean) => {
+  const getStatusIcon = (isCorrect: boolean, submittedCodeId: number) => {
     if (isCorrect) {
       return (
         <div className='w-7.75 h-7.75 rounded-full border border-primary flex items-center justify-center'>
           <Correct className='w-3 h-3' />
         </div>
       );
     }
+    if (submittedCodeId) {
+      return (
+        <div className='w-7.75 h-7.75 rounded-full border border-badge-red flex items-center justify-center'>
+          <Incorrect className='w-3 h-3' />
+        </div>
+      );
+    }
     return (
       <div className='w-7.75 h-7.75 rounded-full border border-light-black flex items-center justify-center'>
         <Unsubmitted className='w-3 h-3' />
@@ -92,7 +100,10 @@ export const AssignmentProgressCard = ({
                   </td>
                   <td className='w-19 py-4.5 text-center items-center justify-center'>
                     <div className='flex items-center justify-center'>
-                      {getStatusIcon(assignment.isCorrect)}
+                      {getStatusIcon(
+                        assignment.isCorrect,
+                        assignment.submittedCodeId
+                      )}
                     </div>
                   </td>
                   <td className='w-25 py-4.5 text-center text-sm text-secondary-black'>

src/features/assignment/run-assignment/lib/useCodeExecution.ts

@@ -3,7 +3,7 @@ import {apiResponseSchema} from '@/shared/model';
 import {useEffect, useRef, useState} from 'react';
 import z from 'zod';
 
-export const useCodeExecution = () => {
+export const useCodeExecution = (assignmentId?: number) => {
   const {accessToken} = useUserStore();
   const socketRef = useRef<WebSocket | null>(null);
   const [output, setOutput] = useState<string | null>(null);
@@ -40,6 +40,10 @@ export const useCodeExecution = () => {
     };
   };
 
+  useEffect(() => {
+    setOutput(null);
+  }, [assignmentId]);
+
   // 언마운트 시 웹소켓 연결 종료
   useEffect(() => {
     return () => socketRef.current?.close();

src/pages/submit-assignment/AssignmentSubmitPage.tsx

@@ -38,7 +38,7 @@ const AssignmentSubmitPage = () => {
     enabled: !!codeId,
   });
 
-  const {runCode, output, isRunning} = useCodeExecution();
+  const {runCode, output, isRunning} = useCodeExecution(Number(assignmentId));
 
   const {onSubmit, result, isSubmitPending, isModalOpen, closeModal} =
     useAssignmentSubmission(courseDetails, Number(assignmentId));
@@ -67,7 +67,8 @@ const AssignmentSubmitPage = () => {
               {isEditorReady ? (
                 <CodeEditor
                   ref={editorRef}
-                  key={codeId ?? 'new'}
+                  id={`code-editor-${assignmentId}`}
+                  key={codeId ?? `new-${assignmentId}`}
                   onSubmit={onSubmit}
                   isSubmitPending={isSubmitPending}
                   assignmentCode={assignmentCode?.code}
@@ -94,8 +95,7 @@ const AssignmentSubmitPage = () => {
       {courseDetails.chatRoomId && (
         <button
           onClick={() => setIsChatOpen(true)}
-          className='fixed bottom-8 right-8 z-40 w-14 h-14 bg-primary text-white rounded-full shadow-2xl flex items-center justify-center hover:scale-110 transition-transform cursor-pointer group'
-        >
+          className='fixed bottom-8 right-8 z-40 w-14 h-14 bg-primary text-white rounded-full shadow-2xl flex items-center justify-center hover:scale-110 transition-transform cursor-pointer group'>
           <ChatIcon className='w-6 h-6' />
           <div className='absolute right-full mr-3 px-3 py-1 bg-primary text-white text-xs font-semibold rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg'>
             질문하기
@@ -108,7 +108,9 @@ const AssignmentSubmitPage = () => {
         <ChatQuestionModal
           chatRoomId={courseDetails.chatRoomId}
           assignmentTitle={assignment.title}
-          getCurrentCode={() => editorRef.current?.getValue() || assignmentCode?.code || ''}
+          getCurrentCode={() =>
+            editorRef.current?.getValue() || assignmentCode?.code || ''
+          }
           closeModal={() => setIsChatOpen(false)}
         />
       )}

src/pages/submit-assignment/ui/CodeEditor.tsx

@@ -45,14 +45,18 @@ interface CodeEditorProps {
   runCode: (code: string, input: string) => void;
   isRunning: boolean;
   assignmentCode?: string;
+  id: string;
 }
 
 export interface CodeEditorRef {
   getValue: () => string;
 }
 
 const CodeEditor = forwardRef<CodeEditorRef, CodeEditorProps>(
-  ({onSubmit, isSubmitPending, runCode, isRunning, assignmentCode}, ref) => {
+  (
+    {onSubmit, isSubmitPending, runCode, isRunning, assignmentCode, id},
+    ref
+  ) => {
     const editorRef = useRef<EditorInstance | null>(null);
 
     useImperativeHandle(ref, () => ({
@@ -116,6 +120,7 @@ const CodeEditor = forwardRef<CodeEditorRef, CodeEditorProps>(
         </div>
 
         <Editor
+          path={id}
           theme='OneDarkPro'
           defaultLanguage='python'
           defaultValue={assignmentCode}