diff --git a/components/admin/AdminPostForm.vue b/components/admin/AdminPostForm.vue index 44b804c..ae7b1de 100644 --- a/components/admin/AdminPostForm.vue +++ b/components/admin/AdminPostForm.vue @@ -47,6 +47,7 @@ const isRestoringAutosave = ref(false) const isSettingsOpen = ref(true) const tagInput = ref('') const activeMediaPickerTab = ref('upload') +const selectedMediaPickerUrl = ref('') /** * ISO 날짜를 datetime-local 입력값으로 변환 @@ -337,6 +338,7 @@ const fetchMediaItems = async () => { const openMediaPicker = async (target = 'featuredImage') => { mediaPickerTarget.value = target activeMediaPickerTab.value = 'upload' + selectedMediaPickerUrl.value = form[target] || '' isMediaPickerOpen.value = true await fetchMediaItems() } @@ -350,12 +352,24 @@ const closeMediaPicker = () => { } /** - * 대표 이미지 선택 + * 대표 이미지 선택 상태 변경 * @param {Object} item - 미디어 항목 * @returns {void} */ const selectPickedImage = (item) => { - form[mediaPickerTarget.value] = item.url + selectedMediaPickerUrl.value = item.url +} + +/** + * 선택한 대표 이미지 적용 + * @returns {void} + */ +const applyPickedImage = () => { + if (!selectedMediaPickerUrl.value) { + return + } + + form[mediaPickerTarget.value] = selectedMediaPickerUrl.value closeMediaPicker() } @@ -425,9 +439,9 @@ const uploadFeaturedImageFile = async (file) => { method: 'POST', body: formData }) - form.featuredImage = result.files?.[0]?.url || '' + selectedMediaPickerUrl.value = result.files?.[0]?.url || '' await fetchMediaItems() - closeMediaPicker() + activeMediaPickerTab.value = 'library' } finally { isUploadingFeaturedImage.value = false } @@ -586,17 +600,13 @@ defineExpose({
-
+
-
- - -
@@ -874,12 +884,19 @@ defineExpose({

@@ -889,11 +906,12 @@ defineExpose({

diff --git a/docs/history.md b/docs/history.md index fd55ad7..c1889be 100644 --- a/docs/history.md +++ b/docs/history.md @@ -1,5 +1,13 @@ # 의사결정 이력 +## 2026-05-07 v0.0.43 + +### 대표 이미지 액션과 선택 확정 흐름 결정 + +대표 이미지가 이미 설정된 상태의 변경과 삭제 액션은 이미지 아래 별도 영역이 아니라 이미지 hover 오버레이로 표시한다. 실제 공개 화면에서 보일 이미지 비율과 편집용 버튼 영역이 섞이면 작성자가 레이아웃을 잘못 인식할 수 있기 때문이다. + +대표 이미지 선택 모달에서는 미디어 클릭 즉시 값을 바꾸지 않고 선택 상태만 표시한 뒤, 하단 대표 이미지로 적용 버튼으로 확정한다. 변경 작업은 실수했을 때 되돌리기보다 확정 전 확인이 더 안전한 흐름이기 때문이다. + ## 2026-05-07 v0.0.42 ### 태그 입력과 대표 이미지 선택 흐름 결정 diff --git a/docs/map.md b/docs/map.md index d23f788..2c07da1 100644 --- a/docs/map.md +++ b/docs/map.md @@ -26,7 +26,7 @@ | 파일 | 화면 위치 | |------|-----------| -| components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, Ghost 스타일 전체 화면 에디터, 좌우 분할 설정 패널, 설정 패널 전환 애니메이션, Post URL 보기 액션, 하단 삭제 액션, 대표 이미지 업로드/미디어 선택, 배지형 태그 입력, 로컬 자동 저장, 예약 발행 시각 입력, SEO 설정, 미리보기 요청 | +| 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 | 관리자 태그 생성/수정 폼 | diff --git a/docs/spec.md b/docs/spec.md index f60eedd..54731ad 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -306,6 +306,7 @@ components/content/ - 공개 가능한 글의 보기 액션은 게시물 설정 패널의 Post URL 라벨 오른쪽에 표시한다. - 글 삭제 액션은 게시물 설정 패널 하단의 빨간 outline 버튼으로 제공한다. - 대표 이미지는 본문 제목 위의 에디터 흐름 안에서 추가, 변경, 삭제한다. +- 대표 이미지가 설정된 상태의 변경/삭제 액션은 실제 이미지 레이아웃을 바꾸지 않도록 이미지 hover 또는 focus 오버레이로 표시한다. - 대표 이미지 선택 모달은 이미지 업로드 탭과 미디어 라이브러리 탭을 제공한다. - 제목 입력에서 Enter를 누르면 본문 첫 블록으로 포커스를 이동한다. - 새 글 작성처럼 본문이 비어 있는 경우에도 빈 문단 블록을 먼저 생성한다. @@ -322,7 +323,8 @@ components/content/ - 관리자 작성 화면과 공개 본문은 같은 마크다운 렌더링 기준을 사용한다. - 태그 입력은 배지형 입력으로 제공하며 Enter 또는 쉼표 입력 시 태그를 추가하고, 배지의 x 버튼으로 삭제한다. - 대표 이미지는 URL 직접 입력이 아니라 미디어 선택 또는 이미지 업로드 탭으로 설정한다. -- 대표 이미지가 설정되면 관리자 글 폼에 썸네일과 삭제/변경 액션을 표시한다. +- 대표 이미지 선택 모달에서 미디어를 클릭하면 선택 상태만 표시하고, 하단 대표 이미지로 적용 버튼을 눌렀을 때 글 폼에 반영한다. +- 대표 이미지가 설정되면 관리자 글 폼에 썸네일과 hover 오버레이 삭제/변경 액션을 표시한다. - 글 SEO 설정은 SEO 제목, SEO 설명, 검색엔진 노출 제외 여부를 저장한다. - Canonical URL은 별도 입력을 받지 않고 기본 글 주소를 사용한다. - 공개 게시물 상세 화면은 SEO 제목이 없으면 글 제목, SEO 설명이 없으면 요약을 메타 태그 기본값으로 사용한다. @@ -454,6 +456,6 @@ APP_PORT=43118 ## 버전 관리 -- 현재 버전: v0.0.42 +- 현재 버전: v0.0.43 - 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가 - 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정 diff --git a/docs/update.md b/docs/update.md index a937c39..4558c3a 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,13 @@ # 업데이트 이력 +## v0.0.43 + +- 대표 이미지가 설정된 상태의 변경/삭제 액션을 이미지 아래 버튼 영역이 아니라 이미지 hover 오버레이로 수정. +- 대표 이미지 선택 모달에서 미디어 클릭 시 즉시 적용하지 않고 선택 상태만 표시하도록 수정. +- 대표 이미지 선택 모달 하단의 대표 이미지로 적용 버튼으로 선택 이미지를 확정하도록 수정. +- 기술 명세 현재 버전을 v0.0.43으로 갱신. +- 패키지 버전을 0.0.43으로 갱신. + ## v0.0.42 - 관리자 글쓰기 화면의 문서 스크롤 잠금 클래스를 html/body에 직접 적용하도록 보강. diff --git a/package-lock.json b/package-lock.json index f25934a..8e0c52f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "sori.studio", - "version": "0.0.42", + "version": "0.0.43", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "sori.studio", - "version": "0.0.42", + "version": "0.0.43", "hasInstallScript": true, "dependencies": { "@nuxtjs/tailwindcss": "^6.14.0", diff --git a/package.json b/package.json index 62bde55..6881e1e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sori.studio", - "version": "0.0.42", + "version": "0.0.43", "private": true, "type": "module", "scripts": {