diff --git a/components/admin/AdminMarkdownEditor.vue b/components/admin/AdminMarkdownEditor.vue index 64ad3c7..feb8ab8 100644 --- a/components/admin/AdminMarkdownEditor.vue +++ b/components/admin/AdminMarkdownEditor.vue @@ -37,13 +37,9 @@ import { resolvePreviewFocusPosition as resolveMarkdownPreviewFocusPosition } from '../../lib/markdown-editor-focus.js' import { - createMediaPickerFetchQuery, - createMediaUploadFormData, createSelectedMediaInsertPlan, filterImageUploadFiles, - findUploadSizeLimitError, resolveImageUploadInsertTarget, - resolveUploadedMediaFiles, resolveUploadFetchErrorMessage } from '../../lib/markdown-editor-media.js' import { @@ -166,10 +162,8 @@ const { onMediaSearchInput, onMediaSearchCompositionEnd, mediaPickerPage, - mediaPickerPageSize, selectedMediaUrls, mediaPickerAccept, - mediaPickerKind, mediaPickerTitle, isGalleryMediaPicker, mediaPickerPageCount, @@ -183,15 +177,17 @@ const { isUploadFileAllowedForPicker, openMediaPickerState, closeMediaPickerState, - applyMediaPickerResponse, + fetchMediaItems, + uploadMediaFilesWithState, + uploadFilesIntoMediaPicker, setMediaPickerPage: setMediaPickerPageState, toggleMediaSelection, resolveCurrentSelectedMediaItems, - selectUploadedMediaFiles, - prependUploadedMediaItems, getGallerySelectionOrder } = useAdminMarkdownMediaPicker({ - uploadSizeLimits + uploadSizeLimits, + uploadMaxFileCount, + uploadMaxTotalSize }) /** @type {HTMLElement|null} 슬래시 메뉴 위치 갱신을 위해 구독한 미리보기 스크롤 영역 */ let liveSlashPreviewScrollElement = null @@ -2836,29 +2832,6 @@ const insertGallery = (images) => { insertBlockSnippet([':::gallery', ...images.map(createImageMarkdown), ':::'].join('\n')) } -/** - * 미디어 목록을 불러온다. - * @returns {Promise} - */ -const fetchMediaItems = async () => { - isLoadingMedia.value = true - - try { - const response = await $fetch('/admin/api/media', { - query: createMediaPickerFetchQuery({ - page: mediaPickerPage.value, - pageSize: mediaPickerPageSize, - kind: mediaPickerKind.value, - searchQuery: mediaSearchQuery.value - }) - }) - - applyMediaPickerResponse(response) - } finally { - isLoadingMedia.value = false - } -} - /** * 미디어 선택 창을 연다. * @param {'image'|'gallery'|'active-gallery'} target - 삽입 대상 @@ -2973,31 +2946,6 @@ const applyMediaSelection = () => { closeMediaPicker() } -/** - * 미디어 파일을 업로드한다. - * @param {FileList|Array} files - 업로드 파일 목록 - * @returns {Promise>} 업로드된 파일 목록 - */ -const uploadMediaFiles = async (files) => { - const sizeLimitError = findUploadSizeLimitError({ - files, - maxFileCount: uploadMaxFileCount.value, - maxTotalSize: uploadMaxTotalSize.value, - uploadSizeLimits: uploadSizeLimits.value - }) - - if (sizeLimitError) { - throw new Error(sizeLimitError) - } - - const result = await $fetch('/admin/api/uploads', { - method: 'POST', - body: createMediaUploadFormData(files) - }) - - return resolveUploadedMediaFiles(result) -} - /** * 업로드 파일을 현재 커서 위치에 삽입한다. * @param {FileList|Array} files - 파일 목록 @@ -3009,10 +2957,13 @@ const uploadAndInsert = async (files, target = 'image') => { return } - isUploading.value = true - try { - const uploadedFiles = await uploadMediaFiles(files) + const uploadedFiles = await uploadMediaFilesWithState(files) + + if (!uploadedFiles.length) { + return + } + const plan = createSelectedMediaInsertPlan({ target, selectedItems: uploadedFiles, @@ -3032,8 +2983,6 @@ const uploadAndInsert = async (files, target = 'image') => { } } catch (error) { showToast('error', resolveUploadFetchErrorMessage(error)) - } finally { - isUploading.value = false } } @@ -3058,22 +3007,16 @@ const uploadFromMediaModal = async (files) => { return } - isUploading.value = true - try { - const uploadedFiles = await uploadMediaFiles(files) - selectUploadedMediaFiles(uploadedFiles) - activeMediaPickerTab.value = 'library' - mediaSearchQuery.value = '' - mediaPickerPage.value = 1 - await fetchMediaItems().catch(() => { - prependUploadedMediaItems(uploadedFiles) - }) + const uploadedFiles = await uploadFilesIntoMediaPicker(files) + + if (!uploadedFiles.length) { + return + } + showToast('success', '업로드가 완료되어 파일이 선택되었습니다.') } catch (error) { showToast('error', resolveUploadFetchErrorMessage(error)) - } finally { - isUploading.value = false } } diff --git a/composables/useAdminMarkdownMediaPicker.js b/composables/useAdminMarkdownMediaPicker.js index 1740cd0..124be3d 100644 --- a/composables/useAdminMarkdownMediaPicker.js +++ b/composables/useAdminMarkdownMediaPicker.js @@ -5,7 +5,10 @@ import { buildMediaPickerPageItems, buildMediaPickerRangeLabel, buildMediaPickerUploadHint, + createMediaPickerFetchQuery, createDefaultMediaPickerPagination, + createMediaUploadFormData, + findUploadSizeLimitError, getGallerySelectionOrder as getGallerySelectionOrderFromSelection, getMediaPickerAcceptForTarget, getMediaPickerKindForTarget, @@ -15,6 +18,7 @@ import { isUploadFileAllowedForMediaTarget, normalizeMediaPickerPage, normalizeMediaPickerResponse, + resolveUploadedMediaFiles, resolveSelectedMediaItems, toggleMediaSelectionState } from '../lib/markdown-editor-media.js' @@ -26,11 +30,15 @@ export const ADMIN_MARKDOWN_MEDIA_PICKER_PAGE_SIZE = 50 * 관리자 Markdown 에디터의 미디어 선택 모달 상태를 관리한다. * @param {Object} options - 상태 옵션 * @param {import('vue').Ref|import('vue').ComputedRef} options.uploadSizeLimits - 업로드 한도 + * @param {import('vue').Ref|import('vue').ComputedRef} [options.uploadMaxFileCount] - 한 번에 업로드 가능한 파일 수 + * @param {import('vue').Ref|import('vue').ComputedRef} [options.uploadMaxTotalSize] - 한 번에 업로드 가능한 전체 용량 * @param {number} [options.pageSize=50] - 페이지 크기 * @returns {Object} 미디어 선택 모달 상태와 액션 */ export const useAdminMarkdownMediaPicker = ({ uploadSizeLimits, + uploadMaxFileCount, + uploadMaxTotalSize, pageSize = ADMIN_MARKDOWN_MEDIA_PICKER_PAGE_SIZE }) => { const mediaItems = ref([]) @@ -143,6 +151,104 @@ export const useAdminMarkdownMediaPicker = ({ mediaPickerPage.value = mediaPickerPagination.value.page || 1 } + /** + * 미디어 라이브러리 목록을 조회한다. + * @returns {Promise} + */ + const fetchMediaItems = async () => { + isLoadingMedia.value = true + + try { + const response = await $fetch('/admin/api/media', { + query: createMediaPickerFetchQuery({ + page: mediaPickerPage.value, + pageSize, + kind: mediaPickerKind.value, + searchQuery: mediaSearchQuery.value + }) + }) + + applyMediaPickerResponse(response) + } finally { + isLoadingMedia.value = false + } + } + + /** + * 미디어 파일을 업로드한다. + * @param {FileList|Array} files - 업로드 파일 목록 + * @returns {Promise} 업로드된 파일 목록 + */ + const uploadMediaFiles = async (files) => { + const sizeLimitError = findUploadSizeLimitError({ + files, + maxFileCount: unref(uploadMaxFileCount), + maxTotalSize: unref(uploadMaxTotalSize), + uploadSizeLimits: unref(uploadSizeLimits) + }) + + if (sizeLimitError) { + throw new Error(sizeLimitError) + } + + const result = await $fetch('/admin/api/uploads', { + method: 'POST', + body: createMediaUploadFormData(files) + }) + + return resolveUploadedMediaFiles(result) + } + + /** + * 업로드 상태를 관리하며 미디어 파일을 업로드한다. + * @param {FileList|Array} files - 업로드 파일 목록 + * @returns {Promise} 업로드된 파일 목록 + */ + const uploadMediaFilesWithState = async (files) => { + if (!files?.length || isUploading.value) { + return [] + } + + isUploading.value = true + + try { + return await uploadMediaFiles(files) + } finally { + isUploading.value = false + } + } + + /** + * 현재 미디어 선택 모달에서 파일을 업로드하고 선택 상태를 갱신한다. + * @param {FileList|Array} files - 업로드 파일 목록 + * @returns {Promise} 업로드된 파일 목록 + */ + const uploadFilesIntoMediaPicker = async (files) => { + if (!files?.length || isUploading.value) { + return [] + } + + isUploading.value = true + + try { + const uploadedFiles = await uploadMediaFiles(files) + selectUploadedMediaFiles(uploadedFiles) + activeMediaPickerTab.value = 'library' + mediaSearchQuery.value = '' + mediaPickerPage.value = 1 + + try { + await fetchMediaItems() + } catch { + prependUploadedMediaItems(uploadedFiles) + } + + return uploadedFiles + } finally { + isUploading.value = false + } + } + /** * 미디어 선택 페이지를 변경한다. * @param {number} page - 이동할 페이지 @@ -261,6 +367,10 @@ export const useAdminMarkdownMediaPicker = ({ openMediaPickerState, closeMediaPickerState, applyMediaPickerResponse, + fetchMediaItems, + uploadMediaFiles, + uploadMediaFilesWithState, + uploadFilesIntoMediaPicker, setMediaPickerPage, toggleMediaSelection, resolveCurrentSelectedMediaItems, diff --git a/docs/history.md b/docs/history.md index a5bb9d3..5a2a40a 100644 --- a/docs/history.md +++ b/docs/history.md @@ -1,3 +1,7 @@ +## 2026-07-28 v1.11.111 — 미디어 요청 실행은 미디어 선택 상태와 함께 둔다 + +관리자 Markdown 에디터의 미디어 모달은 이미 검색어, 페이지, 선택 상태를 `useAdminMarkdownMediaPicker`에서 관리하지만, 실제 서버 목록 조회와 업로드 실행은 부모 에디터에 남아 있었다. 이 상태에서는 모달 상태가 바뀌는 이유와 API 요청 결과가 반영되는 이유가 서로 다른 파일에 흩어진다. 미디어 선택 composable이 목록 조회, 업로드 한도 검증, 업로드 후 라이브러리 탭 전환과 선택 상태 갱신까지 맡게 하고, 에디터는 업로드·선택 결과를 본문 마크다운에 반영하는 일만 유지한다. + ## 2026-07-28 v1.11.110 — 슬래시 메뉴는 실행할 후보가 있을 때만 입력을 잡는다 슬래시 메뉴가 열려 있다는 이유만으로 Enter를 먼저 막으면 `/ㄴㅇ`처럼 명령 후보가 없는 일반 텍스트도 줄바꿈할 수 없다. 슬래시 입력은 명령 실행 단축키이기 전에 문서 안에 남을 수 있는 문자이므로, 메뉴가 키보드 이벤트를 가로채는 기준을 “표시할 후보가 있는가”로 좁힌다. 후보가 없으면 메뉴 상태만 정리하고 라이브·소스 편집기의 일반 줄바꿈과 커서 이동 흐름을 그대로 따른다. diff --git a/docs/map.md b/docs/map.md index 4ce1c7a..0096600 100644 --- a/docs/map.md +++ b/docs/map.md @@ -27,7 +27,7 @@ | composables/useAdminPostPublishState.js | 관리자 게시물 폼 발행·예약·발행취소 상태와 날짜 입력 상태 | | composables/useAdminMarkdownSlashMenu.js | 관리자 Markdown 에디터 슬래시 메뉴 상태·검색 결과·취소 당시 줄 내용 기준 억제·키보드 탐색 타이머 관리 | | composables/useAdminMarkdownHistory.js | 관리자 Markdown 에디터 undo/redo 스택·기록 그룹화·복원 중 상태 관리 | -| composables/useAdminMarkdownMediaPicker.js | 관리자 Markdown 에디터 미디어 선택 모달 열기·닫기·탭·검색어·페이지·선택 상태·표시 계산 관리 | +| composables/useAdminMarkdownMediaPicker.js | 관리자 Markdown 에디터 미디어 선택 모달 열기·닫기·탭·검색어·페이지·선택 상태·표시 계산, 서버 미디어 목록 조회, 업로드 한도 검증·전송, 업로드 후 라이브러리 탭 전환·선택 상태 갱신 관리 | | composables/useContentMarkdownBlocks.js | 공개 Markdown 본문 파싱·제목 ID·인아티클 광고 렌더 블록·하단 삽입 줄·라이트박스 대상 목록 계산 | | composables/useContentMarkdownLightbox.js | 공개 Markdown 본문 단일 이미지·갤러리 통합 라이트박스 상태·좌우 이동·ESC 닫기·키보드 이벤트 연결 관리 | | composables/useContentMarkdownImageDrag.js | 관리자 라이브 Markdown 본문의 단일 이미지·갤러리 드래그 상태, drop target 표시, 병합·삽입·분리·정렬 이벤트 중개 | @@ -144,7 +144,7 @@ | tests/markdown-slash-menu-scroll.test.js | 관리자 슬래시 메뉴 선택 항목 scrollTop 보정 단위 테스트 | | tests/useAdminMarkdownSlashMenu.test.js | 관리자 Markdown 에디터 슬래시 메뉴 composable 상태·줄 내용 기준 억제 관리 단위 테스트 | | tests/useAdminMarkdownHistory.test.js | 관리자 Markdown 에디터 히스토리 composable의 기록·undo/redo·그룹화·보관 개수 단위 테스트 | -| tests/useAdminMarkdownMediaPicker.test.js | 관리자 Markdown 에디터 미디어 선택 모달 composable 상태 관리 단위 테스트 | +| tests/useAdminMarkdownMediaPicker.test.js | 관리자 Markdown 에디터 미디어 선택 모달 composable 상태·서버 목록 조회·업로드 후 선택 상태·업로드 한도 관리 단위 테스트 | | tests/useContentMarkdownBlocks.test.js | 공개 Markdown 블록 계산 composable의 파싱·제목 ID·광고 삽입·하단 삽입 줄 단위 테스트 | | tests/useContentMarkdownLightbox.test.js | 공개 Markdown 라이트박스 composable의 열기·좌우 순환·ESC 닫기·키보드 이벤트 해제 단위 테스트 | | tests/useContentMarkdownImageDrag.test.js | 공개 Markdown 라이브 이미지·갤러리 드래그 composable의 병합·삽입·분리·정렬 단위 테스트 | @@ -257,7 +257,7 @@ | components/admin/AdminMarkdownWriteSurface.vue | 관리자 Markdown 에디터 소스 작성 표면 UI(textarea, 라인 번호 gutter, 업로드 상태 배지, DOM 참조 노출) | | components/admin/AdminPostSettingsSidebar.vue | 관리자 게시물 작성/수정 우측 설정 사이드바(Post URL·상태·발행 시각·요약·태그·대표 이미지 표시·추천 글·검색엔진 노출·본문 통계·삭제 버튼·블록 설정 패널 오버레이) | | components/admin/AdminPageForm.vue | 관리자 페이지 작성/수정 폼, 게시글 작성과 같은 전체 화면 에디터·상단 저장 툴바·접이식 오른쪽 설정 패널, 저장 payload 기준 미저장 비교·라우트/브라우저 이탈 확인, 페이지 공개 상태 선택, HTML 문서 기본 모드, 홈 Pages 진열장 노출 메타와 등록된 페이지 섹션 검색형 선택, 빈 본문/`!`+Tab HTML 골격 자동 완성, 항상 보이는 일반 텍스트/HTML 모드 선택, 한글 제목 영문 슬러그 자동 변환, HTML textarea 커서 위치 파일 URL 삽입, HTML 태그 내부 스마트 따옴표 정규화 | -| components/admin/AdminMarkdownEditor.vue | 관리자 글 Markdown-first 에디터, 라이브·소스 모드 `/` 슬래시 명령(`/표` 기본 표 템플릿 포함, 후보 없는 슬래시 입력은 일반 줄바꿈·커서 이동 허용)·미디어 모달(이미지·갤러리·비디오·오디오·파일, 업로드 탭 기본·첫 순서, 업로드 완료 파일 자동 선택, 라이브러리 탭은 `/admin/api/media?paged=1` 서버 페이지 응답·파일명/사용처 제목 검색·번호형 페이지 이동, 카드·본문·라이트박스·Pages 커버 자동 생성 이미지 숨김, 원본 URL 선택 유지·갤러리 선택 순서 배지·목록 미리보기는 720px 본문 파생 이미지 또는 카드 썸네일 우선, 검색 결과 수와 무관한 고정 높이 패널, 업로드 중 중복 업로드·닫기 차단·로딩 표시), 코드 블록 본문 슬래시 명령 비활성화, 커서 블록 컨텍스트·선택 텍스트 색상 컨텍스트 `block-panel` emit, 소스 모드 입력 직후 textarea 최신 본문 기준 커서 논리 줄·블록 컨텍스트 갱신, 에디터 본문 `Cmd/Ctrl+Z` 히스토리와 선택 위치 복원, 라이브 이미지 설정 패널·이미지↔갤러리 드래그 변환(`merge-images-to-gallery`·`insert-image-to-gallery`·`extract-gallery-image`), 소스·라이브 `Cmd+Shift+K` 줄 삭제, 소스·라이브 `Cmd/Ctrl+K` 링크 삽입, 코드·콜아웃·토글 내부 줄 삭제, 라이브 fenced 블록 현재 닫는 줄 기준 교체, 블록 패널 바깥 클릭·지원 블록 밖 커서 이동 시 닫기·미디어 모달 중 유지, 인용 마지막 줄 아래 방향키 외부 문단 포커스 이동, 인용·콜아웃·코드·토글 선언 줄 옵션 수정, IME 조합 중 현재 블록 범위 안에서만 블록 패널 유지, 소스 모드 wrap 라인 번호 보정·라이브↔소스 위치 복원(코드·콜아웃·토글 선언 줄은 본문 줄로 보정), 라이브 슬래시 명령 후 포커스 복원 지연·미디어 명령 원문 줄 재반영 방지 | +| components/admin/AdminMarkdownEditor.vue | 관리자 글 Markdown-first 에디터, 라이브·소스 모드 `/` 슬래시 명령(`/표` 기본 표 템플릿 포함, 후보 없는 슬래시 입력은 일반 줄바꿈·커서 이동 허용)·미디어 모달 선택 결과 본문 삽입(이미지·갤러리·비디오·오디오·파일), 코드 블록 본문 슬래시 명령 비활성화, 커서 블록 컨텍스트·선택 텍스트 색상 컨텍스트 `block-panel` emit, 소스 모드 입력 직후 textarea 최신 본문 기준 커서 논리 줄·블록 컨텍스트 갱신, 에디터 본문 `Cmd/Ctrl+Z` 히스토리와 선택 위치 복원, 라이브 이미지 설정 패널·이미지↔갤러리 드래그 변환(`merge-images-to-gallery`·`insert-image-to-gallery`·`extract-gallery-image`), 소스·라이브 `Cmd+Shift+K` 줄 삭제, 소스·라이브 `Cmd/Ctrl+K` 링크 삽입, 코드·콜아웃·토글 내부 줄 삭제, 라이브 fenced 블록 현재 닫는 줄 기준 교체, 블록 패널 바깥 클릭·지원 블록 밖 커서 이동 시 닫기·미디어 모달 중 유지, 인용 마지막 줄 아래 방향키 외부 문단 포커스 이동, 인용·콜아웃·코드·토글 선언 줄 옵션 수정, IME 조합 중 현재 블록 범위 안에서만 블록 패널 유지, 소스 모드 wrap 라인 번호 보정·라이브↔소스 위치 복원(코드·콜아웃·토글 선언 줄은 본문 줄로 보정), 라이브 슬래시 명령 후 포커스 복원 지연·미디어 명령 원문 줄 재반영 방지 | | components/admin/AdminEditorBlockPanel.vue | 게시물 설정 사이드바 오버레이 블록 설정(선택 텍스트 색상, 단일 이미지 대표 너비 셀렉트(전체·갤러리 2장 1칸·갤러리 3장 1칸·갤러리 3장 2칸·직접 입력)·직접 너비·이미지·갤러리·링크·iframe·HTML·인용 배경색·콜아웃 제목·아이콘 ON/OFF 토글·비활성 아이콘 영역·배경색·코드 언어 셀렉트·줄번호 ON/OFF 토글·토글), 갤러리 선택 이미지 강조 | | components/admin/AdminTagForm.vue | 관리자 태그 생성/수정 폼(이름/슬러그/설명/색상, 태그 헤더 이미지 업로드·삭제, 오버레이 제목·본문 편집, 수정 화면 변경 저장 버튼 변경사항 기준 활성화) | | components/admin/AdminMemberForm.vue | 관리자 멤버 추가/수정 폼(Ghost형 3분할, 기존 회원 보기/수정 모드 분리, 요약 1fr·입력 2fr, 원형 썸네일 hover 등록·변경·삭제, 기본 정보·레이블·관리자 노트·활동 요약, 설정 메뉴의 비밀번호 변경·멤버 삭제 모달, 저장 토스트, 미저장 변경사항 이탈 확인) | diff --git a/docs/spec.md b/docs/spec.md index 9a921b5..be94141 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -112,7 +112,7 @@ - Markdown 리스트 마커는 항목이 여러 줄로 줄바꿈되어도 항목 전체 높이 중앙이 아니라 첫 줄 기준으로 정렬한다. - 표준 마크다운 표(`| 헤더 | ... |`, `| --- | ... |`)는 본문에서 가로 스크롤 가능한 HTML table로 렌더링한다. 정렬 구분선(`:---`, `:---:`, `---:`)은 각각 좌/중앙/우 정렬로 반영한다. 표 헤더와 셀 내부의 인라인 링크·굵게·기울임·인라인 코드를 렌더링하고, 셀 내부 `
` 또는 `
`은 줄바꿈으로 표시한다. 링크 텍스트 안의 `**굵게**` 같은 중첩 인라인 문법도 렌더링한다. - 인용문(`>`)은 왼쪽 세로 막대형 기본 스타일로 표시한다. 기본 인용 텍스트는 라이트·다크 모드 모두 사이트 본문 텍스트 색상(`--site-text`)을 따른다. 첫 줄 옵션 `> [!bg=blue]` 또는 `> {bg=blue}`는 인용 막대 색상으로 반영하며, 지원 값은 콜아웃과 같은 `gray`, `blue`, `green`, `yellow`, `red`, `purple`이다. 인용 본문 안의 `::red[**텍스트**]` 같은 색상·굵게·링크 등 인라인 문법은 일반 문단과 같은 규칙으로 렌더링한다. -- 관리자 Markdown-first 글쓰기의 오른쪽 블록 설정 패널은 인용·콜아웃·코드 블록·토글 설정과 선택 텍스트 색상 설정을 지원한다. 단일 이미지는 전체 너비(자동)·갤러리 2장 1칸(356px)·갤러리 3장 1칸(235px)·갤러리 3장 2칸(477px)·직접 입력 셀렉트로 표시 너비를 고를 수 있으며 저장 시 이미지 마크다운 뒤에 `{size=숫자}` 옵션을 붙인다. 공개 본문은 이 값을 최대 너비로 적용하고 원본 비율은 유지한다. 직접 입력은 120~1600px 범위로 저장하되 입력 중에는 범위 보정을 즉시 강제하지 않는다. 콜아웃은 제목·아이콘 표시 ON/OFF 토글·아이콘·배경색, 코드 블록은 언어 셀렉트·줄번호 표시 ON/OFF 토글, 토글은 기본 펼침·닫힘 상태를 선언 줄에 저장한다. 콜아웃 아이콘 입력·프리셋은 아이콘 표시가 꺼진 상태에서 흐린 비활성 영역으로 표시하고, 토글을 켠 뒤에만 조작한다. 코드 블록 줄번호는 기본 숨김이며, 켠 경우에만 선언 줄에 `line-numbers`를 저장한다. 일반 텍스트 범위를 선택하면 텍스트 색상 패널이 열리고 회색·파랑·초록·노랑·빨강·보라 인라인 색상을 적용한다. 콜아웃 아이콘은 라이브·공개 화면 모두 왼쪽 상단에 배치하고, 아이콘·제목 헤더 아래에 본문을 줄바꿈해 표시한다. 아이콘 미사용 시 자리 표시자를 남기지 않는다. 인용·콜아웃·토글 본문은 라이브 모드에서 굵게·링크·색상 같은 인라인 문법과 기본 불릿/번호 목록을 표시한다. 라이브 문단에서는 `>` 입력으로 인용, ``` Enter로 코드 블록, `!!!` Enter로 콜아웃을 만들 수 있고, `/표` 또는 `/table` 슬래시 명령으로 기본 3열 표 마크다운을 삽입한다. `/html`은 `:::html`, `/link`는 `:::link`, `/iframe`은 `:::iframe` fenced 블록을 삽입한다. 소스·라이브 모드 모두 텍스트를 선택한 뒤 `Cmd/Ctrl+K`를 누르면 `[선택 텍스트](https://)` 인라인 링크 마크다운을 삽입하고 URL 부분을 선택한다. 소스 textarea의 선택 치환·인라인 감싸기·링크 삽입·줄 변환 계산은 `markdown-source-selection` helper가 담당하고, 라이브 전환 포커스 대상 보정과 코드 펜스 본문 줄 판별은 `markdown-editor-focus` helper가 담당한다. 슬래시 명령의 미디어 모달·마크다운 줄 삽입 적용 계획은 `markdown-slash-commands` helper가 계산한다. 미디어 선택 모달의 상태·표시 계산은 `useAdminMarkdownMediaPicker`가 관리하고, 선택 미디어 삽입 계획과 업로드 입력·응답 정규화는 `markdown-editor-media` helper가 계산한다. 에디터는 실제 서버 요청 실행과 포커스·스크롤 복원만 처리한다. 에디터 되돌리기·다시 실행은 `useAdminMarkdownHistory`에서 본문 값과 선택 위치를 함께 복원해 줄 앞 이동을 줄인다. 라이브 모드에서 위·아래 방향키로 인접 블록을 이동하면 커서가 화면 밖으로 벗어날 때 편집 스크롤 영역도 함께 이동한다. 라이브 코드·인용·콜아웃·토글 블록은 맨 위/맨 아래 방향키로 외부 기본 문단을 만들며 빠져나올 수 있고, 인용 첫 글자 앞 Backspace는 일반 문단으로 되돌린다. 한글 등 IME 조합 입력 중에는 줄바꿈 직후 블록 판별이 일시적으로 비어도 마지막 블록 컨텍스트를 유지해 설정 패널이 닫히지 않게 한다. 인용 편집 중 브라우저 자동 목록 보정으로 `>. ` 접두가 섞이면 커밋 시 정리한다. +- 관리자 Markdown-first 글쓰기의 오른쪽 블록 설정 패널은 인용·콜아웃·코드 블록·토글 설정과 선택 텍스트 색상 설정을 지원한다. 단일 이미지는 전체 너비(자동)·갤러리 2장 1칸(356px)·갤러리 3장 1칸(235px)·갤러리 3장 2칸(477px)·직접 입력 셀렉트로 표시 너비를 고를 수 있으며 저장 시 이미지 마크다운 뒤에 `{size=숫자}` 옵션을 붙인다. 공개 본문은 이 값을 최대 너비로 적용하고 원본 비율은 유지한다. 직접 입력은 120~1600px 범위로 저장하되 입력 중에는 범위 보정을 즉시 강제하지 않는다. 콜아웃은 제목·아이콘 표시 ON/OFF 토글·아이콘·배경색, 코드 블록은 언어 셀렉트·줄번호 표시 ON/OFF 토글, 토글은 기본 펼침·닫힘 상태를 선언 줄에 저장한다. 콜아웃 아이콘 입력·프리셋은 아이콘 표시가 꺼진 상태에서 흐린 비활성 영역으로 표시하고, 토글을 켠 뒤에만 조작한다. 코드 블록 줄번호는 기본 숨김이며, 켠 경우에만 선언 줄에 `line-numbers`를 저장한다. 일반 텍스트 범위를 선택하면 텍스트 색상 패널이 열리고 회색·파랑·초록·노랑·빨강·보라 인라인 색상을 적용한다. 콜아웃 아이콘은 라이브·공개 화면 모두 왼쪽 상단에 배치하고, 아이콘·제목 헤더 아래에 본문을 줄바꿈해 표시한다. 아이콘 미사용 시 자리 표시자를 남기지 않는다. 인용·콜아웃·토글 본문은 라이브 모드에서 굵게·링크·색상 같은 인라인 문법과 기본 불릿/번호 목록을 표시한다. 라이브 문단에서는 `>` 입력으로 인용, ``` Enter로 코드 블록, `!!!` Enter로 콜아웃을 만들 수 있고, `/표` 또는 `/table` 슬래시 명령으로 기본 3열 표 마크다운을 삽입한다. `/html`은 `:::html`, `/link`는 `:::link`, `/iframe`은 `:::iframe` fenced 블록을 삽입한다. 소스·라이브 모드 모두 텍스트를 선택한 뒤 `Cmd/Ctrl+K`를 누르면 `[선택 텍스트](https://)` 인라인 링크 마크다운을 삽입하고 URL 부분을 선택한다. 소스 textarea의 선택 치환·인라인 감싸기·링크 삽입·줄 변환 계산은 `markdown-source-selection` helper가 담당하고, 라이브 전환 포커스 대상 보정과 코드 펜스 본문 줄 판별은 `markdown-editor-focus` helper가 담당한다. 슬래시 명령의 미디어 모달·마크다운 줄 삽입 적용 계획은 `markdown-slash-commands` helper가 계산한다. 미디어 선택 모달의 상태·표시 계산, 서버 목록 조회, 업로드 실행과 업로드 후 선택 상태 갱신은 `useAdminMarkdownMediaPicker`가 관리하고, 선택 미디어 삽입 계획과 업로드 입력·응답 정규화는 `markdown-editor-media` helper가 계산한다. 에디터는 선택·업로드 결과의 본문 반영과 포커스·스크롤 복원만 처리한다. 에디터 되돌리기·다시 실행은 `useAdminMarkdownHistory`에서 본문 값과 선택 위치를 함께 복원해 줄 앞 이동을 줄인다. 라이브 모드에서 위·아래 방향키로 인접 블록을 이동하면 커서가 화면 밖으로 벗어날 때 편집 스크롤 영역도 함께 이동한다. 라이브 코드·인용·콜아웃·토글 블록은 맨 위/맨 아래 방향키로 외부 기본 문단을 만들며 빠져나올 수 있고, 인용 첫 글자 앞 Backspace는 일반 문단으로 되돌린다. 한글 등 IME 조합 입력 중에는 줄바꿈 직후 블록 판별이 일시적으로 비어도 마지막 블록 컨텍스트를 유지해 설정 패널이 닫히지 않게 한다. 인용 편집 중 브라우저 자동 목록 보정으로 `>. ` 접두가 섞이면 커밋 시 정리한다. - 게시물 상세의 오른쪽 사이드바는 데스크톱에서 블로그 소개·Follow 대신 본문 H1~H3 제목 기반 목차를 최상단에 표시한다. 목차는 별도 최대 높이와 내부 스크롤을 두지 않고 전체 목록이 먼저 펼쳐지며, 왼쪽 기준선과 브랜드 컬러 활성 항목 표시선을 둔다. 목차 항목은 최소 24px 높이와 세로 중앙 정렬을 사용하며, 2줄 이상 제목에서는 항목 높이에 맞춰 활성 표시선도 함께 늘어난다. 활성 표시선은 항목의 가상 요소 배경 막대로 그려 텍스트 시작점이 밀리지 않게 한다. 목차 링크는 본문 제목에 부여된 앵커 ID로 부드럽게 이동하며, 고정 상단 헤더 높이와 여백을 반영해 제목이 화면 밖에 걸리지 않게 한다. 본문 스크롤 중에는 현재 제목에 해당하는 목차 항목을 강조하고, 목차 항목이 많으면 오른쪽 사이드바 스크롤이 활성 항목을 따라간다. 본문 제목이 없으면 목차 없음 문구를 표시한다. 오른쪽 사이드바가 본문 아래로 내려가는 모바일 폭에서는 목차를 숨긴다. 게시물 상세에서는 일반 오른쪽 사이드 광고 대신 게시물 사이드 광고 코드를 목차 아래에 표시하고, 왼쪽 사이드바에는 게시물 광고를 표시하지 않는다. 게시물 상세 목차와 게시물 사이드 광고 슬롯은 하단 구분선을 표시하지 않는다. - 제목 우측 공유 버튼을 누르면 게시물 공유 모달을 연다. - 공개 회원 로그인 세션의 회원 ID가 게시물 `author_id`와 같으면 제목 우측 공유 버튼 옆에 수정 아이콘을 표시하며, 클릭 시 `/admin/posts/:id` 편집 화면을 새 탭으로 연다. 별도 관리자 세션만 있거나 비로그인 상태에서는 표시하지 않는다. diff --git a/docs/todo.md b/docs/todo.md index 65535b5..f306974 100644 --- a/docs/todo.md +++ b/docs/todo.md @@ -3,7 +3,7 @@ ## v1.11 내부 개선 - 거대 컴포넌트 책임 분리 진행. - - `components/admin/AdminMarkdownEditor.vue`: 미디어 모달의 실제 서버 요청·업로드 후 UI 적용 흐름, 슬래시 명령 적용 후 DOM 포커스·미디어 모달 연결, 라이브/소스 전환 DOM 포커스 복원 로직을 단계적으로 composable 또는 하위 컴포넌트로 분리. + - `components/admin/AdminMarkdownEditor.vue`: 슬래시 명령 적용 후 DOM 포커스·미디어 모달 연결, 라이브/소스 전환 DOM 포커스 복원 로직을 단계적으로 composable 또는 하위 컴포넌트로 분리. - 미디어 카탈로그 전환 코드 수명 정리. - 운영 `MEDIA_CATALOG_MODE=database` 안정화 후 `shadow`/`filesystem` 런타임 분기 축소 가능 여부 검토. - fallback은 운영 안정성에 필요하므로 제거 전 reconcile·로그·테스트 기준을 먼저 정리. diff --git a/docs/update.md b/docs/update.md index 8e2171c..1f5e894 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,11 @@ # 업데이트 이력 +## v1.11.111 + +- 관리자 Markdown 에디터의 미디어 라이브러리 조회와 업로드 실행 흐름을 `useAdminMarkdownMediaPicker` composable로 이동. +- 에디터 컴포넌트는 업로드 결과를 본문에 삽입하는 책임만 유지하도록 미디어 요청 중복 함수 정리. +- 미디어 선택 composable의 서버 목록 조회, 업로드 후 선택 상태 갱신, 업로드 한도 초과 단위 테스트 추가. + ## v1.11.110 - 관리자 Markdown 에디터에서 일치하는 슬래시 명령이 없는 `/ㄴㅇ` 같은 입력이 Enter 줄바꿈을 막던 문제 수정. diff --git a/package-lock.json b/package-lock.json index e292290..ab4ed87 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "sori.studio", - "version": "1.11.110", + "version": "1.11.111", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "sori.studio", - "version": "1.11.110", + "version": "1.11.111", "hasInstallScript": true, "dependencies": { "@nuxtjs/tailwindcss": "^6.14.0", diff --git a/package.json b/package.json index 02ec0ee..6794047 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sori.studio", - "version": "1.11.110", + "version": "1.11.111", "private": true, "type": "module", "imports": { diff --git a/tests/useAdminMarkdownMediaPicker.test.js b/tests/useAdminMarkdownMediaPicker.test.js index 997ef1c..db58a74 100644 --- a/tests/useAdminMarkdownMediaPicker.test.js +++ b/tests/useAdminMarkdownMediaPicker.test.js @@ -107,3 +107,124 @@ test('관리자 Markdown 미디어 선택 모달은 업로드 파일 선택 상 assert.equal(picker.isUploadFileAllowedForPicker({ type: 'image/png' }), true) assert.equal(picker.isUploadFileAllowedForPicker({ type: 'video/mp4' }), false) }) + +test('관리자 Markdown 미디어 선택 모달은 서버 목록 조회를 상태에 반영한다', async () => { + const originalFetch = globalThis.$fetch + const calls = [] + globalThis.$fetch = async (url, options) => { + calls.push({ url, options }) + return { + items: [{ url: '/uploads/a.png', kind: 'image' }], + pagination: { + page: 2, + pageSize: 20, + total: 21, + pageCount: 2 + } + } + } + + try { + const picker = useAdminMarkdownMediaPicker({ uploadSizeLimits, pageSize: 20 }) + picker.openMediaPickerState('image') + picker.mediaSearchQuery.value = ' a ' + picker.mediaPickerPage.value = 2 + + await picker.fetchMediaItems() + + assert.equal(picker.isLoadingMedia.value, false) + assert.deepEqual(picker.mediaItems.value, [{ url: '/uploads/a.png', kind: 'image' }]) + assert.equal(picker.mediaPickerPage.value, 2) + assert.deepEqual(calls[0], { + url: '/admin/api/media', + options: { + query: { + paged: '1', + tab: 'library', + page: 2, + pageSize: 20, + kind: 'image', + search: 'a' + } + } + }) + } finally { + globalThis.$fetch = originalFetch + } +}) + +test('관리자 Markdown 미디어 선택 모달은 업로드 후 라이브러리 탭과 선택 상태를 갱신한다', async () => { + const originalFetch = globalThis.$fetch + const uploadedFile = { url: '/uploads/a.png', kind: 'image' } + const calls = [] + globalThis.$fetch = async (url, options) => { + calls.push({ url, options }) + + if (url === '/admin/api/uploads') { + return { files: [uploadedFile] } + } + + return { + items: [uploadedFile], + pagination: { + page: 1, + pageSize: 50, + total: 1, + pageCount: 1 + } + } + } + + try { + const picker = useAdminMarkdownMediaPicker({ + uploadSizeLimits, + uploadMaxFileCount: computed(() => 3), + uploadMaxTotalSize: computed(() => 1024 * 1024) + }) + picker.openMediaPickerState('image') + + const uploadedFiles = await picker.uploadFilesIntoMediaPicker([ + new File(['image'], 'a.png', { type: 'image/png' }) + ]) + + assert.deepEqual(uploadedFiles, [uploadedFile]) + assert.equal(picker.isUploading.value, false) + assert.equal(picker.activeMediaPickerTab.value, 'library') + assert.deepEqual(picker.selectedMediaUrls.value, ['/uploads/a.png']) + assert.deepEqual(picker.mediaItems.value, [uploadedFile]) + assert.equal(calls[0].url, '/admin/api/uploads') + assert.equal(calls[0].options.method, 'POST') + assert.ok(calls[0].options.body instanceof FormData) + assert.equal(calls[1].url, '/admin/api/media') + } finally { + globalThis.$fetch = originalFetch + } +}) + +test('관리자 Markdown 미디어 선택 모달 업로드는 한도 초과 시 요청하지 않는다', async () => { + const originalFetch = globalThis.$fetch + let called = false + globalThis.$fetch = async () => { + called = true + return { files: [] } + } + + try { + const picker = useAdminMarkdownMediaPicker({ + uploadSizeLimits, + uploadMaxFileCount: computed(() => 1), + uploadMaxTotalSize: computed(() => 1024 * 1024) + }) + + await assert.rejects( + () => picker.uploadMediaFiles([ + new File(['a'], 'a.png', { type: 'image/png' }), + new File(['b'], 'b.png', { type: 'image/png' }) + ]), + /최대 1개/ + ) + assert.equal(called, false) + } finally { + globalThis.$fetch = originalFetch + } +})