이 설계를 기반으로 “딥씨크용 구현 프롬프트” 작성 

좋다 👍
이제 딥씨크(또는 다른 AI 개발 모델) 에 그대로 던질 수 있는
구현용 명확한 프롬프트를 작성해준다.

모호한 말 없이, 기능·구조·파일구성·데이터 흐름까지 포함한다.

📌 딥씨크용 구현 프롬프트

(모바일 우선 주간 농가 보고서 시스템 제작)

🎯 프로젝트 목표

모바일 우선 기반의
“딸기 스마트농업 주간 보고서 시스템”을 구현한다.

요구 조건:

Bootstrap 5 기반

ApexCharts 사용

블록 단위 텍스트 편집 가능

차트는 편집 불가

JSON 기반 데이터 렌더링

정적 HTML 파일로 저장 가능

모바일 우선 설계

🔷 1️⃣ 기본 아키텍처
📁 파일 구조
/report/
    /templates/
        report_template.html
    /data/
        farm01_2026_w05.json
    /output/
        farm01_2026_w05.html

🔷 데이터 흐름

Python 전처리 엔진이 JSON 생성

HTML 템플릿이 JSON을 fetch

ApexCharts 렌더링

텍스트 블록 표시

수정 시 DB 또는 JSON override 저장

🔷 2️⃣ UI 설계 요구사항
📱 모바일 우선

최대 폭 720px

세로 스택 구조

카드 기반 UI

Sticky 상단 헤더

하단 고정 액션 버튼

🔷 3️⃣ 화면 구성 순서

상단 헤더

주간 요약 카드

위험도 카드

환경 분석 카드

환경 차트 카드

생육 분석 카드

생육 차트 카드

권장 사항 카드

하단 버튼 영역

🔷 4️⃣ Bootstrap 5 요구사항

container-fluid 사용

card + shadow-sm 사용

row / col-12 기반

다크/화이트 모드 지원

모바일 우선 CSS

🔷 5️⃣ 차트 구현 요구사항

ApexCharts 사용

차트 2종:

1️⃣ 환경 추이 차트 (온도, 습도, CO₂)
2️⃣ 생육 추이 차트 (엽면적, 성장률)

요구사항:

height 320px

width 100%

반응형

데이터는 JSON에서 로드

🔷 6️⃣ JSON 데이터 구조
{
  "farm_id": "01",
  "week_label": "2026-02-08 ~ 2026-02-14",
  "risk_level": "주의",
  "summary_text": "...",
  "environment_text": "...",
  "growth_text": "...",
  "recommendation_text": "...",
  "charts": {
    "temp_series": [],
    "humidity_series": [],
    "co2_series": [],
    "leaf_area_series": [],
    "growth_rate_series": []
  }
}

🔷 7️⃣ 블록 편집 기능 요구사항

텍스트 블록만 편집 가능:

summary_text

environment_text

growth_text

recommendation_text

기능:

✏ 아이콘 표시

클릭 시 textarea 활성화

저장 버튼

취소 버튼

저장 시 JSON override 저장

차트 블록은 편집 불가.

🔷 8️⃣ 수정 저장 구조

수정 저장 방식:

옵션 A: DB 저장
옵션 B: 별도 override JSON 파일 저장

렌더링 로직:

if override_text exists:
    use override
else:
    use auto text

🔷 9️⃣ 하단 액션 버튼

하단 고정 영역:

수정 모드 전환 버튼

PDF 저장 버튼

보고서 확정 버튼

확정 시:

상태값 변경

수정 불가

🔷 🔟 다크/화이트 모드

기본 다크

토글 버튼 제공

PDF 저장 시 자동 화이트 모드 적용

🔷 11️⃣ PDF 출력

print CSS 지원

A4 기준 레이아웃

차트 포함 출력 가능

🔷 12️⃣ 코드 요구사항

ES6 문법

모듈 분리

renderReport(data) 함수 분리

renderCharts(data) 함수 분리

enableEditMode() 함수 분리

🔷 13️⃣ UX 요구사항

모바일 스크롤 자연스러움

카드 간 충분한 마진

가독성 높은 타이포그래피

숫자 강조 표시

위험도 색상 명확 구분

🔷 14️⃣ 금지사항

전체 HTML 편집 기능 구현 금지

차트 DOM 직접 수정 금지

인라인 스타일 남발 금지

jQuery 사용 금지

🔷 15️⃣ 최종 목표

이 시스템은:

50농가 자동 생성 가능

주간 반복 자동화 가능

컨설턴트가 부분 수정 가능

모바일에서 읽기 쉬움

장기 운영 안정성 확보

🔥 추가 요청

코드는 다음 파일 단위로 생성:

report_template.html

report.js

report.css

sample_json.json

각 파일을 완전한 코드로 작성하라.