콜아웃 색상과 모바일 설정 패널 정리

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({
                 ></span>
                 <span
                   class="relative block size-full rounded-full border-2 border-white ring-1 ring-black/10"
-                  :style="{
-                    background: block.calloutBackground === 'gray' ? 'rgba(100,116,139,0.28)'
-                      : block.calloutBackground === 'blue' ? 'rgba(59,130,246,0.3)'
-                      : block.calloutBackground === 'green' ? 'rgba(34,197,94,0.3)'
-                      : block.calloutBackground === 'yellow' ? 'rgba(245,158,11,0.34)'
-                      : block.calloutBackground === 'red' ? 'rgba(239,68,68,0.3)'
-                      : block.calloutBackground === 'purple' ? 'rgba(168,85,247,0.3)'
-                      : 'rgba(236,72,153,0.3)'
-                  }"
+                  :style="{ background: getCalloutBackgroundSwatch(block.calloutBackground) }"
                 ></span>
               </button>
 
@@ -2197,15 +2221,7 @@ defineExpose({
                     >
                       <span
                         class="size-[1.4rem] rounded-full border border-black/10"
-                        :style="{
-                          background: backgroundOption.value === 'gray' ? 'rgba(100,116,139,0.28)'
-                            : backgroundOption.value === 'blue' ? 'rgba(59,130,246,0.3)'
-                            : backgroundOption.value === 'green' ? 'rgba(34,197,94,0.3)'
-                            : backgroundOption.value === 'yellow' ? 'rgba(245,158,11,0.34)'
-                            : backgroundOption.value === 'red' ? 'rgba(239,68,68,0.3)'
-                            : backgroundOption.value === 'purple' ? 'rgba(168,85,247,0.3)'
-                            : 'rgba(236,72,153,0.3)'
-                        }"
+                        :style="{ background: getCalloutBackgroundSwatch(backgroundOption.value) }"
                       ></span>
                     </button>
                   </li>