브랜드 설정 카드 분리

components/admin/AdminBrandSettingsCard.vue

@@ -0,0 +1,156 @@
+<script setup>
+import { DEFAULT_BRAND_COLOR, normalizeBrandColor } from '~/lib/brand-color.js'
+
+const props = defineProps({
+  /** 브랜드 컬러 값 */
+  brandColor: {
+    type: String,
+    default: DEFAULT_BRAND_COLOR
+  },
+  /** 편집 모드 여부 */
+  editing: {
+    type: Boolean,
+    default: false
+  },
+  /** 저장 중 여부 */
+  saving: {
+    type: Boolean,
+    default: false
+  },
+  /** 변경 여부 */
+  hasChanges: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['begin', 'cancel', 'save', 'update:brandColor', 'normalize'])
+
+const normalizedBrandColor = computed(() => normalizeBrandColor(props.brandColor || DEFAULT_BRAND_COLOR))
+</script>
+
+<template>
+  <section
+    id="admin-settings-section-brand"
+    class="admin-brand-settings-card admin-settings-screen__card admin-settings-screen__card--brand 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]"
+        >
+          사용자 화면의 포인트 컬러입니다. 활성 네비게이션, TOC, 댓글 버튼 등에 공통으로 적용됩니다.
+        </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 class="grid gap-5 border-t border-[#eceff2] pt-5">
+      <div
+        v-if="!editing"
+        class="admin-brand-settings-card__readonly admin-settings-screen__brand-readonly flex flex-col gap-4 rounded-lg border border-[#edf0f2] bg-[#fafafa] p-4 sm:flex-row sm:items-center sm:justify-between"
+      >
+        <div class="flex items-center gap-3">
+          <span
+            class="size-12 shrink-0 rounded-full border border-black/10"
+            :style="{ backgroundColor: normalizedBrandColor }"
+            aria-hidden="true"
+          />
+          <div>
+            <p class="text-sm font-bold text-[#15171a]">
+              포인트 컬러
+            </p>
+            <p class="mt-1 font-mono text-sm text-[#657080]">
+              {{ normalizedBrandColor }}
+            </p>
+          </div>
+        </div>
+        <div class="flex flex-wrap items-center gap-2">
+          <span
+            class="inline-flex rounded-full px-3 py-1 text-xs font-bold text-white"
+            :style="{ backgroundColor: normalizedBrandColor }"
+          >
+            활성 배지
+          </span>
+          <span
+            class="inline-flex border-b-2 px-1 py-1 text-xs font-bold"
+            :style="{ borderColor: normalizedBrandColor, color: normalizedBrandColor }"
+          >
+            TOC
+          </span>
+        </div>
+      </div>
+
+      <div v-else class="admin-brand-settings-card__edit admin-settings-screen__brand-edit grid gap-4 rounded-lg border border-[#edf0f2] bg-[#fafafa] p-4">
+        <label class="admin-settings-screen__field grid gap-2 text-sm">
+          <span class="font-medium text-[#3f4650]">브랜드 컬러</span>
+          <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
+            <input
+              class="h-12 w-full rounded-md border border-[#dce0e5] bg-white px-2 py-1 sm:w-20"
+              type="color"
+              :value="normalizedBrandColor"
+              @input="emit('update:brandColor', $event.target.value)"
+            >
+            <input
+              :value="brandColor"
+              class="h-12 min-w-0 flex-1 rounded-md border border-[#dce0e5] bg-white px-3 font-mono text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+              type="text"
+              placeholder="#ff4f2e"
+              @input="emit('update:brandColor', $event.target.value)"
+              @blur="emit('normalize')"
+            >
+          </div>
+        </label>
+        <p class="text-sm leading-relaxed text-[#657080]">
+          3자리 또는 6자리 hex 컬러를 사용할 수 있습니다. 비워두거나 잘못된 값은 기본 오렌지 컬러로 되돌립니다.
+        </p>
+        <div class="flex flex-wrap items-center gap-3">
+          <span
+            class="inline-flex h-10 items-center rounded-full px-4 text-sm font-bold text-white"
+            :style="{ backgroundColor: normalizedBrandColor }"
+          >
+            댓글 등록
+          </span>
+          <span
+            class="inline-flex h-10 items-center border-b-2 px-1 text-sm font-bold"
+            :style="{ borderColor: normalizedBrandColor, color: normalizedBrandColor }"
+          >
+            활성 TOC
+          </span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

docs/map.md

@@ -258,7 +258,8 @@
 | 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/AdminBrandSettingsCard.vue | 관리자 설정 브랜드 컬러 카드(읽기 미리보기·색상 입력·텍스트 입력·예시 배지·저장 이벤트) |
 | components/admin/AdminBackupSummaryCard.vue | 관리자 설정 사이트 용량 카드(콘텐츠 수량·미디어 용량·자동 생성 이미지·내보내기 파일·큰 파일·새로고침 이벤트) |
 | components/admin/AdminPostExportJobList.vue | 관리자 설정 최근 내보내기 작업 목록 카드(상태·진행도·실패 상세·파일 선택·선택 다운로드 이벤트) |
 | components/admin/AdminPostExportRequestCard.vue | 관리자 설정 게시물 내보내기 요청 카드(범위·연도·월·직접 날짜·분할 옵션·요청 이벤트) |

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`: 미디어 목록, 폴더 트리, 상세 모달, 재생성 액션을 작은 단위로 분리.

docs/update.md

@@ -1,5 +1,11 @@
 # 업데이트 이력
 
+## v1.11.25
+
+- 관리자 설정의 브랜드 컬러 카드를 `AdminBrandSettingsCard` 컴포넌트로 분리.
+- 브랜드 컬러 읽기 미리보기·색상 입력·텍스트 입력·예시 배지 렌더링 책임을 설정 화면에서 하위 컴포넌트로 이동.
+- 설정 화면은 브랜드 컬러 정규화·편집 상태·저장 요청만 담당하도록 정리.
+
 ## v1.11.24
 
 - 관리자 설정의 스팸 필터 카드를 `AdminSpamSettingsCard` 컴포넌트로 분리.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sori.studio",
-  "version": "1.11.24",
+  "version": "1.11.25",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sori.studio",
-      "version": "1.11.24",
+      "version": "1.11.25",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "1.11.24",
+  "version": "1.11.25",
   "private": true,
   "type": "module",
   "imports": {

pages/admin/settings/index.vue

@@ -3108,128 +3108,16 @@ onBeforeUnmount(() => {
             </div>
           </section>
 
-          <section
-            id="admin-settings-section-brand"
-            class="admin-settings-screen__card admin-settings-screen__card--brand 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="!editBrand"
-                  class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
-                >
-                  사용자 화면의 포인트 컬러입니다. 활성 네비게이션, TOC, 댓글 버튼 등에 공통으로 적용됩니다.
-                </p>
-              </div>
-              <div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
-                <template v-if="!editBrand">
-                  <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="beginEditBrand"
-                  >
-                    편집
-                  </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="savingBrand"
-                    @click="cancelEditBrand"
-                  >
-                    취소
-                  </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="savingBrand || !hasBrandChanges"
-                    @click="saveBrandSection"
-                  >
-                    {{ savingBrand ? '저장 중' : '저장' }}
-                  </button>
-                </template>
-              </div>
-            </div>
-
-            <div class="grid gap-5 border-t border-[#eceff2] pt-5">
-              <div
-                v-if="!editBrand"
-                class="admin-settings-screen__brand-readonly flex flex-col gap-4 rounded-lg border border-[#edf0f2] bg-[#fafafa] p-4 sm:flex-row sm:items-center sm:justify-between"
-              >
-                <div class="flex items-center gap-3">
-                  <span
-                    class="size-12 shrink-0 rounded-full border border-black/10"
-                    :style="{ backgroundColor: normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR) }"
-                    aria-hidden="true"
-                  />
-                  <div>
-                    <p class="text-sm font-bold text-[#15171a]">
-                      포인트 컬러
-                    </p>
-                    <p class="mt-1 font-mono text-sm text-[#657080]">
-                      {{ normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR) }}
-                    </p>
-                  </div>
-                </div>
-                <div class="flex flex-wrap items-center gap-2">
-                  <span
-                    class="inline-flex rounded-full px-3 py-1 text-xs font-bold text-white"
-                    :style="{ backgroundColor: normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR) }"
-                  >
-                    활성 배지
-                  </span>
-                  <span
-                    class="inline-flex border-b-2 px-1 py-1 text-xs font-bold"
-                    :style="{ borderColor: normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR), color: normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR) }"
-                  >
-                    TOC
-                  </span>
-                </div>
-              </div>
-
-              <div v-else class="admin-settings-screen__brand-edit grid gap-4 rounded-lg border border-[#edf0f2] bg-[#fafafa] p-4">
-                <label class="admin-settings-screen__field grid gap-2 text-sm">
-                  <span class="font-medium text-[#3f4650]">브랜드 컬러</span>
-                  <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
-                    <input
-                      class="h-12 w-full rounded-md border border-[#dce0e5] bg-white px-2 py-1 sm:w-20"
-                      type="color"
-                      :value="normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR)"
-                      @input="form.brandColor = $event.target.value"
-                    >
-                    <input
-                      v-model="form.brandColor"
-                      class="h-12 min-w-0 flex-1 rounded-md border border-[#dce0e5] bg-white px-3 font-mono text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
-                      type="text"
-                      placeholder="#ff4f2e"
-                      @blur="normalizeBrandColorInput"
-                    >
-                  </div>
-                </label>
-                <p class="text-sm leading-relaxed text-[#657080]">
-                  3자리 또는 6자리 hex 컬러를 사용할 수 있습니다. 비워두거나 잘못된 값은 기본 오렌지 컬러로 되돌립니다.
-                </p>
-                <div class="flex flex-wrap items-center gap-3">
-                  <span
-                    class="inline-flex h-10 items-center rounded-full px-4 text-sm font-bold text-white"
-                    :style="{ backgroundColor: normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR) }"
-                  >
-                    댓글 등록
-                  </span>
-                  <span
-                    class="inline-flex h-10 items-center border-b-2 px-1 text-sm font-bold"
-                    :style="{ borderColor: normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR), color: normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR) }"
-                  >
-                    활성 TOC
-                  </span>
-                </div>
-              </div>
-            </div>
-          </section>
+          <AdminBrandSettingsCard
+            v-model:brand-color="form.brandColor"
+            :editing="editBrand"
+            :saving="savingBrand"
+            :has-changes="hasBrandChanges"
+            @begin="beginEditBrand"
+            @cancel="cancelEditBrand"
+            @save="saveBrandSection"
+            @normalize="normalizeBrandColorInput"
+          />
 
           <section
             id="admin-settings-section-announcement"