📘 [2편] 챗봇 UI 구성하기 – 사용자 입력과 GPT 응답을 연결하자

📘 [2편] 챗봇 UI 구성하기 – 사용자 입력과 GPT 응답을 연결하자

---

이번 편에서는 사용자 입력창과 GPT의 응답을 보여주는 기본 챗봇 UI를 만들어봅니다.
실제로 사용자가 문장을 입력하고 → GPT로부터 응답을 받아 → 화면에 표시하는
챗 인터페이스의 첫 단계를 구현하는 것이 목표입니다.

---

🎯 목표

✅ 사용자 입력창 구현
✅ 메시지 전송 버튼
✅ GPT 응답 받아 화면에 출력
✅ 메시지 리스트 관리 (채팅처럼 보이게)

---

🧱 프로젝트 구조

src/
├── components/
│   └── ChatMessage.js       # 말풍선 컴포넌트
├── screens/
│   └── ChatScreen.js        # 전체 채팅 화면
├── services/
│   └── chatgpt.js           # GPT API 요청
App.js

---

🧑‍💻 1. GPT 응답 함수 (복습)

📄 src/services/chatgpt.js

import axios from 'axios';
import { OPENAI_API_KEY } from '@env';

export const askGPT = async (message) => {
  const res = await axios.post(
    'https://api.openai.com/v1/chat/completions',
    {
      model: 'gpt-4',
      messages: [{ role: 'user', content: message }],
    },
    {
      headers: {
        'Authorization': `Bearer ${OPENAI_API_KEY}`,
        'Content-Type': 'application/json',
      }
    }
  );
  return res.data.choices[0].message.content;
};

---

💬 2. 말풍선 컴포넌트

📄 src/components/ChatMessage.js

반응형

import { View, Text, StyleSheet } from 'react-native';

export default function ChatMessage({ message, isUser }) {
  return (
    <View style={[styles.container, isUser ? styles.user : styles.bot]}>
      <Text style={styles.text}>{message}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    maxWidth: '80%',
    marginVertical: 4,
    padding: 10,
    borderRadius: 10,
  },
  user: {
    alignSelf: 'flex-end',
    backgroundColor: '#007aff',
  },
  bot: {
    alignSelf: 'flex-start',
    backgroundColor: '#e5e5ea',
  },
  text: {
    color: '#fff',
  },
});

---

🖥️ 3. 전체 채팅 화면 구성

📄 src/screens/ChatScreen.js

import React, { useState } from 'react';
import { View, TextInput, Button, FlatList, KeyboardAvoidingView, Platform } from 'react-native';
import ChatMessage from '../components/ChatMessage';
import { askGPT } from '../services/chatgpt';

export default function ChatScreen() {
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState([]);

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

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

    setInput('');
    try {
      const gptReply = await askGPT(input);
      const botMessage = { text: gptReply, isUser: false };
      setMessages(prev => [...prev, botMessage]);
    } catch (error) {
      console.error('GPT 응답 실패:', error);
    }
  };

  return (
    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={{ flex: 1 }}>
      <FlatList
        data={messages}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => <ChatMessage message={item.text} isUser={item.isUser} />}
        contentContainerStyle={{ padding: 16 }}
      />
      <View style={{ flexDirection: 'row', padding: 8 }}>
        <TextInput
          style={{ flex: 1, borderWidth: 1, borderColor: '#ccc', padding: 8, borderRadius: 5 }}
          value={input}
          onChangeText={setInput}
          placeholder="할 일을 말해보세요"
        />
        <Button title="보내기" onPress={sendMessage} />
      </View>
    </KeyboardAvoidingView>
  );
}

---

📲 4. App.js에 적용

import ChatScreen from './src/screens/ChatScreen';

export default function App() {
  return <ChatScreen />;
}

---

✅ 이번 글에서 만든 기능 요약

기능 완료 여부

사용자 메시지 입력	✅
GPT로 메시지 전송	✅
응답 받아서 화면에 출력	✅
채팅 리스트 UI 구현	✅

---

📘 다음 글 예고

다음 편에서는 GPT의 응답을 단순한 말풍선 텍스트가 아니라
"할 일 등록"으로 변환하는 구조를 만듭니다.

• 예: “내일 오후 3시에 회의 잡아줘” → 날짜 + 내용 추출 → Firestore에 등록

👉 GPT 응답을 “구조화된 JSON”으로 받아서 TODO로 저장하는 방법을 배워볼 차례입니다!

 

React Native 챗봇 UI,React Native OpenAI 연결,React Native GPT 채팅 예제,React Native 채팅 앱 만들기,React Native GPT 챗봇 화면,chatgpt react native 예제,OpenAI 채팅 앱 react native,챗봇 인터페이스 구현,react native todo 챗봇,React