스팸 필터 설정 카드 분리

components/admin/AdminSpamSettingsCard.vue

@@ -0,0 +1,120 @@
+<script setup>
+/**
+ * 스팸 필터 설정 카드
+ * @property {Array<string>} blockedUsernames - 가입 금지 닉네임 목록
+ * @property {string} blockedUsernamesText - 가입 금지 닉네임 textarea 값
+ * @property {boolean} editing - 편집 모드 여부
+ * @property {boolean} saving - 저장 중 여부
+ * @property {boolean} hasChanges - 변경 여부
+ */
+defineProps({
+  blockedUsernames: {
+    type: Array,
+    default: () => []
+  },
+  blockedUsernamesText: {
+    type: String,
+    default: ''
+  },
+  editing: {
+    type: Boolean,
+    default: false
+  },
+  saving: {
+    type: Boolean,
+    default: false
+  },
+  hasChanges: {
+    type: Boolean,
+    default: false
+  }
+})
+
+defineEmits(['begin', 'cancel', 'save', 'update:blockedUsernamesText'])
+</script>
+
+<template>
+  <section
+    id="admin-settings-section-spam"
+    class="admin-spam-settings-card admin-settings-screen__card admin-settings-screen__card--spam 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">
+        <h2 class="text-base font-semibold text-[#15171a] md:text-lg">
+          스팸 필터
+        </h2>
+        <p
+          v-if="!editing"
+          class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
+        >
+          회원가입 시 사용할 수 없는 닉네임을 지정합니다. 닉네임에 해당 단어가 포함되면 가입이 거부됩니다.
+        </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-spam-settings-card__readonly admin-settings-screen__spam-readonly border-t border-[#eceff2] pt-5 text-sm"
+    >
+      <p class="font-medium text-[#3f4650]">
+        가입 금지 닉네임
+      </p>
+      <ul class="mt-3 grid gap-1.5 text-[#657080]">
+        <li
+          v-for="term in blockedUsernames"
+          :key="term"
+          class="font-mono text-[13px] text-[#15171a]"
+        >
+          {{ term }}
+        </li>
+      </ul>
+    </div>
+    <div
+      v-else
+      class="admin-spam-settings-card__edit admin-settings-screen__spam-edit grid gap-2 border-t border-[#eceff2] pt-5 text-sm"
+    >
+      <label class="admin-settings-screen__field grid gap-2">
+        <span class="font-medium text-[#3f4650]">가입 금지 닉네임</span>
+        <p class="text-xs leading-relaxed text-[#657080]">
+          한 줄에 하나씩 입력합니다. 대소문자는 구분하지 않으며, 닉네임에 해당 단어가 포함되면 사용할 수 없습니다.
+        </p>
+        <textarea
+          :value="blockedUsernamesText"
+          class="min-h-[10rem] resize-y rounded-md border border-[#dce0e5] bg-white px-3 py-2 font-mono text-[13px] text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+          rows="8"
+          placeholder="admin&#10;master&#10;zenn"
+          @input="$emit('update:blockedUsernamesText', $event.target.value)"
+        />
+      </label>
+    </div>
+  </section>
+</template>