From 626464df4a62784d9528ae7d052766b8a1feee63 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Thu, 23 Jul 2026 19:04:30 +0900
Subject: [PATCH] =?UTF-8?q?=EC=8A=A4=ED=8C=B8=20=ED=95=84=ED=84=B0=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EC=B9=B4=EB=93=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/admin/AdminSpamSettingsCard.vue | 120 +++++++++++++++++++++
 docs/map.md                                |   3 +-
 docs/todo.md                               |   2 +-
 docs/update.md                             |   6 ++
 package-lock.json                          |   4 +-
 package.json                               |   2 +-
 pages/admin/settings/index.vue             |  91 ++--------------
 7 files changed, 142 insertions(+), 86 deletions(-)
 create mode 100644 components/admin/AdminSpamSettingsCard.vue

diff --git a/components/admin/AdminSpamSettingsCard.vue b/components/admin/AdminSpamSettingsCard.vue
new file mode 100644
index 0000000..c1fab57
--- /dev/null
+++ b/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>
diff --git a/docs/map.md b/docs/map.md
index 3e69129..4706faa 100644
--- a/docs/map.md
+++ b/docs/map.md
@@ -258,12 +258,13 @@
 | pages/admin/tags/index.vue | 태그 관리(메인 태그 드래그 정렬 자동 저장·more vert 메뉴, 일반 태그 배지 more vert 메뉴·검색/정렬, 태그 추가 버튼), 액션 피드백 토스트 |
 | pages/admin/tags/new.vue | 태그 생성 |
 | pages/admin/tags/[id].vue | 태그 수정 |
-| pages/admin/settings/index.vue | 사이트 설정 Ghost형 전체 화면, 카드별 필드만 PATCH하고 성공 필드만 폼에 반영하는 독립 저장, **POST 설정**(`showPostUpdatedAt` 토글·읽기 모드 비활성 톤), 블로그 제목·설명 읽기 행, **사이트 정보**(로고 미등록 점선 박스·URL·저작권 읽기 행), **SNS 정보**(아이콘 프리셋+주소 목록형 관리), **메인 화면**(라이트·다크 커버 상하 개별 프리뷰·드롭존 업로드·오버레이 텍스트), **어나운스 바**(사용 토글·맞춤 설정·hex 배경색·텍스트 정렬·읽기 모드 비활성 톤), **스팸 필터**(가입 금지 닉네임), **사이트 용량** 데이터 조회·새로고침 이벤트 연결, **게시물 내보내기** 요청 body 생성·작업 등록·목록 갱신·작업 액션 연결, **게시물 가져오기** 파일 검증·작업 생성 요청·작업 센터 모달 연결, 진행 중 요청 버튼 잠금 |
+| pages/admin/settings/index.vue | 사이트 설정 Ghost형 전체 화면, 카드별 필드만 PATCH하고 성공 필드만 폼에 반영하는 독립 저장, **POST 설정**(`showPostUpdatedAt` 토글·읽기 모드 비활성 톤), 블로그 제목·설명 읽기 행, **사이트 정보**(로고 미등록 점선 박스·URL·저작권 읽기 행), **SNS 정보**(아이콘 프리셋+주소 목록형 관리), **메인 화면**(라이트·다크 커버 상하 개별 프리뷰·드롭존 업로드·오버레이 텍스트), **어나운스 바**(사용 토글·맞춤 설정·hex 배경색·텍스트 정렬·읽기 모드 비활성 톤), **스팸 필터** 편집 상태·저장 요청·값 정규화 연결, **사이트 용량** 데이터 조회·새로고침 이벤트 연결, **게시물 내보내기** 요청 body 생성·작업 등록·목록 갱신·작업 액션 연결, **게시물 가져오기** 파일 검증·작업 생성 요청·작업 센터 모달 연결, 진행 중 요청 버튼 잠금 |
 | components/admin/AdminBackupSummaryCard.vue | 관리자 설정 사이트 용량 카드(콘텐츠 수량·미디어 용량·자동 생성 이미지·내보내기 파일·큰 파일·새로고침 이벤트) |
 | components/admin/AdminPostExportJobList.vue | 관리자 설정 최근 내보내기 작업 목록 카드(상태·진행도·실패 상세·파일 선택·선택 다운로드 이벤트) |
 | components/admin/AdminPostExportRequestCard.vue | 관리자 설정 게시물 내보내기 요청 카드(범위·연도·월·직접 날짜·분할 옵션·요청 이벤트) |
 | components/admin/AdminPostImportCard.vue | 관리자 설정 게시물 가져오기 카드(ZIP input·드롭존·작업 센터 버튼·적용 이벤트) |
 | components/admin/AdminPostImportJobModal.vue | 게시물 Import 작업 센터 모달(전체 진행률·게시물별 대기/진행중/완료/스킵/오류·완료 삭제 이벤트) |
+| components/admin/AdminSpamSettingsCard.vue | 관리자 설정 스팸 필터 카드(가입 금지 닉네임 읽기·편집 textarea·저장 이벤트) |
 | lib/signup-blocked-usernames.js | 가입 금지 닉네임 정리·매칭·안내 문구 |
 | pages/admin/members/index.vue | 관리자 멤버 목록(Ghost형 테이블, 글 목록과 같은 테두리형 검색, 조건 필터, 멤버 추가 버튼, 닉네임+이메일, 등급+비활성 상태, 가입일+최근 활동, IP, 댓글 수) |
 | pages/admin/members/new.vue | 관리자 멤버 추가(썸네일 URL, 이름, 이메일, 레이블, 관리자 노트) |
diff --git a/docs/todo.md b/docs/todo.md
index d319671..d120711 100644
--- a/docs/todo.md
+++ b/docs/todo.md
@@ -4,7 +4,7 @@
 
 - 거대 컴포넌트 책임 분리 진행.
   - `components/admin/AdminMarkdownEditor.vue`: 미디어 모달, 슬래시 명령, 히스토리·선택 복원, 라이브/소스 전환 로직을 단계적으로 composable 또는 하위 컴포넌트로 분리.
-  - `pages/admin/settings/index.vue`: Import 작업 센터·사이트 용량·게시물 가져오기·게시물 내보내기 요청·최근 내보내기 작업 목록처럼 설정 카드별 저장·상태·검증 로직을 카드 컴포넌트 또는 composable 단위로 추가 분리.
+  - `pages/admin/settings/index.vue`: Import 작업 센터·사이트 용량·게시물 가져오기·게시물 내보내기 요청·최근 내보내기 작업 목록·스팸 필터처럼 설정 카드별 저장·상태·검증 로직을 카드 컴포넌트 또는 composable 단위로 추가 분리.
   - `components/content/ContentMarkdownRenderer.vue`: 파싱·블록 렌더링·라이브 편집 중개·라이트박스·광고 삽입 책임을 분리.
   - `components/admin/AdminPostForm.vue`: 태그 입력, 대표 이미지 선택, 발행/초안 저장 상태, 우측 설정 패널 책임을 분리.
   - `pages/admin/media/index.vue`: 미디어 목록, 폴더 트리, 상세 모달, 재생성 액션을 작은 단위로 분리.
diff --git a/docs/update.md b/docs/update.md
index dd048ba..d00345c 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,11 @@
 # 업데이트 이력
 
+## v1.11.24
+
+- 관리자 설정의 스팸 필터 카드를 `AdminSpamSettingsCard` 컴포넌트로 분리.
+- 가입 금지 닉네임 읽기·편집 textarea·저장 버튼 렌더링 책임을 설정 화면에서 하위 컴포넌트로 이동.
+- 설정 화면은 스팸 필터 편집 상태·저장 요청·값 정규화만 담당하도록 정리.
+
 ## v1.11.23
 
 - 관리자 설정의 최근 게시물 내보내기 작업 목록을 `AdminPostExportJobList` 컴포넌트로 분리.
diff --git a/package-lock.json b/package-lock.json
index 9031e80..a5c7293 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "sori.studio",
-  "version": "1.11.23",
+  "version": "1.11.24",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sori.studio",
-      "version": "1.11.23",
+      "version": "1.11.24",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",
diff --git a/package.json b/package.json
index 6196ccf..b6a5384 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "1.11.23",
+  "version": "1.11.24",
   "private": true,
   "type": "module",
   "imports": {
diff --git a/pages/admin/settings/index.vue b/pages/admin/settings/index.vue
index b678ef3..fd8d142 100644
--- a/pages/admin/settings/index.vue
+++ b/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>