인라인 텍스트 색상 패널 추가

components/admin/AdminEditorBlockPanel.vue

@@ -34,7 +34,8 @@ const emit = defineEmits([
   'update-quote-background',
   'update-callout-options',
   'update-code-options',
-  'update-toggle-options'
+  'update-toggle-options',
+  'update-inline-color'
 ])
 
 const backgroundLabels = {
@@ -50,6 +51,15 @@ const backgroundSwatches = {
   ...CALLOUT_BACKGROUND_SWATCHES
 }
 
+const inlineColorSwatches = {
+  gray: '#6b7280',
+  blue: '#0055ff',
+  green: '#16ae68',
+  yellow: '#a16207',
+  red: '#e60000',
+  purple: '#8800ff'
+}
+
 const languageOptions = ['', 'javascript', 'html', 'css', 'vue', 'json', 'bash', 'markdown', 'sql']
 
 /**
@@ -80,6 +90,13 @@ const getQuoteBackgroundLabel = (background) => QUOTE_BACKGROUND_LABELS[backgrou
  */
 const getQuoteBackgroundSwatch = (background) => QUOTE_BACKGROUND_SWATCHES[background] || QUOTE_BACKGROUND_SWATCHES.gray
 
+/**
+ * 인라인 색상 스와치를 반환한다.
+ * @param {string} color - 색상 키
+ * @returns {string} CSS 색상
+ */
+const getInlineColorSwatch = (color) => inlineColorSwatches[color] || inlineColorSwatches.gray
+
 /**
  * 블록 종류 라벨
  * @returns {string}
@@ -93,6 +110,10 @@ const panelTitle = computed(() => {
     return '갤러리'
   }
 
+  if (props.panel.kind === 'inline-color') {
+    return '텍스트 색상'
+  }
+
   if (props.panel.kind === 'embed') {
     return '임베드'
   }
@@ -129,6 +150,10 @@ const panelMeta = computed(() => {
     return `${props.panel.images.length}개 이미지`
   }
 
+  if (props.panel.kind === 'inline-color') {
+    return '선택한 텍스트'
+  }
+
   if (props.panel.kind === 'embed') {
     return 'YouTube·X 등 URL'
   }
@@ -198,7 +223,36 @@ const onPanelFocusOut = (event) => {
       </header>
 
       <div class="admin-editor-block-panel__body flex-1 overflow-y-auto px-6 py-6">
-        <template v-if="panel.kind === 'embed'">
+        <template v-if="panel.kind === 'inline-color'">
+          <div class="admin-editor-block-panel__inline-color-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="color in QUOTE_BACKGROUND_OPTIONS"
+                :key="`inline-color-${color}`"
+                class="flex items-center gap-2 rounded border border-[#dce0e5] bg-[#fafafa] px-3 py-2 text-left text-xs font-semibold text-[#657080] transition hover:bg-white"
+                type="button"
+                @click="emit('update-inline-color', color)"
+              >
+                <span
+                  class="size-5 shrink-0 rounded-full border border-black/5"
+                  :style="{ background: getInlineColorSwatch(color) }"
+                  aria-hidden="true"
+                />
+                <span>{{ getQuoteBackgroundLabel(color) }}</span>
+              </button>
+            </div>
+          </div>
+        </template>
+
+        <template v-else-if="panel.kind === 'embed'">
           <label class="admin-editor-block-panel__field grid gap-2 text-sm">
             <span class="font-semibold text-[#394047]">임베드 URL</span>
             <input