sori.studio/docs/map.md

파일-화면 매핑

현재 문서는 구현 예정 파일 기준 매핑이다. 실제 파일이 생성되면 경로와 화면 연결을 즉시 갱신한다.

레이아웃

파일	화면
layouts/default.vue	메인·목록·태그 — 3열 gap+중앙 1fr, site-main max-w-[720px], 모바일 슬라이드 메뉴
layouts/post.vue	개별 게시물 — default와 동일
layouts/admin.vue	관리자 전체, 글 작성/수정 화면의 전체 화면 편집 모드와 문서 스크롤 잠금
layouts/page.vue	고정 페이지 전체 화면

Composables

파일	용도
composables/formatPostDate.js	공개 화면 게시일 YYYY.MM.DD 포맷

Nuxt 모듈

파일	용도
modules/nuxt-ssr-paths-write.mjs	paths.mjs를 .nuxt에 기록해 Node가 #internal/nuxt/paths를 해석할 수 있게 함

사이트 컴포넌트

파일	화면 위치
components/auth/AuthPasswordVisibilityToggle.vue	로그인·회원가입 비밀번호 표시/숨김 토글(SVG, scoped 스타일·field-name으로 접근성 레이블 구분)
components/site/SiteHeader.vue	모든 공개 페이지 상단, 우측 사용자 아바타 드롭다운(로그인: 설정/로그아웃, 비로그인: Sign up/Sign in), lg~xl 헤더 여백·반응형 검색창 폭, /·검색 영역으로 SiteSearchModal 연동
components/site/SiteSearchModal.vue	Teleport·전체 화면 딤·Tags/Posts 결과·일치 구간 강조, 열림 시 html.site-search-open 스크롤 잠금
components/site/LeftSidebar.vue	왼쪽 사이드바, lg+는 sticky+고정 높이+내부 무스크롤바 스크롤, lg 미만은 고정 슬라이드 패널, 하단 푸터 px-4/sm:px-5
components/site/RightSidebar.vue	오른쪽 사이드바, lg+는 고정 열 높이·스티키, 모바일은 본문 아래 전체 너비, 하단 푸터 pr-3
components/site/MainColumn.vue	메인 화면 중앙, lg:max-w-[720px]로 본문 상한
components/site/PostCard.vue	목록의 게시물 카드, 대표 이미지 썸네일, 카드 hover 인터랙션
components/site/TagHeader.vue	태그 페이지 헤더
components/comments/PostComments.vue	게시물 상세 #comments 영역, 회원 댓글/답글(1단) 작성 및 목록 표시

관리자 컴포넌트

파일	화면 위치
components/admin/AdminPostForm.vue	관리자 글 작성/수정 폼, Ghost 스타일 전체 화면 에디터, 좌우 분할 설정 패널, 설정 패널 전환 애니메이션, Post URL 보기 액션, 하단 삭제 액션, 대표 이미지 hover 액션과 업로드/미디어 선택 확정, 배지형 태그 입력, 로컬 자동 저장, 예약 발행 시각 입력, SEO 설정, 미리보기 요청
components/admin/AdminPageForm.vue	관리자 페이지 작성/수정 폼, 대표 이미지 선택
components/admin/AdminBlockEditor.vue	관리자 글 블록형 에디터, 이미지/갤러리/콜아웃/토글/임베드 블록, 한글 조합 입력 처리, Shift+Enter 줄바꿈, 코드 블록 단축 변환, AFFiNE 참고 세로 막대형 블록 핸들 선택/삭제/드래그 이동과 삽입선 표시, 하단 빈 입력 블록 유지, 본문 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/ProseBookmark.vue	본문 북마크 카드(썸네일·도메인·외부 링크)
components/content/ProseSignup.vue	본문 회원가입·뉴스레터 CTA 카드
components/content/ProseHeaderCard.vue	헤더 카드
components/content/ProseEmbed.vue	YouTube·Twitter/X iframe 임베드, 기타 외부 링크

관리자 페이지

파일	화면
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/admin/members/index.vue	관리자 멤버 목록(닉네임, 이메일, 최근 접속, IP, 댓글 수, 활동 상태)

공개 페이지

파일	화면
pages/index.vue	홈, 중앙 Hero/Featured/Latest 섹션의 내부 컨테이너 보더 정렬과 리스트형 latest 카드, Featured는 모바일 터치 가로 스크롤·스냅과 끝에서 화살표 비활성
pages/posts/index.vue	게시물 전체 목록
pages/posts/[slug].vue	/post/:slug 리다이렉트
pages/post/[slug].vue	블로그 글 상세, 게시물 SEO/OG 메타 출력, 공유 모달(X/Bluesky/Facebook/LinkedIn/Email/링크복사), 회원 댓글 섹션
pages/tags/index.vue	태그 전체 목록, 중앙 히어로와 3열 태그 카드, 좌측 컬러 보더/hover 오버레이
pages/tags/[slug].vue	/tag/:slug 리다이렉트
pages/tag/[slug].vue	태그별 글 목록, 상단 태그 헤더 + 리스트형 게시물 카드
pages/pages/[slug].vue	고정 페이지 상세
pages/signup.vue	회원가입 3단계, 2단계 입력에 auth-form-input, 패널 auth-signup__panel(보더·배경)
pages/signin.vue	로그인(다크 폼, [color-scheme:dark], 입력 auth-form-input), 비밀번호 SVG 토글, 회원 로그인 API 연동
pages/settings/index.vue	회원 설정(썸네일 URL, 닉네임 변경/중복확인, 비밀번호 변경, 회원 탈퇴)

서버 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/search.get.js	통합 검색 API(q 쿼리)
server/api/site-settings.get.js	공개 사이트 설정 API
server/api/navigation.get.js	공개 네비게이션 API
server/api/auth/signup.post.js	회원 가입 API
server/api/auth/login.post.js	회원 로그인 API
server/api/auth/me.get.js	회원 세션 조회 API
server/api/auth/logout.post.js	회원 로그아웃 API
server/api/auth/profile.get.js	회원 프로필 조회 API
server/api/auth/profile.put.js	회원 프로필 수정 API
server/api/auth/avatar.post.js	회원 썸네일 업로드 API(WebP 변환, 최소 해상도 검증, 중앙 1:1 강제 크롭, 품질 보정)
server/api/auth/avatar.delete.js	회원 썸네일 삭제 API
server/api/auth/check-username.get.js	닉네임 중복 확인 API
server/api/auth/password.put.js	회원 비밀번호 변경 API
server/api/auth/account.delete.js	회원 탈퇴 API
server/api/posts/[slug]/comments.get.js	게시물 댓글 목록 조회 API
server/api/posts/[slug]/comments.post.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/routes/admin/api/members.get.js	관리자 멤버 목록 API
server/utils/content-schema.js	Zod 콘텐츠 스키마
server/utils/sample-content.js	샘플 콘텐츠 저장소
server/utils/admin-auth.js	관리자 세션 쿠키 인증 유틸리티
server/utils/member-auth.js	회원 세션 쿠키 인증 유틸리티
server/utils/member-avatar.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	콘텐츠 조회 저장소
server/repositories/member-repository.js	회원 조회/생성 저장소
server/repositories/comment-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 이미지 필드 추가
db/migrations/010_add_members_and_comments.sql	회원/댓글 테이블 추가
db/migrations/011_add_member_profile_and_activity.sql	회원 아바타/최근 활동 컬럼 추가 및 닉네임 유니크 인덱스 추가

설정/배포

파일	기능
package.json	Nuxt 실행 스크립트와 의존성
nuxt.config.js	Nuxt 앱 설정, tailwindcss.cssPath로 main.css 단일 엔트리, Tailwind 모듈, 관리자 QA를 위한 개발 도구 비활성화, 회원 썸네일 최소/최대 해상도·품질 런타임 설정
tailwind.config.js	Tailwind 테마 설정
assets/css/main.css	전역 스타일, #fcfcfc 단일 배경 기준, 좌측 사이드바/그리드 전환 애니메이션, 네비게이션 세로 바 hover 효과
composables/useMenuState.js	좌측 메뉴 열림 상태·closeMenu(모바일 백드롭 등)
composables/useThemeMode.js	사용자 화면 라이트/다크 테마 상태 관리
middleware/admin-auth.global.js	관리자 페이지 접근 인증
scripts/dev-server.js	로컬 개발 서버 링크 요약 출력
scripts/migrate-development-db.js	로컬 개발 DB 마이그레이션 실행
.env.example	환경 변수 예시
Dockerfile	NAS 운영 이미지 빌드
docker-compose.yml	NAS 컨테이너 실행 초안