관리자 제목 입력 흐름 보정
This commit is contained in:
@@ -564,10 +564,14 @@ watch(editorBlocks, () => {
|
|||||||
isApplyingExternalValue.value = false
|
isApplyingExternalValue.value = false
|
||||||
})
|
})
|
||||||
}, { deep: true })
|
}, { deep: true })
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
focusFirstBlock: () => focusBlock(0)
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="admin-block-editor min-h-[32rem] bg-transparent py-4">
|
<div class="admin-block-editor min-h-[32rem] bg-transparent py-4 text-ink">
|
||||||
<div class="admin-block-editor__surface post-prose grid gap-1">
|
<div class="admin-block-editor__surface post-prose grid gap-1">
|
||||||
<div
|
<div
|
||||||
v-for="(block, index) in editorBlocks"
|
v-for="(block, index) in editorBlocks"
|
||||||
@@ -629,4 +633,8 @@ watch(editorBlocks, () => {
|
|||||||
color: var(--site-soft);
|
color: var(--site-soft);
|
||||||
content: attr(data-placeholder);
|
content: attr(data-placeholder);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.admin-block-editor__block {
|
||||||
|
color: #1f2328;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ const props = defineProps({
|
|||||||
const emit = defineEmits(['submit'])
|
const emit = defineEmits(['submit'])
|
||||||
|
|
||||||
const slugTouched = ref(Boolean(props.initialPost.slug))
|
const slugTouched = ref(Boolean(props.initialPost.slug))
|
||||||
|
const blockEditor = ref(null)
|
||||||
|
|
||||||
const form = reactive({
|
const form = reactive({
|
||||||
title: props.initialPost.title || '',
|
title: props.initialPost.title || '',
|
||||||
@@ -66,6 +67,14 @@ const parseTags = (value) => [...new Set(value
|
|||||||
.map((tag) => toSlug(tag))
|
.map((tag) => toSlug(tag))
|
||||||
.filter(Boolean))]
|
.filter(Boolean))]
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 제목 입력 후 본문 에디터로 이동
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
const focusContentEditor = () => {
|
||||||
|
blockEditor.value?.focusFirstBlock()
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 게시물 입력값 제출
|
* 게시물 입력값 제출
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
@@ -94,14 +103,15 @@ const submitPost = () => {
|
|||||||
<section class="admin-post-form__content grid gap-4">
|
<section class="admin-post-form__content grid gap-4">
|
||||||
<input
|
<input
|
||||||
v-model="form.title"
|
v-model="form.title"
|
||||||
class="admin-post-form__title-input border-0 bg-transparent px-0 py-2 text-5xl font-semibold leading-tight outline-none placeholder:text-soft"
|
class="admin-post-form__title-input border-0 bg-transparent px-0 py-2 text-5xl font-semibold leading-tight text-ink outline-none placeholder:text-soft"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="제목"
|
placeholder="제목"
|
||||||
required
|
required
|
||||||
|
@keydown.enter.prevent="focusContentEditor"
|
||||||
>
|
>
|
||||||
|
|
||||||
<div class="admin-post-form__field grid gap-2 text-sm">
|
<div class="admin-post-form__field grid gap-2 text-sm">
|
||||||
<AdminBlockEditor v-model="form.content" />
|
<AdminBlockEditor ref="blockEditor" v-model="form.content" />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,13 @@
|
|||||||
# 의사결정 이력
|
# 의사결정 이력
|
||||||
|
|
||||||
|
## 2026-05-01 v0.0.12
|
||||||
|
|
||||||
|
### 제목과 본문 입력 흐름 보정
|
||||||
|
|
||||||
|
관리자 글쓰기 화면에서 제목은 별도 데이터 필드로 유지하되, 키보드 흐름은 본문 에디터와 이어지도록 한다. 제목 입력 중 Enter를 누르면 폼 제출이 아니라 본문 첫 블록으로 포커스를 이동해 Ghost류 작성 화면처럼 하나의 글쓰기 흐름으로 느껴지게 한다.
|
||||||
|
|
||||||
|
관리자 에디터 본문 색상은 공개 화면용 `post-prose` 전역 색상 변수를 그대로 따르지 않고 관리자 화면의 `ink` 색상으로 고정한다. 시스템 다크모드 변수와 관리자 흰 배경이 섞이면 실제 입력 텍스트가 placeholder보다 흐리거나 읽기 어려워질 수 있기 때문이다.
|
||||||
|
|
||||||
## 2026-05-01 v0.0.11
|
## 2026-05-01 v0.0.11
|
||||||
|
|
||||||
### 블록 에디터 키보드 흐름 보정
|
### 블록 에디터 키보드 흐름 보정
|
||||||
|
|||||||
@@ -212,6 +212,8 @@ components/content/
|
|||||||
- 빈 문단에서 Enter를 누르면 다음 빈 문단 블록을 생성한다.
|
- 빈 문단에서 Enter를 누르면 다음 빈 문단 블록을 생성한다.
|
||||||
- 빈 블록 placeholder는 현재 활성 블록 또는 첫 빈 블록에만 표시한다.
|
- 빈 블록 placeholder는 현재 활성 블록 또는 첫 빈 블록에만 표시한다.
|
||||||
- 제목은 별도 라벨 영역이 아니라 에디터 상단의 큰 제목 입력으로 표시한다.
|
- 제목은 별도 라벨 영역이 아니라 에디터 상단의 큰 제목 입력으로 표시한다.
|
||||||
|
- 제목 입력에서 Enter를 누르면 본문 첫 블록으로 포커스를 이동한다.
|
||||||
|
- 관리자 글 에디터의 실제 입력 텍스트 색상은 placeholder보다 진하게 표시한다.
|
||||||
- 관리자 작성 화면과 공개 본문은 같은 마크다운 렌더링 기준을 사용한다.
|
- 관리자 작성 화면과 공개 본문은 같은 마크다운 렌더링 기준을 사용한다.
|
||||||
|
|
||||||
### 관리자 인증
|
### 관리자 인증
|
||||||
@@ -291,6 +293,6 @@ APP_PORT=43118
|
|||||||
|
|
||||||
## 버전 관리
|
## 버전 관리
|
||||||
|
|
||||||
- 현재 버전: v0.0.11
|
- 현재 버전: v0.0.12
|
||||||
- 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가
|
- 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가
|
||||||
- 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정
|
- 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정
|
||||||
|
|||||||
@@ -1,5 +1,11 @@
|
|||||||
# 업데이트 이력
|
# 업데이트 이력
|
||||||
|
|
||||||
|
## v0.0.12
|
||||||
|
|
||||||
|
- 관리자 글 제목 입력에서 Enter 입력 시 본문 첫 블록으로 이동하도록 수정.
|
||||||
|
- 관리자 블록 에디터 본문 글자 색상을 관리자 화면 기준으로 고정.
|
||||||
|
- 패키지 버전을 0.0.12로 갱신.
|
||||||
|
|
||||||
## v0.0.11
|
## v0.0.11
|
||||||
|
|
||||||
- 관리자 블록 에디터에서 빈 문단 Enter 입력 시 새 빈 블록이 생성되도록 수정.
|
- 관리자 블록 에디터에서 빈 문단 Enter 입력 시 새 빈 블록이 생성되도록 수정.
|
||||||
|
|||||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "sori.studio",
|
"name": "sori.studio",
|
||||||
"version": "0.0.11",
|
"version": "0.0.12",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "sori.studio",
|
"name": "sori.studio",
|
||||||
"version": "0.0.11",
|
"version": "0.0.12",
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nuxtjs/tailwindcss": "^6.14.0",
|
"@nuxtjs/tailwindcss": "^6.14.0",
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "sori.studio",
|
"name": "sori.studio",
|
||||||
"version": "0.0.11",
|
"version": "0.0.12",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
Reference in New Issue
Block a user