169 lines
9.5 KiB
Markdown
169 lines
9.5 KiB
Markdown
# 파일-화면 매핑
|
|
|
|
> 현재 문서는 구현 예정 파일 기준 매핑이다. 실제 파일이 생성되면 경로와 화면 연결을 즉시 갱신한다.
|
|
|
|
## 레이아웃
|
|
|
|
| 파일 | 화면 |
|
|
|------|------|
|
|
| layouts/default.vue | 메인, 목록, 태그 페이지 |
|
|
| layouts/post.vue | 개별 게시물 |
|
|
| layouts/admin.vue | 관리자 전체, 글 작성/수정 화면의 전체 화면 편집 모드 |
|
|
| layouts/page.vue | 고정 페이지 전체 화면 |
|
|
|
|
## 사이트 컴포넌트
|
|
|
|
| 파일 | 화면 위치 |
|
|
|------|-----------|
|
|
| components/site/SiteHeader.vue | 모든 공개 페이지 상단 |
|
|
| components/site/LeftSidebar.vue | 메인 화면 왼쪽, 네비게이션과 태그 목록 |
|
|
| components/site/RightSidebar.vue | 메인 화면 오른쪽, 사이트 설정 표시 |
|
|
| components/site/MainColumn.vue | 메인 화면 중앙 |
|
|
| components/site/PostCard.vue | 목록의 게시물 카드, 대표 이미지 썸네일 |
|
|
| components/site/TagHeader.vue | 태그 페이지 헤더 |
|
|
|
|
## 관리자 컴포넌트
|
|
|
|
| 파일 | 화면 위치 |
|
|
|------|-----------|
|
|
| components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, Ghost 스타일 전체 화면 에디터, 좌우 분할 설정 패널, 설정 패널 전환 애니메이션, Post URL 보기 액션, 하단 삭제 액션, 대표 이미지/OG 이미지 선택, 로컬 자동 저장, 예약 발행 시각 입력, SEO 설정, 미리보기 요청 |
|
|
| components/admin/AdminPageForm.vue | 관리자 페이지 작성/수정 폼, 대표 이미지 선택 |
|
|
| components/admin/AdminBlockEditor.vue | 관리자 글 블록형 에디터, 이미지/갤러리/콜아웃/토글/임베드 블록, 한글 조합 입력 처리, Shift+Enter 줄바꿈, 코드 블록 단축 변환, 블록 핸들 선택/삭제/드래그 이동, 하단 빈 입력 블록 유지, 본문 placeholder 표시 |
|
|
| components/admin/AdminTagForm.vue | 관리자 태그 생성/수정 폼 |
|
|
|
|
## 콘텐츠 컴포넌트
|
|
|
|
| 파일 | 화면 위치 |
|
|
|------|-----------|
|
|
| components/content/ContentRenderer.vue | 게시물/페이지 본문 |
|
|
| components/content/ContentMarkdownRenderer.vue | 마크다운 문자열 기반 본문 렌더링, 확장 블록 파싱 |
|
|
| components/content/ProseHeading.vue | h1~h6 제목 |
|
|
| components/content/ProseImage.vue | 본문 내 이미지 |
|
|
| components/content/ProseList.vue | 목록 |
|
|
| components/content/ProseBlockquote.vue | 인용구 |
|
|
| components/content/ProseButton.vue | 버튼 |
|
|
| components/content/ProseCallout.vue | Callout 카드 |
|
|
| components/content/ProseToggle.vue | Toggle 카드 |
|
|
| components/content/ProseVideo.vue | 비디오 |
|
|
| components/content/ProseAudio.vue | 오디오 |
|
|
| components/content/ProseFile.vue | 파일 |
|
|
| components/content/ProseProduct.vue | 상품 카드 |
|
|
| components/content/ProseHeaderCard.vue | 헤더 카드 |
|
|
| components/content/ProseEmbed.vue | YouTube, Twitter 임베드 |
|
|
|
|
## 관리자 페이지
|
|
|
|
| 파일 | 화면 |
|
|
|------|------|
|
|
| pages/admin/index.vue | 대시보드 |
|
|
| pages/admin/login.vue | 관리자 로그인 |
|
|
| pages/admin/posts/index.vue | 글 목록, 예약 발행 상태 표시 |
|
|
| pages/admin/posts/new.vue | 글 작성, Ghost 스타일 작성 폼, 저장 토스트 |
|
|
| pages/admin/posts/[id].vue | 글 수정, Ghost 스타일 작성 폼, 저장/삭제 토스트 |
|
|
| pages/admin/posts/preview.vue | 글 미리보기 |
|
|
| pages/admin/pages/index.vue | 페이지 목록 |
|
|
| pages/admin/pages/new.vue | 페이지 작성, 저장 토스트 |
|
|
| pages/admin/pages/[id].vue | 페이지 수정, 저장/삭제 토스트 |
|
|
| pages/admin/media/index.vue | 미디어 관리, 폴더 트리, 복수 선택, 드래그 이동 |
|
|
| pages/admin/navigation/index.vue | 메뉴/네비게이션 관리 |
|
|
| pages/admin/tags/index.vue | 태그 관리 |
|
|
| pages/admin/tags/new.vue | 태그 생성 |
|
|
| pages/admin/tags/[id].vue | 태그 수정 |
|
|
| pages/admin/settings/index.vue | 사이트 설정 |
|
|
|
|
## 공개 페이지
|
|
|
|
| 파일 | 화면 |
|
|
|------|------|
|
|
| pages/index.vue | 홈 |
|
|
| pages/posts/index.vue | 게시물 전체 목록 |
|
|
| pages/posts/[slug].vue | `/post/:slug` 리다이렉트 |
|
|
| pages/post/[slug].vue | 블로그 글 상세, 게시물 SEO/OG 메타 출력 |
|
|
| pages/tags/index.vue | 태그 전체 목록 |
|
|
| pages/tags/[slug].vue | `/tag/:slug` 리다이렉트 |
|
|
| pages/tag/[slug].vue | 태그별 글 목록 |
|
|
| pages/pages/[slug].vue | 고정 페이지 상세 |
|
|
|
|
## 서버 API
|
|
|
|
| 파일 | 기능 |
|
|
|------|------|
|
|
| server/api/posts.get.js | 게시물 목록 샘플 API |
|
|
| server/api/posts/[slug].get.js | 게시물 상세 샘플 API |
|
|
| server/api/pages.get.js | 고정 페이지 목록 샘플 API |
|
|
| server/api/pages/[slug].get.js | 고정 페이지 상세 샘플 API |
|
|
| server/api/tags.get.js | 태그 목록 샘플 API |
|
|
| server/api/site-settings.get.js | 공개 사이트 설정 API |
|
|
| server/api/navigation.get.js | 공개 네비게이션 API |
|
|
| server/routes/admin/api/auth/login.post.js | 관리자 로그인 API |
|
|
| server/routes/admin/api/auth/logout.post.js | 관리자 로그아웃 API |
|
|
| server/routes/admin/api/auth/me.get.js | 관리자 세션 조회 API |
|
|
| server/routes/admin/api/posts.get.js | 관리자 게시물 목록 API |
|
|
| server/routes/admin/api/posts.post.js | 관리자 게시물 생성 API |
|
|
| server/routes/admin/api/posts/[id].get.js | 관리자 게시물 상세 API |
|
|
| server/routes/admin/api/posts/[id].put.js | 관리자 게시물 수정 API |
|
|
| server/routes/admin/api/posts/[id].delete.js | 관리자 게시물 삭제 API |
|
|
| server/routes/admin/api/pages.get.js | 관리자 고정 페이지 목록 API |
|
|
| server/routes/admin/api/pages.post.js | 관리자 고정 페이지 생성 API |
|
|
| server/routes/admin/api/pages/[id].get.js | 관리자 고정 페이지 상세 API |
|
|
| server/routes/admin/api/pages/[id].put.js | 관리자 고정 페이지 수정 API |
|
|
| server/routes/admin/api/pages/[id].delete.js | 관리자 고정 페이지 삭제 API |
|
|
| server/routes/admin/api/media.get.js | 관리자 미디어 목록 API |
|
|
| server/routes/admin/api/media.put.js | 관리자 미디어 파일명 변경 및 단일/복수 폴더 변경 API |
|
|
| server/routes/admin/api/media.delete.js | 관리자 미디어 삭제 API |
|
|
| server/routes/admin/api/media-folders.get.js | 관리자 미디어 폴더 목록 API |
|
|
| server/routes/admin/api/media-folders.post.js | 관리자 미디어 폴더 생성 API |
|
|
| server/routes/admin/api/uploads.post.js | 관리자 이미지 업로드 API |
|
|
| server/routes/admin/api/tags.get.js | 관리자 태그 목록 API |
|
|
| server/routes/admin/api/tags.post.js | 관리자 태그 생성 API |
|
|
| server/routes/admin/api/tags/[id].get.js | 관리자 태그 상세 API |
|
|
| server/routes/admin/api/tags/[id].put.js | 관리자 태그 수정 API |
|
|
| server/routes/admin/api/tags/[id].delete.js | 관리자 태그 삭제 API |
|
|
| server/routes/admin/api/settings.get.js | 관리자 사이트 설정 조회 API |
|
|
| server/routes/admin/api/settings.put.js | 관리자 사이트 설정 수정 API |
|
|
| server/routes/admin/api/navigation.get.js | 관리자 네비게이션 목록 API |
|
|
| server/routes/admin/api/navigation.put.js | 관리자 네비게이션 일괄 저장 API |
|
|
| server/utils/content-schema.js | Zod 콘텐츠 스키마 |
|
|
| server/utils/sample-content.js | 샘플 콘텐츠 저장소 |
|
|
| server/utils/admin-auth.js | 관리자 세션 쿠키 인증 유틸리티 |
|
|
| server/utils/admin-post-input.js | 관리자 게시물 입력값 검증 스키마 |
|
|
| server/utils/admin-page-input.js | 관리자 고정 페이지 입력값 검증 스키마 |
|
|
| server/utils/admin-site-settings-input.js | 관리자 사이트 설정 입력값 검증 스키마 |
|
|
| server/utils/admin-navigation-input.js | 관리자 네비게이션 입력값 검증 스키마 |
|
|
| server/utils/admin-tag-input.js | 관리자 태그 입력값 검증 스키마 |
|
|
| server/utils/site-settings.js | 사이트 설정 기본값 유틸리티 |
|
|
| server/utils/navigation-items.js | 네비게이션 기본값과 그룹 유틸리티 |
|
|
| server/utils/media-library.js | 업로드 미디어 파일과 폴더 메타데이터 관리 유틸리티 |
|
|
| server/repositories/postgres-client.js | PostgreSQL 클라이언트 |
|
|
| server/repositories/content-repository.js | 콘텐츠 조회 저장소 |
|
|
|
|
## 데이터베이스
|
|
|
|
| 파일 | 기능 |
|
|
|------|------|
|
|
| db/migrations/001_initial_schema.sql | PostgreSQL 초기 테이블 스키마 |
|
|
| db/migrations/002_seed_development.sql | 개발용 샘플 데이터 |
|
|
| db/migrations/003_add_tag_display_fields.sql | 태그 표시 순서와 색상 필드 추가 |
|
|
| db/migrations/004_add_site_settings.sql | 사이트 설정 테이블 추가 |
|
|
| db/migrations/005_add_navigation_items.sql | 네비게이션 항목 테이블 추가 |
|
|
| db/migrations/006_add_media_metadata.sql | 미디어 메타데이터 테이블 추가 |
|
|
| db/migrations/007_add_media_folders.sql | 미디어 폴더 테이블 추가 |
|
|
| db/migrations/008_add_post_seo_fields.sql | 게시물 SEO 필드 추가 |
|
|
| db/migrations/009_add_post_og_image.sql | 게시물 OG 이미지 필드 추가 |
|
|
|
|
## 설정/배포
|
|
|
|
| 파일 | 기능 |
|
|
|------|------|
|
|
| package.json | Nuxt 실행 스크립트와 의존성 |
|
|
| nuxt.config.js | Nuxt 앱 설정 |
|
|
| tailwind.config.js | Tailwind 테마 설정 |
|
|
| assets/css/main.css | 전역 스타일 |
|
|
| composables/useMenuState.js | 좌측 메뉴 열림 상태 관리 |
|
|
| middleware/admin-auth.global.js | 관리자 페이지 접근 인증 |
|
|
| scripts/dev-server.js | 로컬 개발 서버 링크 요약 출력 |
|
|
| scripts/migrate-development-db.js | 로컬 개발 DB 마이그레이션 실행 |
|
|
| .env.example | 환경 변수 예시 |
|
|
| Dockerfile | NAS 운영 이미지 빌드 |
|
|
| docker-compose.yml | NAS 컨테이너 실행 초안 |
|