1. 리액트 컴포넌트 설계

1. 리액트 컴포넌트 설계

아래는 기본적인 리액트 컴포넌트 코드 예시입니다. 이 컴포넌트는 사용자가 입력한 텍스트를 받아 API를 통해 GPT 모델로 전송하고, 결과를 화면에 출력하는 기능을 포함하고 있습니다.

jsx

import React, { useState } from 'react';

function GPTContentGenerator() {
  const [input, setInput] = useState('');
  const [output, setOutput] = useState('');

  const handleInputChange = (event) => {
    setInput(event.target.value);
  };

  const handleSubmit = async () => {
    try {
      const response = await fetch('/api/generate-content', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ text: input })
      });
      const data = await response.json();
      setOutput(data.generatedText);
    } catch (error) {
      console.error('Error fetching data:', error);
      setOutput('Failed to generate content. Please try again.');
    }
  };

  return (
    <div>
      <h1>GPT Content Generator</h1>
      <textarea
        value={input}
        onChange={handleInputChange}
        placeholder="Enter your text here..."
        rows="4"
        cols="50"
      ></textarea>
      <button onClick={handleSubmit}>Generate</button>
      <div>
        <h2>Generated Content:</h2>
        <p>{output}</p>
      </div>
    </div>
  );
}

export default GPTContentGenerator;

2. 컴포넌트의 기능 설명

• useState: input과 output 상태를 관리합니다. 사용자의 입력과 모델의 출력을 각각 저장합니다.
• handleInputChange: 사용자가 텍스트 입력란에 입력할 때마다 input 상태를 업데이트합니다.
• handleSubmit: 사용자가 'Generate' 버튼을 클릭할 때 실행됩니다. 입력된 텍스트를 서버의 GPT 모델 API로 전송하고, 반환된 결과를 output에 저장합니다.

3. 백엔드 통합

이 컴포넌트가 작동하려면 워드프레스 서버에서 해당 API 엔드포인트(/api/generate-content)를 구현해야 합니다. 이 API는 POST 요청을 받아, 요청된 텍스트를 기반으로 GPT 모델을 실행하고 결과를 반환하는 역할을 합니다.