인용 블록 색상과 라이브 설정 패널 정리

components/admin/AdminEditorBlockPanel.vue

@@ -1,6 +1,12 @@
 <script setup>
 import { getImageAltAttribute, getImageDefaultAltLabel } from '../../lib/markdown-image.js'
-import { CALLOUT_BACKGROUND_OPTIONS, CALLOUT_EMOJI_OPTIONS } from '../../lib/markdown-callout.js'
+import {
+  CALLOUT_BACKGROUND_OPTIONS,
+  CALLOUT_EMOJI_OPTIONS,
+  QUOTE_BACKGROUND_LABELS,
+  QUOTE_BACKGROUND_OPTIONS,
+  QUOTE_BACKGROUND_SWATCHES
+} from '../../lib/markdown-callout.js'
 
 const props = defineProps({
   /** 패널 표시 여부 */
@@ -66,6 +72,20 @@ const getBackgroundLabel = (background) => backgroundLabels[background] || backg
  */
 const getBackgroundSwatch = (background) => backgroundSwatches[background] || 'rgba(100,116,139,0.28)'
 
+/**
+ * 인용 배경 라벨을 반환한다.
+ * @param {string} background - 배경 키
+ * @returns {string} 배경 라벨
+ */
+const getQuoteBackgroundLabel = (background) => QUOTE_BACKGROUND_LABELS[background] || background
+
+/**
+ * 인용 배경 스와치를 반환한다.
+ * @param {string} background - 배경 키
+ * @returns {string} CSS 배경
+ */
+const getQuoteBackgroundSwatch = (background) => QUOTE_BACKGROUND_SWATCHES[background] || QUOTE_BACKGROUND_SWATCHES.gray
+
 /**
  * 블록 종류 라벨
  * @returns {string}
@@ -212,7 +232,7 @@ const onPanelFocusOut = (event) => {
             </div>
             <div class="grid grid-cols-2 gap-2">
               <button
-                v-for="background in CALLOUT_BACKGROUND_OPTIONS"
+                v-for="background in QUOTE_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'"
@@ -221,10 +241,10 @@ const onPanelFocusOut = (event) => {
               >
                 <span
                   class="size-5 shrink-0 rounded-full border border-black/5"
-                  :style="{ background: getBackgroundSwatch(background) }"
+                  :style="{ background: getQuoteBackgroundSwatch(background) }"
                   aria-hidden="true"
                 />
-                <span>{{ getBackgroundLabel(background) }}</span>
+                <span>{{ getQuoteBackgroundLabel(background) }}</span>
               </button>
             </div>
           </div>