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

2026-06-16 16:54:01 +09:00
parent 0bb07b5e03
commit 6c4064d8b5
16 changed files with 581 additions and 126 deletions
--- a/components/admin/AdminEditorBlockPanel.vue
+++ b/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
--- a/components/admin/AdminMarkdownEditor.vue
+++ b/components/admin/AdminMarkdownEditor.vue
@@ -7,7 +7,15 @@ import {
  parseImageMarkdownLine,
  serializeImageMarkdown
 } from '../../lib/markdown-image.js'
-import { convertHtmlToMarkdown } from '../../lib/markdown-inline.js'
+import {
+  convertHtmlToMarkdown,
+  formatInlineColorMarkdown,
+  readEditableTextFromElement
+} from '../../lib/markdown-inline.js'
+import {
+  getMarkdownLineBodyPrefixLength,
+  getSelectionOffsetInElement
+} from '../../lib/markdown-live-selection.js'
 import {
  filterSlashCommands,
  getSlashCommandFocusTarget,
@@ -152,6 +160,8 @@ const isBlockPanelEngaged = ref(false)
 const isTextComposing = ref(false)
 /** 조합 입력 중 패널 닫힘을 방지하기 위한 마지막 블록 컨텍스트 */
 const lastStableBlockContext = ref(null)
+/** @type {import('vue').Ref<{ kind: 'inline-color', mode: 'source'|'live', start?: number, end?: number, sourceLine?: number, startOffset?: number, endOffset?: number, bodyText?: string, text: string }|null>} 선택 텍스트 색상 패널 컨텍스트 */
+const inlineColorSelectionContext = ref(null)
 let blockPanelFocusTimer = null

 /**
@@ -190,9 +200,156 @@ const closeBlockPanel = () => {
  window.clearTimeout(blockPanelFocusTimer)
  isBlockPanelEngaged.value = false
  isTextareaFocused.value = false
+  inlineColorSelectionContext.value = null
  syncBlockPanelState()
 }

+/**
+ * 오프셋이 속한 마크다운 줄 번호를 반환한다.
+ * @param {string} value - 마크다운 본문
+ * @param {number} offset - 문자 오프셋
+ * @returns {number} 줄 번호
+ */
+const getLineIndexFromOffset = (value, offset) => {
+  const safeOffset = Math.max(0, Math.min(String(value || '').length, offset))
+  return String(value || '').slice(0, safeOffset).split('\n').length - 1
+}
+
+/**
+ * 현재 줄이 인라인 색상 적용 대상인지 확인한다.
+ * @param {number} lineIndex - 줄 번호
+ * @returns {boolean} 적용 가능 여부
+ */
+const canApplyInlineColorAtLine = (lineIndex) => {
+  const context = resolveActiveBlockContext(markdownValue.value, lineIndex)
+  return context?.kind !== 'code'
+}
+
+/**
+ * 소스 모드 textarea 선택 범위를 색상 패널 컨텍스트로 변환한다.
+ * @returns {{ kind: 'inline-color', mode: 'source', start: number, end: number, text: string }|null} 선택 컨텍스트
+ */
+const getSourceInlineColorSelectionContext = () => {
+  const textarea = textareaRef.value
+
+  if (activeMode.value !== 'write' || !textarea || document.activeElement !== textarea) {
+    return null
+  }
+
+  const start = Math.min(textarea.selectionStart, textarea.selectionEnd)
+  const end = Math.max(textarea.selectionStart, textarea.selectionEnd)
+
+  if (start === end) {
+    return null
+  }
+
+  const value = markdownValue.value || ''
+  const selectedText = value.slice(start, end)
+
+  if (!selectedText.trim() || selectedText.includes('\n')) {
+    return null
+  }
+
+  const startLine = getLineIndexFromOffset(value, start)
+  const endLine = getLineIndexFromOffset(value, end)
+
+  if (startLine !== endLine || !canApplyInlineColorAtLine(startLine)) {
+    return null
+  }
+
+  return {
+    kind: 'inline-color',
+    mode: 'source',
+    start,
+    end,
+    text: selectedText
+  }
+}
+
+/**
+ * DOM 노드가 속한 라이브 편집 요소를 반환한다.
+ * @param {Node|null} node - 선택 노드
+ * @returns {HTMLElement|null} 편집 요소
+ */
+const getEditableElementFromSelectionNode = (node) => {
+  if (!node) {
+    return null
+  }
+
+  const element = node instanceof Element ? node : node.parentElement
+  const editable = element?.closest?.('[contenteditable="true"][data-source-line]')
+  return editable instanceof HTMLElement ? editable : null
+}
+
+/**
+ * 라이브 모드 선택 범위를 색상 패널 컨텍스트로 변환한다.
+ * @returns {{ kind: 'inline-color', mode: 'live', sourceLine: number, startOffset: number, endOffset: number, bodyText: string, text: string }|null} 선택 컨텍스트
+ */
+const getLiveInlineColorSelectionContext = () => {
+  if (activeMode.value !== 'preview' || !import.meta.client) {
+    return null
+  }
+
+  const selection = window.getSelection()
+
+  if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+    return null
+  }
+
+  const range = selection.getRangeAt(0)
+  const startEditable = getEditableElementFromSelectionNode(range.startContainer)
+  const endEditable = getEditableElementFromSelectionNode(range.endContainer)
+
+  if (!startEditable || startEditable !== endEditable) {
+    return null
+  }
+
+  const sourceLine = Number(startEditable.getAttribute('data-source-line'))
+  const sourceLineEnd = Number(startEditable.getAttribute('data-source-line-end') || sourceLine)
+
+  if (!Number.isInteger(sourceLine) || sourceLine !== sourceLineEnd || !canApplyInlineColorAtLine(sourceLine)) {
+    return null
+  }
+
+  const bodyText = readEditableTextFromElement(startEditable, { trimEnd: false })
+  const startOffset = getSelectionOffsetInElement(startEditable, range, 'start')
+  const endOffset = getSelectionOffsetInElement(startEditable, range, 'end')
+  const safeStart = Math.max(0, Math.min(startOffset, endOffset))
+  const safeEnd = Math.min(bodyText.length, Math.max(startOffset, endOffset))
+  const selectedText = bodyText.slice(safeStart, safeEnd)
+
+  if (!selectedText.trim()) {
+    return null
+  }
+
+  return {
+    kind: 'inline-color',
+    mode: 'live',
+    sourceLine,
+    startOffset: safeStart,
+    endOffset: safeEnd,
+    bodyText,
+    text: selectedText
+  }
+}
+
+/**
+ * 현재 선택 범위를 기준으로 텍스트 색상 패널 컨텍스트를 갱신한다.
+ * @returns {void}
+ */
+const syncInlineColorSelectionContext = () => {
+  if (isFocusInBlockPanel() || isMediaPickerOpen.value) {
+    return
+  }
+
+  const nextContext = getSourceInlineColorSelectionContext() || getLiveInlineColorSelectionContext()
+  inlineColorSelectionContext.value = nextContext
+
+  if (nextContext) {
+    isBlockPanelEngaged.value = true
+  }
+}
+
 /**
 * 커서 줄 기준 활성 블록(이미지·갤러리·임베드·인용)
 * @returns {Object|null}
@@ -210,6 +367,10 @@ const activeMediaBlock = activeBlockContext
 * @returns {Object|null} 패널 표시용 블록 컨텍스트
 */
 const visibleBlockContext = computed(() => {
+  if (inlineColorSelectionContext.value) {
+    return null
+  }
+
  if (activeBlockContext.value) {
    return activeBlockContext.value
  }
@@ -217,12 +378,18 @@ const visibleBlockContext = computed(() => {
  return isTextComposing.value ? lastStableBlockContext.value : null
 })

+/**
+ * 오른쪽 설정 패널에 표시할 현재 컨텍스트를 반환한다.
+ * @returns {Object|null} 패널 컨텍스트
+ */
+const activePanelContext = computed(() => inlineColorSelectionContext.value || visibleBlockContext.value)
+
 /**
 * 블록 설정 패널 표시 여부
 * @returns {boolean}
 */
 const isBlockPanelVisible = computed(() => (activeMode.value === 'write' || isBlockPanelEngaged.value)
-  && Boolean(visibleBlockContext.value)
+  && Boolean(activePanelContext.value)
  && (isTextareaFocused.value || isBlockPanelEngaged.value))

 /**
@@ -232,7 +399,7 @@ const isBlockPanelVisible = computed(() => (activeMode.value === 'write' || isBl
 const syncBlockPanelState = () => {
  emit('block-panel', {
    open: isBlockPanelVisible.value,
-    panel: visibleBlockContext.value
+    panel: activePanelContext.value
  })
 }

@@ -285,7 +452,7 @@ watch(activeBlockContext, (context) => {
  }
 }, { deep: true, immediate: true })

-watch([isBlockPanelVisible, visibleBlockContext], syncBlockPanelState, { deep: true })
+watch([isBlockPanelVisible, activePanelContext], syncBlockPanelState, { deep: true })

 /**
 * 본문의 논리 줄(`\\n` 기준) 개수. 빈 본문은 1줄로 본다.
@@ -1098,6 +1265,9 @@ onMounted(() => {
   * @returns {void}
   */
  const onSelectionChange = () => {
+    syncInlineColorSelectionContext()
+    syncBlockPanelState()
+
    if (activeMode.value !== 'write') {
      return
    }
@@ -1298,9 +1468,24 @@ const getSelectionState = () => {
 * textarea 커서 위치를 갱신한다.
 * @param {number} start - 시작 위치
 * @param {number} end - 끝 위치
+ * @param {{ preserveScroll?: boolean }} options - 선택 옵션
 * @returns {void}
 */
-const setTextareaSelection = (start, end = start) => {
+const setTextareaSelection = (start, end = start, options = {}) => {
+  const previousScrollTop = options.preserveScroll ? textareaRef.value?.scrollTop : null
+  /**
+   * textarea 스크롤 위치를 복원한다.
+   * @param {HTMLTextAreaElement} textarea - 대상 textarea
+   * @returns {void}
+   */
+  const restoreScroll = (textarea) => {
+    if (!Number.isFinite(previousScrollTop)) {
+      return
+    }
+
+    textarea.scrollTop = previousScrollTop
+  }
+
  nextTick(() => {
    const textarea = textareaRef.value
    if (!textarea) {
@@ -1309,6 +1494,12 @@ const setTextareaSelection = (start, end = start) => {

    textarea.focus()
    textarea.setSelectionRange(start, end)
+    restoreScroll(textarea)
+
+    if (import.meta.client) {
+      window.requestAnimationFrame(() => restoreScroll(textarea))
+    }
+
    refreshCaretLogicalLine()
  })
 }
@@ -2669,6 +2860,67 @@ const updateActiveToggleOptions = (patch = {}) => {
  markdownValue.value = nextLines.join('\n')
 }

+/**
+ * 현재 선택된 텍스트에 인라인 색상을 적용한다.
+ * @param {string} color - 색상 이름
+ * @returns {void}
+ */
+const updateActiveInlineColor = (color) => {
+  const context = inlineColorSelectionContext.value
+
+  if (!context || context.kind !== 'inline-color') {
+    return
+  }
+
+  ensureBlockPanelEngaged()
+
+  if (context.mode === 'source') {
+    const value = markdownValue.value || ''
+    const start = Math.max(0, Math.min(context.start ?? 0, value.length))
+    const end = Math.max(start, Math.min(context.end ?? start, value.length))
+    const selectedText = value.slice(start, end)
+    const replacement = formatInlineColorMarkdown(color, selectedText)
+
+    markdownValue.value = `${value.slice(0, start)}${replacement}${value.slice(end)}`
+    inlineColorSelectionContext.value = null
+    setTextareaSelection(start + replacement.length, start + replacement.length, { preserveScroll: true })
+    return
+  }
+
+  if (context.mode === 'live' && Number.isInteger(context.sourceLine)) {
+    const lines = (markdownValue.value || '').split('\n')
+    const line = lines[context.sourceLine]
+
+    if (typeof line !== 'string') {
+      return
+    }
+
+    const prefixLength = getMarkdownLineBodyPrefixLength(line, context.bodyText || '')
+    const absoluteStart = prefixLength + Math.max(0, context.startOffset ?? 0)
+    const absoluteEnd = prefixLength + Math.max(context.startOffset ?? 0, context.endOffset ?? 0)
+    const selectedText = line.slice(absoluteStart, absoluteEnd)
+    const replacement = formatInlineColorMarkdown(color, selectedText)
+    const nextVisibleOffset = (context.startOffset ?? 0) + selectedText.length
+
+    lines.splice(context.sourceLine, 1, `${line.slice(0, absoluteStart)}${replacement}${line.slice(absoluteEnd)}`)
+    markdownValue.value = lines.join('\n')
+    inlineColorSelectionContext.value = null
+    pendingPreviewFocus.value = {
+      line: context.sourceLine,
+      offset: nextVisibleOffset
+    }
+    nextTick(() => {
+      previewRendererRef.value?.focusEditableAtLine(
+        context.sourceLine,
+        0,
+        'auto',
+        nextVisibleOffset,
+        'nearest'
+      )
+    })
+  }
+}
+
 /**
 * 이미지 마크다운을 삽입한다.
 * @param {{ url: string, alt?: string, width?: string }} image - 이미지 정보
@@ -2739,6 +2991,7 @@ defineExpose({
  updateActiveCalloutOptions,
  updateActiveCodeOptions,
  updateActiveToggleOptions,
+  updateActiveInlineColor,
  openMediaPicker
 })

--- a/components/admin/AdminPostForm.vue
+++ b/components/admin/AdminPostForm.vue
@@ -1198,6 +1198,15 @@ const onBlockPanelUpdateToggleOptions = (patch) => {
  blockEditor.value?.updateActiveToggleOptions?.(patch)
 }

+/**
+ * 블록 패널에서 선택 텍스트 색상을 수정한다.
+ * @param {string} color - 인라인 색상
+ * @returns {void}
+ */
+const onBlockPanelUpdateInlineColor = (color) => {
+  blockEditor.value?.updateActiveInlineColor?.(color)
+}
+
 const focusContentEditor = (event) => {
  if (event?.isComposing || isTitleInputComposing.value || event?.keyCode === 229) {
    return
@@ -2066,6 +2075,7 @@ defineExpose({
          @update-callout-options="onBlockPanelUpdateCalloutOptions"
          @update-code-options="onBlockPanelUpdateCodeOptions"
          @update-toggle-options="onBlockPanelUpdateToggleOptions"
+          @update-inline-color="onBlockPanelUpdateInlineColor"
        />
      </div>
      </aside>
--- a/components/content/ContentMarkdownEditableInline.vue
+++ b/components/content/ContentMarkdownEditableInline.vue
@@ -1540,4 +1540,48 @@ defineExpose({ focusEditor, readEditorValue })
  font-size: 0.9em;
  color: #fff;
 }
+
+.content-markdown-editable-inline :deep([data-inline-color='gray']) {
+  color: var(--site-muted);
+}
+
+.content-markdown-editable-inline :deep([data-inline-color='blue']) {
+  color: #0055ff;
+}
+
+.content-markdown-editable-inline :deep([data-inline-color='green']) {
+  color: #16ae68;
+}
+
+.content-markdown-editable-inline :deep([data-inline-color='yellow']) {
+  color: #a16207;
+}
+
+.content-markdown-editable-inline :deep([data-inline-color='red']) {
+  color: #e60000;
+}
+
+.content-markdown-editable-inline :deep([data-inline-color='purple']) {
+  color: #8800ff;
+}
+
+:global(html[data-theme='dark']) .content-markdown-editable-inline :deep([data-inline-color='blue']) {
+  color: #7aa2ff;
+}
+
+:global(html[data-theme='dark']) .content-markdown-editable-inline :deep([data-inline-color='green']) {
+  color: #5ee0a0;
+}
+
+:global(html[data-theme='dark']) .content-markdown-editable-inline :deep([data-inline-color='yellow']) {
+  color: #facc15;
+}
+
+:global(html[data-theme='dark']) .content-markdown-editable-inline :deep([data-inline-color='red']) {
+  color: #ff6b6b;
+}
+
+:global(html[data-theme='dark']) .content-markdown-editable-inline :deep([data-inline-color='purple']) {
+  color: #c084fc;
+}
 </style>
--- a/components/content/ContentMarkdownInlineSegments.vue
+++ b/components/content/ContentMarkdownInlineSegments.vue
@@ -0,0 +1,103 @@
+<script setup>
+import { parseInlineSegments } from '../../lib/markdown-inline.js'
+
+const props = defineProps({
+  /** 렌더링할 인라인 마크다운 텍스트 */
+  text: {
+    type: String,
+    default: ''
+  },
+  /** 링크에 적용할 클래스 */
+  linkClass: {
+    type: String,
+    default: 'text-[var(--site-accent)] underline underline-offset-4'
+  },
+  /** 줄바꿈을 br로 렌더링할지 여부 */
+  multiline: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const segmentLines = computed(() => {
+  const source = String(props.text || '')
+  const lines = props.multiline ? source.split('\n') : [source]
+  return lines.map(parseInlineSegments)
+})
+
+/**
+ * 인라인 색상 클래스명을 반환한다.
+ * @param {string} color - 색상 이름
+ * @returns {string} 클래스명
+ */
+const getInlineColorClass = (color) => `content-markdown-inline-segments__color--${String(color || '').trim().toLowerCase()}`
+</script>
+
+<template>
+  <template v-for="(lineSegments, lineIndex) in segmentLines" :key="`inline-line-${lineIndex}`">
+    <br v-if="lineIndex > 0">
+    <template v-for="(segment, segmentIndex) in lineSegments" :key="`inline-segment-${lineIndex}-${segmentIndex}`">
+      <strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
+      <em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
+      <sub v-else-if="segment.type === 'subscript'">{{ segment.text }}</sub>
+      <sup v-else-if="segment.type === 'superscript'">{{ segment.text }}</sup>
+      <code v-else-if="segment.type === 'code'" class="content-markdown-inline-segments__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
+      <a v-else-if="segment.type === 'link'" :class="linkClass" :href="segment.href" target="_blank" rel="noreferrer">{{ segment.text }}</a>
+      <span
+        v-else-if="segment.type === 'color'"
+        class="content-markdown-inline-segments__color"
+        :class="getInlineColorClass(segment.color)"
+        :data-inline-color="segment.color"
+      >
+        <ContentMarkdownInlineSegments :text="segment.text" :link-class="linkClass" />
+      </span>
+      <template v-else>{{ segment.text }}</template>
+    </template>
+  </template>
+</template>
+
+<style scoped>
+.content-markdown-inline-segments__color--gray {
+  color: var(--site-muted);
+}
+
+.content-markdown-inline-segments__color--blue {
+  color: #0055ff;
+}
+
+.content-markdown-inline-segments__color--green {
+  color: #16ae68;
+}
+
+.content-markdown-inline-segments__color--yellow {
+  color: #a16207;
+}
+
+.content-markdown-inline-segments__color--red {
+  color: #e60000;
+}
+
+.content-markdown-inline-segments__color--purple {
+  color: #8800ff;
+}
+
+:global(html[data-theme='dark']) .content-markdown-inline-segments__color--blue {
+  color: #7aa2ff;
+}
+
+:global(html[data-theme='dark']) .content-markdown-inline-segments__color--green {
+  color: #5ee0a0;
+}
+
+:global(html[data-theme='dark']) .content-markdown-inline-segments__color--yellow {
+  color: #facc15;
+}
+
+:global(html[data-theme='dark']) .content-markdown-inline-segments__color--red {
+  color: #ff6b6b;
+}
+
+:global(html[data-theme='dark']) .content-markdown-inline-segments__color--purple {
+  color: #c084fc;
+}
+</style>
--- a/components/content/ContentMarkdownRenderer.vue
+++ b/components/content/ContentMarkdownRenderer.vue
@@ -5,7 +5,7 @@ import {
  isImageUrl,
  parseImageMarkdownLine
 } from '../../lib/markdown-image.js'
-import { parseInlineSegments, readEditableTextFromElement, setEditableCaretOffset } from '../../lib/markdown-inline.js'
+import { readEditableTextFromElement, setEditableCaretOffset } from '../../lib/markdown-inline.js'
 import {
  applyLiveSelectionDelete,
  collapseLiveSelection,
@@ -2482,15 +2482,6 @@ const onMergeWithPreviousLine = (lineIndex, payload) => {
  emit('merge-with-previous-line', { lineIndex, mergedLine })
 }

-/**
- * 줄바꿈이 포함된 인라인 마크다운을 줄 단위 세그먼트로 변환한다.
- * @param {string} value - 원본 문자열
- * @returns {Array<Array<{ type: string, text: string, href?: string }>>} 줄별 인라인 세그먼트
- */
-const parseInlineSegmentLines = (value) => {
-  return String(value || '').split('\n').map(parseInlineSegments)
-}
-
 /**
 * 라이트박스를 연다
 * @param {Array<Object>} images - 이미지 목록
@@ -3057,15 +3048,7 @@ onBeforeUnmount(() => {
        @merge-with-previous="onMergeWithPreviousLine(block.meta.startLine, $event)"
      />
      <ProseHeading v-else-if="block.type === 'heading'" :id="headingIdsByBlock[block.id]" :level="block.level">
-        <template v-for="(segment, segmentIndex) in parseInlineSegments(block.text)" :key="`${block.id}-heading-${segmentIndex}`">
-          <strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
-          <em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
-          <sub v-else-if="segment.type === 'subscript'">{{ segment.text }}</sub>
-          <sup v-else-if="segment.type === 'superscript'">{{ segment.text }}</sup>
-          <code v-else-if="segment.type === 'code'" class="content-markdown-renderer__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
-          <a v-else-if="segment.type === 'link'" class="text-[var(--site-accent)] underline underline-offset-4" :href="segment.href" target="_blank" rel="noreferrer">{{ segment.text }}</a>
-          <template v-else>{{ segment.text }}</template>
-        </template>
+        <ContentMarkdownInlineSegments :text="block.text" />
      </ProseHeading>
      <ProseBlockquote
        v-else-if="block.type === 'quote' && interactive && block.variant !== 'alt'"
@@ -3097,15 +3080,7 @@ onBeforeUnmount(() => {
        :variant="block.variant || 'default'"
        :background="block.quoteBackground"
      >
-        <template v-for="(segment, segmentIndex) in parseInlineSegments(block.text)" :key="`${block.id}-quote-${segmentIndex}`">
-          <strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
-          <em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
-          <sub v-else-if="segment.type === 'subscript'">{{ segment.text }}</sub>
-          <sup v-else-if="segment.type === 'superscript'">{{ segment.text }}</sup>
-          <code v-else-if="segment.type === 'code'" class="content-markdown-renderer__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
-          <a v-else-if="segment.type === 'link'" class="text-[var(--site-accent)] underline underline-offset-4" :href="segment.href" target="_blank" rel="noreferrer">{{ segment.text }}</a>
-          <template v-else>{{ segment.text }}</template>
-        </template>
+        <ContentMarkdownInlineSegments :text="block.text" />
      </ProseBlockquote>
      <ProseList v-else-if="block.type === 'list' && interactive" :ordered="block.ordered || false">
        <li
@@ -3156,15 +3131,7 @@ onBeforeUnmount(() => {
            aria-hidden="true"
          />
          <span class="min-w-0 flex-1">
-          <template v-for="(segment, segmentIndex) in parseInlineSegments(item)" :key="`${block.id}-${itemIndex}-${segmentIndex}`">
-            <strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
-            <em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
-            <sub v-else-if="segment.type === 'subscript'">{{ segment.text }}</sub>
-            <sup v-else-if="segment.type === 'superscript'">{{ segment.text }}</sup>
-            <code v-else-if="segment.type === 'code'" class="content-markdown-renderer__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
-            <a v-else-if="segment.type === 'link'" class="text-[var(--site-accent)] underline underline-offset-4" :href="segment.href" target="_blank" rel="noreferrer">{{ segment.text }}</a>
-            <template v-else>{{ segment.text }}</template>
-          </template>
+            <ContentMarkdownInlineSegments :text="item" />
          </span>
        </li>
      </ProseList>
@@ -3244,15 +3211,7 @@ onBeforeUnmount(() => {
        :title="block.title"
        :background="block.calloutBackground"
      >
-        <template v-for="(segment, segmentIndex) in parseInlineSegments(block.text)" :key="`${block.id}-callout-${segmentIndex}`">
-          <strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
-          <em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
-          <sub v-else-if="segment.type === 'subscript'">{{ segment.text }}</sub>
-          <sup v-else-if="segment.type === 'superscript'">{{ segment.text }}</sup>
-          <code v-else-if="segment.type === 'code'" class="content-markdown-renderer__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
-          <a v-else-if="segment.type === 'link'" class="underline underline-offset-4" :href="segment.href" target="_blank" rel="noreferrer">{{ segment.text }}</a>
-          <template v-else>{{ segment.text }}</template>
-        </template>
+        <ContentMarkdownInlineSegments :text="block.text" link-class="underline underline-offset-4" />
      </ProseCallout>
      <ContentMarkdownToggleEditor
        v-else-if="block.type === 'toggle' && interactive"
@@ -3267,15 +3226,7 @@ onBeforeUnmount(() => {
        @delete-line="onDeleteLine"
      />
      <ProseToggle v-else-if="block.type === 'toggle'" :title="block.title || '더 보기'" :default-open="block.defaultOpen" animated>
-        <template v-for="(segment, segmentIndex) in parseInlineSegments(block.text)" :key="`${block.id}-toggle-${segmentIndex}`">
-          <strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
-          <em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
-          <sub v-else-if="segment.type === 'subscript'">{{ segment.text }}</sub>
-          <sup v-else-if="segment.type === 'superscript'">{{ segment.text }}</sup>
-          <code v-else-if="segment.type === 'code'" class="content-markdown-renderer__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
-          <a v-else-if="segment.type === 'link'" class="text-[var(--site-accent)] underline underline-offset-4" :href="segment.href" target="_blank" rel="noreferrer">{{ segment.text }}</a>
-          <template v-else>{{ segment.text }}</template>
-        </template>
+        <ContentMarkdownInlineSegments :text="block.text" />
      </ProseToggle>
      <ProseBookmark
        v-else-if="block.type === 'bookmark' && block.meta.url"
@@ -3466,15 +3417,7 @@ onBeforeUnmount(() => {
                class="border border-line bg-[color-mix(in_srgb,var(--site-text)_6%,transparent)] px-3 py-2 font-semibold"
                :class="getTableCellAlignClass(block.meta.alignments?.[headerIndex])"
              >
-                <template v-for="(segment, segmentIndex) in parseInlineSegments(header)" :key="`${block.id}-table-head-${headerIndex}-${segmentIndex}`">
-                  <strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
-                  <em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
-                  <sub v-else-if="segment.type === 'subscript'">{{ segment.text }}</sub>
-                  <sup v-else-if="segment.type === 'superscript'">{{ segment.text }}</sup>
-                  <code v-else-if="segment.type === 'code'" class="content-markdown-renderer__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
-                  <a v-else-if="segment.type === 'link'" class="text-[var(--site-accent)] underline underline-offset-4" :href="segment.href" target="_blank" rel="noreferrer">{{ segment.text }}</a>
-                  <template v-else>{{ segment.text }}</template>
-                </template>
+                <ContentMarkdownInlineSegments :text="header" />
              </th>
            </tr>
          </thead>
@@ -3486,15 +3429,7 @@ onBeforeUnmount(() => {
                class="border border-line px-3 py-2 align-top"
                :class="getTableCellAlignClass(block.meta.alignments?.[cellIndex])"
              >
-                <template v-for="(segment, segmentIndex) in parseInlineSegments(row[cellIndex] || '')" :key="`${block.id}-table-cell-${rowIndex}-${cellIndex}-${segmentIndex}`">
-                  <strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
-                  <em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
-                  <sub v-else-if="segment.type === 'subscript'">{{ segment.text }}</sub>
-                  <sup v-else-if="segment.type === 'superscript'">{{ segment.text }}</sup>
-                  <code v-else-if="segment.type === 'code'" class="content-markdown-renderer__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
-                  <a v-else-if="segment.type === 'link'" class="text-[var(--site-accent)] underline underline-offset-4" :href="segment.href" target="_blank" rel="noreferrer">{{ segment.text }}</a>
-                  <template v-else>{{ segment.text }}</template>
-                </template>
+                <ContentMarkdownInlineSegments :text="row[cellIndex] || ''" />
              </td>
            </tr>
          </tbody>
@@ -3543,18 +3478,7 @@ onBeforeUnmount(() => {
        @slash-apply="emit('slash-apply', $event)"
      />
      <p v-else-if="block.type === 'paragraph'" class="content-markdown-renderer__paragraph mb-2.5 text-base text-[var(--site-text)] last:mb-0">
-        <template v-for="(lineSegments, lineIndex) in parseInlineSegmentLines(block.text)" :key="`${block.id}-paragraph-line-${lineIndex}`">
-          <br v-if="lineIndex > 0">
-          <template v-for="(segment, segmentIndex) in lineSegments" :key="`${block.id}-paragraph-${lineIndex}-${segmentIndex}`">
-            <strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
-            <em v-else-if="segment.type === 'em'">{{ segment.text }}</em>
-            <sub v-else-if="segment.type === 'subscript'">{{ segment.text }}</sub>
-            <sup v-else-if="segment.type === 'superscript'">{{ segment.text }}</sup>
-            <code v-else-if="segment.type === 'code'" class="content-markdown-renderer__inline-code rounded bg-[#252525] px-1.5 py-0.5 text-[0.9em] text-white">{{ segment.text }}</code>
-            <a v-else-if="segment.type === 'link'" class="text-[var(--site-accent)] underline underline-offset-4" :href="segment.href" target="_blank" rel="noreferrer">{{ segment.text }}</a>
-            <template v-else>{{ segment.text }}</template>
-          </template>
-        </template>
+        <ContentMarkdownInlineSegments :text="block.text" multiline />
      </p>

      <SiteAdSlot
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,5 +1,10 @@
 # 업데이트 요약

+## v1.5.105
+
+- 글쓰기에서 일반 텍스트를 선택하면 오른쪽 패널에서 글자색을 지정할 수 있게 했다.
+- 본문 인라인 색상은 회색·파랑·초록·노랑·빨강·보라를 지원하고, 색상 내부에서 굵게 등 기존 인라인 마크다운과 조합할 수 있다.
+
 ## v1.5.104

 - 게시물 상세 목차에서 긴 제목이 2줄 이상으로 표시되어도 활성 왼쪽 라인이 항목 높이에 맞게 표시되도록 조정했다.
--- a/docs/deploy.md
+++ b/docs/deploy.md
@@ -1,6 +1,6 @@
 # 배포 가이드

-> 로컬 기준 v1.5.104에서 `npm run lint` 검증을 통과했다. NAS 실제 컨테이너 기동과 도메인/프록시 접속 검증은 운영 배포 단계에서 진행한다.
+> 로컬 기준 v1.5.105에서 `npm run lint`, `npm run build` 검증을 통과했다. NAS 실제 컨테이너 기동과 도메인/프록시 접속 검증은 운영 배포 단계에서 진행한다.

 ## 빌드 유형

@@ -16,6 +16,12 @@

 ## 로컬 개발

+### v1.5.105 참고
+
+- 추가 DB 마이그레이션은 없다.
+- 게시물 글쓰기에서 일반 텍스트를 선택하면 오른쪽 텍스트 색상 패널이 열리는지 확인한다.
+- 색상 선택 후 공개 본문과 라이브 모드에서 `::red[텍스트]`, `::red[**굵은 텍스트**]` 등 인라인 색상과 기존 인라인 마크다운 조합이 표시되는지 확인한다.
+
 ### v1.5.104 참고

 - 추가 DB 마이그레이션은 없다.
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,9 @@
 # 의사결정 이력

+## 2026-06-16 v1.5.105 — 텍스트 색상은 제한된 인라인 토큰으로 저장한다
+
+게시물 본문에서 중요한 단어나 덜 중요한 단어를 색으로 구분하려면 작성 UI에서는 오른쪽 패널 선택 흐름이 자연스럽지만, 저장 형식은 임의 HTML style보다 검증 가능한 마크다운 확장 토큰이 안전하다. 따라서 선택 텍스트 색상은 `::red[텍스트]`처럼 제한된 인라인 토큰으로 저장하고, 렌더러는 `gray`, `blue`, `green`, `yellow`, `red`, `purple` 프리셋만 해석한다. 이렇게 하면 공개 화면 다크 모드 색상 보정과 라이브 편집 직렬화를 한 곳에서 관리할 수 있다.
+
 ## 2026-06-12 v1.5.98 — 게시물 TOC는 내부 스크롤보다 자연스러운 흐름을 우선한다

 오른쪽 사이드바의 TOC에 별도 최대 높이를 두면 광고 영역은 항상 보장되지만, 긴 목차가 작은 박스 안에서 따로 스크롤되어 문서 탐색과 광고 배치가 분리되어 보인다. 게시물 상세에서는 Tailwind 문서처럼 TOC 전체가 먼저 펼쳐지고 광고가 그 아래에 이어지는 흐름이 더 자연스러우므로, TOC 자체 높이 제한을 제거하고 활성 항목 보정은 오른쪽 사이드바 전체 스크롤 기준으로 처리한다.
--- a/docs/map.md
+++ b/docs/map.md
@@ -35,6 +35,7 @@
 | lib/markdown-image.js | 이미지 마크다운 직렬화·파싱, 단독 이미지 URL 판별 |
 | lib/markdown-toc.js | 공개 게시글 TOC용 H1~H3 제목 추출과 앵커 ID 생성 |
 | lib/markdown-slash-commands.js | 관리자 Markdown-first 에디터 슬래시 명령 목록과 삽입 줄 정의 |
+| lib/markdown-inline.js | 공개·관리자 공통 인라인 마크다운 파서, 링크·굵게·기울임·인라인 코드·첨자·인라인 색상 토큰(`::color[텍스트]`) 변환 |
 | lib/post-tag-limit.js | 게시물별 태그 최대 개수 기본값·허용 범위·정규화 |
 | lib/analytics-shared.js | 통계 추적 경로 필터·체류/스크롤 상수(클라이언트·서버 공용) |
 | lib/analytics.js | 서버 전용 visitor/session hash(`node:crypto`) |
@@ -108,8 +109,8 @@
 | components/admin/AdminMediaVideoThumbnail.vue | 관리자 미디어 목록 비디오 항목의 초반 프레임 캔버스 썸네일 |
 | components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, Ghost형 툴바(왼쪽 상태 텍스트·Publish/Update/Unpublish/Unschedule, 서버 반영 상태 기준 분기), 초안만 서버 디바운스 자동 저장·신규 임시 슬러그·발행·예약·멤버십·비공개 상태 저장, 발행 모달(중앙 배치), 좌우 설정 패널(작은 화면은 오른쪽 고정 오버레이), 오른쪽 `View Post` 링크, 오른쪽 하단 본문 통계(단어·문자·공백·읽기 시간·블록·이미지), 미리보기 emit·미저장 이탈 가드, 대표 이미지 본문 상단 표시 토글, 추천 글 토글, 사이트 설정 기준 태그 최대 개수 제한, 태그 색상 배지 다중 입력·메인 태그 드롭다운·부분 검색 추천 |
 | components/admin/AdminPageForm.vue | 관리자 페이지 작성/수정 폼, 게시글 작성과 같은 전체 화면 에디터·상단 저장 툴바·접이식 오른쪽 설정 패널, 페이지 공개 상태 선택, HTML 문서 기본 모드, 빈 본문/`!`+Tab HTML 골격 자동 완성, 항상 보이는 일반 텍스트/HTML 모드 선택, 한글 제목 영문 슬러그 자동 변환, HTML textarea 커서 위치 파일 URL 삽입 |
-| components/admin/AdminMarkdownEditor.vue | 관리자 글 Markdown-first 에디터, 라이브·소스 모드 `/` 슬래시 명령(`/표` 기본 표 템플릿 포함)·미디어 모달(이미지·갤러리·비디오·오디오·파일, 카드 썸네일 파생 파일 숨김, 업로드 중 중복 업로드·닫기 차단·로딩 표시, 업로드 완료 후 목록 갱신 및 수동 선택 삽입), 코드 블록 본문 슬래시 명령 비활성화, 커서 블록 컨텍스트·`block-panel` emit, 에디터 본문 `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 | 게시물 설정 사이드바 오버레이 블록 설정(이미지·갤러리·임베드·인용 배경색·콜아웃 제목·아이콘·배경색·코드·토글), 갤러리 선택 이미지 강조 |
+| components/admin/AdminMarkdownEditor.vue | 관리자 글 Markdown-first 에디터, 라이브·소스 모드 `/` 슬래시 명령(`/표` 기본 표 템플릿 포함)·미디어 모달(이미지·갤러리·비디오·오디오·파일, 카드 썸네일 파생 파일 숨김, 업로드 중 중복 업로드·닫기 차단·로딩 표시, 업로드 완료 후 목록 갱신 및 수동 선택 삽입), 코드 블록 본문 슬래시 명령 비활성화, 커서 블록 컨텍스트·선택 텍스트 색상 컨텍스트 `block-panel` emit, 에디터 본문 `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 | 게시물 설정 사이드바 오버레이 블록 설정(선택 텍스트 색상, 이미지·갤러리·임베드·인용 배경색·콜아웃 제목·아이콘·배경색·코드·토글), 갤러리 선택 이미지 강조 |
 | components/admin/AdminBlockEditor.vue | 관리자 글 블록형 에디터, 이미지/갤러리/콜아웃/토글/임베드 블록, 콜아웃 Emoji on/off·이모지 프리셋·인용과 같은 배경 프리셋 선택(우측 고정 설정 패널), 갤러리 복수 미디어 선택·이미지 수별 열 배치·삽입 위치 표시 드래그 순서 변경, 한글 조합 입력 처리, Shift+Enter 줄바꿈, 코드 블록 단축 변환, AFFiNE 참고 세로 막대형 블록 핸들 선택/삭제/드래그 이동과 삽입선 표시, 하단 빈 입력 블록 유지, 본문 placeholder 표시 |
 | components/admin/AdminTagForm.vue | 관리자 태그 생성/수정 폼(이름/슬러그/설명/색상만 편집, 수정 화면 변경 저장 버튼 변경사항 기준 활성화) |
 | components/admin/AdminMemberForm.vue | 관리자 멤버 추가/수정 폼(Ghost형 3분할, 기존 회원 보기/수정 모드 분리, 요약 1fr·입력 2fr, 원형 썸네일 hover 등록·변경·삭제, 기본 정보·레이블·관리자 노트·활동 요약, 설정 메뉴의 비밀번호 변경·멤버 삭제 모달, 저장 토스트, 미저장 변경사항 이탈 확인) |
@@ -128,6 +129,7 @@
 | components/content/ContentRenderer.vue | 게시물/페이지 본문 |
 | components/content/ContentMarkdownRenderer.vue | 마크다운 문자열 기반 본문 렌더링, 문단 text-base(16px), 빈 줄 spacer 보존·hard break `<br>` 처리, 표준 마크다운 표 파싱·렌더링, 공개 게시물 인아티클 광고를 본문 길이에 따라 0~2회 삽입, Obsidian식 위첨자·아래첨자 인라인 렌더링, 확장 블록 파싱, `:::` fenced 블록 원본 범위 보정, 닫히지 않은 코드 펜스 하위 콘텐츠 보호, 인용 막대 색상 옵션(`> [!bg=...]`), 라이브 문단 `>` 즉시 인용 변환과 ` ``` `·`!!!` Enter 코드 블록·콜아웃 단축 생성, 라이브 콜아웃·인용 포커스 기반 오른쪽 설정 패널 연결, 라이브 인용·콜아웃 멀티라인 편집 줄 범위 포커스와 위/아래 방향키 외부 문단 이탈, 인용 Backspace 문단 복귀, 라이브 방향키 이동 시 편집 가능한 줄·카드형 블록 탐색, 라이브 코드·콜아웃·토글 내부 줄 삭제와 마지막 줄 블록 삭제, 라이브 이미지·갤러리 드래그 병합·추가·분리 UI, 갤러리 비율 기반 행 레이아웃, 라이브 갤러리 개별 이미지 편집·삭제, 리스트 마커 파란 계열 통일 |
 | components/content/ContentMarkdownEditableInline.vue | 라이브 모드 공통 인라인 편집 영역, 일반 인라인 마크다운·Obsidian식 첨자 렌더링과 plain text 멀티라인 본문·끝 줄바꿈 보존, 한글 IME 조합 확정 Enter의 블록별 동작 연결, Shift 위/아래 인접 블록 선택 확장·단계적 `Cmd/Ctrl+A` 처리, 멀티라인 Enter 텍스트 값 치환, 첫 줄 빈 줄 포함 줄바꿈 유지 |
+| components/content/ContentMarkdownInlineSegments.vue | 공개·라이브 본문 공통 인라인 세그먼트 렌더링(링크·굵게·기울임·인라인 코드·첨자·인라인 색상) |
 | lib/markdown-live-selection.js | 라이브 모드 Selection Bridge, 인접 contenteditable 범위 확장·블록/문서 전체 선택·교차 선택 삭제 마크다운 반영, 콜아웃·인용 전체 선택 삭제 시 빈 본문 줄 보존, Selection focus 기준 연속 확장 |
 | components/content/ProseHeading.vue | h1~h6 제목, 기본 mt-12 제거 |
 | components/content/ProseImage.vue | 본문 내 이미지, 로드 실패·빈 URL placeholder |
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -83,7 +83,7 @@
 - 공개 게시물 본문은 콘텐츠 타입별 컴포넌트로 분리해 추후 스타일 변경이 쉽도록 구성
 - 표준 마크다운 표(`| 헤더 | ... |`, `| --- | ... |`)는 본문에서 가로 스크롤 가능한 HTML table로 렌더링한다. 정렬 구분선(`:---`, `:---:`, `---:`)은 각각 좌/중앙/우 정렬로 반영한다.
 - 인용문(`>`)은 왼쪽 세로 막대형 기본 스타일로 표시한다. 기본 인용 텍스트는 라이트·다크 모드 모두 사이트 본문 텍스트 색상(`--site-text`)을 따른다. 첫 줄 옵션 `> [!bg=blue]` 또는 `> {bg=blue}`는 인용 막대 색상으로 반영하며, 지원 값은 콜아웃과 같은 `gray`, `blue`, `green`, `yellow`, `red`, `purple`이다.
- 관리자 Markdown-first 글쓰기의 오른쪽 블록 설정 패널은 인용·콜아웃·코드 블록·토글 설정을 지원한다. 콜아웃은 제목·아이콘 표시 여부·아이콘·배경색, 코드 블록은 언어·줄번호 표시 여부, 토글은 기본 펼침·닫힘 상태를 선언 줄에 저장한다. 콜아웃 아이콘은 라이브·공개 화면 모두 왼쪽 상단에 배치하고, 아이콘·제목 헤더 아래에 본문을 줄바꿈해 표시한다. 아이콘 미사용 시 자리 표시자를 남기지 않는다. 라이브 문단에서는 `>` 입력으로 인용, ``` Enter로 코드 블록, `!!!` Enter로 콜아웃을 만들 수 있고, `/표` 또는 `/table` 슬래시 명령으로 기본 3열 표 마크다운을 삽입한다. 소스·라이브 모드 모두 `Cmd/Ctrl+K`로 링크 마크다운을 삽입한다. 라이브 코드·인용·콜아웃·토글 블록은 맨 위/맨 아래 방향키로 외부 기본 문단을 만들며 빠져나올 수 있고, 인용 첫 글자 앞 Backspace는 일반 문단으로 되돌린다. 한글 등 IME 조합 입력 중에는 줄바꿈 직후 블록 판별이 일시적으로 비어도 마지막 블록 컨텍스트를 유지해 설정 패널이 닫히지 않게 한다.
+- 관리자 Markdown-first 글쓰기의 오른쪽 블록 설정 패널은 인용·콜아웃·코드 블록·토글 설정과 선택 텍스트 색상 설정을 지원한다. 콜아웃은 제목·아이콘 표시 여부·아이콘·배경색, 코드 블록은 언어·줄번호 표시 여부, 토글은 기본 펼침·닫힘 상태를 선언 줄에 저장한다. 일반 텍스트 범위를 선택하면 텍스트 색상 패널이 열리고 회색·파랑·초록·노랑·빨강·보라 인라인 색상을 적용한다. 콜아웃 아이콘은 라이브·공개 화면 모두 왼쪽 상단에 배치하고, 아이콘·제목 헤더 아래에 본문을 줄바꿈해 표시한다. 아이콘 미사용 시 자리 표시자를 남기지 않는다. 라이브 문단에서는 `>` 입력으로 인용, ``` Enter로 코드 블록, `!!!` Enter로 콜아웃을 만들 수 있고, `/표` 또는 `/table` 슬래시 명령으로 기본 3열 표 마크다운을 삽입한다. 소스·라이브 모드 모두 `Cmd/Ctrl+K`로 링크 마크다운을 삽입한다. 라이브 코드·인용·콜아웃·토글 블록은 맨 위/맨 아래 방향키로 외부 기본 문단을 만들며 빠져나올 수 있고, 인용 첫 글자 앞 Backspace는 일반 문단으로 되돌린다. 한글 등 IME 조합 입력 중에는 줄바꿈 직후 블록 판별이 일시적으로 비어도 마지막 블록 컨텍스트를 유지해 설정 패널이 닫히지 않게 한다.
 - 게시물 상세의 오른쪽 사이드바는 데스크톱에서 블로그 소개·Follow·추천 사이트 대신 본문 H1~H3 제목 기반 목차를 최상단에 표시한다. 목차는 별도 최대 높이와 내부 스크롤을 두지 않고 전체 목록이 먼저 펼쳐지며, 왼쪽 기준선과 브랜드 컬러 활성 항목 표시선을 둔다. 목차 항목은 최소 24px 높이와 세로 중앙 정렬을 사용하며, 2줄 이상 제목에서는 항목 높이에 맞춰 활성 표시선도 함께 늘어난다. 활성 표시선은 항목의 가상 요소 배경 막대로 그려 텍스트 시작점이 밀리지 않게 한다. 목차 링크는 본문 제목에 부여된 앵커 ID로 부드럽게 이동하며, 고정 상단 헤더 높이와 여백을 반영해 제목이 화면 밖에 걸리지 않게 한다. 본문 스크롤 중에는 현재 제목에 해당하는 목차 항목을 강조하고, 목차 항목이 많으면 오른쪽 사이드바 스크롤이 활성 항목을 따라간다. 본문 제목이 없으면 목차 없음 문구를 표시한다. 오른쪽 사이드바가 본문 아래로 내려가는 모바일 폭에서는 목차를 숨긴다. 게시물 상세에서는 일반 오른쪽 사이드 광고 대신 게시물 사이드 광고 코드를 목차 아래에 표시하고, 왼쪽 사이드바에는 게시물 광고를 표시하지 않는다. 게시물 상세 목차와 게시물 사이드 광고 슬롯은 하단 구분선을 표시하지 않는다.
 - 제목 우측 공유 버튼을 누르면 게시물 공유 모달을 연다.
 - 로그인 회원 ID가 게시물 `author_id`와 같으면 제목 우측 공유 버튼 옆에 수정 아이콘을 표시하며, 클릭 시 `/admin/posts/:id` 편집 화면을 새 탭으로 연다.
@@ -659,14 +659,14 @@ components/content/
 - 인용(`>`) 블록은 첫 인용 줄에 `> [!bg=yellow]` 또는 `> {bg=yellow}` 옵션 줄을 두면 해당 줄은 숨기고 블록 배경을 바꾼다. 지원 배경 프리셋은 콜아웃과 같은 `gray`, `blue`, `green`, `yellow`, `red`, `purple`이며, 옵션이 없으면 회색 기본 인용 스타일을 쓴다.
 - 관리자 **라이브 모드**(미리보기) 인라인 편집: 문단·빈 줄·제목·인용·목록·코드 블록·콜아웃·토글을 렌더 스타일 그대로 contenteditable로 수정한다. blur·문단 이동(방향키) 시 편집 영역의 `<strong>`·`<em>` 등을 `**`·`*` 마크다운으로 다시 직렬화해 저장한다. **Enter**·**Shift+Enter** 모두 다음 문단(블록) 분리. 문단 안 `/`로 슬래시 명령 메뉴(`/image`+Enter 이미지 삽입 등). **소스(작성) 모드** textarea에서도 동일한 `/` 슬래시 메뉴를 사용하되, 코드 fenced 블록 본문 안에서는 `/`를 일반 텍스트로 둔다. 상단 마크다운 툴바는 두지 않는다. 슬래시 기본 제목은 **h2·h3·h4**만 표시하며, 본문 **h1**은 `/h1` 검색 시에만 삽입한다(게시물 **제목 필드**가 페이지의 유일한 h1). `Cmd+Shift+K`는 소스 모드와 라이브 모드에서 현재 줄을 삭제하며, 소스 모드에서 여러 줄이 선택되어 있으면 선택 범위가 걸친 줄을 함께 삭제한다. 코드·콜아웃·토글 블록 내부에서는 커서가 있는 본문 줄을 삭제하고, 남은 본문 줄이 1개뿐이면 fenced 블록 전체를 삭제한다. `Cmd/Ctrl+Z`는 에디터 본문 변경을 되돌리고, `Cmd/Ctrl+Shift+Z` 또는 `Ctrl+Y`는 다시 실행한다. 콜아웃 옵션은 첫 줄 `:::callout emoji=none bg=blue title="주의사항"`처럼 `emoji`·`bg`(gray|blue|green|yellow|red|purple)·`title`로 지정하며, 라이브 모드에서는 블록에 포커스가 들어오면 오른쪽 설정 패널에서 수정한다. 코드 블록은 ` ```언어`·`nolinenos`(줄 번호 숨김)를 지원한다. 라이브·공개 모두 `ProseCodeBlock`(`#15171a`, `px-4 py-3`, `text-sm leading-6`)으로 동일하게 표시한다. 라이브 모드 호버·포커스 시 Language 입력·줄번호 토글이 보인다. 공개 화면에는 언어 라벨 옆 **복사** 버튼으로 본문을 클립보드에 넣는다. 본문 하단 클릭으로 새 문단을 추가한다.
 - 라이브 모드 공통 편집기는 한글 IME 조합 확정 Enter를 문단·빈 줄의 분리, 제목·목록의 아래 줄 삽입, 토글 제목의 본문 이동, 인용·콜아웃·코드·토글 본문의 텍스트 줄바꿈에 동일하게 연결한다. IME가 확정 Enter의 `keydown`을 전달하지 않고 `keyup`만 남기는 경우에도 조합 종료 직후 Enter로 보고 같은 동작을 실행한다. Shift+방향키 범위 선택은 `ContentMarkdownRenderer` Selection Bridge가 인접 편집 블록까지 확장한다. 단일 줄 블록의 Shift+위/아래는 커서 위치와 상관없이 현재 열 기준으로 이전·다음 편집 블록까지 확장하고, 멀티라인 편집 영역은 첫 줄·마지막 줄 경계에서 `data-source-line`~`data-source-line-end` 줄 범위로 탐색한다. `Cmd/Ctrl+A` 1회는 현재 블록 전체, 짧은 시간 안 2회는 라이브 본문 전체를 선택한다. 교차 블록·전체 선택 상태에서 **Backspace**·**Delete**·**Cmd/Ctrl+X**는 선택 범위를 마크다운 줄로 변환해 `content-replace`로 본문을 갱신한다. 콜아웃·인용 내부 전체 선택 삭제는 블록을 제거하지 않고 빈 본문 줄을 남긴다. 블록 이동 단축키는 Shift 조합일 때 실행하지 않으며, 선택 제스처가 우선한다. 콜아웃 본문은 하나의 멀티라인 편집 영역으로 유지해 `Shift+방향키` 선택이 내부 여러 줄을 가로지를 수 있게 한다. 라이브 멀티라인 블록은 브라우저 기본 DOM 줄 생성 대신 텍스트 값 치환 방식으로 줄바꿈을 삽입하며, contenteditable 값을 읽을 때 끝 줄바꿈을 보존해 첫 줄 빈 줄과 후행 빈 줄이 소스·라이브 모드 전환 또는 저장 중 유실되지 않게 한다. 인용 마지막 줄에서 아래 방향키를 누르면 외부 빈 문단을 만들고 커서를 해당 문단으로 이동하지만, 콜아웃 아래 방향키는 본문 줄을 새로 만들지 않는다.
- 인라인 마크다운은 Obsidian식 `$...$` 첨자 토큰을 지원한다. `$H_2O$`는 `H`+아래첨자 `2`+`O`, `$2^8$`은 `2`+위첨자 `8`, `$_B^AR$`는 아래첨자 `B`와 위첨자 `AR`로 렌더링한다. 첨자 본문에 공백·기호가 필요하면 `$_{...}$`, `$^{...}$` 형식도 허용한다.
+- 인라인 마크다운은 Obsidian식 `$...$` 첨자 토큰과 `::color[텍스트]` 색상 토큰을 지원한다. `$H_2O$`는 `H`+아래첨자 `2`+`O`, `$2^8$`은 `2`+위첨자 `8`, `$_B^AR$`는 아래첨자 `B`와 위첨자 `AR`로 렌더링한다. 첨자 본문에 공백·기호가 필요하면 `$_{...}$`, `$^{...}$` 형식도 허용한다. 색상 토큰은 `::gray[덜 중요한 말]`, `::red[**중요한 말**]`처럼 저장하며 `gray`, `blue`, `green`, `yellow`, `red`, `purple`만 허용한다. 색상 토큰 내부의 굵게·기울임·인라인 코드·링크·첨자는 재귀적으로 렌더링한다.
 - 라이브 모드 `:::` fenced 블록의 원본 범위는 여는 줄부터 닫는 `:::` 줄까지만 포함한다. 연속된 콜아웃·토글·갤러리 등은 앞 블록 편집 시 다음 블록의 선언 줄을 교체 범위에 포함하지 않는다.
 - 이미지 파일을 붙여넣거나 드롭하면 관리자 업로드 API로 저장한 뒤 현재 커서 위치에 이미지 또는 갤러리 마크다운을 삽입한다.
 - 툴바 `이미지`·`갤러리`는 미디어 모달을 연다. 모달 기본 탭은 **미디어 라이브러리**이며 **업로드** 탭에서 드래그·파일 선택 후 라이브러리 목록을 갱신한다. 업로드 중에는 추가 드롭·파일 선택과 모달 닫기를 막고 로딩 스피너를 표시하며, 업로드 완료 후에는 모달을 자동으로 닫거나 본문에 자동 삽입하지 않는다. 본문 삽입은 라이브러리 목록에서 파일을 직접 선택한 뒤 `삽입` 버튼을 눌렀을 때만 실행한다.
 - 미디어 라이브러리에서 단일 이미지를 선택하면 `![alt](url)` 형식으로 삽입한다.
 - 미디어 라이브러리에서 여러 이미지를 선택하면 `:::gallery` fenced block으로 삽입한다.
 - 작성 모드에서 커서가 이미지 마크다운 줄, `:::gallery`, 단독 URL 임베드 줄, 기존 `:::embed`, 인용문, `:::callout`, 코드 fenced 블록, `:::toggle` 블록 안에 있고 textarea(또는 블록 패널)에 포커스가 있으면 게시물 설정 사이드바(420px) 위에 **블록 설정 패널**(`AdminEditorBlockPanel`)이 오른쪽에서 슬라이드 인한다. 본문·패널 바깥을 클릭하면 슬라이드 아웃한다. 라이브 모드 멀티라인 편집기는 실제 커서가 있는 원본 줄을 패널 상태에 반영하며, 커서가 지원 블록 밖으로 이동하면 직전 코드·콜아웃·인용 설정 패널을 닫는다. 코드 fenced 블록 판별은 위에서 아래로 여는 펜스와 닫는 펜스를 짝지어 처리해, 닫는 ` ``` ` 줄을 다음 코드 블록 시작으로 오인하지 않는다. 갤러리 이미지 추가 미디어 모달을 여는 동안에는 활성 갤러리 컨텍스트와 패널 상태를 유지한다.
- 블록 설정 패널: 이미지·갤러리(캡션, **파일명을 캡션으로 사용** 토글·기본 끔, URL, 갤러리 순서·삭제·추가), 임베드(URL), 인용 배경색, 콜아웃 제목·아이콘·배경색, 코드 언어·줄번호, 토글 기본 펼침 상태. `AdminMarkdownEditor`는 `block-panel` 이벤트로 상태를 `AdminPostForm`에 전달한다.
+- 블록 설정 패널: 이미지·갤러리(캡션, **파일명을 캡션으로 사용** 토글·기본 끔, URL, 갤러리 순서·삭제·추가), 임베드(URL), 인용 배경색, 콜아웃 제목·아이콘·배경색, 코드 언어·줄번호, 토글 기본 펼침 상태, 선택 텍스트 색상. `AdminMarkdownEditor`는 `block-panel` 이벤트로 상태를 `AdminPostForm`에 전달한다.
 - 미디어 라이브러리 갤러리 다중 선택 시 선택 항목은 **주황(`#ff7a00`) 굵은 테두리**로 표시한다.
 - 옵시디언식 토큰 숨김/백스페이스 복원 Live Preview는 후속 단계로 둔다.
 - 제목은 별도 라벨 영역이 아니라 에디터 상단의 큰 제목 입력으로 표시한다.
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,14 @@
 # 업데이트 이력

+## v1.5.105
+
+- 게시물 글쓰기: 일반 텍스트 선택 시 오른쪽 블록 설정 패널에 텍스트 색상 선택 패널이 열리도록 추가.
+- 게시물 글쓰기: 선택 텍스트 색상 적용 후 라이브 작성 위치가 크게 이동하지 않도록 커서 복원 기준 수정.
+- 게시물 글쓰기: 라이브 모드 텍스트 부분 선택 색상 적용 시 선택 시작점이 0으로 잡혀 앞쪽 내용까지 함께 색상이 적용되던 문제 수정.
+- 게시물 글쓰기: 소스 모드 텍스트 색상 적용 후 textarea 스크롤 위치를 보존하도록 수정.
+- 인라인 마크다운: `::red[텍스트]` 형식의 색상 토큰 렌더링과 색상 내부 굵게·기울임 등 인라인 조합 처리 추가.
+- 공개 본문: 회색·파랑·초록·노랑·빨강·보라 인라인 텍스트 색상 표시 추가.
+
 ## v1.5.104

 - 게시물 상세 목차: 2줄 이상 제목에서 활성 표시선과 텍스트 정렬이 틀어지지 않도록 항목 높이를 최소 24px 기준으로 수정.
--- a/lib/markdown-inline.js
+++ b/lib/markdown-inline.js
@@ -1,5 +1,15 @@
+/** @type {string[]} 인라인 색상 프리셋 */
+export const INLINE_COLOR_NAMES = ['gray', 'blue', 'green', 'yellow', 'red', 'purple']
+
 /** @type {RegExp} 인라인 마크다운 패턴 */
-const INLINE_MARKDOWN_RE = /(\$([^$\n]+?)\$|\[([^\]]+)\]\((https?:\/\/[^)\s]+|\/[^)\s]+)\)|\*\*([^*]+)\*\*|`([^`]+)`|\*([^*]+)\*)/g
+const INLINE_MARKDOWN_RE = /(::(gray|blue|green|yellow|red|purple)\[((?:\\\]|[^\]\n])+)\]|\$([^$\n]+?)\$|\[([^\]]+)\]\((https?:\/\/[^)\s]+|\/[^)\s]+)\)|\*\*([^*]+)\*\*|`([^`]+)`|\*([^*]+)\*)/g
+
+/**
+ * 지원하는 인라인 색상인지 확인한다.
+ * @param {string|null|undefined} color - 색상 이름
+ * @returns {boolean} 지원 여부
+ */
+export const isInlineColorName = (color) => INLINE_COLOR_NAMES.includes(String(color || '').trim().toLowerCase())

 /**
 * HTML 특수문자 이스케이프
@@ -126,10 +136,23 @@ const formatScriptMarkdown = (marker, value) => {
  return `$${marker}${body}$`
 }

+/**
+ * 색상 인라인 마크다운을 만든다.
+ * @param {string} color - 색상 이름
+ * @param {string} value - 표시 텍스트
+ * @returns {string} 색상 인라인 마크다운
+ */
+export const formatInlineColorMarkdown = (color, value) => {
+  const normalizedColor = String(color || '').trim().toLowerCase()
+  const safeColor = isInlineColorName(normalizedColor) ? normalizedColor : 'red'
+  const text = String(value || '').replaceAll(']', '\\]')
+  return `::${safeColor}[${text}]`
+}
+
 /**
 * 인라인 마크다운을 표시 세그먼트로 변환한다.
 * @param {string} value - 원본 문자열
- * @returns {Array<{ type: string, text: string, href?: string }>} 인라인 세그먼트
+ * @returns {Array<{ type: string, text: string, href?: string, color?: string }>} 인라인 세그먼트
 */
 export const parseInlineSegments = (value) => {
  const source = String(value || '')
@@ -146,29 +169,35 @@ export const parseInlineSegments = (value) => {
      })
    }

-    if (match[2]) {
-      segments.push(...parseObsidianMathSegments(match[2]))
-    } else if (match[3] && match[4]) {
+    if (match[2] && match[3]) {
+      segments.push({
+        type: 'color',
+        color: match[2],
+        text: match[3].replaceAll('\\]', ']')
+      })
+    } else if (match[4]) {
+      segments.push(...parseObsidianMathSegments(match[4]))
+    } else if (match[5] && match[6]) {
      segments.push({
        type: 'link',
-        text: match[3],
-        href: match[4]
-      })
-    } else if (match[5]) {
-      segments.push({
-        type: 'strong',
-        text: match[5]
-      })
-    } else if (match[6]) {
-      segments.push({
-        type: 'code',
-        text: match[6]
+        text: match[5],
+        href: match[6]
      })
    } else if (match[7]) {
      segments.push({
-        type: 'em',
+        type: 'strong',
        text: match[7]
      })
+    } else if (match[8]) {
+      segments.push({
+        type: 'code',
+        text: match[8]
+      })
+    } else if (match[9]) {
+      segments.push({
+        type: 'em',
+        text: match[9]
+      })
    }

    lastIndex = INLINE_MARKDOWN_RE.lastIndex
@@ -187,7 +216,7 @@ export const parseInlineSegments = (value) => {

 /**
 * 인라인 세그먼트를 HTML 문자열로 변환한다.
- * @param {Array<{ type: string, text: string, href?: string }>} segments - 세그먼트
+ * @param {Array<{ type: string, text: string, href?: string, color?: string }>} segments - 세그먼트
 * @returns {string} HTML
 */
 export const segmentsToInlineHtml = (segments) => segments.map((segment) => {
@@ -215,6 +244,12 @@ export const segmentsToInlineHtml = (segments) => segments.map((segment) => {
    return `<a href="${escapeHtml(segment.href || '')}">${escapeHtml(segment.text)}</a>`
  }

+  if (segment.type === 'color' && isInlineColorName(segment.color)) {
+    const color = String(segment.color || '').trim().toLowerCase()
+    const nestedHtml = segmentsToInlineHtml(parseInlineSegments(segment.text))
+    return `<span data-inline-color="${escapeHtml(color)}">${nestedHtml}</span>`
+  }
+
  return escapeHtml(segment.text)
 }).join('')

@@ -278,6 +313,11 @@ export const convertHtmlInlineNodeToMarkdown = (node) => {
    return href ? `[${childText || href}](${href})` : childText
  }

+  if (tagName === 'span') {
+    const inlineColor = element.getAttribute('data-inline-color')
+    return isInlineColorName(inlineColor) ? formatInlineColorMarkdown(inlineColor, childText) : childText
+  }
+
  if (tagName === 'img') {
    const src = element.getAttribute('src')
    const alt = element.getAttribute('alt') || ''
@@ -288,7 +328,7 @@ export const convertHtmlInlineNodeToMarkdown = (node) => {
    return '\n'
  }

-  if (tagName === 'div' || tagName === 'p' || tagName === 'span') {
+  if (tagName === 'div' || tagName === 'p') {
    return childText
  }

--- a/lib/markdown-live-selection.js
+++ b/lib/markdown-live-selection.js
@@ -100,16 +100,17 @@ export const rangeIntersectsElement = (range, element) => {
 * @returns {number}
 */
 export const getSelectionOffsetInElement = (element, range, edge) => {
-  const partial = document.createRange()
-  partial.selectNodeContents(element)
+  const boundaryRange = document.createRange()

  if (edge === 'start') {
-    partial.setEnd(range.startContainer, range.startOffset)
+    boundaryRange.setStart(range.startContainer, range.startOffset)
  } else {
-    partial.setStart(range.endContainer, range.endOffset)
+    boundaryRange.setStart(range.endContainer, range.endOffset)
  }

-  return getEditableCaretOffset(element, partial)
+  boundaryRange.collapse(true)
+
+  return getEditableCaretOffset(element, boundaryRange)
 }

 /**
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "sori.studio",
-  "version": "1.5.91",
+  "version": "1.5.105",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sori.studio",
-      "version": "1.5.91",
+      "version": "1.5.105",
      "hasInstallScript": true,
      "dependencies": {
        "@nuxtjs/tailwindcss": "^6.14.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "sori.studio",
-  "version": "1.5.104",
+  "version": "1.5.105",
  "private": true,
  "type": "module",
  "imports": {