리액트를 활용한 이커머스 지원 챗봇 프론트엔드 개발의 모든 것

리액트로 이커머스 지원 챗봇 프론트엔드 구축하기

이제 백엔드와 챗봇의 로직이 준비되었으니, 사용자 친화적인 채팅 인터페이스를 React를 사용하여 만들어보겠습니다. 리액트는 오늘날 웹 개발에서 필수적인 라이브러리로, 이번 포스팅에서는 이 라이브러리를 사용해 간단하면서도 우아한 프론트엔드를 개발해보겠습니다. 이 챗봇 프론트엔드는 백엔드와 상호작용하여 사용자의 경험을 한층 더 높여줄 것입니다.

이 포스팅에서는 다음과 같은 내용들을 다룹니다.

프로젝트 설정

먼저 프로젝트 디렉토리를 설정합니다. 아직 프로젝트 설정이 이루어지지 않았다면 다음 명령어를 통해 간단히 설정할 수 있습니다:

cd frontend
npx create-react-app .
npm install axios styled-components

채팅 인터페이스 컴포넌트 생성

챗봇 인터페이스를 구성하여 사용자와 상호작용을 진행할 수 있습니다. ChatInterface.js 파일을 생성하고, 아래와 같은 컴포넌트를 구성합니다.

// frontend/src/components/ChatInterface.js
import React, { useState } from 'react';
import styled from 'styled-components';
import axios from 'axios';

const ChatContainer = styled.div`
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  height: 80vh;
  display: flex;
  flex-direction: column;
`;

const MessagesContainer = styled.div`
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
`;

const MessageBubble = styled.div`
  max-width: 70%;
  padding: 10px 15px;
  border-radius: 18px;
  margin-bottom: 10px;
  line-height: 1.4;
  word-wrap: break-word;
  ${props => props.isUser ? `
    background-color: #dcf8c6;
    margin-left: auto;
  ` : `
    background-color: #f0f0f0;
    margin-right: auto;
  `}
`;

const InputContainer = styled.div`
  display: flex;
  gap: 10px;
`;

const Input = styled.input`
  flex: 1;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
`;

const Button = styled.button`
  padding: 10px 20px;
  background-color: #4a69bd;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    background-color: #3c55a5;
  }
`;

const ChatInterface = () => {
  const [messages, setMessages] = useState([
    { text: "안녕하세요! 주문 관련 도움을 드릴까요?", isUser: false }
  ]);
  const [input, setInput] = useState('');

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

    const userMessage = { text: input, isUser: true };
    setMessages(prev => [...prev, userMessage]);

    try {
      const response = await axios.post('/api/chat', { question: input });
      const botMessage = { text: response.data.answer, isUser: false };
      setMessages(prev => [...prev, botMessage]);
    } catch (err) {
      console.error(err);
      setMessages(prev => [...prev, {
        text: "죄송합니다. 문제가 발생했습니다.",
        isUser: false
      }]);
    }

    setInput('');
  };

  return (
    <ChatContainer>
      <h2>이커머스 지원 챗봇</h2>
      <MessagesContainer>
        {messages.map((msg, idx) => (
          <MessageBubble key={idx} isUser={msg.isUser}>
            {msg.text}
          </MessageBubble>
        ))}
      </MessagesContainer>
      <InputContainer>
        <Input
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && handleSendMessage()}
          placeholder="주문에 대해 물어보세요..."
        />
        <Button onClick={handleSendMessage}>보내기</Button>
      </InputContainer>
    </ChatContainer>
  );
};

export default ChatInterface;

앱에서 컴포넌트 사용하기

프론트엔드 프로젝트의 App.js 파일에서 위에서 정의한 ChatInterface 컴포넌트를 불러와 사용합니다.

// frontend/src/App.js
import React from 'react';
import ChatInterface from './components/ChatInterface';
import './App.css';

function App() {
  return (
    <div className="App">
      <ChatInterface />
    </div>
  );
}

export default App;

다음 단계: API 경로 설정 및 실시간 기능 추가

다음 편에서는 백엔드와 프론트엔드를 연결하는 API 경로 설정에 대해 알아보고, 실시간 지원 기능을 추가하여 전체 플로우를 완성하는 방법을 소개할 예정입니다.

---

참고 URL:

• React 공식 문서
• Create React App 공식 문서