diff --git a/components/admin/AdminBlockEditor.vue b/components/admin/AdminBlockEditor.vue
index 8558e2d..3aaadf0 100644
--- a/components/admin/AdminBlockEditor.vue
+++ b/components/admin/AdminBlockEditor.vue
@@ -49,10 +49,42 @@ const calloutBackgroundOptions = [
{ value: 'green', label: '초록' },
{ value: 'yellow', label: '노랑' },
{ value: 'red', label: '빨강' },
- { value: 'purple', label: '보라' },
- { value: 'pink', label: '핑크' }
+ { value: 'purple', label: '보라' }
]
+/**
+ * 콜아웃 배경 스와치 색상을 반환한다.
+ * @param {string} background - 배경 키
+ * @returns {string} CSS 배경색
+ */
+const getCalloutBackgroundSwatch = (background) => {
+ if (background === 'gray') {
+ return 'color-mix(in srgb, #050505 10%, #ffffff)'
+ }
+
+ if (background === 'blue') {
+ return 'color-mix(in srgb, #0055ff 10%, #ffffff)'
+ }
+
+ if (background === 'green') {
+ return 'color-mix(in srgb, #16ae68 10%, #ffffff)'
+ }
+
+ if (background === 'yellow') {
+ return 'color-mix(in srgb, #ffff00 10%, #ffffff)'
+ }
+
+ if (background === 'red') {
+ return 'color-mix(in srgb, #ff0000 10%, #ffffff)'
+ }
+
+ if (background === 'purple') {
+ return 'color-mix(in srgb, #8800ff 10%, #ffffff)'
+ }
+
+ return 'color-mix(in srgb, #0055ff 10%, #ffffff)'
+}
+
const blockCommands = [
{
type: 'paragraph',
@@ -2170,15 +2202,7 @@ defineExpose({
>
@@ -2197,15 +2221,7 @@ defineExpose({
>
diff --git a/components/admin/AdminEditorBlockPanel.vue b/components/admin/AdminEditorBlockPanel.vue
index 5c8b569..051edc3 100644
--- a/components/admin/AdminEditorBlockPanel.vue
+++ b/components/admin/AdminEditorBlockPanel.vue
@@ -2,6 +2,7 @@
import { getImageAltAttribute, getImageDefaultAltLabel } from '../../lib/markdown-image.js'
import {
CALLOUT_BACKGROUND_OPTIONS,
+ CALLOUT_BACKGROUND_SWATCHES,
CALLOUT_EMOJI_OPTIONS,
QUOTE_BACKGROUND_LABELS,
QUOTE_BACKGROUND_OPTIONS,
@@ -42,18 +43,11 @@ const backgroundLabels = {
green: '초록',
yellow: '노랑',
red: '빨강',
- purple: '보라',
- pink: '분홍'
+ purple: '보라'
}
const backgroundSwatches = {
- 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)'
+ ...CALLOUT_BACKGROUND_SWATCHES
}
const languageOptions = ['', 'javascript', 'html', 'css', 'vue', 'json', 'bash', 'markdown', 'sql']
diff --git a/components/admin/AdminPostForm.vue b/components/admin/AdminPostForm.vue
index 0dc3c43..4cfb9ca 100644
--- a/components/admin/AdminPostForm.vue
+++ b/components/admin/AdminPostForm.vue
@@ -1621,11 +1621,11 @@ defineExpose({