Forest Ventures Blog System

파일 간 데이터 흐름 및 아키텍처 도식

공개 페이지
관리자 페이지
데이터 레이어
추후 연결 (Supabase)
|
읽기
쓰기
읽기+쓰기

Public (공개 페이지)

Page
블로그 목록
blog/index.html
  • • 카테고리 필터 버튼 ← Store 읽기
  • • 게시글 카드 그리드
  • • 검색 필터링
  • • 페이지네이션
Page
게시글 상세
blog/post.html
  • • 히어로 이미지 + 본문
  • • 태그, 공유 버튼
  • • 관련 게시글
  • • CTA 섹션
카드 클릭 시 상세 페이지로 이동

Data Layer (데이터)

Module
Store (공유 데이터)
js/store.js
API 메서드:
getCategories() addCategory() updateCategory() deleteCategory() reorderCategories() getCategoryBySlug()
저장소: localStorage
Storage
localStorage
fv_categories → JSON Array
[{ id, slug, name, color, order }]
Phase 2
Supabase
• PostgreSQL (categories, posts 테이블)
• Auth (관리자 인증)
• Storage (이미지 업로드)
→ store.js 내부만 교체하면 전환 완료

Admin (관리자 페이지)

Page
대시보드
admin/dashboard.html
  • • 통계 카드 (글 수, 조회수)
  • • 게시글 테이블 (CRUD)
  • • 상태 필터, 검색, 벌크 삭제
Page
글 에디터
admin/editor.html
  • • WYSIWYG 에디터 (Tiptap)
  • • 카테고리 드롭다운 ← Store 읽기
  • • 대표 이미지, 태그, SEO 미리보기
  • • 30초 자동저장
Page
카테고리 관리
admin/categories.html
  • • 추가/수정/삭제 ↔ Store 읽기+쓰기
  • • 컬러 팔레트 지정
  • • 드래그앤드롭 순서 변경
Todo
로그인
admin/login.html
아직 미구현

데이터 흐름

js/store.js 카테고리 CRUD localStorage 관리 blog/index.html 필터 버튼 렌더링 blog/post.html 카테고리 뱃지 표시 admin/editor.html 카테고리 드롭다운 admin/categories.html 추가 / 수정 / 삭제 / 정렬 admin/dashboard.html 글 목록 테이블 getCategories() getCategoryBySlug() getCategories() CRUD localStorage fv_categories "새 글" 클릭 카드 클릭

프로젝트 파일 구조

forest-ventures/
blog/
index.html 블로그 목록 · 필터 · 검색
post.html 게시글 상세 · 본문 · 관련글
admin/
dashboard.html 통계 · 글 관리 테이블
editor.html WYSIWYG 에디터 · 메타데이터
categories.html 카테고리 CRUD · 순서 관리
login.html 미구현
js/
store.js 공유 데이터 레이어 · localStorage ↔ Supabase 전환 지점

Supabase 전환 시 변경 범위

변경 파일 1개: js/store.js 내부의 localStorage 호출을 Supabase JS SDK 호출로 교체

추가 파일 1개: admin/login.html 에 Supabase Auth 연결

나머지 모든 페이지: 변경 불필요 (Store API가 동일하게 유지되므로)