121 lines
4.3 KiB
Vue
121 lines
4.3 KiB
Vue
<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 master zenn"
|
|
@input="$emit('update:blockedUsernamesText', $event.target.value)"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
</template>
|