Home

📌 노션 클로닝 프로젝트 — 기능 단위 할 일 목록

1. 프로젝트 공통 & 인프라

• 프로젝트 초기 세팅
  • HTML/CSS 기본 레이아웃, src 디렉토리 구조 세팅
  • ESLint, Prettier 설정 (선택)
• API 모듈
  • API 호출 공통 래퍼 (fetchJSON)
  • getRootDocuments, getDocument, createDocument, updateDocument, deleteDocument 구현
  • 모든 요청에 x-username header 추가

---

2. 라우팅 (SPA)

• History API 라우터
  • pushState, popstate 이벤트 처리
  • URL → 화면 전환(/, /documents/:id)
• 라우팅 연동
  • 트리 클릭 → URL 변경
  • URL 직접 입력 → 문서 로드

---

3. Document Tree (좌측)

• 문서 트리 렌더링
  • /documents API로 Root Documents 불러오기
  • 트리 구조 재귀 렌더링
• 문서 선택
  • 트리에서 문서 클릭 → 해당 문서 내용 오른쪽 편집기에 표시
  • 현재 선택 문서 하이라이트 처리
• 하위 문서 생성
  • 각 문서 옆 ➕ 버튼
  • 클릭 시 createDocument → 트리 갱신 & 새 문서 선택
• 문서 삭제
  • 삭제 버튼/메뉴
  • deleteDocument 호출 후 트리 갱신
  • 삭제한 문서가 현재 선택 상태면 라우팅 보정

---

4. 편집기 (우측)

• 문서 로드
  • /documents/{id} API로 특정 문서 불러오기
  • 제목 + 본문 표시
• 문서 수정 & 자동 저장
  • 입력 시 디바운스 후 updateDocument 호출
  • 저장 중 상태 표시 / 실패 시 재시도
• 하위 문서 링크
  • 현재 문서의 하위 문서 목록을 편집기 하단에 표시
  • 클릭 → 해당 문서로 이동

---

5. 보너스 기능 (선택 구현)

• 리치 에디터
  • textarea → contentEditable div 교체
  • Bold/Italic 단축키 적용
• 문서명 자동 링크
  • 편집 중 다른 Document name 감지 → 자동 링크 변환
• 문서 블록 삽입
  • 하위 문서 내용을 카드/링크 형태로 본문에 삽입

---

6. UX 개선 & 기타

• 에러/로딩 처리
  • API 로딩 시 스켈레톤 표시
  • 오류 발생 시 사용자에게 알림(토스트/모달)
• 빈 상태 UI
  • 문서 없음 → 안내 메시지
  • 권한/헤더 누락 → 안내 메시지
• 배포 & README
  • GitHub Pages/Vercel 배포
  • 실행 방법, API 설명, 기능 목록 문서화