AI 챗봇 연동하기

Tip: Gemini CLI로 구현하기 — AI 챗봇 컴포넌트

• 프롬프트: gemini "src/components/Chatbot.jsx를 작성해줘. 화면 우하단에 고정된 플로팅 버튼을 클릭하면 채팅창이 열리는 컴포넌트야. useState로 열림/닫힘, 메시지 목록, 입력값, 로딩 상태를 관리하고, useRef로 새 메시지가 오면 자동 스크롤해줘. 메시지 전송 시 [백엔드 URL]/chat 엔드포인트에 fetch로 POST 요청을 보내줘. Tailwind CSS를 사용해줘."
  • 사용 가이드: [백엔드 URL]을 배포된 서버 주소로 바꾼다(예: https://my-api.onrender.com). 로컬 테스트 시에는 http://localhost:8000으로 바꾼다.

1. 챗봇 연동 개요

이번 편에서는 GOFLEX 프로젝트에 AI 챗봇을 연동한다. 플로팅 버튼과 채팅창이 하나의 Chatbot.jsx 컴포넌트에 들어 있고, App.jsx에서 바로 사용한다.

Info: 챗봇 백엔드 서버는 별도 프로젝트로 Python + FastAPI + HuggingFace로 구축하여 Render에 배포한 상태여야 한다.

2. 1단계 — import + 상태 변수

src/components/ 폴더 안에 Chatbot.jsx 파일을 새로 만들고 아래 코드를 입력한다. 이 파일 하나에 플로팅 버튼(화면 우하단에 떠 있는 동그란 버튼)과 채팅창이 모두 들어 있다.

import { useState, useRef, useEffect } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faComment, faXmark } from "@fortawesome/free-solid-svg-icons";
import { Button } from "./UI.jsx";

const BACKEND = "https://cbot-rfcl.onrender.com/chat";

export default function Chatbot() {
  const [open, setOpen] = useState(false);
  const [messages, setMessages] = useState([
    { role: "bot", text: "안녕하세요! 영화에 대해 무엇이든 물어보세요" },
  ]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const bottomRef = useRef(null);

const bottomRef = useRef(null);  // 참조 생성
// ...
<div ref={bottomRef} />          // DOM 요소에 연결
// ...
bottomRef.current                // 연결된 실제 DOM 요소

3. 2단계 — 자동 스크롤

같은 Chatbot.jsx 파일에서, const bottomRef = useRef(null) 줄 바로 아래에 이어서 작성한다. 채팅 앱을 쓸 때 새 메시지가 오면 자동으로 스크롤이 내려가는 것을 본 적이 있을 것이다. 그 기능을 만드는 코드이다.

  useEffect(() => {
    if (open) bottomRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages, open]);

새 메시지가 도착하면 채팅창이 자동으로 맨 아래로 스크롤되므로, 사용자가 수동으로 내릴 필요가 없다.

4. 3단계 — 메시지 전송 함수

같은 Chatbot.jsx 파일에서, useEffect 블록 바로 아래에 이어서 두 개의 함수를 작성한다. sendMessage는 메시지를 서버에 보내고 응답을 받는 함수이고, handleKeyDown은 Enter 키를 누르면 전송하는 함수이다.

① sendMessage

  async function sendMessage() {
    const text = input.trim();
    if (!text || loading) return;

    setMessages((prev) => [...prev, { role: "user", text }]);
    setInput("");
    setLoading(true);

    try {
      const res = await fetch(BACKEND, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ text }),
      });
      const data = await res.json();
      setMessages((prev) => [...prev, { role: "bot", text: data.reply }]);
    } catch {
      setMessages((prev) => [
        ...prev,
        { role: "bot", text: "서버 연결에 실패했습니다. 다시 시도해주세요." },
      ]);
    } finally {
      setLoading(false);
    }
  }

② handleKeyDown

  function handleKeyDown(e) {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  }

try {
  // 성공할 수도 있는 코드
} catch {
  // 실패했을 때 실행되는 코드
} finally {
  // 성공이든 실패든 반드시 실행되는 코드
}

5. 4단계 — JSX 렌더링

같은 Chatbot.jsx 파일에서, handleKeyDown 함수 바로 아래에 return문을 작성한다. 코드가 길기 때문에 세 부분으로 나누어 설명한다. 탭을 눌러 각 부분을 확인하면서 순서대로 이어 붙인다.

① 플로팅 버튼

  return (
    <>
      <Button
        variant="primary"
        onClick={() => setOpen((v) => !v)}
        className="fixed bottom-8 right-8 w-14 h-14 rounded-full text-2xl shadow-lg z-50 flex items-center justify-center"
        title="AI 챗봇"
      >
        {open ? <FontAwesomeIcon icon={faXmark} /> : <FontAwesomeIcon icon={faComment} />}
      </Button>

② 채팅창 헤더 + 메시지 목록

      {open && (
        <div className="fixed bottom-24 right-8 w-85 max-h-1/2 bg-gray-950 border border-gray-600 rounded-xl flex flex-col shadow-2xl z-40">
          <div className="py-3 px-4 bg-yellow-500 rounded-t-xl font-bold text-sm text-gray-700">Goflix AI 챗봇</div>

          <div className="flex-1 overflow-y-auto p-3 flex flex-col gap-2 min-h-50 max-h-85">
            {messages.map((m, i) => (
              <div
                key={i}
                className={`py-2 px-3 max-w-4/5 text-sm leading-snug whitespace-pre-wrap break-words text-gray-700
                  ${m.role === "user" ? "self-end bg-yellow-500 rounded-tl-xl rounded-tr-xl rounded-bl-xl" : "self-start bg-gray-100 rounded-tl-xl rounded-tr-xl rounded-br-xl"}`}
              >
                {m.text}
              </div>
            ))}
            {loading && <div className="self-start bg-gray-100 text-gray-400 rounded-tl-xl rounded-tr-xl rounded-br-xl py-2 px-3 text-sm">...</div>}
            <div ref={bottomRef} />
          </div>

③ 입력창

          <div className="flex border-t border-[#333] p-2 gap-2">
            <input
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder="메시지 입력..."
              disabled={loading}
              className="flex-1 bg-[#1e1e1e] border border-[#444] rounded-lg py-2 px-3 text-white caret-white text-sm outline-none placeholder:text-zinc-300"
            />
            <Button
              variant="primary"
              onClick={sendMessage}
              disabled={loading || !input.trim()}
              className="rounded-lg py-2 px-3 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
            >
              전송
            </Button>
          </div>
        </div>
      )}
    </>
  );
}

6. 5단계 — App.jsx에 연결

src/App.jsx를 수정한다. 두 곳을 변경한다.

6.1. import 추가

기존 import 영역에 한 줄을 추가한다.

import Chatbot from "./components/Chatbot.jsx";

Tip: Chatbot은 export default로 내보냈으므로 중괄호 \{ \} 없이 가져온다. 다른 컴포넌트(Header, Footer 등)는 export function(named export)이라서 중괄호가 필요하다.

6.2. return에 Chatbot 추가

<Footer /> 아래에 한 줄을 추가한다.

  return (
    <>
      <Header />
      <Outlet context={ctx} />
      <Footer />
      <Chatbot />
    </>
  );

7. 동작 확인

Info: 무료 호스팅(Render)은 첫 응답이 30초~1분 걸릴 수 있다. 서버가 슬립 상태에서 깨어나는 시간이다.

8. 모노레포 구조와 GitHub 올리기

8.1. 모노레포란?

이 프로젝트는 하나의 GitHub 저장소 안에 프론트엔드(frontend/)와 백엔드(backend/)가 함께 들어 있다. 이런 구조를 모노레포(Monorepo, 모노리포)라고 한다. 책 한 권에 소설과 삽화가 함께 들어 있는 것처럼, 하나의 저장소에서 두 프로젝트를 관리한다.

movie-2026/
├── frontend/          ← React 프론트엔드
│   ├── src/
│   ├── public/
│   ├── vite.config.js
│   ├── package.json
│   └── .env           ← TMDB API 키 (GitHub에 올리면 안 됨)
└── backend/           ← Python 챗봇 서버
    ├── main.py
    ├── requirements.txt
    └── .env           ← HuggingFace API 키 (GitHub에 올리면 안 됨)

8.2. .gitignore 설정

프로젝트 최상위 폴더(movie-2026/)에 .gitignore 파일을 만들고 아래 내용을 입력한다. 비밀 정보와 불필요한 파일이 GitHub에 올라가지 않도록 막는 역할이다.

frontend/.env
frontend/node_modules/
frontend/dist/
backend/.env
backend/.venv/
backend/__pycache__/

8.3. GitHub에 코드 올리기

1. https://github.com 에서 **New repository(뉴 리포지토리)**를 클릭하여 새 저장소를 만든다.
2. 프로젝트 최상위 폴더(movie-2026/)에서 터미널을 열고, 아래 명령어를 한 줄씩 실행한다.

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/내아이디/movie-2026.git
git push -u origin main

9. Render에 배포하기

Render(렌더)는 GitHub 저장소를 연결하면 코드를 자동으로 배포해 주는 무료 호스팅 서비스이다. 모노레포에서는 같은 저장소를 두 번 연결하되, 각각 다른 Root Directory(루트 디렉토리, 시작 폴더)를 지정한다.

9.1. 백엔드 배포 (Python 서버)

1. https://render.com 에 접속하여 GitHub 계정으로 로그인한다.
2. New → Web Service를 클릭한다.
3. GitHub 저장소(movie-2026)를 연결하고 아래와 같이 설정한다.

1. Environment(환경변수) 탭에서 아래 값을 추가한다.

1. Create Web Service를 클릭하면 배포가 시작된다.
2. 배포 완료 후 https://goflex-backend-xxxx.onrender.com 형태의 주소가 생성된다. 이 주소를 메모해 둔다.

Warning: Start Command를 반드시 uvicorn main:app --host 0.0.0.0 --port 10000으로 직접 입력해야 한다. Render는 Python 프로젝트를 감지하면 자동으로 gunicorn을 사용하려고 하는데, FastAPI는 uvicorn을 사용하므로 에러가 발생한다.

9.2. Chatbot.jsx의 BACKEND 주소 변경

배포된 백엔드 주소를 Chatbot.jsx에 반영한다. src/components/Chatbot.jsx 파일을 열고 5번 줄을 수정한다.

const BACKEND = "https://goflex-backend-xxxx.onrender.com/chat";

xxxx 부분을 9.1에서 생성된 실제 주소로 바꾼다. 수정 후 GitHub에 다시 push 한다.

git add .
git commit -m "update backend url"
git push

9.3. 프론트엔드 배포 (React)

1. Render에서 New → Static Site(스태틱 사이트)를 클릭한다.
2. 같은 GitHub 저장소(movie-2026)를 다시 연결하고 아래와 같이 설정한다.

1. Environment(환경변수) 탭에서 아래 값을 추가한다.

1. Create Static Site를 클릭한다.
2. 배포 완료 후 생성된 주소(예: https://goflex-frontend-xxxx.onrender.com)로 접속하면 완성된 GOFLEX를 볼 수 있다.

9.4. SPA 리다이렉트 설정

React Router를 사용하는 SPA(싱글 페이지 애플리케이션)는 한 가지 추가 설정이 필요하다. frontend/public/ 폴더에 _redirects 파일을 만들고 아래 한 줄을 입력한다.

/*    /index.html   200

10. 자주 발생하는 에러

11. 전체 코드

Chatbot.jsx

import { useState, useRef, useEffect } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faComment, faXmark } from "@fortawesome/free-solid-svg-icons";
import { Button } from "./UI.jsx";

const BACKEND = "https://cbot-rfcl.onrender.com/chat";

export default function Chatbot() {
  const [open, setOpen] = useState(false);
  const [messages, setMessages] = useState([
    { role: "bot", text: "안녕하세요! 영화에 대해 무엇이든 물어보세요" },
  ]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const bottomRef = useRef(null);

  useEffect(() => {
    if (open) bottomRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages, open]);

  async function sendMessage() {
    const text = input.trim();
    if (!text || loading) return;

    setMessages((prev) => [...prev, { role: "user", text }]);
    setInput("");
    setLoading(true);

    try {
      const res = await fetch(BACKEND, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ text }),
      });
      const data = await res.json();
      setMessages((prev) => [...prev, { role: "bot", text: data.reply }]);
    } catch {
      setMessages((prev) => [
        ...prev,
        { role: "bot", text: "서버 연결에 실패했습니다. 다시 시도해주세요." },
      ]);
    } finally {
      setLoading(false);
    }
  }

  function handleKeyDown(e) {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  }

  return (
    <>
      <Button
        variant="primary"
        onClick={() => setOpen((v) => !v)}
        className="fixed bottom-8 right-8 w-14 h-14 rounded-full text-2xl shadow-lg z-50 flex items-center justify-center"
        title="AI 챗봇"
      >
        {open ? <FontAwesomeIcon icon={faXmark} /> : <FontAwesomeIcon icon={faComment} />}
      </Button>

      {open && (
        <div className="fixed bottom-24 right-8 w-85 max-h-1/2 bg-gray-950 border border-gray-600 rounded-xl flex flex-col shadow-2xl z-40">
          <div className="py-3 px-4 bg-yellow-500 rounded-t-xl font-bold text-sm text-gray-700">Goflix AI 챗봇</div>

          <div className="flex-1 overflow-y-auto p-3 flex flex-col gap-2 min-h-50 max-h-85">
            {messages.map((m, i) => (
              <div
                key={i}
                className={`py-2 px-3 max-w-4/5 text-sm leading-snug whitespace-pre-wrap break-words text-gray-700
                  ${m.role === "user" ? "self-end bg-yellow-500 rounded-tl-xl rounded-tr-xl rounded-bl-xl" : "self-start bg-gray-100 rounded-tl-xl rounded-tr-xl rounded-br-xl"}`}
              >
                {m.text}
              </div>
            ))}
            {loading && <div className="self-start bg-gray-100 text-gray-400 rounded-tl-xl rounded-tr-xl rounded-br-xl py-2 px-3 text-sm">...</div>}
            <div ref={bottomRef} />
          </div>

          <div className="flex border-t border-[#333] p-2 gap-2">
            <input
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder="메시지 입력..."
              disabled={loading}
              className="flex-1 bg-[#1e1e1e] border border-[#444] rounded-lg py-2 px-3 text-white caret-white text-sm outline-none placeholder:text-zinc-300"
            />
            <Button
              variant="primary"
              onClick={sendMessage}
              disabled={loading || !input.trim()}
              className="rounded-lg py-2 px-3 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
            >
              전송
            </Button>
          </div>
        </div>
      )}
    </>
  );
}

App.jsx (챗봇 추가)

import { useState, useEffect } from "react";
import { Outlet } from "react-router";
import { Header } from "./components/Header.jsx";
import { Footer } from "./components/Footer.jsx";
import api from "./api/axios";
import Chatbot from "./components/Chatbot.jsx";

export default function App() {
  const [now, setNow] = useState(null);
  const [popular, setPopular] = useState(null);
  const [topRated, setTopRated] = useState(null);

  async function loadMovie() {
    const [res1, res2, res3] = await Promise.all([
      api.get("movie/now_playing"),
      api.get("movie/popular"),
      api.get("movie/top_rated"),
    ]);
    setNow(res1.data.results.filter((m) => m.poster_path));
    setPopular(res2.data.results.filter((m) => m.poster_path));
    setTopRated(res3.data.results.filter((m) => m.poster_path));
  }

  useEffect(() => {
    loadMovie();
  }, []);

  const loading = now === null || popular === null || topRated === null;
  const ctx = {
    now: now || [],
    popular: popular || [],
    topRated: topRated || [],
    loading,
  };

  return (
    <>
      <Header />
      <Outlet context={ctx} />
      <Footer />
      <Chatbot />
    </>
  );
}