드릴-다운 설명서 사양

AI 일러스트 설명서를 위한 스택 독립적 사양: 주제를 입력하고, 이미지 아무 곳이나 클릭하면 해당 위치로 드릴다운, 무한 반복 — 모든 페이지에서 그림 스타일을 그대로 유지.

이 사양을 유능한 코딩 LLM(또는 인간)에게 전달하세요. §12의 모든 동작이 통과되는 한, 기술 선택은 자유입니다.

---

1. 제품 형태

로컬에서 실행되는 단일 페이지 웹 앱. 사용자가 주제를 입력하면 일러스트 설명서 페이지가 반환되고, 이미지 어디든 클릭하면 해당 위치로 "드릴다운"하는 다음 페이지가 생성됩니다(확대, 단면, 내부 구조), 그림 스타일을 정확히 유지. 사용자는 무한히 깊이 드릴다운할 수 있으며, 이전 페이지로 돌아가거나 임의의 이전 페이지로 이동할 수 있습니다.

2. 핵심 루프

3. 상태 모델

전체 문서는 페이지의 순서 배열과 "현재 인덱스" 포인터로 구성됩니다. 각 페이지는 독립적인 객체입니다:

• id — 안정적인 콘텐츠 지문(§6 참고)
• imageUrl — 생성된 이미지 URL
• parentId — 이전 페이지의 id(첫 페이지는 null)
• parentClick — 상위 페이지에서의 클릭 좌표(첫 페이지는 null)
• initialQuery — 원본 주제 문자열(첫 페이지에만 설정, 그 외는 null)

사용자가 이미지를 클릭하면, 현재 페이지 이후의 모든 페이지를 잘라내고 새 페이지를 추가합니다. 이는 중간 페이지에서 클릭 시 새로운 분기가 생성되지만, UI는 항상 단일 선형 배열만 보게 됨을 의미합니다.

4. 클라이언트 책임 (의도적으로 최소화됨)

클라이언트는 오직

---

🌐 본 텍스트는 빠른 이해를 돕기 위한 요약 번역본입니다. 정확한 기술 정보 및 전체 코드는 GitHub 원문에서 확인하실 수 있습니다.