아직 서버에 말을 걸지 않는
채팅 화면

지금 진짜인 것과 껍데기인 것

즉 state가 바뀌는 상호작용은 전부 진짜이고, 서버가 필요한 것은 전부 껍데기다. 경계가 정확히 네트워크 지점에 있다.

전체 코드

import { useState } from 'react'
import type { FormEvent, KeyboardEvent, ReactNode } from 'react'
import './App.css'

type IconName = 'archive' | 'chevron' | 'close' | 'code' | 'edit' | 'menu' | 'model' | 'plus' | 'search' | 'send' | 'sparkles'

const iconPaths: Record<IconName, ReactNode> = {
  archive: <><path d="M4 7.5h16M6 4h12a1 1 0 0 1 1 1v2.5H5V5a1 1 0 0 1 1-1Z"/><path d="M6.5 7.5V19a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V7.5M10 11h4"/></>,
  chevron: <path d="m9 10 3 3 3-3"/>, close: <path d="m6 6 12 12M18 6 6 18"/>,
  code: <path d="m8.5 9-3 3 3 3M15.5 9l3 3-3 3M13.5 6.5l-3 11"/>,
  edit: <><path d="M13.5 6.5 17.5 10.5M5 19l3.7-.8 9.6-9.6a1.4 1.4 0 0 0 0-2l-.9-.9a1.4 1.4 0 0 0-2 0l-9.6 9.6L5 19Z"/><path d="M13 19h6"/></>,
  menu: <path d="M4 7h16M4 12h16M4 17h16"/>,
  model: <><path d="M12 3.5 19 7.4v9.2L12 20.5 5 16.6V7.4L12 3.5Z"/><path d="m8.5 10 3.5 2 3.5-2M12 12v4"/></>,
  plus: <path d="M12 5v14M5 12h14"/>, search: <><circle cx="11" cy="11" r="6"/><path d="m16 16 4 4"/></>,
  send: <><path d="M12 19V5M7 10l5-5 5 5"/><path d="M5 19h14"/></>,
  sparkles: <><path d="M12 3l.8 2.2A4.8 4.8 0 0 0 15.7 8l2.3.8-2.3.8a4.8 4.8 0 0 0-2.9 2.9L12 15l-.8-2.5a4.8 4.8 0 0 0-2.9-2.9L6 8.8 8.3 8a4.8 4.8 0 0 0 2.9-2.8L12 3Z"/><path d="m18.5 14 .4 1.1a2.3 2.3 0 0 0 1.4 1.4l1.2.5-1.2.4a2.3 2.3 0 0 0-1.4 1.5l-.4 1.1-.4-1.1a2.3 2.3 0 0 0-1.4-1.5l-1.2-.4 1.2-.5a2.3 2.3 0 0 0 1.4-1.4l.4-1.1Z"/></>,
}

function Icon({ name, size = 20 }: { name: IconName; size?: number }) {
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{iconPaths[name]}</svg>
}

const suggestions = [
  { icon: 'code' as const, title: '코드를 함께 작성해요', detail: 'React 컴포넌트 설계와 디버깅' },
  { icon: 'sparkles' as const, title: '복잡한 개념을 이해해요', detail: 'MoE와 로컬 추론을 차근차근' },
  { icon: 'model' as const, title: '프로젝트를 분석해요', detail: '구조와 다음 작업을 정리하기' },
]

function App() {
  const [sidebarOpen, setSidebarOpen] = useState(false)
  const [prompt, setPrompt] = useState('')
  const [messages, setMessages] = useState<string[]>([])
  const send = () => { const text = prompt.trim(); if (!text) return; setMessages((current) => [...current, text]); setPrompt('') }
  const submit = (event: FormEvent) => { event.preventDefault(); send() }
  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => { if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); send() } }
  const newChat = () => { setMessages([]); setPrompt(''); setSidebarOpen(false) }

  return <div className="app-shell">
    {sidebarOpen && <button className="sidebar-scrim" aria-label="사이드바 닫기" onClick={() => setSidebarOpen(false)} />}
    <aside className={`sidebar ${sidebarOpen ? 'sidebar--open' : ''}`}>
      <div className="sidebar-top"><div className="brand-mark">G</div><button className="icon-button sidebar-close" aria-label="사이드바 닫기" onClick={() => setSidebarOpen(false)}><Icon name="close" /></button></div>
      <button className="new-chat" onClick={newChat}><span><Icon name="edit" size={19} />새로운 채팅</span><span className="shortcut">⌘ K</span></button>
      <nav className="sidebar-nav" aria-label="채팅 메뉴"><button><Icon name="search" size={19} />채팅 검색</button><button><Icon name="archive" size={19} />보관된 대화</button></nav>
      <div className="history"><p className="history-label">최근 대화</p><button className="history-item history-item--active">Gemma 서비스 만들기</button><button className="history-item">TurboFieldfare 구조 분석</button><button className="history-item">MoE Expert cache 실험</button></div>
      <div className="sidebar-footer"><div className="server-dot" /><div><strong>로컬 서버</strong><span>연결 준비 중</span></div></div>
    </aside>

    <main className="chat-main">
      <header className="topbar">
        <button className="icon-button mobile-menu" aria-label="메뉴 열기" onClick={() => setSidebarOpen(true)}><Icon name="menu" /></button>
        <button className="model-select"><span>Gemma 4</span><span className="model-caption">Local MoE</span><Icon name="chevron" size={18} /></button>
        <div className="topbar-actions"><span className="status-pill"><i />Local</span><button className="profile-button" aria-label="프로필">M</button></div>
      </header>

      <section className={`conversation ${messages.length ? 'conversation--active' : ''}`}>
        {messages.length === 0 ? <div className="welcome">
          <div className="welcome-symbol"><Icon name="sparkles" size={28} /></div><p className="eyebrow">ON DEVICE</p><h1>무엇을 함께 해볼까요?</h1>
          <div className="suggestions">{suggestions.map((item) => <button key={item.title} onClick={() => setPrompt(item.title)}><span className="suggestion-icon"><Icon name={item.icon} size={19} /></span><span><strong>{item.title}</strong><small>{item.detail}</small></span></button>)}</div>
        </div> : <div className="message-list">{messages.map((message, index) => <div className="message-pair" key={`${message}-${index}`}><div className="user-message">{message}</div><div className="assistant-message"><div className="assistant-avatar">G</div><div><strong>Gemma</strong><p>FastAPI가 연결되면 이곳에 모델의 답변이 실시간으로 표시됩니다.</p></div></div></div>)}</div>}
      </section>

      <div className="composer-wrap"><form className="composer" onSubmit={submit}>
        <textarea value={prompt} onChange={(event) => setPrompt(event.target.value)} onKeyDown={handleKeyDown} rows={1} placeholder="Gemma에게 무엇이든 물어보세요" aria-label="메시지" />
        <div className="composer-actions"><button type="button" className="attach-button" aria-label="파일 추가"><Icon name="plus" size={21} /></button><span className="composer-hint">Enter로 전송 · Shift+Enter로 줄바꿈</span><button className="send-button" type="submit" disabled={!prompt.trim()} aria-label="메시지 보내기"><Icon name="send" size={19} /></button></div>
      </form><p className="disclaimer">Gemma는 실수할 수 있습니다. 중요한 정보는 다시 확인하세요.</p></div>
    </main>
  </div>
}

export default App

70줄이지만 줄이 길다. JSX를 한 줄에 몰아 쓴 스타일이라 세로로는 짧고 가로로는 길다. 아래에서 의미 단위로 나누어 읽는다.

import와 type — 무엇을 왜 가져오는가

import { useState } from 'react'
import type { FormEvent, KeyboardEvent, ReactNode } from 'react'
import './App.css'

type IconName = 'archive' | 'chevron' | 'close' | 'code' | 'edit' | 'menu' | 'model' | 'plus' | 'search' | 'send' | 'sparkles'

const iconPaths: Record<IconName, ReactNode> = { /* ... */ }

|로 이어진 문자열 목록은 “이 중 하나”를 뜻한다. Python의 Literal과 같은 개념이다. Record<IconName, ReactNode>는 “IconName의 모든 값이 열쇠로 있어야 하는 객체”다. 아이콘을 하나 빠뜨리면 npm run build가 실패한다. <Icon name="sned" /> 같은 오타도 마찬가지다.

state 세 개 — 화면이 기억하는 전부

const [sidebarOpen, setSidebarOpen] = useState(false)
const [prompt, setPrompt] = useState('')
const [messages, setMessages] = useState<string[]>([])
const send = () => { const text = prompt.trim(); if (!text) return; setMessages((current) => [...current, text]); setPrompt('') }

이벤트 처리기 세 개

const submit = (event: FormEvent) => { event.preventDefault(); send() }
const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => { if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); send() } }
const newChat = () => { setMessages([]); setPrompt(''); setSidebarOpen(false) }

화면이 갈라지는 지점

{messages.length === 0 ? <div className="welcome"> ... </div>
                        : <div className="message-list"> ... </div>}

조건 ? A : B는 삼항 연산자다. messages가 비어 있으면 환영 화면을, 하나라도 있으면 메시지 목록을 그린다. JSX 안에서는 if문을 쓸 수 없어서 이 형태가 흔하다.

{messages.map((message, index) => <div className="message-pair" key={`${message}-${index}`}> ... </div>)}

관찰하는 방법

cd fe
npm install
npm run dev          # http://localhost:5173

Network 탭이 비어 있다는 사실이 이 단계의 가장 중요한 관찰이다. 화면이 그럴듯하게 동작하는 것과 서버에 연결된 것은 전혀 다른 일이다.

자주 발생하는 오류

설계 선택과 대안

이전 단계와 다음 파일

이 컴포넌트를 화면에 붙이는 코드는 main.tsx, TSX를 브라우저용 JavaScript로 바꾸는 설정은 vite.config.ts에 있다. 여기서 비어 있는 “Gemma 답변” 자리를 실제로 채우려면 Backend의 채팅 route와 streaming이 필요하다. 그 요청을 받을 Adapter는 turbofieldfare.py에 이미 준비돼 있다.