스팸 필터 설정 카드 분리

pages/admin/settings/index.vue

@@ -3477,87 +3477,16 @@ onBeforeUnmount(() => {
             @open-jobs="openPostImportJobModal()"
           />
 
-          <section
-            id="admin-settings-section-spam"
-            class="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="!editSpam"
-                  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="!editSpam">
-                  <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="beginEditSpam"
-                  >
-                    편집
-                  </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="savingSpam"
-                    @click="cancelEditSpam"
-                  >
-                    취소
-                  </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="savingSpam || !hasSpamChanges"
-                    @click="saveSpamSection"
-                  >
-                    {{ savingSpam ? '저장 중' : '저장' }}
-                  </button>
-                </template>
-              </div>
-            </div>
-            <div
-              v-if="!editSpam"
-              class="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 form.signupBlockedUsernames"
-                  :key="term"
-                  class="font-mono text-[13px] text-[#15171a]"
-                >
-                  {{ term }}
-                </li>
-              </ul>
-            </div>
-            <div
-              v-else
-              class="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
-                  v-model="signupBlockedUsernamesText"
-                  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"
-                />
-              </label>
-            </div>
-          </section>
+          <AdminSpamSettingsCard
+            v-model:blocked-usernames-text="signupBlockedUsernamesText"
+            :blocked-usernames="form.signupBlockedUsernames"
+            :editing="editSpam"
+            :saving="savingSpam"
+            :has-changes="hasSpamChanges"
+            @begin="beginEditSpam"
+            @cancel="cancelEditSpam"
+            @save="saveSpamSection"
+          />
         </form>
         </div>
       </main>