sori.studio/components/admin/AdminBrandSettingsCard.vue

<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>