AI 기업경영 컨설턴트 챗봇 만들기! (with 클로드,커서) - 1주차 사례

import React, { useState } from 'react';
import { Send, Download, Mail } from 'lucide-react';

const RiskManagementChatbot = () => {
  const [messages, setMessages] = useState([
    {
      type: 'bot',
      content: '안녕하세요! 기업 리스크 관리 상담 챗봇입니다. 어떤 도움이 필요하신가요?',
      timestamp: new Date()
    }
  ]);
  const [input, setInput] = useState('');

  // 메시지 카테고리
  const categories = [
    { id: 'legal', name: '법률 리스크' },
    { id: 'accounting', name: '회계/세무' },
    { id: 'insurance', name: '보험' },
    { id: 'finance', name: '금융/투자' },
    { id: 'compliance', name: '규제/컴플라이언스' }
  ];

  const handleSend = () => {
    if (!input.trim()) return;

    // 사용자 메시지 추가
    setMessages(prev => [...prev, {
      type: 'user',
      content: input,
      timestamp: new Date()
    }]);

    // 챗봇 응답 시뮬레이션
    setTimeout(() => {
      setMessages(prev => [...prev, {
        type: 'bot',
        content: '죄송합니다. 현재 데모 버전이라 실제 응답은 제공되지 않습니다.',
        timestamp: new Date()
      }]);
    }, 1000);

    setInput('');
  };

  return (
    <div className="w-full max-w-4xl mx-auto p-4 bg-white rounded-lg shadow-lg">
      {/* 헤더 */}
      <div className="bg-blue-600 text-white p-4 rounded-t-lg">
        <h1 className="text-xl font-bold">기업 리스크 관리 상담 챗봇</h1>
        <p className="text-sm">24/7 상담 가능</p>
      </div>

      {/* 카테고리 선택 */}
      <div className="flex gap-2 p-4 overflow-x-auto">
        {categories.map(category => (
          <button
            key={category.id}
            className="px-4 py-2 bg-gray-100 rounded-full text-sm whitespace-nowrap hover:bg-gray-200"
          >
            {category.name}
          </button>
        ))}
      </div>

      {/* 채팅 영역 */}
      <div className="h-96 overflow-y-auto p-4 bg-gray-50 rounded-lg">
        {messages.map((message, index) => (
          <div
            key={index}
            className={`mb-4 flex ${message.type === 'user' ? 'justify-end' : 'justify-start'}`}
          >
            <div
              className={`max-w-[70%] p-3 rounded-lg ${
                message.type === 'user' ? 'bg-blue-600 text-white' : 'bg-white shadow'
              }`}
            >
              <p className="text-sm">{message.content}</p>
              <p className="text-xs mt-1 text-gray-400">
                {message.timestamp.toLocaleTimeString()}
              </p>
            </div>
          </div>
        ))}
      </div>

      {/* 기능 버튼 */}
      <div className="flex gap-2 mt-4 mb-2">
        <button className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-lg text-sm hover:bg-gray-200">
          <Download size={16} />
          자료 다운로드
        </button>
        <button className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-lg text-sm hover:bg-gray-200">
          <Mail size={16} />
          이메일 발송
        </button>
      </div>

      {/* 입력 영역 */}
      <div className="flex gap-2 mt-4">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && handleSend()}
          placeholder="질문을 입력하세요..."
          className="flex-1 p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button
          onClick={handleSend}
          className="p-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
        >
          <Send size={20} />
        </button>
      </div>
    </div>
  );
};

export default RiskManagementChatbot;