블로그 제목 설명 카드 분리

components/admin/AdminTitleDescriptionSettingsCard.vue

@@ -0,0 +1,186 @@
+<script setup>
+/**
+ * 블로그 제목·설명 설정 카드
+ * @property {Object} form - 사이트 설정 폼 객체
+ * @property {boolean} editing - 편집 모드 여부
+ * @property {boolean} saving - 저장 중 여부
+ * @property {boolean} hasChanges - 변경 여부
+ * @property {Array<{ value: number, label: string }>} uploadFileCountOptions - 업로드 파일 수 선택지
+ * @property {Array<{ value: number, label: string }>} uploadTotalSizeOptions - 업로드 전체 용량 선택지
+ */
+defineProps({
+  form: {
+    type: Object,
+    required: true
+  },
+  editing: {
+    type: Boolean,
+    default: false
+  },
+  saving: {
+    type: Boolean,
+    default: false
+  },
+  hasChanges: {
+    type: Boolean,
+    default: false
+  },
+  uploadFileCountOptions: {
+    type: Array,
+    default: () => []
+  },
+  uploadTotalSizeOptions: {
+    type: Array,
+    default: () => []
+  }
+})
+
+defineEmits(['begin', 'cancel', 'save'])
+</script>
+
+<template>
+  <section
+    id="admin-settings-section-title"
+    data-testid="title-and-description"
+    class="admin-title-description-settings-card admin-settings-screen__card admin-settings-screen__card--title-desc relative flex flex-col gap-6 rounded-xl border border-[#d8dce1] bg-white p-5 transition-all hover:border-[#c5cbd3] hover:shadow-sm md:p-7"
+  >
+    <div class="flex items-start justify-between gap-4">
+      <div class="min-w-0 flex-1">
+        <h5 class="text-base font-semibold text-[#15171a] md:text-lg">
+          블로그 제목·설명
+        </h5>
+        <p
+          v-if="!editing"
+          class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080] md:block"
+        >
+          공개 사이트에서 사이트 이름과 소개로 사용되는 값입니다.
+        </p>
+      </div>
+      <div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
+        <template v-if="!editing">
+          <button
+            class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black"
+            type="button"
+            @click="$emit('begin')"
+          >
+            편집
+          </button>
+        </template>
+        <template v-else>
+          <button
+            class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#5d6673] transition hover:bg-[#eceff2] hover:text-[#15171a]"
+            type="button"
+            :disabled="saving"
+            @click="$emit('cancel')"
+          >
+            취소
+          </button>
+          <button
+            class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black disabled:opacity-50"
+            type="button"
+            :disabled="saving || !hasChanges"
+            @click="$emit('save')"
+          >
+            {{ saving ? '저장 중' : '저장' }}
+          </button>
+        </template>
+      </div>
+    </div>
+
+    <div
+      v-if="!editing"
+      class="admin-title-description-settings-card__readonly admin-settings-screen__readonly-list grid gap-4 border-t border-[#eceff2] pt-5 text-sm"
+    >
+      <div class="admin-settings-screen__readonly-row grid gap-1 md:grid-cols-[7.5rem_minmax(0,1fr)] md:items-center md:gap-5">
+        <h6 class="text-sm font-normal tracking-normal text-[#3f4650]">
+          사이트 이름
+        </h6>
+        <div class="min-w-0 text-sm font-normal leading-relaxed text-[#15171a]">
+          {{ form.title?.trim() ? form.title : '—' }}
+        </div>
+      </div>
+      <div class="admin-settings-screen__readonly-row grid gap-1 md:grid-cols-[7.5rem_minmax(0,1fr)] md:items-center md:gap-5">
+        <h6 class="text-sm font-normal tracking-normal text-[#3f4650]">
+          사이트 설명
+        </h6>
+        <div class="min-w-0 whitespace-pre-wrap text-sm font-normal leading-relaxed text-[#15171a]">
+          {{ form.description?.trim() ? form.description : '—' }}
+        </div>
+      </div>
+      <div class="admin-settings-screen__field grid gap-3 border-t border-[#eceff2] pt-5">
+        <div>
+          <span class="font-bold text-[#15171a]">업로드 제한</span>
+          <p class="mt-1 text-xs leading-relaxed text-[#657080]">
+            파일 추가나 글쓰기 미디어 업로드에서 한 번에 처리할 수 있는 최대치를 선택합니다.
+          </p>
+        </div>
+        <div class="grid gap-3 sm:grid-cols-2">
+          <div class="grid gap-1.5">
+            <span class="text-xs font-semibold text-[#657080]">파일 수</span>
+            <AdminSelectInput
+              v-model="form.uploadMaxFileCount"
+              :options="uploadFileCountOptions"
+              label="업로드 파일 수"
+              select-class="admin-settings-screen__select h-10 rounded-md border-[#dce0e5] text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+              width-class="w-full"
+            />
+          </div>
+          <div class="grid gap-1.5">
+            <span class="text-xs font-semibold text-[#657080]">전체 용량</span>
+            <AdminSelectInput
+              v-model="form.uploadMaxTotalSize"
+              :options="uploadTotalSizeOptions"
+              label="업로드 전체 용량"
+              select-class="admin-settings-screen__select h-10 rounded-md border-[#dce0e5] text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+              width-class="w-full"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="admin-title-description-settings-card__edit admin-settings-screen__card-body grid gap-5">
+      <label class="admin-settings-screen__field grid gap-2 text-sm">
+        <span class="font-medium text-[#3f4650]">사이트 이름</span>
+        <input
+          v-model="form.title"
+          class="rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+          type="text"
+          required
+        >
+      </label>
+      <label class="admin-settings-screen__field grid gap-2 text-sm">
+        <span class="font-medium text-[#3f4650]">사이트 설명</span>
+        <textarea
+          v-model="form.description"
+          class="min-h-28 resize-y rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+          required
+        />
+      </label>
+      <div class="rounded-lg border border-[#eceff2] bg-[#f7f8fa] p-4">
+        <p class="text-xs font-semibold tracking-wide text-[#657080] uppercase">
+          공개 화면 미리보기
+        </p>
+        <div class="mt-3 flex items-center gap-3">
+          <div class="grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-xl bg-[#15171a] text-lg font-bold text-white">
+            <img
+              v-if="form.logoUrl"
+              class="h-full w-full object-cover"
+              :src="form.logoUrl"
+              alt=""
+            >
+            <span v-else>{{ form.logoText || '井' }}</span>
+          </div>
+          <div class="min-w-0">
+            <p class="truncate font-semibold text-[#15171a]">
+              {{ form.title || 'sori.studio' }}
+            </p>
+            <p class="truncate text-sm text-[#657080]">
+              {{ form.description || '사이트 설명이 공개 화면에 표시됩니다.' }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>