+ !
+
+ 세션이 만료되었습니다
++ 보안을 위해 현재 로그인 세션을 사용할 수 없습니다. 새로고침 후 다시 로그인해 주세요. +
+ +
+ setChatThreadOpenRequest({ threadId, requestId: Date.now() })}
+ />
+
+
+
+ 
+
+
+ Autonomy Studio
+
+
+ );
+}
diff --git a/src/components/ConfirmDialog.tsx b/src/components/ConfirmDialog.tsx
new file mode 100644
index 0000000..96cfeec
--- /dev/null
+++ b/src/components/ConfirmDialog.tsx
@@ -0,0 +1,73 @@
+import { createPortal } from 'react-dom';
+import { Loader2, type LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+type ConfirmDialogProps = {
+ open: boolean;
+ title: string;
+ message: string;
+ detail?: ReactNode;
+ confirmLabel?: string;
+ cancelLabel?: string;
+ loading?: boolean;
+ danger?: boolean;
+ icon?: LucideIcon;
+ onCancel: () => void;
+ onConfirm: () => void;
+};
+
+export function ConfirmDialog({
+ open,
+ title,
+ message,
+ detail,
+ confirmLabel = '확인',
+ cancelLabel = '취소',
+ loading = false,
+ danger = false,
+ icon: Icon,
+ onCancel,
+ onConfirm,
+}: ConfirmDialogProps) {
+ if (!open) return null;
+
+ const confirmClass = danger
+ ? 'bg-[#e11d48] text-white hover:bg-[#be123c]'
+ : 'bg-[#2563eb] text-white hover:bg-[#1d4ed8]';
+
+ return createPortal(
+
+
+
+
+
+
,
+ document.body,
+ );
+}
diff --git a/src/components/InstructorChatPanel.tsx b/src/components/InstructorChatPanel.tsx
new file mode 100644
index 0000000..cdd20a4
--- /dev/null
+++ b/src/components/InstructorChatPanel.tsx
@@ -0,0 +1,468 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { ArrowLeft, ChevronRight, Loader2, MessageCircle, Send, UserRound, X } from 'lucide-react';
+import { io } from 'socket.io-client';
+import type { Socket } from 'socket.io-client';
+import {
+ CHAT_SOCKET_BASE_URL,
+ createInstructorChatMessage,
+ getInstructorChatThread,
+ listInstructorChatThreads,
+ type InstructorChatMessage,
+ type InstructorChatThread,
+} from '../lib/chat';
+import type { AuthSession } from '../types/auth';
+
+type InstructorChatPanelProps = {
+ session: AuthSession;
+ open: boolean;
+ initialThreadId?: string | null;
+ initialThreadRequestId?: number;
+ onClose: () => void;
+};
+
+type ChatNotificationPayload = {
+ type: 'chat.message.created';
+ threadId: string;
+ messageId: string;
+ senderType: 'STUDENT' | 'AI' | 'INSTRUCTOR' | 'SYSTEM';
+ preview: string;
+ createdAt: string;
+};
+
+export function InstructorChatPanel({ session, open, initialThreadId = null, initialThreadRequestId = 0, onClose }: InstructorChatPanelProps) {
+ const [threads, setThreads] = useState
+
+ {title}
+
+
+
+ {message}
+ {detail ?{detail}
: null}
+
+
+
+
+
+
+
+
+
+ {thread.studentName}
+ {thread.status === 'WAITING_INSTRUCTOR' ?+ {[thread.groupName, thread.week ? `${thread.week}주차` : null].filter(Boolean).join(' · ') || '강사 문의'} +
+
+ {loading ? (
+
+
+
+
+ 채팅방을 불러오는 중입니다.
+
+ ) : (
+
+ {messages.map((message) => (
+
+ )}
+
+
+
+