2025-snowCode · JiiminHa · Mar 26, 2026 · Mar 26, 2026 · Mar 26, 2026 · Mar 26, 2026
diff --git a/index.html b/index.html
@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>snowcode</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "@stomp/stompjs": "^7.3.0",
     "@tailwindcss/vite": "^4.1.11",
     "@tanstack/react-query": "^5.90.20",
+    "@tanstack/react-query-devtools": "^5.95.2",
     "axios": "^1.13.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -12,6 +12,7 @@ import StudentManagementPage from '@/pages/admin/student/StudentManagementPage';
 import StudentProfilePage from '@/pages/admin/student/StudentProfilePage';
 import KakaoCallbackPage from '@/pages/common/KakaoCallbackPage';
 import PrivateRoute from '@/widgets/private-route/ui/PrivateRoute';
+import CourseOwnershipGuard from '@/widgets/course-ownership-guard/ui/CourseOwnershipGuard';
 import {useSyncUserRole} from '@/features/auth/sync-user-role/model/useSyncUserRole';
 import AssignmentManagePage from '@/pages/manage-assignment/AssignmentManagePage';
 import ChatPage from '@/pages/chat/ChatPage';
@@ -36,7 +37,9 @@ const AppRoutes = () => {
         <Route element={<PrivateRoute allowedRoles={['student']} />}>
           <Route path='student'>
             <Route index element={<Dashboard />} />
-            <Route path='courses/:id' element={<CourseOverviewPage />} />
+            <Route path='courses/:courseId' element={<CourseOwnershipGuard />}>
+              <Route index element={<CourseOverviewPage />} />
+            </Route>
             <Route path='chat' element={<ChatPage />} />
           </Route>
         </Route>
@@ -58,20 +61,21 @@ const AppRoutes = () => {
               path='assignments/select'
               element={<AssignmentSelectPage />}
             />
-            <Route path='courses/:id' element={<CourseOverviewPage />} />
             <Route path='courses/create' element={<CourseCreatePage />} />
-            <Route path='courses/:id/edit' element={<CourseEditPage />} />
-            <Route
-              path='courses/:courseId/students'
-              element={<StudentManagementPage />}
-            />
-            <Route
-              path='courses/:courseId/students/:studentId'
-              element={<StudentProfilePage />}
-            />
-            <Route path='units/:courseId' element={<UnitLayout />}>
-              <Route path='create' element={<UnitCreatePage />} />
-              <Route path='edit/:unitId' element={<UnitEditPage />} />
+            <Route path='courses/:courseId' element={<CourseOwnershipGuard />}>
+              <Route index element={<CourseOverviewPage />} />
+              <Route path='edit' element={<CourseEditPage />} />
+              <Route path='students' element={<StudentManagementPage />} />
+              <Route
+                path='students/:studentId'
+                element={<StudentProfilePage />}
+              />
+            </Route>
+            <Route path='units/:courseId' element={<CourseOwnershipGuard />}>
+              <Route element={<UnitLayout />}>
+                <Route path='create' element={<UnitCreatePage />} />
+                <Route path='edit/:unitId' element={<UnitEditPage />} />
+              </Route>
             </Route>
             <Route path='chat' element={<ChatPage />} />
           </Route>
@@ -81,16 +85,20 @@ const AppRoutes = () => {
       {/* 과제 제출 페이지 */}
       <Route element={<AssignmentSubmitLayout />}>
         <Route element={<PrivateRoute allowedRoles={['admin']} />}>
-          <Route
-            path='admin/courses/:courseId/assignments/:assignmentId'
-            element={<AssignmentSubmitPage />}
-          />
+          <Route path='admin/courses/:courseId' element={<CourseOwnershipGuard />}>
+            <Route
+              path='assignments/:assignmentId'
+              element={<AssignmentSubmitPage />}
+            />
+          </Route>
         </Route>
         <Route element={<PrivateRoute allowedRoles={['student']} />}>
-          <Route
-            path='student/courses/:courseId/assignments/:assignmentId'
-            element={<AssignmentSubmitPage />}
-          />
+          <Route path='student/courses/:courseId' element={<CourseOwnershipGuard />}>
+            <Route
+              path='assignments/:assignmentId'
+              element={<AssignmentSubmitPage />}
+            />
+          </Route>
         </Route>
       </Route>
     </Routes>

diff --git a/src/entities/assignment/api/assignmentQueries.ts b/src/entities/assignment/api/assignmentQueries.ts
@@ -47,6 +47,5 @@ export const assignmentQueries = {
     queryOptions({
       queryKey: ['code', codeId],
       queryFn: () => getAssignmentCode(codeId),
-      select: (data) => data.code,
     }),
 };
diff --git a/src/entities/chat/model/useChatSocket.ts b/src/entities/chat/model/useChatSocket.ts
@@ -5,9 +5,14 @@
 import type {TChatMessage, TSendMessage} from '@/entities/chat/model/schemas';
 import {useUserStore} from '@/entities/auth/model/useUserStore';
 
-export const useChatSocket = (chatRoomId: number | null) => {
+export const useChatSocket = (
+  chatRoomId: number | null,
+  myMemberId: number
+) => {
   const clientRef = useRef<Client | null>(null);
   const [messages, setMessages] = useState<TChatMessage[]>([]);
+  // 최근 내가 이 탭에서 보낸 메시지들을 추적하여 중복 방지
+  const sentMessagesRef = useRef<Map<string, number>>(new Map());
 
   useEffect(() => {
     if (!chatRoomId) return;
@@ -23,8 +28,18 @@
           console.log('Received raw message:', rawData);
           const parsed = socketMessageResponseSchema.parse(rawData);
 
-          // 현재 보고 있는 채팅방의 메시지인 경우에만 상태 업데이트
           if (parsed.chatRoomId === chatRoomId) {
+            // 이 탭에서 방금 보낸 메시지인지 확인 (중복 방지)
+            if (parsed.senderId === myMemberId) {
+              const msgKey = parsed.content;
+              const count = sentMessagesRef.current.get(msgKey) ?? 0;
+              if (count > 0) {
+                if (count === 1) sentMessagesRef.current.delete(msgKey);
+                else sentMessagesRef.current.set(msgKey, count - 1);
+                return;
+              }
+            }
+
             const message: TChatMessage = {
               messageId: Date.now(),
               memberId: parsed.senderId,
@@ -52,23 +67,54 @@
       client.deactivate();
       clientRef.current = null;
       setMessages([]);
+      sentMessagesRef.current.clear();
     };
-  }, [chatRoomId]);
+  }, [chatRoomId, myMemberId]);
 
   const sendMessage = (payload: TSendMessage): boolean => {
     const client = clientRef.current;
-    if (!client?.connected) {
-      console.warn('WebSocket 연결이 끊겨 있습니다.');
+
+    if (!client?.connected || !client?.active) {
+      console.warn('WebSocket이 활성화되어 있지 않거나 끊겨 있습니다.', {
+        connected: client?.connected,
+        active: client?.active,
+      });
+      return false;
+    }
+
+    try {
+      const token = useUserStore.getState().accessToken;
+
+      client.publish({
+        destination: '/pub/chat',
+        headers: {Authorization: token ? `Bearer ${token}` : ''},
+        body: JSON.stringify(payload),
+      });
+
+      // 낙관적 업데이트 (Optimistic UI)
+      const now = new Date();
+      const isoString = now.toISOString();
+      const newMessage: TChatMessage = {
+        messageId: Date.now(), // 임시 ID
+        memberId: myMemberId,
+        messageType: payload.type,
+        content: payload.content,
+        sendAt: isoString,
+      };
+
+      const msgKey = payload.content;
+      sentMessagesRef.current.set(
+        msgKey,
+        (sentMessagesRef.current.get(msgKey) ?? 0) + 1
+      );
+
+      setMessages((prev) => [...prev, newMessage]);
+
+      return true;
+    } catch (error) {
+      console.error('메세지 전송 중 에러 발생:', error);
       return false;
     }
-    console.log('메세지 전송중:', payload);
-    const token = useUserStore.getState().accessToken;
-    client.publish({
-      destination: '/pub/chat',
-      headers: {Authorization: token ? `Bearer ${token}` : ''},
-      body: JSON.stringify(payload),
-    });
-    return true;
   };
 
   return {messages, sendMessage};

diff --git a/src/entities/course/model/schemas.ts b/src/entities/course/model/schemas.ts
@@ -36,6 +36,7 @@ export const courseOverviewSchema = courseBaseSchema.extend({
   studentCount: z.number().optional(),
   unitCount: z.number(),
   units: z.array(unitSchema),
+  chatRoomId: z.number().nullable().optional(),
 });
 
 /** 대시보드 강의 카드용 스키마 */

diff --git a/src/entities/student/ui/AssignmentProgressCard.tsx b/src/entities/student/ui/AssignmentProgressCard.tsx
@@ -1,7 +1,9 @@
+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 Unsubmitted from '@/assets/svg/unsubmitted.svg?react';
+import CodePreview from '@/features/student/ui/CodePreview';
 
 interface AssignmentProgressCardProps {
   student: StudentDetail;
@@ -10,21 +12,37 @@ interface AssignmentProgressCardProps {
 export const AssignmentProgressCard = ({
   student,
 }: AssignmentProgressCardProps) => {
+  const [expandedCodeIds, setExpandedCodeIds] = useState<Set<number>>(
+    new Set()
+  );
+
   const getStatusIcon = (isCorrect: boolean) => {
     if (isCorrect) {
       return (
-        <div className='w-[31px] h-[31px] rounded-full border border-primary flex items-center justify-center'>
+        <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>
       );
     }
     return (
-      <div className='w-[31px] h-[31px] rounded-full border border-light-black flex items-center justify-center'>
+      <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' />
       </div>
     );
   };
 
+  const toggleExpandCode = (codeId: number) => {
+    setExpandedCodeIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(codeId)) {
+        next.delete(codeId);
+      } else {
+        next.add(codeId);
+      }
+      return next;
+    });
+  };
+
   return (
     <div className='p-8 flex flex-col gap-6'>
       <div className='flex gap-10'>
@@ -40,11 +58,11 @@ export const AssignmentProgressCard = ({
       </div>
 
       {student.units.map((unit, unitIndex) => (
-        <table key={unit.id} className='w-full'>
+        <table key={unit.id} className='w-full border-collapse'>
           <thead>
             <tr className='text-sm text-secondary-black bg-gray'>
               <th className='text-left font-medium py-4.5 pl-4' colSpan={3}>
-                <div className='flex items-center gap-[13px]'>
+                <div className='flex items-center gap-3.25'>
                   <span className='px-3.5 py-1.5 rounded-full bg-secondary-black text-white text-md font-medium'>
                     {unitIndex + 1}
                   </span>
@@ -62,31 +80,45 @@ export const AssignmentProgressCard = ({
           </thead>
           <tbody>
             {unit.assignments.map((assignment, index) => (
-              <tr
-                key={assignment.id}
-                className='border-b border-purple-stroke last:border-b-0'>
-                <td className='px-4 w-8 py-4.5 text-center text-[16px] text-light-black font-medium'>
-                  <div className='rounded-full border border-purple-stroke w-[31px] h-[31px] flex items-center justify-center'>
-                    {index + 1}
-                  </div>
-                </td>
-                <td className='pl-4.5 py-4.5 text-base text-secondary-black'>
-                  {assignment.title}
-                </td>
-                <td className='w-19 py-4.5 text-center items-center justify-center'>
-                  <div className='flex items-center justify-center'>
-                    {getStatusIcon(assignment.isCorrect)}
-                  </div>
-                </td>
-                <td className='w-25 py-4.5 text-center text-sm text-secondary-black'>
-                  {assignment.score}/{assignment.totalScore}
-                </td>
-                <td className='py-4.5 text-center'>
-                  <button className='px-4 py-1.5 text-sm text-primary cursor-pointer'>
-                    보기
-                  </button>
-                </td>
-              </tr>
+              <React.Fragment key={assignment.id}>
+                <tr className='border-b border-purple-stroke last:border-b-0'>
+                  <td className='px-4 w-8 py-4.5 text-center text-[16px] text-light-black font-medium'>
+                    <div className='rounded-full border border-purple-stroke w-7.75 h-7.75 flex items-center justify-center'>
+                      {index + 1}
+                    </div>
+                  </td>
+                  <td className='pl-4.5 py-4.5 text-base text-secondary-black'>
+                    {assignment.title}
+                  </td>
+                  <td className='w-19 py-4.5 text-center items-center justify-center'>
+                    <div className='flex items-center justify-center'>
+                      {getStatusIcon(assignment.isCorrect)}
+                    </div>
+                  </td>
+                  <td className='w-25 py-4.5 text-center text-sm text-secondary-black'>
+                    {assignment.score}/{assignment.totalScore}
+                  </td>
+                  <td className='py-4.5 text-center'>
+                    <button
+                      className='px-4 py-1.5 text-sm text-primary cursor-pointer hover:underline disabled:opacity-30 disabled:cursor-not-allowed'
+                      disabled={!assignment.submittedCodeId}
+                      onClick={() =>
+                        toggleExpandCode(assignment.submittedCodeId)
+                      }>
+                      {expandedCodeIds.has(assignment.submittedCodeId)
+                        ? '닫기'
+                        : '보기'}
+                    </button>
+                  </td>
+                </tr>
+                {expandedCodeIds.has(assignment.submittedCodeId) && (
+                  <tr>
+                    <td colSpan={5} className='px-4 pb-4 bg-gray/10'>
+                      <CodePreview codeId={assignment.submittedCodeId} />
+                    </td>
+                  </tr>
+                )}
+              </React.Fragment>
             ))}
           </tbody>
         </table>