관리자 목록과 이미지 설정 개선

components/content/ProseImage.vue

@@ -31,6 +31,10 @@ const props = defineProps({
     type: String,
     default: 'regular'
   },
+  pixelWidth: {
+    type: Number,
+    default: null
+  },
   expandable: {
     type: Boolean,
     default: false
@@ -44,6 +48,18 @@ const currentSrc = ref(props.src)
 
 const hasRenderableSrc = computed(() => String(currentSrc.value || '').trim().length > 0)
 const currentSrcset = computed(() => currentSrc.value === props.src ? props.srcset : '')
+const figureStyle = computed(() => {
+  const width = Math.round(Number(props.pixelWidth) || 0)
+
+  if (!width) {
+    return undefined
+  }
+
+  return {
+    maxWidth: `${width}px`,
+    width: '100%'
+  }
+})
 
 const errorLabel = computed(() => {
   const trimmed = String(props.fallbackSrc || props.src || '').trim()
@@ -99,6 +115,7 @@ const activateImage = () => {
 <template>
   <figure
     class="prose-image mb-2.5"
+    :style="figureStyle"
     :class="{
       'prose-image--wide lg:-mx-10 lg:max-w-none': variant === 'wide',
       'prose-image--full lg:-mx-20 lg:max-w-none': variant === 'full'