[FEATURE] 채팅 주고받기 UI 및 파일 전송 버튼

src/components/chat/FileSendButton.tsx

@@ -0,0 +1,114 @@
+import axios from 'axios';
+import { useRef, useState } from 'react';
+
+interface UploadResponse {
+  filename: string;
+  url: string;
+}
+
+const FileSendButton = () => {
+  const [uploading, setUploading] = useState(false);
+  const [uploadStatus, setUploadStatus] = useState<string | null>(null);
+  const [uploadedFile, setUploadedFile] = useState<UploadResponse | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    if (!file.name.toLowerCase().endsWith('.csv')) {
+      setUploadStatus('CSV 파일만 업로드 가능합니다.');
+      return;
+    }
+
+    setUploading(true);
+    setUploadStatus(null);
+    setUploadedFile(null);
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const uploadUrl = '/chat/upload';
+      if (!uploadUrl) {
+        throw new Error('업로드 URL이 설정되지 않았습니다.');
+      }
+
+      console.log('Uploading file:', file.name, 'to:', uploadUrl);
+
+      const response = await axios.post<UploadResponse>(uploadUrl, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        withCredentials: false,
+      });
+
+      console.log('Upload success:', response.data);
+      setUploadedFile(response.data);
+      setUploadStatus(`업로드 성공! (${response.data.filename})`);
+
+      // 파일 입력 초기화
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    } catch (error) {
+      console.error('Upload error:', error);
+
+      if (axios.isAxiosError(error)) {
+        const message =
+          error.response?.data?.message || error.response?.statusText || error.message;
+        const status = error.response?.status || '';
+        setUploadStatus(`업로드 실패${status ? ` (${status})` : ''}: ${message}`);
+      } else {
+        setUploadStatus(error instanceof Error ? error.message : '업로드 실패');
+      }
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleButtonClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".csv"
+        onChange={handleFileSelect}
+        className="hidden"
+        disabled={uploading}
+      />
+      <button
+        onClick={handleButtonClick}
+        disabled={uploading}
+        className="rounded-md bg-blue-500 p-2 text-white transition-colors hover:bg-blue-600 disabled:cursor-not-allowed disabled:bg-gray-400"
+      >
+        {uploading ? '업로드 중...' : '📎 CSV 파일 업로드'}
+      </button>
+      {uploadStatus && (
+        <div className="flex flex-col gap-1">
+          <p
+            className={`text-sm ${uploadStatus.includes('성공') ? 'text-green-600' : 'text-red-600'}`}
+          >
+            {uploadStatus}
+          </p>
+          {uploadedFile && (
+            <a
+              href={uploadedFile.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-blue-500 underline hover:text-blue-700"
+            >
+              파일 보기
+            </a>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FileSendButton;

src/pages/chat/ChatPageTest.tsx

@@ -1,11 +1,20 @@
 import { useEffect, useRef, useState } from 'react';
+import Navigation from '../../components/Navigation';
+import FileSendButton from '../../components/chat/FileSendButton';
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+}
 
 export default function ChatPageTest() {
-  const [output, setOutput] = useState('');
+  const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState('');
   const [sessionId, setSessionId] = useState<string | null>(null);
   const socketRef = useRef<WebSocket | null>(null);
-  const outputRef = useRef<HTMLTextAreaElement>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
 
   const mountedRef = useRef(false);
 
@@ -18,11 +27,9 @@
 
     socket.onopen = () => {
       console.log('Connected');
-      setOutput((prev) => prev + 'Connected\n');
     };
 
     socket.onmessage = (event) => {
-      // bedrock stream done 메시지는 콘솔에만 표시
       if (event.data.includes('[bedrock stream done]')) {
         console.log('Stream done:', event.data);
         return;
@@ -32,101 +39,150 @@
         const json = JSON.parse(event.data);
         if (json.type === 'session') {
           setSessionId(json.session_id);
-          setOutput((prev) => prev + `[세션 ID: ${json.session_id}]\n`);
+          console.log(`${sessionId}`);
           return;
         }
       } catch {
         /* not JSON */
       }
-      setOutput((prev) => prev + event.data + '\n');
+
+      // 어시스턴트 메시지 처리
+      setMessages((prev) => {
+        const lastMessage = prev[prev.length - 1];
+
+        // 마지막 메시지가 어시스턴트이고 내용이 비어있으면 업데이트
+        if (lastMessage && lastMessage.role === 'assistant' && lastMessage.content === '') {
+          const updated = [...prev];
+          updated[updated.length - 1] = {
+            ...lastMessage,
+            content: lastMessage.content + event.data,
+          };
+          return updated;
+        }
+
+        // 마지막 메시지가 어시스턴트이면 이어붙이기
+        if (lastMessage && lastMessage.role === 'assistant') {
+          const updated = [...prev];
+          updated[updated.length - 1] = {
+            ...lastMessage,
+            content: lastMessage.content + event.data,
+          };
+          return updated;
+        }
+
+        // 새로운 어시스턴트 메시지 생성
+        return [
+          ...prev,
+          {
+            id: Date.now().toString(),
+            role: 'assistant',
+            content: event.data,
+          },
+        ];
+      });
     };
 
     socket.onerror = (error) => {
       console.error('WebSocket Error:', error);
-      setOutput((prev) => prev + 'Error occurred\n');
     };
 
     socket.onclose = (event) => {
       console.log('Disconnected:', event.code, event.reason);
-      setOutput((prev) => prev + `Disconnected: ${event.code}\n`);
     };
 
     return () => {
       socket.close();
     };
   }, []);
 
   // 자동 스크롤
   useEffect(() => {
-    if (outputRef.current) {
-      outputRef.current.scrollTop = outputRef.current.scrollHeight;
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // 입력창 자동 높이 조절
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.style.height = 'auto';
+      inputRef.current.style.height = inputRef.current.scrollHeight + 'px';
     }
-  }, [output]);
+  }, [input]);
 
   const sendMessage = () => {
     const text = input.trim();
     if (!text || !socketRef.current) return;
 
     if (socketRef.current.readyState === WebSocket.OPEN) {
+      // 사용자 메시지 추가
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: Date.now().toString(),
+          role: 'user',
+          content: text,
+        },
+      ]);
+
+      // WebSocket으로 전송
       socketRef.current.send(JSON.stringify({ role: 'user', content: text }));
       setInput('');
     } else {
-      setOutput((prev) => prev + 'WebSocket이 연결되지 않음\n');
+      console.error('WebSocket이 연결되지 않음');
     }
   };
 
-  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
       sendMessage();
     }
   };
 
   return (
-    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
-      <h3>Chat Test</h3>
-      {sessionId && <p style={{ color: '#666' }}>세션 ID: {sessionId}</p>}
-      <textarea
-        ref={outputRef}
-        value={output}
-        readOnly
-        rows={15}
-        style={{
-          width: '100%',
-          marginBottom: '10px',
-          padding: '10px',
-          border: '1px solid #ccc',
-          borderRadius: '4px',
-          fontFamily: 'monospace',
-        }}
-      />
-      <br />
-      <div style={{ display: 'flex', gap: '10px' }}>
-        <input
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          onKeyPress={handleKeyPress}
-          placeholder="메시지를 입력하세요"
-          style={{
-            flex: 1,
-            padding: '8px',
-            border: '1px solid #ccc',
-            borderRadius: '4px',
-          }}
-        />
-        <button
-          onClick={sendMessage}
-          style={{
-            padding: '8px 20px',
-            background: '#007bff',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-          }}
-        >
-          보내기
-        </button>
+    <>
+      <Navigation />
+      <div className="flex h-full flex-col p-5">
+        {/* 메시지 목록 */}
+        <div className="mb-4 flex-1 overflow-y-auto">
+          {messages.map((message) => (
+            <div
+              key={message.id}
+              className={`mb-4 flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
+            >
+              <div
+                className={`max-w-[70%] rounded-2xl px-4 py-3 ${
+                  message.role === 'user' ? 'bg-[#0D2D84] text-white' : 'bg-gray-200 text-gray-800'
+                }`}
+              >
+                <p className="break-words whitespace-pre-wrap">{message.content}</p>
+              </div>
+            </div>
+          ))}
+          <div ref={messagesEndRef} />
+        </div>
+
+        {/* 파일 업로드 버튼 */}
+        <FileSendButton />
+
+        {/* 입력창 */}
+        <div className="mt-2 flex gap-2">
+          <textarea
+            ref={inputRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyPress}
+            placeholder="메세지를 입력하세요"
+            rows={1}
+            className="max-h-20 flex-1 resize-none overflow-hidden rounded-xl border px-3 py-4 text-xl outline-none focus:border-blue-500"
+          />
+          <button
+            onClick={sendMessage}
+            className="rounded-xl bg-[#0D2D84] px-6 text-lg text-white hover:bg-[#0a2366]"
+          >
+            ▶
+          </button>
+        </div>
       </div>
-    </div>
+    </>
   );
 }

vite.config.ts

@@ -5,4 +5,13 @@ import tailwindcss from '@tailwindcss/vite';
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react(), tailwindcss()],
+  server: {
+    proxy: {
+      '/chat': {
+        target: 'https://backendbase.site',
+        changeOrigin: true,
+        secure: false,
+      },
+    },
+  },
 });