# 설앵초(Seolaengcho) 12주 상세 개발 일정
> **AI 개발 로드맵** — 주차별 태스크·산출물·프롬프트를 기준으로 단계적 구현 시 참조합니다.
> 기능·아키텍처 상세는 `@seolaengcho_master_development_spec.md`를 함께 확인하세요.
## 문서 맵
| 문서 | 역할 |
|------|------|
| `@seolaengcho_detailed_development_schedule.md` | **본 문서** — 12주 주차별 태스크·산출물·구현 순서 |
| `@seolaengcho_master_development_spec.md` | 기능 명세, 위젯·검증·권한 규칙 |
| `@seolaengcho_technical_context.md` | DB 스키마, JSONB 원칙 |
| `@ai_development_protocol.md` | 코드 작성·작업 절차 |
---
## 마일스톤 요약
```
Phase 1 Phase 2 Phase 3 Phase 4
인프라·라우팅 → 그리드·메뉴 → 위젯·등급 제어 → 어드민·배포
(1~2주) (3~6주) (7~9주) (10~12주)
```
| Phase | 주차 | 목표 |
|-------|------|------|
| **1** | 1~2주 | IIS·Django 환경, 멀티 테넌트 라우팅 |
| **2** | 3~6주 | 12컬럼 그리드, 4-Depth 메뉴, 반응형·전역 헤더/푸터 |
| **3** | 7~9주 | 게시판·스마트 폼 위젯, 멤버십 등급 제한 |
| **4** | 10~12주 | 화이트 라벨 어드민, XSS·CSP, IIS 배포 패키징 |
---
## 주차별 일람표
| 주차 | Phase | 핵심 태스크 | 주요 산출물 |
|------|-------|-------------|-------------|
| 1주 | 1 | 환경 셋업, DB 스키마, IIS 권한 스크립트 | 프로젝트 뼈대, 스키마 정의서 |
| 2주 | 1 | Host 헤더 미들웨어, `request.tenant` | `tenants/middleware.py`, `tenants/models.py` |
| 3주 | 2 | 12컬럼 그리드·DnD 엔진 | `static/js/builder-grid.js` |
| 4주 | 2 | Flat JSON 메뉴 에디터 | `static/js/builder-menu.js` |
| 5주 | 2 | 메뉴 depth·순환 참조 검증 API | `menus/api_views.py`, 단위 테스트 |
| 6주 | 2 | 모바일 렌더러, 전역 Header/Footer | `static/css/builder-responsive.css` |
| 7주 | 3 | BaseBoard 게시판 패키지 | `boards/models.py`, `boards/views.py` |
| 8주 | 3 | JSON Schema 스마트 폼·메일 큐 | `forms/models.py`, `forms/form_validators.py` |
| 9주 | 3 | 등급별 스토리지·듀얼 락 | `tenants/validators.py` |
| 10주 | 4 | 슈퍼바이저 어드민, Design Token | `admin_backoffice/views.py`, `core/context_processors.py` |
| 11주 | 4 | bleach·iframe sandbox·CSP | `core/security.py`, `templates/widgets/raw_code_iframe.html` |
| 12주 | 4 | DB 튜닝, IIS 원클릭 배포 | `deploy_iis_automatic.bat`, QA 리포트, 배포 Zip |
---
## Phase 1: 개발 환경 · 멀티 테넌트 라우팅 (1~2주)
**목표:** Windows IIS + Django 가동 환경 수립, 서브도메인·독립 도메인 기반 가입자 컨텍스트 분리
### 1주차 — 환경 셋업 · DB 설계
**태스크**
- Python 3.11, PostgreSQL 16 설치·연동 (로컬 PC·가상 서버)
- Django 5.x 프로젝트 뼈대 및 기본 설정
- 핵심 DB 스키마 정의: `Tenant`, `Page`, `Widget`, `Menu` 등
- `Page.layout_data` JSONB에 `GinIndex(fields=['layout_data'])` 명시
- `media/`, `static/` — `IIS_IUSRS` 권한 상속 자동화 스크립트 초안
**산출물:** Django 프로젝트 뼈대, PostgreSQL 스키마 정의서
### 2주차 — 멀티 테넌트 라우팅 미들웨어
**태스크**
- `Host` 헤더 분석 Custom Middleware (`user1.seolaengcho.com`, `www.custom-domain.com`)
- 활성 `Tenant` 조회 → `request.tenant` 동적 주입
- 미존재·만료 가입자 → 404 또는 Suspended 안내 페이지
**산출물:** `tenants/middleware.py`, `tenants/models.py`
**Phase 1 프롬프트**
```
@seolaengcho_master_development_spec.md
@seolaengcho_detailed_development_schedule.md
1~2주차 과제: 서브도메인·독립 도메인을 감지해 request.tenant에
가입자 컨텍스트를 바인딩하는 Django 미들웨어를 작성해줘.
가입자 없음·만료 예외 처리와 Host 파싱 규칙을 포함해줘.
```
---
## Phase 2: 그리드 엔진 · 4-Depth 메뉴 (3~6주)
**목표:** 빌더 핵심 UI, 데이터 무결성이 보장되는 계층 메뉴 에디터
### 3주차 — 12컬럼 반응형 그리드
**태스크**
- TailwindCSS `grid-cols-12` 가상 캔버스
- 바닐라 JS Drag & Drop + 격자 Snapping
- 위젯 가로폭 → `grid-span-1` ~ `grid-span-12` 동적 반영
**산출물:** `static/js/builder-grid.js`, 빌더 UI 프로토타입
### 4주차 — Flat JSON 메뉴 매니저
**태스크**
- 계층형 트리 UI — DnD·순서 변경
- 직렬화: 트리가 아닌 Flat JSON (`id`, `parent_id`, `order`)로 API 전송
**산출물:** `static/js/builder-menu.js`, 메뉴 편집 페이지
### 5주차 — 4-Depth 무결성 가드
**태스크**
- 메뉴 Flat JSON 저장 Django API 뷰
- `validate_menu_depth`: 순환 참조 감지, depth **4 이하** 검증
- 위반 시 트랜잭션 롤백 + 에러 반환
**산출물:** `menus/api_views.py`, 메뉴 검증 Unit Test
### 6주차 — 모바일 렌더러 · 전역 Header/Footer
**태스크**
- 가로폭 **768px 미만** → 12컬럼 요소 수직 누적 (CSS·JS)
- Header/Footer 전역 마스터 템플릿 — 1회 수정 시 전 페이지 동기화
**산출물:** `static/css/builder-responsive.css`, 헤더/푸터 빌더 모듈
**Phase 2 프롬프트**
```
@seolaengcho_master_development_spec.md
@seolaengcho_detailed_development_schedule.md
5주차 태스크: Flat JSON 메뉴의 부모-자식 노드를 검사해
순환 구조·4-Depth 초과 시 Transaction 롤백 및 에러를 반환하는
Django 유효성 가드 함수와 Django TestCase를 작성해줘.
```
---
## Phase 3: 위젯 · 멤버십 등급 제한 (7~9주)
**목표:** 상담·예약·게시판 위젯 탑재, 요금제 기반 리소스 제한
### 7주차 — BaseBoard 게시판 패키지
**태스크**
- `BaseBoardModel` 상속 — 일반형, 갤러리형, FAQ형
- 상담게시판형: 비밀글, 테넌트 점주·관리자만 열람
**산출물:** `boards/models.py`, `boards/views.py`, 게시판 프리셋 HTML
### 8주차 — 스마트 폼 · 예약 시스템
**태스크**
- 폼 빌더 UI — 텍스트, 이메일, 전화, 일자 등 필드 조합
- 설정 → JSON Schema 저장
- 프론트: `react-jsonschema-form` 또는 바닐라 JS 스키마 파서
- 백엔드: `jsonschema` 동적 검증
- 통과 시 `django-background-tasks`로 점주 이메일 enqueue
**산출물:** `forms/models.py`, `forms/form_validators.py`, 메일 큐 연동
### 9주차 — 등급별 리소스 제어
**태스크**
| 등급 | 스토리지 한도 |
|------|---------------|
| Basic | 300MB |
| Premium | 2GB |
| Business | 10GB |
- 업로드 사전 검증 (`Media Upload Validator`)
- 프리미엄 위젯(스마트 폼, 외부 지도 등)·페이지 수 초과 시 **듀얼 락** + 업그레이드 모달
**산출물:** `tenants/validators.py`, 등급 만료 경고 UI
**Phase 3 프롬프트**
```
@seolaengcho_master_development_spec.md
@seolaengcho_detailed_development_schedule.md
8주차 태스크: 가맹점주가 저장한 JSON Schema로
방문자 입력을 백엔드에서 동적 검증하는 Django Validator 뷰를 작성해줘.
검증 통과 시 django-background-tasks로 점주 이메일 알림을
전송하는 백그라운드 태스크 함수까지 포함해줘.
```
---
## Phase 4: 어드민 · 보안 · 배포 (10~12주)
**목표:** 화이트 라벨링, XSS 방어, Windows IIS 원클릭 배포
### 10주차 — 슈퍼바이저 어드민 · Design Token
**태스크**
- 바이어용 슈퍼바이저 대시보드 — 가입자·트래픽·스토리지 모니터링
- 로고·도메인 키워드·마스터 컬러 → `context_processors` → CSS 변수 (`--main-color` 등)
**산출물:** `admin_backoffice/views.py`, `core/context_processors.py`
### 11주차 — bleach · iframe sandbox · CSP
**태스크**
- 저장 시 `bleach` 화이트리스트 Sanitize
- 렌더 시 `sandbox="allow-scripts"` iframe — **`allow-same-origin` 제외** (쿠키 탈취 방지)
- 전역 CSP 헤더 (`django-csp` 연동)
**산출물:** `core/security.py`, `templates/widgets/raw_code_iframe.html`
### 12주차 — 통합 테스트 · IIS 배포
**태스크**
- JSONB `GIN` 인덱스 성능 검증·DB 튜닝
- `web.config` 매핑, 정적 폴더 권한, 종속성 설치 원클릭 `.bat`
- 최종 QA 및 가맹 배포 Zip
**산출물:** QA 테스트 리포트, `deploy_iis_automatic.bat`, 배포 패키지
**Phase 4 프롬프트**
```
@seolaengcho_master_development_spec.md
@seolaengcho_detailed_development_schedule.md
11주차 태스크: bleach 화이트리스트로 저장 시 Sanitize하는
Django 필터 함수와, sandbox(allow-same-origin 제외) 격리 iframe
위젯 렌더링 HTML 템플릿을 작성해줘.
```
---
## 구현 시 파일 경로 가이드
| 영역 | 예상 경로 |
|------|-----------|
| 테넌트·미들웨어 | `tenants/` |
| 메뉴 API | `menus/` |
| 게시판 | `boards/` |
| 스마트 폼 | `forms/` |
| 보안·CSP | `core/security.py` |
| Design Token | `core/context_processors.py` |
| 슈퍼바이저 어드민 | `admin_backoffice/` |
| 빌더 JS | `static/js/builder-*.js` |
| 반응형 CSS | `static/css/builder-responsive.css` |
| 배포 | `deploy_iis_automatic.bat`, `web.config` |
---
## 주차 작업 시작 체크리스트 (AI용)
해당 주차 구현 전 확인:
- [ ] 이전 주차 산출물·의존 모듈이 완료되었는가
- [ ] `@seolaengcho_master_development_spec.md`의 관련 섹션과 충돌 없는가
- [ ] 산출물 파일 경로가 위 가이드와 일치하는가
- [ ] `tenant_id`·JSONB·Celery 금지 등 공통 제약을 준수하는가
- [ ] 해당 Phase 프롬프트 템플릿을 컨텍스트에 포함했는가