관리자 글쓰기 전체 화면 레이아웃 보정

This commit is contained in:
2026-05-07 10:53:08 +09:00
parent 1ef50c111b
commit 9054c9625c
8 changed files with 124 additions and 87 deletions

View File

@@ -1,5 +1,13 @@
# 의사결정 이력
## 2026-05-07 v0.0.35
### 관리자 글쓰기 전체 화면 모드 보정 결정
관리자 글 작성/수정 화면에서는 좌측 관리자 네비게이션과 공통 내부 패딩을 숨기고, 글쓰기 폼이 브라우저 높이를 직접 사용하는 전체 화면 편집 모드로 동작하게 한다. Ghost와 WordPress류 편집 화면은 작성 중 관리자 메뉴보다 글 본문과 설정 패널의 관계가 더 중요하므로, 네비게이션이 보이면 작성 영역을 불필요하게 압축하고 시선을 분산시키기 때문이다.
글쓰기 화면의 1차 레이아웃은 상단 헤더 전체 폭이 아니라 에디터 작업 영역과 우측 설정 패널의 좌우 분할로 둔다. 설정 패널이 열리거나 닫힐 때 에디터 작업 영역의 상단 도구막대와 본문 폭이 함께 변해야 사용자가 현재 편집 가능한 폭 변화를 자연스럽게 인식할 수 있다.
## 2026-05-07 v0.0.32
### 관리자 글 작성 화면 구조 정리 결정

View File

@@ -8,7 +8,7 @@
|------|------|
| layouts/default.vue | 메인, 목록, 태그 페이지 |
| layouts/post.vue | 개별 게시물 |
| layouts/admin.vue | 관리자 전체 |
| layouts/admin.vue | 관리자 전체, 글 작성/수정 화면의 전체 화면 편집 모드 |
| layouts/page.vue | 고정 페이지 전체 화면 |
## 사이트 컴포넌트
@@ -26,7 +26,7 @@
| 파일 | 화면 위치 |
|------|-----------|
| components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, Ghost 스타일 상단 바, 중앙 에디터, 우측 설정 패널, 대표 이미지/OG 이미지 선택, 로컬 자동 저장, 예약 발행 시각 입력, SEO 설정, 미리보기 요청 |
| components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, Ghost 스타일 전체 화면 에디터, 좌우 분할 설정 패널, 설정 패널 전환 애니메이션, 대표 이미지/OG 이미지 선택, 로컬 자동 저장, 예약 발행 시각 입력, SEO 설정, 미리보기 요청 |
| components/admin/AdminPageForm.vue | 관리자 페이지 작성/수정 폼, 대표 이미지 선택 |
| components/admin/AdminBlockEditor.vue | 관리자 글 블록형 에디터, 이미지/갤러리/콜아웃/토글/임베드 블록, 한글 조합 입력 처리, 하단 빈 입력 블록 유지, 본문 placeholder 표시 |
| components/admin/AdminTagForm.vue | 관리자 태그 생성/수정 폼 |

View File

@@ -288,8 +288,10 @@ components/content/
- 에디터 마지막에는 클릭 가능한 빈 문단 블록을 항상 유지하며, 해당 블록이 비어 있으면 저장 콘텐츠에는 포함하지 않는다.
- 제목은 별도 라벨 영역이 아니라 에디터 상단의 큰 제목 입력으로 표시한다.
- 글 작성/수정 화면은 페이지 제목 헤더를 별도로 두지 않고, 폼 상단의 Ghost 스타일 도구막대에서 목록 이동, 상태, 미리보기, 저장, 설정 패널 토글을 제공한다.
- 글 작성/수정 화면은 관리자 사이드바 네비게이션을 숨기고, 관리자 공통 내부 패딩 없이 전체 화면 편집 모드로 표시한다.
- 글 작성/수정 폼은 에디터 작업 영역과 우측 설정 패널을 먼저 좌우로 나누고, 에디터 작업 영역 안에 상단 도구막대와 본문 스크롤 영역을 배치한다.
- 본문 에디터는 데스크톱에서 좌우 32px 패딩을 포함한 804px 중앙 컬럼으로 배치해 실제 입력 영역 최대 폭을 740px로 유지한다.
- 게시물 설정은 데스크톱에서 420px 우측 패널로 표시하며, 도구막대 버튼으로 열고 닫을 수 있다.
- 게시물 설정은 데스크톱에서 420px 우측 패널로 표시하며, 도구막대 버튼으로 열고 닫을 수 있고 너비 전환 애니메이션을 적용한다.
- 대표 이미지는 본문 제목 위의 에디터 흐름 안에서 추가, 변경, 삭제한다.
- 제목 입력에서 Enter를 누르면 본문 첫 블록으로 포커스를 이동한다.
- 새 글 작성처럼 본문이 비어 있는 경우에도 빈 문단 블록을 먼저 생성한다.
@@ -437,6 +439,6 @@ APP_PORT=43118
## 버전 관리
- 현재 버전: v0.0.34
- 현재 버전: v0.0.35
- 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가
- 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정

View File

@@ -1,5 +1,15 @@
# 업데이트 이력
## v0.0.35
- 관리자 공통 레이아웃의 기본 내부 패딩 제거.
- 관리자 글 작성/수정 화면에서 좌측 관리자 네비게이션을 숨기도록 수정.
- 관리자 글 작성/수정 폼을 에디터 작업 영역과 우측 설정 패널의 1차 좌우 분할 구조로 수정.
- 게시물 설정 패널 열림/닫힘 너비 전환 애니메이션 추가.
- 관리자 글 작성/수정 화면의 버튼, 입력, 미디어 선택 요소 hover/focus 효과 보강.
- 기술 명세 현재 버전을 v0.0.35로 갱신.
- 패키지 버전을 0.0.35로 갱신.
## v0.0.34
- 배포 문서에 개발/운영 DB 분리 검증 절차 추가.