관리자 글쓰기 화면과 개발 환경 문서 정리

docs/deploy.md

@@ -9,7 +9,7 @@
 | 개발 | `npm run dev` | 로컬 테스트, 개발 서버 |
 | 프로덕션 | `npm run build` | NAS 배포, 운영 서버 |
 
-> `npm run dev`는 프로젝트 전용 실행 스크립트를 통해 Localhost, Local IP, Admin, Tailwind Viewer 링크만 요약 출력한다.
+> `npm run dev`는 프로젝트 전용 실행 스크립트를 통해 개발 서버, Admin, Tailwind Viewer 링크만 요약 출력한다.
 
 ---
 
@@ -50,6 +50,8 @@ npm run dev
 
 ```bash
 # Docker daemon 시작
+# Docker Desktop을 사용하면 Docker.app을 먼저 실행
+# Colima를 사용하면 아래 명령 실행
 colima start
 
 # 개발 DB 컨테이너 실행
@@ -71,6 +73,33 @@ docker exec sori-studio-db psql -U sori_studio -d sori_studio -c 'SELECT count(*
 - 관리자: http://127.0.0.1:43117/admin
 - Tailwind Viewer: http://127.0.0.1:43117/_tailwind/
 
+### 로컬 DB 확인 방법
+
+로컬 개발 DB는 PostgreSQL이며 호스트에서는 `127.0.0.1:43119`로 접근한다. 접속 정보는 Git에 포함하지 않는 `.env.development` 값을 사용한다.
+
+| 항목 | 값 |
+|------|----|
+| Host | `127.0.0.1` |
+| Port | `43119` |
+| Database | `.env.development`의 `POSTGRES_DB` |
+| User | `.env.development`의 `POSTGRES_USER` |
+| Password | `.env.development`의 `POSTGRES_PASSWORD` |
+
+터미널에서 바로 확인할 때는 컨테이너 내부 `psql`을 사용한다.
+
+```bash
+# DB 준비 상태 확인
+docker exec sori-studio-db pg_isready -U sori_studio -d sori_studio
+
+# 게시물 개수 확인
+docker exec sori-studio-db psql -U sori_studio -d sori_studio -c 'SELECT count(*) AS posts_count FROM posts;'
+
+# psql 콘솔 접속
+docker exec -it sori-studio-db psql -U sori_studio -d sori_studio
+```
+
+GUI로 확인할 때는 DBeaver, TablePlus, DataGrip, CloudBeaver 같은 PostgreSQL 클라이언트에서 위 접속 정보를 입력한다. phpMyAdmin은 MySQL/MariaDB용 도구라 이 프로젝트의 PostgreSQL DB 확인 용도로는 사용하지 않는다.
+
 ---
 
 ## UGREEN NAS Docker 배포
@@ -141,6 +170,76 @@ docker run -d -p 3000:3000 sori.studio:latest
 - 로컬 개발 Docker Compose 실행 시 `ENV_FILE=.env.development`와 `--env-file .env.development`를 함께 사용
 - 로컬 개발 DB 마이그레이션은 `npm run db:migrate:dev`로 실행
 
+### 개발/운영 DB 분리 검증 절차
+
+검증 전제는 실제 비밀번호나 전체 `DATABASE_URL`을 화면 공유, 문서, 커밋 메시지에 노출하지 않는 것이다. 확인할 때는 호스트, 포트, DB 이름, 파일명만 대조한다.
+
+1. `.env.development` 확인.
+
+```bash
+# 로컬 개발 DB는 호스트 기준 127.0.0.1:43119를 사용해야 한다.
+# DATABASE_URL 전체 값은 공유하지 않는다.
+rg -n "^(DATABASE_URL|POSTGRES_DB|POSTGRES_USER|DB_PORT)=" .env.development
+```
+
+기준:
+
+- `DATABASE_URL` 호스트가 `127.0.0.1`
+- `DATABASE_URL` 포트가 `43119`
+- `DB_PORT=43119`
+- 운영 NAS 호스트명, 운영 IP, 운영 DB 이름이 포함되지 않음
+
+2. `.env.production` 확인.
+
+```bash
+# 운영 파일은 Git에 올리지 않는 운영 전용 파일이다.
+# 값이 없으면 NAS 배포 전 작성해야 한다.
+test -f .env.production && rg -n "^(DATABASE_URL|POSTGRES_DB|POSTGRES_USER|APP_PORT)=" .env.production
+```
+
+기준:
+
+- NAS Docker 내부 실행 기준이면 `DATABASE_URL` 호스트가 `sori-studio-db`
+- NAS 외부 DB를 별도 인스턴스로 쓰는 경우에도 로컬 개발 DB(`127.0.0.1:43119`)를 가리키지 않음
+- `APP_PORT=43118`
+- `.env.development`와 DB 비밀번호, 관리자 비밀번호가 서로 다름
+
+3. 로컬 개발 DB 연결 확인.
+
+```bash
+docker exec sori-studio-db pg_isready -U sori_studio -d sori_studio
+docker exec sori-studio-db psql -U sori_studio -d sori_studio -c 'SELECT current_database(), current_user;'
+```
+
+기준:
+
+- `accepting connections` 표시
+- `current_database`가 로컬 개발 DB 이름
+- `current_user`가 로컬 개발 DB 계정
+
+4. 로컬 개발 서버 연결 확인.
+
+```bash
+npm run dev
+```
+
+기준:
+
+- 출력 주소가 `http://127.0.0.1:43117`
+- 관리자 API 요청에서 `127.0.0.1:43119` 연결 오류가 발생하지 않음
+
+5. 커밋 전 민감 정보 확인.
+
+```bash
+git status --short
+git diff -- . ':!package-lock.json'
+```
+
+기준:
+
+- `.env.development`, `.env.production`이 변경 목록에 포함되지 않음
+- 문서와 코드 diff에 실제 DB 비밀번호, 관리자 비밀번호, 운영 접속 주소가 포함되지 않음
+
 ## 업로드 파일
 
 - 관리자 글쓰기에서 업로드한 이미지는 `/uploads/posts/YYYY/MM/` URL로 제공한다.

docs/history.md

@@ -1,5 +1,13 @@
 # 의사결정 이력
 
+## 2026-05-07 v0.0.32
+
+### 관리자 글 작성 화면 구조 정리 결정
+
+관리자 글 작성/수정 화면은 별도 페이지 제목 영역을 제거하고, 글쓰기 폼 자체의 상단 도구막대와 본문 중심 레이아웃으로 정리한다. 기존 “새 글 작성” 제목은 현재 작업 맥락을 반복해 화면 높이만 차지했고, 실제 작성 흐름에서는 제목 입력과 본문 시작 위치를 아래로 밀어 Ghost 스타일 편집감과 멀어졌기 때문이다.
+
+대표 이미지는 설정 패널의 부가 항목이 아니라 글 제목 위의 본문 흐름에서 바로 추가하도록 둔다. 게시물 설정은 420px 우측 패널로 분리하고 토글할 수 있게 해, 설정을 열었을 때는 Figma 설정 패널 상태를 따르고 닫았을 때는 집중형 작성 화면을 유지한다.
+
 ## 2026-05-03 v0.0.31
 
 ### 글 미리보기 저장 방식 결정

docs/map.md

@@ -26,9 +26,9 @@
 
 | 파일 | 화면 위치 |
 |------|-----------|
-| components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, 대표 이미지/OG 이미지 선택, 로컬 자동 저장, 예약 발행 시각 입력, SEO 설정, 미리보기 요청 |
+| components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, Ghost 스타일 상단 바, 중앙 에디터, 우측 설정 패널, 대표 이미지/OG 이미지 선택, 로컬 자동 저장, 예약 발행 시각 입력, SEO 설정, 미리보기 요청 |
 | components/admin/AdminPageForm.vue | 관리자 페이지 작성/수정 폼, 대표 이미지 선택 |
-| components/admin/AdminBlockEditor.vue | 관리자 글 블록형 에디터, 이미지/갤러리/콜아웃/토글/임베드 블록, 한글 조합 입력 처리, 하단 빈 입력 블록 유지 |
+| components/admin/AdminBlockEditor.vue | 관리자 글 블록형 에디터, 이미지/갤러리/콜아웃/토글/임베드 블록, 한글 조합 입력 처리, 하단 빈 입력 블록 유지, 본문 placeholder 표시 |
 | components/admin/AdminTagForm.vue | 관리자 태그 생성/수정 폼 |
 
 ## 콘텐츠 컴포넌트
@@ -58,8 +58,8 @@
 | pages/admin/index.vue | 대시보드 |
 | pages/admin/login.vue | 관리자 로그인 |
 | pages/admin/posts/index.vue | 글 목록, 예약 발행 상태 표시 |
-| pages/admin/posts/new.vue | 글 작성, 저장 토스트 |
-| pages/admin/posts/[id].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 | 페이지 작성, 저장 토스트 |

docs/spec.md

@@ -287,6 +287,10 @@ components/content/
 - 빈 블록 placeholder는 현재 활성 블록 또는 첫 빈 블록에만 표시한다.
 - 에디터 마지막에는 클릭 가능한 빈 문단 블록을 항상 유지하며, 해당 블록이 비어 있으면 저장 콘텐츠에는 포함하지 않는다.
 - 제목은 별도 라벨 영역이 아니라 에디터 상단의 큰 제목 입력으로 표시한다.
+- 글 작성/수정 화면은 페이지 제목 헤더를 별도로 두지 않고, 폼 상단의 Ghost 스타일 도구막대에서 목록 이동, 상태, 미리보기, 저장, 설정 패널 토글을 제공한다.
+- 본문 에디터는 데스크톱에서 좌우 32px 패딩을 포함한 804px 중앙 컬럼으로 배치해 실제 입력 영역 최대 폭을 740px로 유지한다.
+- 게시물 설정은 데스크톱에서 420px 우측 패널로 표시하며, 도구막대 버튼으로 열고 닫을 수 있다.
+- 대표 이미지는 본문 제목 위의 에디터 흐름 안에서 추가, 변경, 삭제한다.
 - 제목 입력에서 Enter를 누르면 본문 첫 블록으로 포커스를 이동한다.
 - 새 글 작성처럼 본문이 비어 있는 경우에도 빈 문단 블록을 먼저 생성한다.
 - 글 작성/수정 중인 입력값은 브라우저 `localStorage`에 자동 저장한다.
@@ -418,6 +422,7 @@ APP_PORT=43118
 - `.env.development`와 `.env.production`의 DB 비밀번호와 관리자 비밀번호는 서로 다른 랜덤 값을 사용
 - 로컬 개발 `DATABASE_URL`은 호스트 기준 `127.0.0.1:43119`를 사용
 - NAS Docker 내부 `DATABASE_URL`은 서비스명 기준 `sori-studio-db:5432`를 사용
+- 로컬 DB 확인은 PostgreSQL 클라이언트에서 `127.0.0.1:43119`로 접속하거나 `docker exec sori-studio-db psql` 명령으로 확인한다.
 
 ### 포트 기준
 
@@ -432,6 +437,6 @@ APP_PORT=43118
 
 ## 버전 관리
 
-- 현재 버전: v0.0.13
+- 현재 버전: v0.0.34
 - 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가
 - 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정

docs/todo.md

@@ -46,8 +46,6 @@
 ## 데이터베이스
 
 - [ ] NAS 운영 DB 연결 설정 실제 값 작성
-- [ ] 개발 DB와 운영 DB 분리 검증 절차 작성
-- [ ] CloudBeaver PostgreSQL 연결 방식 확정
 - [ ] 이전에 원격에 올라간 관리자 비밀번호가 실제 사용 값이면 즉시 폐기 및 변경
 
 ## 배포

docs/update.md

@@ -1,5 +1,32 @@
 # 업데이트 이력
 
+## v0.0.34
+
+- 배포 문서에 개발/운영 DB 분리 검증 절차 추가.
+- 로컬 개발 DB 실행 안내에 Docker Desktop과 Colima 기준 병기.
+- 할 일에서 개발 DB와 운영 DB 분리 검증 절차 작성 항목 정리.
+- 기술 명세 현재 버전을 v0.0.34로 갱신.
+- 패키지 버전을 0.0.34로 갱신.
+
+## v0.0.33
+
+- 개발 서버 실행 링크 출력을 개발 서버, Admin, Tailwind Viewer 3개 주소로 정리.
+- 개발 서버 실행 링크가 Nuxt 출력 URL 대신 프로젝트 고정 포트 43117 기준으로 표시되도록 수정.
+- 배포 문서에 로컬 PostgreSQL DB 확인 방법 추가.
+- 할 일에서 CloudBeaver PostgreSQL 연결 방식 확정 항목 정리.
+- 기술 명세 현재 버전을 v0.0.33으로 갱신.
+- 패키지 버전을 0.0.33으로 갱신.
+
+## v0.0.32
+
+- 관리자 글 작성/수정 화면의 별도 제목 헤더 제거.
+- 관리자 글 작성/수정 폼을 Ghost 스타일 상단 바와 중앙 에디터 구조로 수정.
+- 대표 이미지 추가 영역을 에디터 본문 상단으로 이동.
+- 게시물 설정 패널을 420px 우측 패널과 토글 구조로 정리.
+- 관리자 글 에디터 컬럼을 좌우 32px 패딩 포함 804px로 보정해 실제 본문 폭 740px 유지.
+- 블록 에디터 첫 placeholder 문구를 간결하게 수정.
+- 패키지 버전을 0.0.32로 갱신.
+
 ## v0.0.31
 
 - 관리자 글 작성/수정 폼에 미리보기 버튼 추가.