브랜드 컬러 설정 추가 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