AI 기반 자동 프로그래밍 시스템 – 전체 설계도 (4)

개발자 노트 UI(React) 기본 화면 예제를 초보 개발자가 이해할 수 있도록 주석과 함께 제공합니다.

---

1. 주요 기능

• 프로젝트 이름 입력
• 필수 기능(Must-have) 입력
• 제외 기능(Must-not-have) 입력
• 승인 필요 변경사항 입력
• [저장하기] & [AI에게 코드 요청] 버튼

---

2. React 코드 예시 (Next.js 또는 CRA 모두 사용 가능)

javascript

// frontend/src/App.js
import React, { useState } from "react";

export default function App() {
  // 상태(state) 설정: 입력값을 저장
  const [projectName, setProjectName] = useState("");
  const [mustHave, setMustHave] = useState("");
  const [mustNotHave, setMustNotHave] = useState("");
  const [reviewRequired, setReviewRequired] = useState("");

  // 저장 버튼 클릭 시 실행
  const handleSave = () => {
    const note = {
      projectName,
      mustHave: mustHave.split(",").map(item => item.trim()), // 쉼표로 구분된 입력을 배열로 변환
      mustNotHave: mustNotHave.split(",").map(item => item.trim()),
      reviewRequired: reviewRequired.split(",").map(item => item.trim())
    };

    console.log("개발자 노트 저장됨:", note);

    // TODO: 백엔드 API로 전송하는 코드 추가 예정
    alert("개발자 노트가 저장되었습니다!");
  };

  // AI에게 요청 버튼 클릭 시 실행
  const handleRequestAI = () => {
    alert("AI에게 코드 요청을 보냈습니다. (추후 백엔드 연동)");
  };

  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white shadow-lg rounded-2xl p-6 w-full max-w-md">
        <h1 className="text-2xl font-bold mb-4">개발자 노트 작성</h1>

        {/* 프로젝트 이름 */}
        <label className="block mb-2 font-semibold">프로젝트 이름</label>
        <input
          type="text"
          value={projectName}
          onChange={(e) => setProjectName(e.target.value)}
          className="border rounded-lg w-full p-2 mb-4"
          placeholder="예: shrimp_farm_manager"
        />

        {/* 필수 기능 */}
        <label className="block mb-2 font-semibold">필수 기능 (쉼표로 구분)</label>
        <input
          type="text"
          value={mustHave}
          onChange={(e) => setMustHave(e.target.value)}
          className="border rounded-lg w-full p-2 mb-4"
          placeholder="예: 로그인, 수조 온도 모니터링"
        />

        {/* 제외 기능 */}
        <label className="block mb-2 font-semibold">제외 기능 (쉼표로 구분)</label>
        <input
          type="text"
          value={mustNotHave}
          onChange={(e) => setMustNotHave(e.target.value)}
          className="border rounded-lg w-full p-2 mb-4"
          placeholder="예: 외부 데이터 전송"
        />

        {/* 승인 필요한 변경사항 */}
        <label className="block mb-2 font-semibold">승인 필요한 변경사항 (쉼표로 구분)</label>
        <input
          type="text"
          value={reviewRequired}
          onChange={(e) => setReviewRequired(e.target.value)}
          className="border rounded-lg w-full p-2 mb-4"
          placeholder="예: DB 스키마 변경, API 추가"
        />

        {/* 버튼들 */}
        <div className="flex justify-between mt-4">
          <button
            onClick={handleSave}
            className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600"
          >
            저장하기
          </button>
          <button
            onClick={handleRequestAI}
            className="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600"
          >
            AI에게 코드 요청
          </button>
        </div>
      </div>
    </div>
  );
}

---

3. 실행 방법 (간단 버전)

   1. React 프로젝트 생성 (CRA 사용 예시)

 

bash

npx create-react-app frontend
cd frontend
npm install

 

   2. App.js 내용을 위 코드로 교체

   3. TailwindCSS 설치

 

bash

npm install -D tailwindcss
npx tailwindcss init

       

       -  tailwind.config.js 수정:

content: ["./src/**/*.{js,jsx,ts,tsx}"],

 

 

       - src/index.css에 추가:

@tailwind base; 
@tailwind components; 
@tailwind utilities;

 

   4. 서버 실행

 

bash

npm start

→ 브라우저에서 http://localhost:3000 접속

 

---

4. 다음 단계

이제 프론트엔드에서 입력한 노트를 실제로 저장하고 AI로 전달해야 합니다.