📘 [3편] 자연어 → 할 일 변환하기 – GPT 응답을 TODO 데이터로 바꾸자

📘 [3편] 자연어 → 할 일 변환하기 – GPT 응답을 TODO 데이터로 바꾸자

---

이전 글에서는 사용자의 자연어 입력을 GPT로 전송하고,
응답을 챗 메시지 형태로 화면에 표시하는 것까지 구현했습니다.

이번 편에서는 그 응답을 단순히 보여주는 데 그치지 않고,
실제로 Firestore에 할 일 데이터로 등록하는 방법을 배웁니다.

---

🎯 목표

✅ 자연어 문장을 GPT에게 전달
✅ GPT가 "할 일 데이터(JSON)"로 응답
✅ 해당 데이터를 Firestore에 저장
✅ TODO 목록 화면에 표시 준비

---

🧠 어떤 방식으로 구조화할까?

사용자 입력 예시:

“내일 오후 3시에 팀 회의 있어”

GPT가 반환할 기대 형식:

{
  "title": "팀 회의",
  "date": "2025-05-23T15:00:00.000Z",
  "completed": false
}

이런 식으로 title + date + 상태가 포함된 JSON을 추출할 수 있다면
곧바로 Firestore에 저장할 수 있습니다.

---

✍️ GPT 요청 프롬프트 변경하기

📄 chatgpt.js 수정

export const askGPTTodoFormat = async (message) => {
  const systemPrompt = `
너는 일정 등록을 도와주는 비서야.
사용자의 말을 듣고 아래 JSON 형식으로만 응답해.

{
  "title": "일정 제목",
  "date": "ISO 형식 날짜 (UTC 기준)",
  "completed": false
}
사용자가 날짜를 말하지 않으면 오늘 날짜로 처리해줘.
`;

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

  const jsonString = res.data.choices[0].message.content;
  return JSON.parse(jsonString); // ← JSON으로 변환
};

---

🧪 테스트: 콘솔에서 확인해보기

반응형

const test = async () => {
  const result = await askGPTTodoFormat("내일 오전 9시에 면접 일정");
  console.log(result);
};

출력 예상:

{
  "title": "면접 일정",
  "date": "2025-05-23T09:00:00.000Z",
  "completed": false
}

---

🔥 Firestore에 저장하는 코드 작성

📄 services/firebase.js

import firestore from '@react-native-firebase/firestore';

export const addTodo = async (todo) => {
  await firestore().collection('todos').add({
    ...todo,
    createdAt: new Date().toISOString(),
  });
};

---

💬 ChatScreen.js 통합

import { askGPTTodoFormat } from '../services/chatgpt';
import { addTodo } from '../services/firebase';

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

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

  try {
    const todoData = await askGPTTodoFormat(input);
    await addTodo(todoData);

    setMessages(prev => [...prev, {
      text: `✅ "${todoData.title}" 일정이 등록되었습니다.`,
      isUser: false
    }]);
  } catch (error) {
    console.error('오류:', error);
    setMessages(prev => [...prev, {
      text: '❌ 일정 등록에 실패했어요.',
      isUser: false
    }]);
  }
};

---

✅ 이번 글 정리

기능 구현 완료

자연어 → GPT 전달	✅
JSON 응답 받기	✅
Firestore에 저장	✅
결과 챗 메시지 표시	✅

---

🧩 다음 글 예고

다음 편에서는 실제 등록된 TODO를 Firestore에서 실시간으로 불러오고,
날짜순으로 정렬된 할 일 리스트를 보여주는 화면을 구성합니다.

---

 

React Native GPT JSON 파싱,React Native GPT 일정 등록,chatgpt todo JSON 예제,GPT 일정 추출 프롬프트,React Native Firestore 등록,자연어 파싱 일정 앱,openai react native 일정 등록,react native firestore todo 저장,chatgpt react native 활용 예제,react native 할일 자동등록

---