브랜드 컬러 설정 추가 v1.5.36

components/admin/AdminEditorBlockPanel.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { getImageAltAttribute, getImageDefaultAltLabel } from '../../lib/markdown-image.js'
+import { CALLOUT_BACKGROUND_OPTIONS } from '../../lib/markdown-callout.js'
 
 const props = defineProps({
   /** 패널 표시 여부 */
@@ -22,9 +23,30 @@ const emit = defineEmits([
   'move-gallery-image',
   'remove-media-image',
   'add-gallery-images',
-  'update-embed-url'
+  'update-embed-url',
+  'update-quote-background'
 ])
 
+const quoteBackgroundLabels = {
+  gray: '회색',
+  blue: '파랑',
+  green: '초록',
+  yellow: '노랑',
+  red: '빨강',
+  purple: '보라',
+  pink: '분홍'
+}
+
+const quoteBackgroundSwatches = {
+  gray: 'rgba(100,116,139,0.28)',
+  blue: 'rgba(59,130,246,0.3)',
+  green: 'rgba(34,197,94,0.3)',
+  yellow: 'rgba(245,158,11,0.34)',
+  red: 'rgba(239,68,68,0.3)',
+  purple: 'rgba(168,85,247,0.3)',
+  pink: 'rgba(236,72,153,0.28)'
+}
+
 /**
  * 블록 종류 라벨
  * @returns {string}
@@ -42,6 +64,10 @@ const panelTitle = computed(() => {
     return '임베드'
   }
 
+  if (props.panel.kind === 'quote') {
+    return '인용'
+  }
+
   return '이미지'
 })
 
@@ -62,6 +88,10 @@ const panelMeta = computed(() => {
     return 'YouTube·X 등 URL'
   }
 
+  if (props.panel.kind === 'quote') {
+    return '인용 배경색'
+  }
+
   return '커서가 위치한 이미지 줄'
 })
 
@@ -127,6 +157,36 @@ const onPanelFocusOut = (event) => {
           </p>
         </template>
 
+        <template v-else-if="panel.kind === 'quote'">
+          <div class="admin-editor-block-panel__quote-settings grid gap-4">
+            <div>
+              <p class="text-sm font-semibold text-[#394047]">
+                배경색
+              </p>
+              <p class="mt-1 text-xs leading-relaxed text-[#8e9cac]">
+                현재 인용 블록의 첫 줄에 배경 옵션을 추가합니다.
+              </p>
+            </div>
+            <div class="grid grid-cols-2 gap-2">
+              <button
+                v-for="background in CALLOUT_BACKGROUND_OPTIONS"
+                :key="`quote-background-${background}`"
+                class="flex items-center gap-2 rounded border px-3 py-2 text-left text-xs font-semibold transition"
+                :class="panel.quoteBackground === background ? 'border-[#15171a] bg-white text-[#15171a]' : 'border-[#dce0e5] bg-[#fafafa] text-[#657080] hover:bg-white'"
+                type="button"
+                @click="emit('update-quote-background', background)"
+              >
+                <span
+                  class="size-5 shrink-0 rounded-full border border-black/5"
+                  :style="{ background: quoteBackgroundSwatches[background] }"
+                  aria-hidden="true"
+                />
+                <span>{{ quoteBackgroundLabels[background] || background }}</span>
+              </button>
+            </div>
+          </div>
+        </template>
+
         <template v-else>
           <div class="admin-editor-block-panel__media-list grid gap-3">
             <div

components/admin/AdminMarkdownEditor.vue

@@ -14,6 +14,7 @@ import {
   parseSlashInput,
   resolveSlashCommand
 } from '../../lib/markdown-slash-commands.js'
+import { CALLOUT_BACKGROUND_OPTIONS } from '../../lib/markdown-callout.js'
 import { getTextareaCaretCoordinates } from '../../lib/textarea-caret-coordinates.js'
 import {
   buildDefaultUploadSizeLimits,
@@ -170,7 +171,7 @@ const closeBlockPanel = () => {
 }
 
 /**
- * 커서 줄 기준 활성 블록(이미지·갤러리·임베드)
+ * 커서 줄 기준 활성 블록(이미지·갤러리·임베드·인용)
  * @returns {Object|null}
  */
 const activeBlockContext = computed(() => resolveActiveBlockContext(
@@ -2074,6 +2075,38 @@ const updateActiveEmbedUrl = (url) => {
   replaceLineRange(block.startLine, block.endLine, [trimmed], false)
 }
 
+/**
+ * 현재 인용 블록 배경색을 수정한다.
+ * @param {string} background - 배경색 옵션
+ * @returns {void}
+ */
+const updateActiveQuoteBackground = (background) => {
+  const block = activeBlockContext.value
+
+  if (!block || block.kind !== 'quote') {
+    return
+  }
+
+  ensureBlockPanelEngaged()
+  const value = String(background || '').trim()
+
+  if (!CALLOUT_BACKGROUND_OPTIONS.includes(value)) {
+    return
+  }
+
+  const optionLine = `> [!bg=${value}]`
+  const lines = (markdownValue.value || '').split('\n')
+  const nextLines = [...lines]
+
+  if (block.hasQuoteOptions) {
+    nextLines.splice(block.startLine, 1, optionLine)
+  } else {
+    nextLines.splice(block.startLine, 0, optionLine)
+  }
+
+  markdownValue.value = nextLines.join('\n')
+}
+
 /**
  * 이미지 마크다운을 삽입한다.
  * @param {{ url: string, alt?: string, width?: string }} image - 이미지 정보
@@ -2140,6 +2173,7 @@ defineExpose({
   removeActiveMediaImage,
   appendImagesToActiveGallery,
   updateActiveEmbedUrl,
+  updateActiveQuoteBackground,
   openMediaPicker
 })
 

components/admin/AdminPostForm.vue

@@ -1053,6 +1053,15 @@ const onBlockPanelUpdateEmbedUrl = (url) => {
   blockEditor.value?.updateActiveEmbedUrl?.(url)
 }
 
+/**
+ * 블록 패널에서 인용 배경색을 수정한다.
+ * @param {string} background - 인용 배경색
+ * @returns {void}
+ */
+const onBlockPanelUpdateQuoteBackground = (background) => {
+  blockEditor.value?.updateActiveQuoteBackground?.(background)
+}
+
 const focusContentEditor = (event) => {
   if (event?.isComposing || isTitleInputComposing.value || event?.keyCode === 229) {
     return
@@ -1874,6 +1883,7 @@ defineExpose({
           @remove-media-image="onBlockPanelRemoveMediaImage"
           @add-gallery-images="onBlockPanelAddGalleryImages"
           @update-embed-url="onBlockPanelUpdateEmbedUrl"
+          @update-quote-background="onBlockPanelUpdateQuoteBackground"
         />
       </div>
       </aside>