zenn
2e5a973d11
백업 현황을 사이트 용량으로 재정의하고 파일 집계를 이미지·영상·오디오·첨부 파일·보내기로 명확히 분리해 합계 불일치를 해소했다. 설정 화면의 통계 카드 스타일을 통일해 가독성을 높였다. Co-authored-by: Cursor <cursoragent@cursor.com>
4070 lines
173 KiB
Vue
4070 lines
173 KiB
Vue
<script setup>
|
|
import {
|
|
ANNOUNCEMENT_ALIGNMENT_OPTIONS,
|
|
ANNOUNCEMENT_BACKGROUND_PRESETS,
|
|
DEFAULT_ANNOUNCEMENT_ALIGNMENT,
|
|
DEFAULT_ANNOUNCEMENT_BACKGROUND_COLOR,
|
|
normalizeAnnouncementAlignment,
|
|
normalizeAnnouncementBackgroundColor
|
|
} from '~/lib/announcement-bar.js'
|
|
import { DEFAULT_BRAND_COLOR, normalizeBrandColor } from '~/lib/brand-color.js'
|
|
import {
|
|
normalizeSignupBlockedUsernames,
|
|
parseSignupBlockedUsernamesFromText
|
|
} from '~/lib/signup-blocked-usernames.js'
|
|
import {
|
|
SOCIAL_ICON_PRESETS,
|
|
getSocialIconPreset,
|
|
normalizeSocialLinks
|
|
} from '~/lib/social-links.js'
|
|
import {
|
|
DEFAULT_POST_TAG_LIMIT,
|
|
MAX_POST_TAG_LIMIT,
|
|
MIN_POST_TAG_LIMIT,
|
|
normalizePostTagLimit
|
|
} from '~/lib/post-tag-limit.js'
|
|
import {
|
|
DEFAULT_FEATURED_POST_LIMIT,
|
|
DEFAULT_HOME_LATEST_POST_LIMIT,
|
|
DEFAULT_PAGE_SECTION_ITEM_LIMIT,
|
|
DEFAULT_POST_LIST_PAGE_SIZE,
|
|
DEFAULT_TAG_POST_LIST_PAGE_SIZE,
|
|
DISPLAY_COUNT_OPTIONS,
|
|
POST_LIST_COUNT_OPTIONS,
|
|
normalizeDisplayCount
|
|
} from '~/lib/display-count-settings.js'
|
|
import {
|
|
DEFAULT_UPLOAD_MAX_FILE_COUNT,
|
|
DEFAULT_UPLOAD_MAX_TOTAL_SIZE,
|
|
UPLOAD_FILE_COUNT_OPTIONS,
|
|
UPLOAD_TOTAL_SIZE_OPTIONS,
|
|
formatUploadSizeLimit,
|
|
normalizeUploadMaxFileCount,
|
|
normalizeUploadMaxTotalSize
|
|
} from '~/lib/upload-size-limit.js'
|
|
|
|
definePageMeta({
|
|
layout: 'admin'
|
|
})
|
|
|
|
const router = useRouter()
|
|
|
|
const savingTitleDesc = ref(false)
|
|
const savingMisc = ref(false)
|
|
const savingSocial = ref(false)
|
|
const savingPost = ref(false)
|
|
const savingHomeCover = ref(false)
|
|
const savingBrand = ref(false)
|
|
const savingAnnouncement = ref(false)
|
|
const savingSpam = ref(false)
|
|
const savingSiteCode = ref(false)
|
|
const savingAds = ref(false)
|
|
const uploadingLogo = ref(false)
|
|
const uploadingHomeCover = ref(false)
|
|
const uploadingHomeCoverDark = ref(false)
|
|
const requestingPostExport = ref(false)
|
|
const deletingPostExportJobIds = ref([])
|
|
const downloadingPostExportJobIds = ref([])
|
|
const selectedPostExportFileIds = ref({})
|
|
const retryingPostExportJobIds = ref([])
|
|
const importingPosts = ref(false)
|
|
const postImportFile = ref(null)
|
|
const postImportFileName = ref('')
|
|
const postImportResult = ref(null)
|
|
const postExportDateRangeMode = ref('all')
|
|
const postExportYear = ref(new Date().getFullYear())
|
|
const postExportMonth = ref(new Date().getMonth() + 1)
|
|
const postExportDateFrom = ref('')
|
|
const postExportDateTo = ref('')
|
|
const postExportChunkSize = ref(500)
|
|
const postExportMaxFileSizeMb = ref(500)
|
|
const postImportExportPanel = ref('')
|
|
const errorMessage = ref('')
|
|
const toast = ref(null)
|
|
const logoInputRef = ref(null)
|
|
const homeCoverInputRef = ref(null)
|
|
const homeCoverDarkInputRef = ref(null)
|
|
const postImportInputRef = ref(null)
|
|
const mainScrollRef = ref(null)
|
|
const navSearchQuery = ref('')
|
|
const {
|
|
displayValue: navSearchInput,
|
|
onInput: onNavSearchInput,
|
|
onCompositionEnd: onNavSearchCompositionEnd
|
|
} = useImeSearchInput(navSearchQuery)
|
|
const activeSectionId = ref('admin-settings-section-title')
|
|
const scrollSpySuspended = ref(false)
|
|
/** 블로그 제목·설명 카드 편집 모드 여부 */
|
|
const editTitleDesc = ref(false)
|
|
/** 사이트 정보 카드 편집 모드 여부 */
|
|
const editMisc = ref(false)
|
|
/** SNS 정보 카드 편집 모드 여부 */
|
|
const editSocial = ref(false)
|
|
/** POST 설정 카드 편집 모드 여부 */
|
|
const editPost = ref(false)
|
|
/** 메인 화면 커버 카드 편집 모드 여부 */
|
|
const editHomeCover = ref(false)
|
|
/** 브랜드 컬러 카드 편집 모드 여부 */
|
|
const editBrand = ref(false)
|
|
/** 어나운스 바 맞춤 설정 패널 열림 여부 */
|
|
const customizeAnnouncement = ref(false)
|
|
/** 스팸 필터 카드 편집 모드 여부 */
|
|
const editSpam = ref(false)
|
|
/** 사이트 코드 카드 편집 모드 여부 */
|
|
const editSiteCode = ref(false)
|
|
/** 광고 슬롯 카드 편집 모드 여부 */
|
|
const editAds = ref(false)
|
|
/** 편집 시작 시점의 제목·설명(취소 시 복원용) */
|
|
const titleDescSnapshot = reactive({
|
|
title: '',
|
|
description: ''
|
|
})
|
|
/** 편집 시작 시점의 사이트 정보(취소 시 복원용) */
|
|
const miscSnapshot = reactive({
|
|
siteUrl: '',
|
|
logoText: '',
|
|
logoUrl: '',
|
|
faviconUrl: '',
|
|
copyrightText: ''
|
|
})
|
|
/** 편집 시작 시점의 SNS 정보(취소 시 복원용) */
|
|
const socialSnapshot = reactive({
|
|
socialLinks: []
|
|
})
|
|
/** 편집 시작 시점의 POST 설정(취소 시 복원용) */
|
|
const postSnapshot = reactive({
|
|
showPostUpdatedAt: false,
|
|
postTagLimit: DEFAULT_POST_TAG_LIMIT,
|
|
homeLatestPostLimit: DEFAULT_HOME_LATEST_POST_LIMIT,
|
|
postListPageSize: DEFAULT_POST_LIST_PAGE_SIZE,
|
|
tagPostListPageSize: DEFAULT_TAG_POST_LIST_PAGE_SIZE,
|
|
featuredPostLimit: DEFAULT_FEATURED_POST_LIMIT,
|
|
pageSectionItemLimit: DEFAULT_PAGE_SECTION_ITEM_LIMIT,
|
|
uploadMaxFileCount: DEFAULT_UPLOAD_MAX_FILE_COUNT,
|
|
uploadMaxTotalSize: DEFAULT_UPLOAD_MAX_TOTAL_SIZE
|
|
})
|
|
/** 편집 시작 시점의 메인 화면 커버(취소 시 복원용) */
|
|
const homeCoverSnapshot = reactive({
|
|
homeCoverImageUrl: '',
|
|
homeCoverDarkImageUrl: '',
|
|
homeCoverTitle: '',
|
|
homeCoverText: ''
|
|
})
|
|
/** 편집 시작 시점의 브랜드 설정(취소 시 복원용) */
|
|
const brandSnapshot = reactive({
|
|
brandColor: DEFAULT_BRAND_COLOR
|
|
})
|
|
/** 맞춤 설정 시작 시점의 어나운스 바(취소 시 복원용) */
|
|
const announcementSnapshot = reactive({
|
|
announcementEnabled: false,
|
|
announcementText: '',
|
|
announcementUrl: '',
|
|
announcementBackgroundColor: DEFAULT_ANNOUNCEMENT_BACKGROUND_COLOR,
|
|
announcementAlignment: DEFAULT_ANNOUNCEMENT_ALIGNMENT
|
|
})
|
|
/** 편집 시작 시점의 스팸 필터(취소 시 복원용) */
|
|
const spamSnapshot = reactive({
|
|
signupBlockedUsernames: []
|
|
})
|
|
/** 편집 시작 시점의 사이트 코드(취소 시 복원용) */
|
|
const siteCodeSnapshot = reactive({
|
|
adsTxt: '',
|
|
customHeadCode: '',
|
|
customFooterCode: ''
|
|
})
|
|
/** 편집 시작 시점의 광고 슬롯(취소 시 복원용) */
|
|
const adsSnapshot = reactive({
|
|
adHomeFeedCode: '',
|
|
adHomeInfeedCode: '',
|
|
adSidebarCode: '',
|
|
adPostSidebarCode: '',
|
|
adPostTopCode: '',
|
|
adPostInArticleCode: '',
|
|
adPostBottomCode: ''
|
|
})
|
|
let toastTimer = null
|
|
let scrollSpyFrame = null
|
|
let postExportRefreshTimer = null
|
|
|
|
const { data: settings } = await useFetch('/admin/api/settings')
|
|
const {
|
|
data: postExportJobs,
|
|
refresh: refreshPostExportJobs
|
|
} = await useFetch('/admin/api/posts/export-jobs', {
|
|
default: () => []
|
|
})
|
|
const {
|
|
data: backupSummary,
|
|
pending: backupSummaryPending,
|
|
refresh: refreshBackupSummary
|
|
} = await useFetch('/admin/api/settings/backup-summary', {
|
|
default: () => null
|
|
})
|
|
|
|
const form = reactive({
|
|
title: settings.value?.title || 'sori.studio',
|
|
description: settings.value?.description || '',
|
|
siteUrl: settings.value?.siteUrl || 'https://sori.studio',
|
|
logoText: settings.value?.logoText || '井',
|
|
logoUrl: settings.value?.logoUrl || '',
|
|
faviconUrl: settings.value?.faviconUrl || '',
|
|
copyrightText: settings.value?.copyrightText || '©2026 sori.studio',
|
|
socialLinks: normalizeSocialLinks(settings.value?.socialLinks || []),
|
|
showPostUpdatedAt: Boolean(settings.value?.showPostUpdatedAt),
|
|
postTagLimit: normalizePostTagLimit(settings.value?.postTagLimit),
|
|
homeLatestPostLimit: normalizeDisplayCount(settings.value?.homeLatestPostLimit, DEFAULT_HOME_LATEST_POST_LIMIT),
|
|
postListPageSize: normalizeDisplayCount(settings.value?.postListPageSize, DEFAULT_POST_LIST_PAGE_SIZE),
|
|
tagPostListPageSize: normalizeDisplayCount(settings.value?.tagPostListPageSize, DEFAULT_TAG_POST_LIST_PAGE_SIZE),
|
|
featuredPostLimit: normalizeDisplayCount(settings.value?.featuredPostLimit, DEFAULT_FEATURED_POST_LIMIT),
|
|
pageSectionItemLimit: normalizeDisplayCount(settings.value?.pageSectionItemLimit, DEFAULT_PAGE_SECTION_ITEM_LIMIT),
|
|
uploadMaxFileCount: normalizeUploadMaxFileCount(settings.value?.uploadMaxFileCount),
|
|
uploadMaxTotalSize: normalizeUploadMaxTotalSize(settings.value?.uploadMaxTotalSize),
|
|
homeCoverImageUrl: settings.value?.homeCoverImageUrl || '',
|
|
homeCoverDarkImageUrl: settings.value?.homeCoverDarkImageUrl || '',
|
|
homeCoverTitle: settings.value?.homeCoverTitle || '',
|
|
homeCoverText: settings.value?.homeCoverText || '',
|
|
brandColor: normalizeBrandColor(settings.value?.brandColor || DEFAULT_BRAND_COLOR),
|
|
announcementEnabled: Boolean(settings.value?.announcementEnabled),
|
|
announcementText: settings.value?.announcementText || '',
|
|
announcementUrl: settings.value?.announcementUrl || '',
|
|
announcementBackgroundColor: normalizeAnnouncementBackgroundColor(settings.value?.announcementBackgroundColor || DEFAULT_ANNOUNCEMENT_BACKGROUND_COLOR),
|
|
announcementAlignment: normalizeAnnouncementAlignment(settings.value?.announcementAlignment || DEFAULT_ANNOUNCEMENT_ALIGNMENT),
|
|
signupBlockedUsernames: normalizeSignupBlockedUsernames(settings.value?.signupBlockedUsernames),
|
|
adsTxt: settings.value?.adsTxt || '',
|
|
customHeadCode: settings.value?.customHeadCode || '',
|
|
customFooterCode: settings.value?.customFooterCode || '',
|
|
adHomeFeedCode: settings.value?.adHomeFeedCode || '',
|
|
adHomeInfeedCode: settings.value?.adHomeInfeedCode || '',
|
|
adSidebarCode: settings.value?.adSidebarCode || '',
|
|
adPostSidebarCode: settings.value?.adPostSidebarCode || '',
|
|
adPostTopCode: settings.value?.adPostTopCode || '',
|
|
adPostInArticleCode: settings.value?.adPostInArticleCode || '',
|
|
adPostBottomCode: settings.value?.adPostBottomCode || ''
|
|
})
|
|
|
|
/**
|
|
* 블로그 제목·설명 변경 여부
|
|
* @returns {boolean} 변경 여부
|
|
*/
|
|
const hasTitleDescChanges = computed(() => editTitleDesc.value && (
|
|
form.title !== titleDescSnapshot.title
|
|
|| form.description !== titleDescSnapshot.description
|
|
))
|
|
|
|
/**
|
|
* 사이트 정보 변경 여부
|
|
* @returns {boolean} 변경 여부
|
|
*/
|
|
const hasMiscChanges = computed(() => editMisc.value && (
|
|
form.siteUrl !== miscSnapshot.siteUrl
|
|
|| form.logoText !== miscSnapshot.logoText
|
|
|| form.logoUrl !== miscSnapshot.logoUrl
|
|
|| form.faviconUrl !== miscSnapshot.faviconUrl
|
|
|| form.copyrightText !== miscSnapshot.copyrightText
|
|
))
|
|
|
|
/**
|
|
* SNS 정보 변경 여부
|
|
* @returns {boolean} 변경 여부
|
|
*/
|
|
const hasSocialChanges = computed(() => editSocial.value
|
|
&& JSON.stringify(normalizeSocialLinks(form.socialLinks)) !== JSON.stringify(normalizeSocialLinks(socialSnapshot.socialLinks)))
|
|
|
|
/**
|
|
* POST 설정 변경 여부
|
|
* @returns {boolean} 변경 여부
|
|
*/
|
|
const hasPostChanges = computed(() => editPost.value
|
|
&& (
|
|
form.showPostUpdatedAt !== postSnapshot.showPostUpdatedAt
|
|
|| normalizePostTagLimit(form.postTagLimit) !== normalizePostTagLimit(postSnapshot.postTagLimit)
|
|
|| normalizeDisplayCount(form.homeLatestPostLimit, DEFAULT_HOME_LATEST_POST_LIMIT) !== normalizeDisplayCount(postSnapshot.homeLatestPostLimit, DEFAULT_HOME_LATEST_POST_LIMIT)
|
|
|| normalizeDisplayCount(form.postListPageSize, DEFAULT_POST_LIST_PAGE_SIZE) !== normalizeDisplayCount(postSnapshot.postListPageSize, DEFAULT_POST_LIST_PAGE_SIZE)
|
|
|| normalizeDisplayCount(form.tagPostListPageSize, DEFAULT_TAG_POST_LIST_PAGE_SIZE) !== normalizeDisplayCount(postSnapshot.tagPostListPageSize, DEFAULT_TAG_POST_LIST_PAGE_SIZE)
|
|
|| normalizeDisplayCount(form.featuredPostLimit, DEFAULT_FEATURED_POST_LIMIT) !== normalizeDisplayCount(postSnapshot.featuredPostLimit, DEFAULT_FEATURED_POST_LIMIT)
|
|
|| normalizeDisplayCount(form.pageSectionItemLimit, DEFAULT_PAGE_SECTION_ITEM_LIMIT) !== normalizeDisplayCount(postSnapshot.pageSectionItemLimit, DEFAULT_PAGE_SECTION_ITEM_LIMIT)
|
|
|| normalizeUploadMaxFileCount(form.uploadMaxFileCount) !== normalizeUploadMaxFileCount(postSnapshot.uploadMaxFileCount)
|
|
|| normalizeUploadMaxTotalSize(form.uploadMaxTotalSize) !== normalizeUploadMaxTotalSize(postSnapshot.uploadMaxTotalSize)
|
|
))
|
|
|
|
/**
|
|
* 메인 화면 커버 변경 여부
|
|
* @returns {boolean} 변경 여부
|
|
*/
|
|
const hasHomeCoverChanges = computed(() => editHomeCover.value && (
|
|
form.homeCoverImageUrl !== homeCoverSnapshot.homeCoverImageUrl
|
|
|| form.homeCoverDarkImageUrl !== homeCoverSnapshot.homeCoverDarkImageUrl
|
|
|| form.homeCoverTitle !== homeCoverSnapshot.homeCoverTitle
|
|
|| form.homeCoverText !== homeCoverSnapshot.homeCoverText
|
|
))
|
|
|
|
/**
|
|
* 브랜드 설정 변경 여부
|
|
* @returns {boolean} 변경 여부
|
|
*/
|
|
const hasBrandChanges = computed(() => editBrand.value
|
|
&& normalizeBrandColor(form.brandColor) !== normalizeBrandColor(brandSnapshot.brandColor))
|
|
|
|
/**
|
|
* 어나운스 바 변경 여부
|
|
* @returns {boolean} 변경 여부
|
|
*/
|
|
const hasAnnouncementChanges = computed(() => customizeAnnouncement.value && (
|
|
form.announcementEnabled !== announcementSnapshot.announcementEnabled
|
|
|| form.announcementText !== announcementSnapshot.announcementText
|
|
|| form.announcementUrl !== announcementSnapshot.announcementUrl
|
|
|| normalizeAnnouncementBackgroundColor(form.announcementBackgroundColor) !== normalizeAnnouncementBackgroundColor(announcementSnapshot.announcementBackgroundColor)
|
|
|| normalizeAnnouncementAlignment(form.announcementAlignment) !== normalizeAnnouncementAlignment(announcementSnapshot.announcementAlignment)
|
|
))
|
|
|
|
/**
|
|
* 스팸 필터 변경 여부
|
|
* @returns {boolean} 변경 여부
|
|
*/
|
|
const hasSpamChanges = computed(() => editSpam.value
|
|
&& JSON.stringify(form.signupBlockedUsernames) !== JSON.stringify(spamSnapshot.signupBlockedUsernames))
|
|
|
|
/**
|
|
* 사이트 코드 변경 여부
|
|
* @returns {boolean} 변경 여부
|
|
*/
|
|
const hasSiteCodeChanges = computed(() => editSiteCode.value && (
|
|
form.adsTxt !== siteCodeSnapshot.adsTxt
|
|
|| form.customHeadCode !== siteCodeSnapshot.customHeadCode
|
|
|| form.customFooterCode !== siteCodeSnapshot.customFooterCode
|
|
))
|
|
|
|
/**
|
|
* 광고 슬롯 변경 여부
|
|
* @returns {boolean} 변경 여부
|
|
*/
|
|
const hasAdsChanges = computed(() => editAds.value && (
|
|
form.adHomeFeedCode !== adsSnapshot.adHomeFeedCode
|
|
|| form.adHomeInfeedCode !== adsSnapshot.adHomeInfeedCode
|
|
|| form.adSidebarCode !== adsSnapshot.adSidebarCode
|
|
|| form.adPostSidebarCode !== adsSnapshot.adPostSidebarCode
|
|
|| form.adPostTopCode !== adsSnapshot.adPostTopCode
|
|
|| form.adPostInArticleCode !== adsSnapshot.adPostInArticleCode
|
|
|| form.adPostBottomCode !== adsSnapshot.adPostBottomCode
|
|
))
|
|
|
|
/**
|
|
* 최신 게시물 export 작업 목록
|
|
* @returns {Array} export 작업 목록
|
|
*/
|
|
const normalizedPostExportJobs = computed(() => Array.isArray(postExportJobs.value) ? postExportJobs.value : [])
|
|
|
|
/**
|
|
* 진행 중인 게시물 export 작업이 있는지 확인한다.
|
|
* @returns {boolean} 진행 중 작업 여부
|
|
*/
|
|
const hasActivePostExportJobs = computed(() => normalizedPostExportJobs.value.some((job) => (
|
|
job.status === 'queued' || job.status === 'processing'
|
|
)))
|
|
|
|
/**
|
|
* Export 연도 선택지
|
|
* @returns {Array<number>} 연도 목록
|
|
*/
|
|
const postExportYearOptions = computed(() => {
|
|
const currentYear = new Date().getFullYear()
|
|
return Array.from({ length: 10 }, (_, index) => currentYear - index)
|
|
})
|
|
|
|
/**
|
|
* Export 월 선택지
|
|
* @type {ReadonlyArray<number>}
|
|
*/
|
|
const postExportMonthOptions = Array.from({ length: 12 }, (_, index) => index + 1)
|
|
|
|
/**
|
|
* 게시물 export 요청 버튼 활성 가능 여부
|
|
* @returns {boolean} 활성 가능 여부
|
|
*/
|
|
const canRequestPostExport = computed(() => {
|
|
if (requestingPostExport.value || hasActivePostExportJobs.value) {
|
|
return false
|
|
}
|
|
|
|
const hasValidSplitOptions = postExportChunkSize.value >= 1
|
|
&& postExportChunkSize.value <= 500
|
|
&& postExportMaxFileSizeMb.value >= 10
|
|
&& postExportMaxFileSizeMb.value <= 2048
|
|
|
|
if (!hasValidSplitOptions) {
|
|
return false
|
|
}
|
|
|
|
if (postExportDateRangeMode.value === 'custom') {
|
|
return Boolean(
|
|
postExportDateFrom.value
|
|
&& postExportDateTo.value
|
|
&& postExportDateFrom.value <= postExportDateTo.value
|
|
)
|
|
}
|
|
|
|
return true
|
|
})
|
|
|
|
/**
|
|
* 게시물 export 요청 버튼 안내 문구
|
|
* @returns {string} 안내 문구
|
|
*/
|
|
const postExportRequestTitle = computed(() => {
|
|
if (hasActivePostExportJobs.value) {
|
|
return '진행 중인 내보내기 작업이 끝난 뒤 새 요청을 만들 수 있습니다.'
|
|
}
|
|
|
|
if (postExportDateRangeMode.value === 'custom' && !canRequestPostExport.value) {
|
|
return '올바른 시작일과 종료일을 선택해 주세요.'
|
|
}
|
|
|
|
if (!canRequestPostExport.value) {
|
|
return 'ZIP당 최대 게시물 수와 목표 용량을 확인해 주세요.'
|
|
}
|
|
|
|
return '게시물 내보내기 작업을 요청합니다.'
|
|
})
|
|
|
|
/**
|
|
* Import/Export 상세 패널을 전환한다.
|
|
* @param {'import'|'export'} panelName - 열 패널 이름
|
|
* @returns {void}
|
|
*/
|
|
const togglePostImportExportPanel = (panelName) => {
|
|
postImportExportPanel.value = postImportExportPanel.value === panelName ? '' : panelName
|
|
}
|
|
|
|
/**
|
|
* Export 요청 범위 입력을 만든다.
|
|
* @returns {Object} Export 범위 입력
|
|
*/
|
|
const createPostExportRequestBody = () => {
|
|
const base = {
|
|
chunkSize: Number(postExportChunkSize.value),
|
|
maxFileSizeBytes: Number(postExportMaxFileSizeMb.value) * 1024 * 1024,
|
|
retentionDays: 100,
|
|
dateRangeMode: postExportDateRangeMode.value
|
|
}
|
|
|
|
if (postExportDateRangeMode.value === 'year') {
|
|
return {
|
|
...base,
|
|
year: Number(postExportYear.value)
|
|
}
|
|
}
|
|
|
|
if (postExportDateRangeMode.value === 'month') {
|
|
return {
|
|
...base,
|
|
year: Number(postExportYear.value),
|
|
month: Number(postExportMonth.value)
|
|
}
|
|
}
|
|
|
|
if (postExportDateRangeMode.value === 'custom') {
|
|
return {
|
|
...base,
|
|
dateFrom: postExportDateFrom.value,
|
|
dateTo: postExportDateTo.value
|
|
}
|
|
}
|
|
|
|
return base
|
|
}
|
|
|
|
/**
|
|
* export 상태 라벨 조회
|
|
* @param {string} status - export 상태
|
|
* @returns {string} 상태 라벨
|
|
*/
|
|
const getPostExportStatusLabel = (status) => ({
|
|
queued: '대기 중',
|
|
processing: '생성 중',
|
|
ready: '준비 완료',
|
|
failed: '실패',
|
|
expired: '만료'
|
|
}[status] || '알 수 없음')
|
|
|
|
/**
|
|
* export 상태 배지 클래스 조회
|
|
* @param {string} status - export 상태
|
|
* @returns {string} Tailwind 클래스
|
|
*/
|
|
const getPostExportStatusClass = (status) => ({
|
|
queued: 'bg-[#eef4ff] text-[#2f5fbb] ring-[#c9dafd]',
|
|
processing: 'bg-[#fff7e8] text-[#9a6200] ring-[#f3d39b]',
|
|
ready: 'bg-[#eaf8f0] text-[#147a45] ring-[#b9e7cd]',
|
|
failed: 'bg-[#fff0f0] text-[#c53232] ring-[#f3c2c2]',
|
|
expired: 'bg-[#f1f3f5] text-[#657080] ring-[#dce0e5]'
|
|
}[status] || 'bg-[#f1f3f5] text-[#657080] ring-[#dce0e5]')
|
|
|
|
/**
|
|
* 바이트 값을 읽기 쉬운 용량으로 변환한다.
|
|
* @param {number} value - 바이트 값
|
|
* @returns {string} 용량 라벨
|
|
*/
|
|
const formatExportFileSize = (value) => {
|
|
const bytes = Number(value || 0)
|
|
|
|
if (!bytes) {
|
|
return '생성 대기'
|
|
}
|
|
|
|
const units = ['B', 'KB', 'MB', 'GB']
|
|
let size = bytes
|
|
let unitIndex = 0
|
|
|
|
while (size >= 1024 && unitIndex < units.length - 1) {
|
|
size /= 1024
|
|
unitIndex += 1
|
|
}
|
|
|
|
return `${size.toFixed(size >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`
|
|
}
|
|
|
|
/**
|
|
* 사이트 용량 숫자를 쉼표 포함 문자열로 변환한다.
|
|
* @param {number} value - 숫자 값
|
|
* @returns {string} 숫자 라벨
|
|
*/
|
|
const formatBackupNumber = (value) => Number(value || 0).toLocaleString()
|
|
|
|
/**
|
|
* 사이트 용량 바이트를 읽기 쉬운 문자열로 변환한다.
|
|
* @param {number} value - 바이트 값
|
|
* @returns {string} 용량 라벨
|
|
*/
|
|
const formatBackupSize = (value) => {
|
|
const bytes = Number(value || 0)
|
|
|
|
if (!bytes) {
|
|
return '0 B'
|
|
}
|
|
|
|
const units = ['B', 'KB', 'MB', 'GB', 'TB']
|
|
let size = bytes
|
|
let unitIndex = 0
|
|
|
|
while (size >= 1024 && unitIndex < units.length - 1) {
|
|
size /= 1024
|
|
unitIndex += 1
|
|
}
|
|
|
|
return `${size.toFixed(size >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`
|
|
}
|
|
|
|
/**
|
|
* 사이트 용량 기준 시각을 표시한다.
|
|
* @param {string} value - ISO 날짜 문자열
|
|
* @returns {string} 날짜 라벨
|
|
*/
|
|
const formatBackupGeneratedAt = (value) => {
|
|
if (!value) {
|
|
return '집계 대기'
|
|
}
|
|
|
|
return new Intl.DateTimeFormat('ko-KR', {
|
|
dateStyle: 'medium',
|
|
timeStyle: 'short'
|
|
}).format(new Date(value))
|
|
}
|
|
|
|
/**
|
|
* 사이트 용량 콘텐츠 지표 목록
|
|
* @returns {Array<{ label: string, value: string, helper: string }>} 콘텐츠 지표
|
|
*/
|
|
const backupContentMetrics = computed(() => {
|
|
const content = backupSummary.value?.content || {}
|
|
const posts = content.posts || {}
|
|
const pages = content.pages || {}
|
|
const tags = content.tags || {}
|
|
const comments = content.comments || {}
|
|
const members = content.members || {}
|
|
|
|
return [
|
|
{
|
|
label: '게시글',
|
|
value: `${formatBackupNumber(posts.total)}개`,
|
|
helper: `공개 ${formatBackupNumber(posts.published)} · 비공개 ${formatBackupNumber(posts.private)} · 초안 ${formatBackupNumber(posts.draft)} · 회원 ${formatBackupNumber(posts.members)}`
|
|
},
|
|
{
|
|
label: '페이지',
|
|
value: `${formatBackupNumber(pages.total)}개`,
|
|
helper: `공개 ${formatBackupNumber(pages.published)} · 목록 ${formatBackupNumber(pages.listed)} · 추천 ${formatBackupNumber(pages.featured)}`
|
|
},
|
|
{
|
|
label: '태그',
|
|
value: `${formatBackupNumber(tags.total)}개`,
|
|
helper: `사용 중 ${formatBackupNumber(tags.used)} · 관리 ${formatBackupNumber(tags.managed)} · 일반 ${formatBackupNumber(tags.general)}`
|
|
},
|
|
{
|
|
label: '댓글',
|
|
value: `${formatBackupNumber(comments.total)}개`,
|
|
helper: `공개 ${formatBackupNumber(comments.published)} · 대기 ${formatBackupNumber(comments.pending)} · 차단 ${formatBackupNumber(comments.blocked)}`
|
|
},
|
|
{
|
|
label: '회원',
|
|
value: `${formatBackupNumber(members.total)}명`,
|
|
helper: `소유자 ${formatBackupNumber(members.owner)} · 관리자 ${formatBackupNumber(members.admin)} · 회원 ${formatBackupNumber(members.member)}`
|
|
}
|
|
]
|
|
})
|
|
|
|
/**
|
|
* 사이트 용량 저장소 행 값을 포맷한다.
|
|
* @param {number} count - 파일 개수
|
|
* @param {number} sizeBytes - 파일 용량
|
|
* @returns {string} 개수·용량 라벨
|
|
*/
|
|
const formatBackupStatValue = (count, sizeBytes) => `${formatBackupNumber(count)}개 · ${formatBackupSize(sizeBytes)}`
|
|
|
|
/**
|
|
* 사이트 용량 저장소 섹션 목록
|
|
* @returns {{ imageRows: Array<{ label: string, value: string, child?: boolean }>, mainRows: Array<{ label: string, value: string }>, totalRow: { label: string, value: string } }} 저장소 섹션
|
|
*/
|
|
const backupStorageSections = computed(() => {
|
|
const storage = backupSummary.value?.storage || {}
|
|
const derivatives = storage.derivatives || {}
|
|
const profiles = storage.profiles || {}
|
|
const exports = storage.exports || {}
|
|
const byKind = storage.byKind || {}
|
|
const images = byKind.images || {}
|
|
const videos = byKind.videos || {}
|
|
const audio = byKind.audio || {}
|
|
const files = byKind.files || {}
|
|
const otherCount = Number(audio.count || 0) + Number(files.count || 0)
|
|
const otherSize = Number(audio.sizeBytes || 0) + Number(files.sizeBytes || 0)
|
|
const imageOriginalCount = Math.max(0, Number(images.count || 0) - Number(derivatives.count || 0) - Number(profiles.count || 0))
|
|
const imageOriginalSize = Math.max(0, Number(images.sizeBytes || 0) - Number(derivatives.sizeBytes || 0) - Number(profiles.sizeBytes || 0))
|
|
const totalCount = Number(images.count || 0) + Number(videos.count || 0) + otherCount + Number(exports.count || 0)
|
|
const totalSize = Number(images.sizeBytes || 0) + Number(videos.sizeBytes || 0) + otherSize + Number(exports.sizeBytes || 0)
|
|
const mainRows = [
|
|
{
|
|
label: '영상',
|
|
value: formatBackupStatValue(videos.count, videos.sizeBytes)
|
|
},
|
|
{
|
|
label: '보내기',
|
|
value: formatBackupStatValue(exports.count, exports.sizeBytes)
|
|
}
|
|
]
|
|
|
|
if (Number(audio.count || 0) > 0) {
|
|
mainRows.push({
|
|
label: '오디오',
|
|
value: formatBackupStatValue(audio.count, audio.sizeBytes)
|
|
})
|
|
}
|
|
|
|
if (Number(files.count || 0) > 0) {
|
|
mainRows.push({
|
|
label: '첨부 파일',
|
|
value: formatBackupStatValue(files.count, files.sizeBytes)
|
|
})
|
|
}
|
|
|
|
return {
|
|
imageRows: [
|
|
{
|
|
label: '이미지',
|
|
value: formatBackupStatValue(imageOriginalCount, imageOriginalSize)
|
|
},
|
|
{
|
|
label: '자동생성',
|
|
value: formatBackupStatValue(derivatives.count, derivatives.sizeBytes),
|
|
child: true
|
|
},
|
|
{
|
|
label: '프로필',
|
|
value: formatBackupStatValue(profiles.count, profiles.sizeBytes),
|
|
child: true
|
|
}
|
|
],
|
|
mainRows,
|
|
totalRow: {
|
|
label: '합계',
|
|
value: formatBackupStatValue(totalCount, totalSize)
|
|
}
|
|
}
|
|
})
|
|
|
|
/**
|
|
* export 작업 진행률을 계산한다.
|
|
* @param {Object} job - export 작업
|
|
* @returns {number} 진행률
|
|
*/
|
|
const getPostExportProgressPercent = (job) => {
|
|
const total = Number(job?.postCount || 0)
|
|
const processed = Number(job?.processedCount || 0)
|
|
|
|
if (!total) {
|
|
return job?.status === 'ready' ? 100 : 0
|
|
}
|
|
|
|
return Math.min(Math.max(Math.round((processed / total) * 100), 0), 100)
|
|
}
|
|
|
|
/**
|
|
* export 작업 진행 숫자 라벨을 만든다.
|
|
* @param {Object} job - export 작업
|
|
* @returns {string} 진행 숫자 라벨
|
|
*/
|
|
const getPostExportProgressLabel = (job) => {
|
|
const total = Number(job?.postCount || 0)
|
|
const processed = Math.min(Number(job?.processedCount || 0), total)
|
|
|
|
if (!total) {
|
|
return '0 / 0'
|
|
}
|
|
|
|
return `${processed.toLocaleString()} / ${total.toLocaleString()}`
|
|
}
|
|
|
|
/**
|
|
* export 작업 진행 보조 설명을 만든다.
|
|
* @param {Object} job - export 작업
|
|
* @returns {string} 진행 보조 설명
|
|
*/
|
|
const getPostExportProgressDescription = (job) => {
|
|
if (job.progressMessage) {
|
|
return job.progressMessage
|
|
}
|
|
|
|
if (job.status === 'queued') {
|
|
return '작업 대기열에 등록되었습니다. 곧 파일 생성이 시작됩니다.'
|
|
}
|
|
|
|
if (job.status === 'processing') {
|
|
return job.currentPartIndex
|
|
? `${job.currentPartIndex}번째 분할 파일을 생성하는 중입니다.`
|
|
: '분할 파일을 생성하는 중입니다.'
|
|
}
|
|
|
|
if (job.status === 'ready') {
|
|
return '생성이 완료되었습니다.'
|
|
}
|
|
|
|
return job.message || ''
|
|
}
|
|
|
|
/**
|
|
* 가입 금지 닉네임 textarea 바인딩
|
|
*/
|
|
const signupBlockedUsernamesText = computed({
|
|
get: () => form.signupBlockedUsernames.join('\n'),
|
|
set: (value) => {
|
|
form.signupBlockedUsernames = parseSignupBlockedUsernamesFromText(value)
|
|
}
|
|
})
|
|
|
|
/**
|
|
* 설정 화면 좌측 내비 구역 정의
|
|
* @type {ReadonlyArray<{ heading: string, items: ReadonlyArray<{ id: string, label: string, keywords: string, iconId?: string }> }>}
|
|
*/
|
|
const settingsNavGroups = [
|
|
{
|
|
heading: '일반',
|
|
items: [
|
|
{ id: 'admin-settings-section-title', label: '블로그 제목·설명', keywords: 'title description site name', iconId: 'title-desc' },
|
|
{ id: 'admin-settings-section-misc', label: '사이트 정보', keywords: 'logo url copyright favicon site info', iconId: 'site-info' },
|
|
{ id: 'admin-settings-section-social', label: 'SNS 정보', keywords: 'social follow sns x github instagram youtube rss', iconId: 'social' }
|
|
]
|
|
},
|
|
{
|
|
heading: '게시물',
|
|
items: [
|
|
{ id: 'admin-settings-section-post', label: 'POST 설정', keywords: 'post updated date display 수정일', iconId: 'post-settings' }
|
|
]
|
|
},
|
|
{
|
|
heading: '사이트',
|
|
items: [
|
|
{ id: 'admin-settings-section-home-cover', label: '메인 화면', keywords: 'home cover hero banner image', iconId: 'home-cover' },
|
|
{ id: 'admin-settings-section-brand', label: '브랜드', keywords: 'brand design accent color point 포인트 컬러', iconId: 'brand' },
|
|
{ id: 'admin-settings-section-announcement', label: '어나운스 바', keywords: 'announcement banner notice', iconId: 'announcement' },
|
|
{ id: 'admin-settings-section-site-code', label: '사이트 코드', keywords: 'ads ads.txt head footer script code adsense', iconId: 'site-code' },
|
|
{ id: 'admin-settings-section-ads', label: 'Ads', keywords: 'ads ad slot advertisement adsense 광고 애드센스', iconId: 'ads' }
|
|
]
|
|
},
|
|
{
|
|
heading: '콘텐츠·안전',
|
|
items: [
|
|
{ id: 'admin-settings-section-backup-summary', label: '사이트 용량', keywords: 'storage media count volume 용량 통계 사이트', iconId: 'post-export' },
|
|
{ id: 'admin-settings-section-export', label: '게시물 내보내기', keywords: 'export backup 내보내기', iconId: 'post-export' },
|
|
{ id: 'admin-settings-section-import', label: '게시물 가져오기', keywords: 'import restore 가져오기', iconId: 'post-import' },
|
|
{ id: 'admin-settings-section-spam', label: '스팸 필터', keywords: 'spam moderation comments', iconId: 'spam' }
|
|
]
|
|
}
|
|
]
|
|
|
|
/**
|
|
* 검색어에 맞춰 내비 그룹을 필터링한다.
|
|
* @returns {typeof settingsNavGroups} 표시할 그룹 목록
|
|
*/
|
|
const filteredSettingsNavGroups = computed(() => {
|
|
const q = navSearchQuery.value.trim().toLowerCase()
|
|
if (!q) {
|
|
return settingsNavGroups
|
|
}
|
|
|
|
return settingsNavGroups
|
|
.map((group) => {
|
|
const items = group.items.filter((item) => {
|
|
const hay = `${item.label} ${item.keywords}`.toLowerCase()
|
|
return hay.includes(q)
|
|
})
|
|
return { ...group, items }
|
|
})
|
|
.filter((group) => group.items.length > 0)
|
|
})
|
|
|
|
/**
|
|
* 스크롤 스파이: 본문 스크롤 위치에 맞춰 활성 섹션 id를 갱신한다.
|
|
* @returns {void}
|
|
*/
|
|
const updateActiveSectionFromScroll = () => {
|
|
const root = mainScrollRef.value
|
|
if (!root || scrollSpySuspended.value) {
|
|
return
|
|
}
|
|
|
|
const marker = root.getBoundingClientRect().top + 56
|
|
let nextId = settingsNavGroups[0].items[0].id
|
|
const flatIds = settingsNavGroups.flatMap((g) => g.items.map((i) => i.id))
|
|
|
|
for (const id of flatIds) {
|
|
const el = document.getElementById(id)
|
|
if (!el) {
|
|
continue
|
|
}
|
|
const top = el.getBoundingClientRect().top
|
|
if (top <= marker) {
|
|
nextId = id
|
|
}
|
|
}
|
|
|
|
activeSectionId.value = nextId
|
|
}
|
|
|
|
/**
|
|
* 스크롤 스파이 핸들러 (rAF 디바운스)
|
|
* @returns {void}
|
|
*/
|
|
const onMainScroll = () => {
|
|
if (scrollSpyFrame) {
|
|
cancelAnimationFrame(scrollSpyFrame)
|
|
}
|
|
scrollSpyFrame = requestAnimationFrame(() => {
|
|
scrollSpyFrame = null
|
|
updateActiveSectionFromScroll()
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 해당 섹션으로 부드럽게 스크롤한다.
|
|
* @param {string} sectionId - 섹션 요소 id
|
|
* @returns {void}
|
|
*/
|
|
const scrollToSection = (sectionId) => {
|
|
const el = document.getElementById(sectionId)
|
|
if (!el) {
|
|
return
|
|
}
|
|
|
|
scrollSpySuspended.value = true
|
|
activeSectionId.value = sectionId
|
|
el.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
|
window.setTimeout(() => {
|
|
scrollSpySuspended.value = false
|
|
updateActiveSectionFromScroll()
|
|
}, 520)
|
|
}
|
|
|
|
/**
|
|
* 모바일 구역 선택 변경
|
|
* @param {Event} event - change 이벤트
|
|
* @returns {void}
|
|
*/
|
|
const onMobileNavChange = (event) => {
|
|
const target = event.target
|
|
if (!(target instanceof HTMLSelectElement) || !target.value) {
|
|
return
|
|
}
|
|
scrollToSection(target.value)
|
|
}
|
|
|
|
/**
|
|
* 설정 화면을 닫고 이전 관리 화면으로 돌아간다.
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const closeSettings = async () => {
|
|
if (import.meta.client && window.history.length > 1) {
|
|
await router.back()
|
|
return
|
|
}
|
|
await navigateTo('/admin')
|
|
}
|
|
|
|
/**
|
|
* 저장 상태 토스트 표시
|
|
* @param {'success'|'error'|'info'} type - 토스트 타입
|
|
* @param {string} message - 표시 메시지
|
|
* @returns {void}
|
|
*/
|
|
const showToast = (type, message) => {
|
|
window.clearTimeout(toastTimer)
|
|
toast.value = { type, message }
|
|
toastTimer = window.setTimeout(() => {
|
|
toast.value = null
|
|
}, 3200)
|
|
}
|
|
|
|
/**
|
|
* 게시물 export 작업을 요청한다.
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const requestPostExport = async () => {
|
|
if (!canRequestPostExport.value) {
|
|
return
|
|
}
|
|
|
|
requestingPostExport.value = true
|
|
errorMessage.value = ''
|
|
showToast('info', '게시물 내보내기 작업을 등록하는 중입니다.')
|
|
|
|
try {
|
|
await $fetch('/admin/api/posts/export-jobs', {
|
|
method: 'POST',
|
|
body: createPostExportRequestBody()
|
|
})
|
|
await refreshPostExportJobs()
|
|
showToast('success', '게시물 내보내기 작업이 등록되었습니다.')
|
|
} catch (error) {
|
|
errorMessage.value = error?.data?.message || '게시물 내보내기 작업을 등록하지 못했습니다.'
|
|
showToast('error', errorMessage.value)
|
|
} finally {
|
|
requestingPostExport.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 게시물 Import 파일 선택창을 연다.
|
|
* @returns {void}
|
|
*/
|
|
const openPostImportFilePicker = () => {
|
|
postImportInputRef.value?.click()
|
|
}
|
|
|
|
/**
|
|
* 게시물 Import 대상 파일을 선택한다.
|
|
* @param {File|null|undefined} file - 선택 파일
|
|
* @returns {boolean} 선택 성공 여부
|
|
*/
|
|
const selectPostImportFile = (file) => {
|
|
if (!file) {
|
|
return false
|
|
}
|
|
|
|
if (!file.name.toLowerCase().endsWith('.zip')) {
|
|
showToast('error', 'ZIP 파일만 가져올 수 있습니다.')
|
|
return false
|
|
}
|
|
|
|
postImportFile.value = file
|
|
postImportFileName.value = file.name
|
|
postImportResult.value = null
|
|
return true
|
|
}
|
|
|
|
/**
|
|
* 게시물 Import 파일 선택 이벤트를 처리한다.
|
|
* @param {Event} event - 파일 선택 이벤트
|
|
* @returns {void}
|
|
*/
|
|
const handlePostImportFileChange = (event) => {
|
|
const target = event.target
|
|
const file = target instanceof HTMLInputElement ? target.files?.[0] : null
|
|
selectPostImportFile(file)
|
|
|
|
if (target instanceof HTMLInputElement) {
|
|
target.value = ''
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 게시물 Import 파일 드롭 이벤트를 처리한다.
|
|
* @param {DragEvent} event - 파일 드롭 이벤트
|
|
* @returns {void}
|
|
*/
|
|
const dropPostImportFile = (event) => {
|
|
selectPostImportFile(event.dataTransfer?.files?.[0])
|
|
}
|
|
|
|
/**
|
|
* 선택된 게시물 Import 파일을 업로드한다.
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const importSelectedPostFile = async () => {
|
|
if (!postImportFile.value) {
|
|
showToast('error', '가져올 ZIP 파일을 먼저 선택해 주세요.')
|
|
return
|
|
}
|
|
|
|
importingPosts.value = true
|
|
postImportResult.value = null
|
|
showToast('info', '게시물 가져오기를 시작합니다.')
|
|
|
|
try {
|
|
const formData = new FormData()
|
|
formData.append('file', postImportFile.value)
|
|
|
|
const result = await $fetch('/admin/api/posts/import', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
|
|
postImportResult.value = result
|
|
postImportFile.value = null
|
|
postImportFileName.value = ''
|
|
showToast('success', `게시물 ${result.importedCount}개를 가져왔습니다.`)
|
|
} catch (error) {
|
|
const message = error?.data?.message || '게시물 가져오기를 완료하지 못했습니다.'
|
|
showToast('error', message)
|
|
} finally {
|
|
importingPosts.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Export 파일 다운로드 URL을 만든다.
|
|
* @param {Object} file - Export 파일
|
|
* @returns {string} 다운로드 URL
|
|
*/
|
|
const getPostExportDownloadUrl = (file) => `/admin/api/posts/export-jobs/${file.id}/download`
|
|
|
|
/**
|
|
* Export 작업의 다운로드 가능한 파일만 추린다.
|
|
* @param {Object} job - Export 작업
|
|
* @returns {Array} 다운로드 가능한 파일 목록
|
|
*/
|
|
const getReadyPostExportFiles = (job) => Array.isArray(job?.files)
|
|
? job.files.filter((file) => file.status === 'ready' && file.filePath)
|
|
: []
|
|
|
|
/**
|
|
* Export 작업의 선택된 파일 ID를 가져온다.
|
|
* @param {string} jobId - 작업 ID
|
|
* @returns {Array<string>} 선택된 파일 ID 목록
|
|
*/
|
|
const getSelectedPostExportFileIds = (jobId) => Array.isArray(selectedPostExportFileIds.value[jobId])
|
|
? selectedPostExportFileIds.value[jobId]
|
|
: []
|
|
|
|
/**
|
|
* Export 파일이 선택되었는지 확인한다.
|
|
* @param {Object} job - Export 작업
|
|
* @param {Object} file - Export 파일
|
|
* @returns {boolean} 선택 여부
|
|
*/
|
|
const isPostExportFileSelected = (job, file) => getSelectedPostExportFileIds(job?.id).includes(file?.id)
|
|
|
|
/**
|
|
* Export 파일 선택 비활성 여부를 확인한다.
|
|
* @param {Object} job - Export 작업
|
|
* @param {Object} file - Export 파일
|
|
* @returns {boolean} 비활성 여부
|
|
*/
|
|
const isPostExportFileSelectionDisabled = (job, file) => file.status !== 'ready'
|
|
|| !file.filePath
|
|
|| isDownloadingPostExportJob(job.id)
|
|
|
|
/**
|
|
* Export 파일 선택 상태를 변경한다.
|
|
* @param {Object} job - Export 작업
|
|
* @param {Object} file - Export 파일
|
|
* @param {boolean} selected - 선택 여부
|
|
* @returns {void}
|
|
*/
|
|
const setPostExportFileSelected = (job, file, selected) => {
|
|
if (!job?.id || !file?.id || file.status !== 'ready' || !file.filePath) {
|
|
return
|
|
}
|
|
|
|
const currentIds = getSelectedPostExportFileIds(job.id)
|
|
const nextIds = selected
|
|
? [...new Set([...currentIds, file.id])]
|
|
: currentIds.filter((fileId) => fileId !== file.id)
|
|
|
|
selectedPostExportFileIds.value = {
|
|
...selectedPostExportFileIds.value,
|
|
[job.id]: nextIds
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Export 파일 선택 상태를 반대로 전환한다.
|
|
* @param {Object} job - Export 작업
|
|
* @param {Object} file - Export 파일
|
|
* @returns {void}
|
|
*/
|
|
const togglePostExportFileSelection = (job, file) => {
|
|
setPostExportFileSelected(job, file, !isPostExportFileSelected(job, file))
|
|
}
|
|
|
|
/**
|
|
* Export 작업에서 선택된 다운로드 가능 파일을 가져온다.
|
|
* @param {Object} job - Export 작업
|
|
* @returns {Array} 선택된 다운로드 가능 파일 목록
|
|
*/
|
|
const getSelectedReadyPostExportFiles = (job) => {
|
|
const selectedIds = getSelectedPostExportFileIds(job?.id)
|
|
|
|
return getReadyPostExportFiles(job).filter((file) => selectedIds.includes(file.id))
|
|
}
|
|
|
|
/**
|
|
* Export 작업의 모든 다운로드 가능 파일이 선택되었는지 확인한다.
|
|
* @param {Object} job - Export 작업
|
|
* @returns {boolean} 전체 선택 여부
|
|
*/
|
|
const areAllReadyPostExportFilesSelected = (job) => {
|
|
const readyFiles = getReadyPostExportFiles(job)
|
|
const selectedIds = getSelectedPostExportFileIds(job?.id)
|
|
|
|
return readyFiles.length > 0 && readyFiles.every((file) => selectedIds.includes(file.id))
|
|
}
|
|
|
|
/**
|
|
* Export 작업의 다운로드 가능 파일 전체 선택을 전환한다.
|
|
* @param {Object} job - Export 작업
|
|
* @returns {void}
|
|
*/
|
|
const toggleAllPostExportFiles = (job) => {
|
|
if (!job?.id) {
|
|
return
|
|
}
|
|
|
|
const readyFiles = getReadyPostExportFiles(job)
|
|
const nextIds = areAllReadyPostExportFilesSelected(job)
|
|
? []
|
|
: readyFiles.map((file) => file.id)
|
|
|
|
selectedPostExportFileIds.value = {
|
|
...selectedPostExportFileIds.value,
|
|
[job.id]: nextIds
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Export 작업의 파일 선택을 비운다.
|
|
* @param {string} jobId - 작업 ID
|
|
* @returns {void}
|
|
*/
|
|
const clearSelectedPostExportFiles = (jobId) => {
|
|
selectedPostExportFileIds.value = {
|
|
...selectedPostExportFileIds.value,
|
|
[jobId]: []
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Export 진행도 영역 표시 여부를 확인한다.
|
|
* @param {Object} job - Export 작업
|
|
* @returns {boolean} 진행도 표시 여부
|
|
*/
|
|
const shouldShowPostExportProgress = (job) => job?.status === 'queued' || job?.status === 'processing'
|
|
|
|
/**
|
|
* Export 다운로드 중 여부
|
|
* @param {string} jobId - 작업 ID
|
|
* @returns {boolean} 다운로드 중 여부
|
|
*/
|
|
const isDownloadingPostExportJob = (jobId) => downloadingPostExportJobIds.value.includes(jobId)
|
|
|
|
/**
|
|
* Export 작업 재시도 중 여부
|
|
* @param {string} jobId - 작업 ID
|
|
* @returns {boolean} 재시도 중 여부
|
|
*/
|
|
const isRetryingPostExportJob = (jobId) => retryingPostExportJobIds.value.includes(jobId)
|
|
|
|
/**
|
|
* 선택한 Export 분할 파일을 브라우저에서 순차 다운로드한다.
|
|
* @param {Object} job - Export 작업
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const downloadPostExportJobFiles = async (job) => {
|
|
const selectedFiles = getSelectedReadyPostExportFiles(job)
|
|
|
|
if (!job?.id || isDownloadingPostExportJob(job.id)) {
|
|
return
|
|
}
|
|
|
|
if (selectedFiles.length === 0) {
|
|
showToast('error', '다운로드할 파일을 선택해 주세요.')
|
|
return
|
|
}
|
|
|
|
downloadingPostExportJobIds.value = [...downloadingPostExportJobIds.value, job.id]
|
|
showToast('info', `${selectedFiles.length}개 선택 파일을 순차 다운로드합니다.`)
|
|
|
|
try {
|
|
for (const file of selectedFiles) {
|
|
const link = document.createElement('a')
|
|
link.href = getPostExportDownloadUrl(file)
|
|
link.download = file.fileName || ''
|
|
link.rel = 'noopener'
|
|
document.body.append(link)
|
|
link.click()
|
|
link.remove()
|
|
await new Promise((resolve) => window.setTimeout(resolve, 700))
|
|
}
|
|
clearSelectedPostExportFiles(job.id)
|
|
showToast('success', '선택 파일 다운로드 요청을 보냈습니다.')
|
|
} finally {
|
|
downloadingPostExportJobIds.value = downloadingPostExportJobIds.value.filter((id) => id !== job.id)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 실패한 Export 작업을 재시도한다.
|
|
* @param {Object} job - Export 작업
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const retryPostExportJob = async (job) => {
|
|
if (!job?.id || job.status !== 'failed' || isRetryingPostExportJob(job.id)) {
|
|
return
|
|
}
|
|
|
|
retryingPostExportJobIds.value = [...retryingPostExportJobIds.value, job.id]
|
|
showToast('info', '실패한 내보내기 작업을 다시 대기열에 등록하는 중입니다.')
|
|
|
|
try {
|
|
await $fetch(`/admin/api/posts/export-jobs/${job.id}/retry`, {
|
|
method: 'POST'
|
|
})
|
|
await refreshPostExportJobs()
|
|
showToast('success', '내보내기 작업을 다시 시작했습니다.')
|
|
} catch (error) {
|
|
errorMessage.value = error?.data?.message || '내보내기 작업을 다시 시작하지 못했습니다.'
|
|
showToast('error', errorMessage.value)
|
|
} finally {
|
|
retryingPostExportJobIds.value = retryingPostExportJobIds.value.filter((id) => id !== job.id)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Export 작업 삭제 중 여부
|
|
* @param {string} jobId - 작업 ID
|
|
* @returns {boolean} 삭제 중 여부
|
|
*/
|
|
const isDeletingPostExportJob = (jobId) => deletingPostExportJobIds.value.includes(jobId)
|
|
|
|
/**
|
|
* Export 작업을 삭제한다.
|
|
* @param {Object} job - Export 작업
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const deletePostExportJob = async (job) => {
|
|
if (!job?.id || isDeletingPostExportJob(job.id)) {
|
|
return
|
|
}
|
|
|
|
deletingPostExportJobIds.value = [...deletingPostExportJobIds.value, job.id]
|
|
showToast('info', '내보내기 백업 파일을 삭제하는 중입니다.')
|
|
|
|
try {
|
|
await $fetch(`/admin/api/posts/export-jobs/${job.id}`, {
|
|
method: 'DELETE'
|
|
})
|
|
await refreshPostExportJobs()
|
|
showToast('success', '내보내기 백업 파일을 삭제했습니다.')
|
|
} catch (error) {
|
|
errorMessage.value = error?.data?.message || '내보내기 백업 파일을 삭제하지 못했습니다.'
|
|
showToast('error', errorMessage.value)
|
|
} finally {
|
|
deletingPostExportJobIds.value = deletingPostExportJobIds.value.filter((id) => id !== job.id)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 로고 파일 선택창을 연다.
|
|
* @returns {void}
|
|
*/
|
|
const openLogoFilePicker = () => {
|
|
if (!editMisc.value) {
|
|
beginEditMisc()
|
|
}
|
|
|
|
logoInputRef.value?.click()
|
|
}
|
|
|
|
/**
|
|
* 사이트 로고를 업로드한다.
|
|
* @param {Event} event - 파일 선택 이벤트
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const uploadLogo = async (event) => {
|
|
const target = /** @type {HTMLInputElement | null} */ (event.target instanceof HTMLInputElement ? event.target : null)
|
|
const file = target?.files?.[0]
|
|
|
|
if (!file || uploadingLogo.value) {
|
|
return
|
|
}
|
|
|
|
uploadingLogo.value = true
|
|
errorMessage.value = ''
|
|
showToast('info', '로고를 업로드하는 중입니다.')
|
|
|
|
try {
|
|
const formData = new FormData()
|
|
formData.append('file', file)
|
|
const uploadedLogo = await $fetch('/admin/api/settings/logo', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
form.logoUrl = uploadedLogo.logoUrl || ''
|
|
form.faviconUrl = uploadedLogo.faviconUrl || ''
|
|
showToast('success', '로고를 불러왔습니다. 저장 버튼을 눌러 적용하세요.')
|
|
} catch (error) {
|
|
errorMessage.value = error?.data?.message || '로고 업로드에 실패했습니다.'
|
|
showToast('error', errorMessage.value)
|
|
} finally {
|
|
uploadingLogo.value = false
|
|
if (target) {
|
|
target.value = ''
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 사이트 설정 PUT 요청 본문을 구성한다.
|
|
* @returns {Object} API 본문
|
|
*/
|
|
const buildSiteSettingsPayload = () => ({
|
|
title: form.title,
|
|
description: form.description,
|
|
siteUrl: form.siteUrl,
|
|
logoText: form.logoText || '井',
|
|
logoUrl: form.logoUrl,
|
|
faviconUrl: form.faviconUrl,
|
|
copyrightText: form.copyrightText,
|
|
socialLinks: normalizeSocialLinks(form.socialLinks),
|
|
showPostUpdatedAt: Boolean(form.showPostUpdatedAt),
|
|
postTagLimit: normalizePostTagLimit(form.postTagLimit),
|
|
homeLatestPostLimit: normalizeDisplayCount(form.homeLatestPostLimit, DEFAULT_HOME_LATEST_POST_LIMIT),
|
|
postListPageSize: normalizeDisplayCount(form.postListPageSize, DEFAULT_POST_LIST_PAGE_SIZE),
|
|
tagPostListPageSize: normalizeDisplayCount(form.tagPostListPageSize, DEFAULT_TAG_POST_LIST_PAGE_SIZE),
|
|
featuredPostLimit: normalizeDisplayCount(form.featuredPostLimit, DEFAULT_FEATURED_POST_LIMIT),
|
|
pageSectionItemLimit: normalizeDisplayCount(form.pageSectionItemLimit, DEFAULT_PAGE_SECTION_ITEM_LIMIT),
|
|
uploadMaxFileCount: normalizeUploadMaxFileCount(form.uploadMaxFileCount),
|
|
uploadMaxTotalSize: normalizeUploadMaxTotalSize(form.uploadMaxTotalSize),
|
|
homeCoverImageUrl: form.homeCoverImageUrl || '',
|
|
homeCoverDarkImageUrl: form.homeCoverDarkImageUrl || '',
|
|
homeCoverTitle: form.homeCoverTitle || '',
|
|
homeCoverText: form.homeCoverText || '',
|
|
brandColor: normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR),
|
|
announcementEnabled: Boolean(form.announcementEnabled),
|
|
announcementText: form.announcementText || '',
|
|
announcementUrl: form.announcementUrl || '',
|
|
announcementBackgroundColor: normalizeAnnouncementBackgroundColor(form.announcementBackgroundColor || DEFAULT_ANNOUNCEMENT_BACKGROUND_COLOR),
|
|
announcementAlignment: normalizeAnnouncementAlignment(form.announcementAlignment || DEFAULT_ANNOUNCEMENT_ALIGNMENT),
|
|
signupBlockedUsernames: normalizeSignupBlockedUsernames(form.signupBlockedUsernames),
|
|
adsTxt: form.adsTxt || '',
|
|
customHeadCode: form.customHeadCode || '',
|
|
customFooterCode: form.customFooterCode || '',
|
|
adHomeFeedCode: form.adHomeFeedCode || '',
|
|
adHomeInfeedCode: form.adHomeInfeedCode || '',
|
|
adSidebarCode: form.adSidebarCode || '',
|
|
adPostSidebarCode: form.adPostSidebarCode || '',
|
|
adPostTopCode: form.adPostTopCode || '',
|
|
adPostInArticleCode: form.adPostInArticleCode || '',
|
|
adPostBottomCode: form.adPostBottomCode || ''
|
|
})
|
|
|
|
/**
|
|
* 현재 폼 값으로 사이트 설정을 서버에 저장한다.
|
|
* @param {{ successToast?: string, savingFlag: import('vue').Ref<boolean> }} options - 저장 옵션
|
|
* @returns {Promise<boolean>} 성공 여부
|
|
*/
|
|
const persistSiteSettings = async (options) => {
|
|
const successToast = options.successToast || '사이트 설정이 저장되었습니다.'
|
|
options.savingFlag.value = true
|
|
errorMessage.value = ''
|
|
showToast('info', '설정을 저장하는 중입니다.')
|
|
|
|
try {
|
|
const updatedSettings = await $fetch('/admin/api/settings', {
|
|
method: 'PUT',
|
|
body: buildSiteSettingsPayload()
|
|
})
|
|
Object.assign(form, updatedSettings)
|
|
showToast('success', successToast)
|
|
return true
|
|
} catch (error) {
|
|
errorMessage.value = error?.data?.message || '사이트 설정을 저장하지 못했습니다.'
|
|
showToast('error', errorMessage.value)
|
|
return false
|
|
} finally {
|
|
options.savingFlag.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 블로그 제목·설명 편집 모드 진입
|
|
* @returns {void}
|
|
*/
|
|
const beginEditTitleDesc = () => {
|
|
titleDescSnapshot.title = form.title
|
|
titleDescSnapshot.description = form.description
|
|
editTitleDesc.value = true
|
|
}
|
|
|
|
/**
|
|
* 블로그 제목·설명 편집 취소
|
|
* @returns {void}
|
|
*/
|
|
const cancelEditTitleDesc = () => {
|
|
form.title = titleDescSnapshot.title
|
|
form.description = titleDescSnapshot.description
|
|
editTitleDesc.value = false
|
|
}
|
|
|
|
/**
|
|
* 블로그 제목·설명만 저장하고 읽기 모드로 돌아간다.
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const saveTitleDescSection = async () => {
|
|
if (!hasTitleDescChanges.value) {
|
|
return
|
|
}
|
|
|
|
const ok = await persistSiteSettings({
|
|
successToast: '블로그 제목·설명이 저장되었습니다.',
|
|
savingFlag: savingTitleDesc
|
|
})
|
|
|
|
if (ok) {
|
|
editTitleDesc.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 사이트 정보 편집 모드 진입
|
|
* @returns {void}
|
|
*/
|
|
const beginEditMisc = () => {
|
|
miscSnapshot.siteUrl = form.siteUrl
|
|
miscSnapshot.logoText = form.logoText
|
|
miscSnapshot.logoUrl = form.logoUrl
|
|
miscSnapshot.faviconUrl = form.faviconUrl
|
|
miscSnapshot.copyrightText = form.copyrightText
|
|
editMisc.value = true
|
|
}
|
|
|
|
/**
|
|
* 사이트 정보 편집 취소
|
|
* @returns {void}
|
|
*/
|
|
const cancelEditMisc = () => {
|
|
form.siteUrl = miscSnapshot.siteUrl
|
|
form.logoText = miscSnapshot.logoText
|
|
form.logoUrl = miscSnapshot.logoUrl
|
|
form.faviconUrl = miscSnapshot.faviconUrl
|
|
form.copyrightText = miscSnapshot.copyrightText
|
|
editMisc.value = false
|
|
}
|
|
|
|
/**
|
|
* 사이트 정보 저장
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const saveMiscSection = async () => {
|
|
if (!hasMiscChanges.value) {
|
|
return
|
|
}
|
|
|
|
const ok = await persistSiteSettings({
|
|
successToast: '사이트 정보가 저장되었습니다.',
|
|
savingFlag: savingMisc
|
|
})
|
|
|
|
if (ok) {
|
|
miscSnapshot.siteUrl = form.siteUrl
|
|
miscSnapshot.logoText = form.logoText
|
|
miscSnapshot.logoUrl = form.logoUrl
|
|
miscSnapshot.faviconUrl = form.faviconUrl
|
|
miscSnapshot.copyrightText = form.copyrightText
|
|
editMisc.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* SNS 정보 편집 모드 진입
|
|
* @returns {void}
|
|
*/
|
|
const beginEditSocial = () => {
|
|
socialSnapshot.socialLinks = normalizeSocialLinks(form.socialLinks)
|
|
form.socialLinks = normalizeSocialLinks(form.socialLinks)
|
|
editSocial.value = true
|
|
}
|
|
|
|
/**
|
|
* SNS 정보 편집 취소
|
|
* @returns {void}
|
|
*/
|
|
const cancelEditSocial = () => {
|
|
form.socialLinks = normalizeSocialLinks(socialSnapshot.socialLinks)
|
|
editSocial.value = false
|
|
}
|
|
|
|
/**
|
|
* SNS 링크 항목을 추가한다.
|
|
* @returns {void}
|
|
*/
|
|
const addSocialLink = () => {
|
|
form.socialLinks = [
|
|
...normalizeSocialLinks(form.socialLinks),
|
|
{
|
|
id: `social-${Date.now()}`,
|
|
icon: SOCIAL_ICON_PRESETS[0].icon,
|
|
label: SOCIAL_ICON_PRESETS[0].label,
|
|
url: '',
|
|
iconSvg: ''
|
|
}
|
|
]
|
|
}
|
|
|
|
/**
|
|
* SNS 링크 항목을 제거한다.
|
|
* @param {number} index - 제거할 항목 순서
|
|
* @returns {void}
|
|
*/
|
|
const removeSocialLink = (index) => {
|
|
form.socialLinks = form.socialLinks.filter((_, itemIndex) => itemIndex !== index)
|
|
}
|
|
|
|
/**
|
|
* SNS 링크 아이콘을 변경한다.
|
|
* @param {number} index - 항목 순서
|
|
* @param {string} icon - 아이콘 키
|
|
* @returns {void}
|
|
*/
|
|
const updateSocialLinkIcon = (index, icon) => {
|
|
const preset = getSocialIconPreset(icon)
|
|
form.socialLinks[index].icon = preset.icon
|
|
form.socialLinks[index].label = preset.label
|
|
|
|
if (preset.icon !== 'custom') {
|
|
form.socialLinks[index].iconSvg = ''
|
|
}
|
|
}
|
|
|
|
/**
|
|
* SNS 정보를 저장한다.
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const saveSocialSection = async () => {
|
|
if (!hasSocialChanges.value) {
|
|
return
|
|
}
|
|
|
|
form.socialLinks = normalizeSocialLinks(form.socialLinks)
|
|
|
|
const ok = await persistSiteSettings({
|
|
successToast: 'SNS 정보가 저장되었습니다.',
|
|
savingFlag: savingSocial
|
|
})
|
|
|
|
if (ok) {
|
|
socialSnapshot.socialLinks = normalizeSocialLinks(form.socialLinks)
|
|
editSocial.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* POST 설정 편집 모드 진입
|
|
* @returns {void}
|
|
*/
|
|
const beginEditPost = () => {
|
|
postSnapshot.showPostUpdatedAt = form.showPostUpdatedAt
|
|
postSnapshot.postTagLimit = normalizePostTagLimit(form.postTagLimit)
|
|
postSnapshot.homeLatestPostLimit = normalizeDisplayCount(form.homeLatestPostLimit, DEFAULT_HOME_LATEST_POST_LIMIT)
|
|
postSnapshot.postListPageSize = normalizeDisplayCount(form.postListPageSize, DEFAULT_POST_LIST_PAGE_SIZE)
|
|
postSnapshot.tagPostListPageSize = normalizeDisplayCount(form.tagPostListPageSize, DEFAULT_TAG_POST_LIST_PAGE_SIZE)
|
|
postSnapshot.featuredPostLimit = normalizeDisplayCount(form.featuredPostLimit, DEFAULT_FEATURED_POST_LIMIT)
|
|
postSnapshot.pageSectionItemLimit = normalizeDisplayCount(form.pageSectionItemLimit, DEFAULT_PAGE_SECTION_ITEM_LIMIT)
|
|
postSnapshot.uploadMaxFileCount = normalizeUploadMaxFileCount(form.uploadMaxFileCount)
|
|
postSnapshot.uploadMaxTotalSize = normalizeUploadMaxTotalSize(form.uploadMaxTotalSize)
|
|
form.postTagLimit = normalizePostTagLimit(form.postTagLimit)
|
|
form.homeLatestPostLimit = postSnapshot.homeLatestPostLimit
|
|
form.postListPageSize = postSnapshot.postListPageSize
|
|
form.tagPostListPageSize = postSnapshot.tagPostListPageSize
|
|
form.featuredPostLimit = postSnapshot.featuredPostLimit
|
|
form.pageSectionItemLimit = postSnapshot.pageSectionItemLimit
|
|
form.uploadMaxFileCount = postSnapshot.uploadMaxFileCount
|
|
form.uploadMaxTotalSize = postSnapshot.uploadMaxTotalSize
|
|
editPost.value = true
|
|
}
|
|
|
|
/**
|
|
* POST 설정 편집 취소
|
|
* @returns {void}
|
|
*/
|
|
const cancelEditPost = () => {
|
|
form.showPostUpdatedAt = postSnapshot.showPostUpdatedAt
|
|
form.postTagLimit = normalizePostTagLimit(postSnapshot.postTagLimit)
|
|
form.homeLatestPostLimit = normalizeDisplayCount(postSnapshot.homeLatestPostLimit, DEFAULT_HOME_LATEST_POST_LIMIT)
|
|
form.postListPageSize = normalizeDisplayCount(postSnapshot.postListPageSize, DEFAULT_POST_LIST_PAGE_SIZE)
|
|
form.tagPostListPageSize = normalizeDisplayCount(postSnapshot.tagPostListPageSize, DEFAULT_TAG_POST_LIST_PAGE_SIZE)
|
|
form.featuredPostLimit = normalizeDisplayCount(postSnapshot.featuredPostLimit, DEFAULT_FEATURED_POST_LIMIT)
|
|
form.pageSectionItemLimit = normalizeDisplayCount(postSnapshot.pageSectionItemLimit, DEFAULT_PAGE_SECTION_ITEM_LIMIT)
|
|
form.uploadMaxFileCount = normalizeUploadMaxFileCount(postSnapshot.uploadMaxFileCount)
|
|
form.uploadMaxTotalSize = normalizeUploadMaxTotalSize(postSnapshot.uploadMaxTotalSize)
|
|
editPost.value = false
|
|
}
|
|
|
|
/**
|
|
* POST 설정 저장
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const savePostSection = async () => {
|
|
if (!hasPostChanges.value) {
|
|
return
|
|
}
|
|
|
|
const ok = await persistSiteSettings({
|
|
successToast: 'POST 설정이 저장되었습니다.',
|
|
savingFlag: savingPost
|
|
})
|
|
|
|
if (ok) {
|
|
postSnapshot.showPostUpdatedAt = form.showPostUpdatedAt
|
|
postSnapshot.postTagLimit = normalizePostTagLimit(form.postTagLimit)
|
|
postSnapshot.homeLatestPostLimit = normalizeDisplayCount(form.homeLatestPostLimit, DEFAULT_HOME_LATEST_POST_LIMIT)
|
|
postSnapshot.postListPageSize = normalizeDisplayCount(form.postListPageSize, DEFAULT_POST_LIST_PAGE_SIZE)
|
|
postSnapshot.tagPostListPageSize = normalizeDisplayCount(form.tagPostListPageSize, DEFAULT_TAG_POST_LIST_PAGE_SIZE)
|
|
postSnapshot.featuredPostLimit = normalizeDisplayCount(form.featuredPostLimit, DEFAULT_FEATURED_POST_LIMIT)
|
|
postSnapshot.pageSectionItemLimit = normalizeDisplayCount(form.pageSectionItemLimit, DEFAULT_PAGE_SECTION_ITEM_LIMIT)
|
|
postSnapshot.uploadMaxFileCount = normalizeUploadMaxFileCount(form.uploadMaxFileCount)
|
|
postSnapshot.uploadMaxTotalSize = normalizeUploadMaxTotalSize(form.uploadMaxTotalSize)
|
|
form.postTagLimit = postSnapshot.postTagLimit
|
|
form.homeLatestPostLimit = postSnapshot.homeLatestPostLimit
|
|
form.postListPageSize = postSnapshot.postListPageSize
|
|
form.tagPostListPageSize = postSnapshot.tagPostListPageSize
|
|
form.featuredPostLimit = postSnapshot.featuredPostLimit
|
|
form.pageSectionItemLimit = postSnapshot.pageSectionItemLimit
|
|
form.uploadMaxFileCount = postSnapshot.uploadMaxFileCount
|
|
form.uploadMaxTotalSize = postSnapshot.uploadMaxTotalSize
|
|
editPost.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 메인 화면 커버 파일 선택 창을 연다.
|
|
* @returns {void}
|
|
*/
|
|
const openHomeCoverFilePicker = () => {
|
|
if (uploadingHomeCover.value) {
|
|
return
|
|
}
|
|
|
|
homeCoverInputRef.value?.click()
|
|
}
|
|
|
|
/**
|
|
* 메인 화면 다크 커버 파일 선택 창을 연다.
|
|
* @returns {void}
|
|
*/
|
|
const openHomeCoverDarkFilePicker = () => {
|
|
if (uploadingHomeCoverDark.value) {
|
|
return
|
|
}
|
|
|
|
homeCoverDarkInputRef.value?.click()
|
|
}
|
|
|
|
/**
|
|
* 메인 화면 커버 이미지 파일을 업로드한다.
|
|
* @param {File} file - 업로드 파일
|
|
* @param {'light'|'dark'} variant - 커버 이미지 종류
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const uploadHomeCoverFile = async (file, variant = 'light') => {
|
|
const uploadingFlag = variant === 'dark' ? uploadingHomeCoverDark : uploadingHomeCover
|
|
|
|
if (!file || uploadingFlag.value) {
|
|
return
|
|
}
|
|
|
|
uploadingFlag.value = true
|
|
errorMessage.value = ''
|
|
showToast('info', '커버 이미지를 업로드하는 중입니다.')
|
|
|
|
try {
|
|
const formData = new FormData()
|
|
formData.append('file', file)
|
|
const { homeCoverImageUrl } = await $fetch('/admin/api/settings/home-cover', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
if (variant === 'dark') {
|
|
form.homeCoverDarkImageUrl = homeCoverImageUrl || ''
|
|
} else {
|
|
form.homeCoverImageUrl = homeCoverImageUrl || ''
|
|
}
|
|
showToast('success', '커버 이미지를 불러왔습니다. 저장 버튼을 눌러 적용하세요.')
|
|
} catch (error) {
|
|
errorMessage.value = error?.data?.message || '커버 이미지 업로드에 실패했습니다.'
|
|
showToast('error', errorMessage.value)
|
|
} finally {
|
|
uploadingFlag.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 메인 화면 커버 이미지를 업로드한다.
|
|
* @param {Event} event - 파일 선택 이벤트
|
|
* @param {'light'|'dark'} variant - 커버 이미지 종류
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const uploadHomeCover = async (event, variant = 'light') => {
|
|
const target = /** @type {HTMLInputElement | null} */ (event.target instanceof HTMLInputElement ? event.target : null)
|
|
const file = target?.files?.[0]
|
|
|
|
if (!file) {
|
|
return
|
|
}
|
|
|
|
try {
|
|
await uploadHomeCoverFile(file, variant)
|
|
} finally {
|
|
if (target) {
|
|
target.value = ''
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 드롭된 메인 화면 커버 이미지를 업로드한다.
|
|
* @param {DragEvent} event - 드롭 이벤트
|
|
* @param {'light'|'dark'} variant - 커버 이미지 종류
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const dropHomeCover = async (event, variant = 'light') => {
|
|
const file = event.dataTransfer?.files?.[0]
|
|
|
|
if (!file) {
|
|
return
|
|
}
|
|
|
|
await uploadHomeCoverFile(file, variant)
|
|
}
|
|
|
|
/**
|
|
* 메인 화면 커버 이미지를 제거한다.
|
|
* @param {'light'|'dark'} variant - 커버 이미지 종류
|
|
* @returns {void}
|
|
*/
|
|
const clearHomeCoverImage = (variant = 'light') => {
|
|
if (variant === 'dark') {
|
|
form.homeCoverDarkImageUrl = ''
|
|
return
|
|
}
|
|
|
|
form.homeCoverImageUrl = ''
|
|
}
|
|
|
|
/**
|
|
* 메인 화면 커버 편집 모드 진입
|
|
* @returns {void}
|
|
*/
|
|
const beginEditHomeCover = () => {
|
|
homeCoverSnapshot.homeCoverImageUrl = form.homeCoverImageUrl
|
|
homeCoverSnapshot.homeCoverDarkImageUrl = form.homeCoverDarkImageUrl
|
|
homeCoverSnapshot.homeCoverTitle = form.homeCoverTitle
|
|
homeCoverSnapshot.homeCoverText = form.homeCoverText
|
|
editHomeCover.value = true
|
|
}
|
|
|
|
/**
|
|
* 메인 화면 커버 편집 취소
|
|
* @returns {void}
|
|
*/
|
|
const cancelEditHomeCover = () => {
|
|
form.homeCoverImageUrl = homeCoverSnapshot.homeCoverImageUrl
|
|
form.homeCoverDarkImageUrl = homeCoverSnapshot.homeCoverDarkImageUrl
|
|
form.homeCoverTitle = homeCoverSnapshot.homeCoverTitle
|
|
form.homeCoverText = homeCoverSnapshot.homeCoverText
|
|
editHomeCover.value = false
|
|
}
|
|
|
|
/**
|
|
* 메인 화면 커버 저장
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const saveHomeCoverSection = async () => {
|
|
if (!hasHomeCoverChanges.value) {
|
|
return
|
|
}
|
|
|
|
const ok = await persistSiteSettings({
|
|
successToast: '메인 화면 설정이 저장되었습니다.',
|
|
savingFlag: savingHomeCover
|
|
})
|
|
|
|
if (ok) {
|
|
homeCoverSnapshot.homeCoverImageUrl = form.homeCoverImageUrl
|
|
homeCoverSnapshot.homeCoverDarkImageUrl = form.homeCoverDarkImageUrl
|
|
homeCoverSnapshot.homeCoverTitle = form.homeCoverTitle
|
|
homeCoverSnapshot.homeCoverText = form.homeCoverText
|
|
editHomeCover.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 브랜드 설정 편집 모드 진입
|
|
* @returns {void}
|
|
*/
|
|
const beginEditBrand = () => {
|
|
brandSnapshot.brandColor = normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR)
|
|
form.brandColor = brandSnapshot.brandColor
|
|
editBrand.value = true
|
|
}
|
|
|
|
/**
|
|
* 브랜드 설정 편집 취소
|
|
* @returns {void}
|
|
*/
|
|
const cancelEditBrand = () => {
|
|
form.brandColor = brandSnapshot.brandColor
|
|
editBrand.value = false
|
|
}
|
|
|
|
/**
|
|
* 브랜드 컬러 입력값을 정규화한다.
|
|
* @returns {void}
|
|
*/
|
|
const normalizeBrandColorInput = () => {
|
|
form.brandColor = normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR)
|
|
}
|
|
|
|
/**
|
|
* 브랜드 설정 저장
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const saveBrandSection = async () => {
|
|
normalizeBrandColorInput()
|
|
|
|
if (!hasBrandChanges.value) {
|
|
return
|
|
}
|
|
|
|
const ok = await persistSiteSettings({
|
|
successToast: '브랜드 컬러가 저장되었습니다.',
|
|
savingFlag: savingBrand
|
|
})
|
|
|
|
if (ok) {
|
|
brandSnapshot.brandColor = normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR)
|
|
editBrand.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 어나운스 바 맞춤 설정 패널을 연다.
|
|
* @returns {void}
|
|
*/
|
|
const beginCustomizeAnnouncement = () => {
|
|
announcementSnapshot.announcementEnabled = form.announcementEnabled
|
|
announcementSnapshot.announcementText = form.announcementText
|
|
announcementSnapshot.announcementUrl = form.announcementUrl
|
|
announcementSnapshot.announcementBackgroundColor = normalizeAnnouncementBackgroundColor(form.announcementBackgroundColor || DEFAULT_ANNOUNCEMENT_BACKGROUND_COLOR)
|
|
announcementSnapshot.announcementAlignment = normalizeAnnouncementAlignment(form.announcementAlignment || DEFAULT_ANNOUNCEMENT_ALIGNMENT)
|
|
customizeAnnouncement.value = true
|
|
}
|
|
|
|
/**
|
|
* 어나운스 바 맞춤 설정을 취소한다.
|
|
* @returns {void}
|
|
*/
|
|
const cancelCustomizeAnnouncement = () => {
|
|
form.announcementEnabled = announcementSnapshot.announcementEnabled
|
|
form.announcementText = announcementSnapshot.announcementText
|
|
form.announcementUrl = announcementSnapshot.announcementUrl
|
|
form.announcementBackgroundColor = announcementSnapshot.announcementBackgroundColor
|
|
form.announcementAlignment = announcementSnapshot.announcementAlignment
|
|
customizeAnnouncement.value = false
|
|
}
|
|
|
|
/**
|
|
* 어나운스 바 설정을 저장한다.
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const saveAnnouncementSection = async () => {
|
|
if (!hasAnnouncementChanges.value) {
|
|
return
|
|
}
|
|
|
|
const ok = await persistSiteSettings({
|
|
successToast: '어나운스 바 설정이 저장되었습니다.',
|
|
savingFlag: savingAnnouncement
|
|
})
|
|
|
|
if (ok) {
|
|
announcementSnapshot.announcementEnabled = form.announcementEnabled
|
|
announcementSnapshot.announcementText = form.announcementText
|
|
announcementSnapshot.announcementUrl = form.announcementUrl
|
|
announcementSnapshot.announcementBackgroundColor = normalizeAnnouncementBackgroundColor(form.announcementBackgroundColor || DEFAULT_ANNOUNCEMENT_BACKGROUND_COLOR)
|
|
announcementSnapshot.announcementAlignment = normalizeAnnouncementAlignment(form.announcementAlignment || DEFAULT_ANNOUNCEMENT_ALIGNMENT)
|
|
customizeAnnouncement.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 스팸 필터 편집 모드 진입
|
|
* @returns {void}
|
|
*/
|
|
const beginEditSpam = () => {
|
|
spamSnapshot.signupBlockedUsernames = [...form.signupBlockedUsernames]
|
|
editSpam.value = true
|
|
}
|
|
|
|
/**
|
|
* 스팸 필터 편집 취소
|
|
* @returns {void}
|
|
*/
|
|
const cancelEditSpam = () => {
|
|
form.signupBlockedUsernames = [...spamSnapshot.signupBlockedUsernames]
|
|
editSpam.value = false
|
|
}
|
|
|
|
/**
|
|
* 스팸 필터 저장
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const saveSpamSection = async () => {
|
|
if (!hasSpamChanges.value) {
|
|
return
|
|
}
|
|
|
|
const ok = await persistSiteSettings({
|
|
successToast: '스팸 필터 설정이 저장되었습니다.',
|
|
savingFlag: savingSpam
|
|
})
|
|
|
|
if (ok) {
|
|
spamSnapshot.signupBlockedUsernames = [...form.signupBlockedUsernames]
|
|
editSpam.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 사이트 코드 편집 모드 진입
|
|
* @returns {void}
|
|
*/
|
|
const beginEditSiteCode = () => {
|
|
siteCodeSnapshot.adsTxt = form.adsTxt
|
|
siteCodeSnapshot.customHeadCode = form.customHeadCode
|
|
siteCodeSnapshot.customFooterCode = form.customFooterCode
|
|
editSiteCode.value = true
|
|
}
|
|
|
|
/**
|
|
* 사이트 코드 편집 취소
|
|
* @returns {void}
|
|
*/
|
|
const cancelEditSiteCode = () => {
|
|
form.adsTxt = siteCodeSnapshot.adsTxt
|
|
form.customHeadCode = siteCodeSnapshot.customHeadCode
|
|
form.customFooterCode = siteCodeSnapshot.customFooterCode
|
|
editSiteCode.value = false
|
|
}
|
|
|
|
/**
|
|
* 사이트 코드 저장
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const saveSiteCodeSection = async () => {
|
|
if (!hasSiteCodeChanges.value) {
|
|
return
|
|
}
|
|
|
|
const ok = await persistSiteSettings({
|
|
successToast: '사이트 코드 설정이 저장되었습니다.',
|
|
savingFlag: savingSiteCode
|
|
})
|
|
|
|
if (ok) {
|
|
siteCodeSnapshot.adsTxt = form.adsTxt
|
|
siteCodeSnapshot.customHeadCode = form.customHeadCode
|
|
siteCodeSnapshot.customFooterCode = form.customFooterCode
|
|
editSiteCode.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 광고 슬롯 편집 모드 진입
|
|
* @returns {void}
|
|
*/
|
|
const beginEditAds = () => {
|
|
adsSnapshot.adHomeFeedCode = form.adHomeFeedCode
|
|
adsSnapshot.adHomeInfeedCode = form.adHomeInfeedCode
|
|
adsSnapshot.adSidebarCode = form.adSidebarCode
|
|
adsSnapshot.adPostSidebarCode = form.adPostSidebarCode
|
|
adsSnapshot.adPostTopCode = form.adPostTopCode
|
|
adsSnapshot.adPostInArticleCode = form.adPostInArticleCode
|
|
adsSnapshot.adPostBottomCode = form.adPostBottomCode
|
|
editAds.value = true
|
|
}
|
|
|
|
/**
|
|
* 광고 슬롯 편집 취소
|
|
* @returns {void}
|
|
*/
|
|
const cancelEditAds = () => {
|
|
form.adHomeFeedCode = adsSnapshot.adHomeFeedCode
|
|
form.adHomeInfeedCode = adsSnapshot.adHomeInfeedCode
|
|
form.adSidebarCode = adsSnapshot.adSidebarCode
|
|
form.adPostSidebarCode = adsSnapshot.adPostSidebarCode
|
|
form.adPostTopCode = adsSnapshot.adPostTopCode
|
|
form.adPostInArticleCode = adsSnapshot.adPostInArticleCode
|
|
form.adPostBottomCode = adsSnapshot.adPostBottomCode
|
|
editAds.value = false
|
|
}
|
|
|
|
/**
|
|
* 광고 슬롯 설정 저장
|
|
* @returns {Promise<void>}
|
|
*/
|
|
const saveAdsSection = async () => {
|
|
if (!hasAdsChanges.value) {
|
|
return
|
|
}
|
|
|
|
const ok = await persistSiteSettings({
|
|
successToast: '광고 슬롯 설정이 저장되었습니다.',
|
|
savingFlag: savingAds
|
|
})
|
|
|
|
if (ok) {
|
|
adsSnapshot.adHomeFeedCode = form.adHomeFeedCode
|
|
adsSnapshot.adHomeInfeedCode = form.adHomeInfeedCode
|
|
adsSnapshot.adSidebarCode = form.adSidebarCode
|
|
adsSnapshot.adPostSidebarCode = form.adPostSidebarCode
|
|
adsSnapshot.adPostTopCode = form.adPostTopCode
|
|
adsSnapshot.adPostInArticleCode = form.adPostInArticleCode
|
|
adsSnapshot.adPostBottomCode = form.adPostBottomCode
|
|
editAds.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Escape 키: 제목·설명 편집 중이면 취소, 아니면 설정 화면 닫기
|
|
* @param {KeyboardEvent} event - 키보드 이벤트
|
|
* @returns {void}
|
|
*/
|
|
const onGlobalKeydown = (event) => {
|
|
if (event.key !== 'Escape') {
|
|
return
|
|
}
|
|
if (editTitleDesc.value) {
|
|
event.preventDefault()
|
|
cancelEditTitleDesc()
|
|
return
|
|
}
|
|
if (editMisc.value) {
|
|
event.preventDefault()
|
|
cancelEditMisc()
|
|
return
|
|
}
|
|
if (editPost.value) {
|
|
event.preventDefault()
|
|
cancelEditPost()
|
|
return
|
|
}
|
|
if (editHomeCover.value) {
|
|
event.preventDefault()
|
|
cancelEditHomeCover()
|
|
return
|
|
}
|
|
if (customizeAnnouncement.value) {
|
|
event.preventDefault()
|
|
cancelCustomizeAnnouncement()
|
|
return
|
|
}
|
|
if (editSpam.value) {
|
|
event.preventDefault()
|
|
cancelEditSpam()
|
|
return
|
|
}
|
|
if (editSiteCode.value) {
|
|
event.preventDefault()
|
|
cancelEditSiteCode()
|
|
return
|
|
}
|
|
if (editAds.value) {
|
|
event.preventDefault()
|
|
cancelEditAds()
|
|
return
|
|
}
|
|
closeSettings()
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (import.meta.client) {
|
|
window.addEventListener('keydown', onGlobalKeydown)
|
|
postExportRefreshTimer = window.setInterval(() => {
|
|
if (hasActivePostExportJobs.value) {
|
|
refreshPostExportJobs()
|
|
}
|
|
}, 5000)
|
|
nextTick(() => {
|
|
updateActiveSectionFromScroll()
|
|
})
|
|
}
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
window.clearTimeout(toastTimer)
|
|
window.clearInterval(postExportRefreshTimer)
|
|
if (scrollSpyFrame) {
|
|
cancelAnimationFrame(scrollSpyFrame)
|
|
}
|
|
if (import.meta.client) {
|
|
window.removeEventListener('keydown', onGlobalKeydown)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="admin-settings-screen flex h-full min-h-0 flex-col bg-[#f7f8fa] text-[#15171a]">
|
|
<div
|
|
id="admin-settings-done-button-container"
|
|
class="pointer-events-none fixed right-0 top-2 z-50 flex justify-end bg-transparent p-8 md:top-0 md:px-8"
|
|
>
|
|
<button
|
|
id="admin-settings-done-button"
|
|
class="pointer-events-auto inline-flex cursor-pointer items-center justify-center rounded text-sm font-semibold whitespace-nowrap text-[#5d6673] transition hover:text-[#15171a]"
|
|
type="button"
|
|
title="닫기 (ESC)"
|
|
aria-label="설정 닫기"
|
|
@click="closeSettings"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="pointer-events-none size-5" fill="none" aria-hidden="true">
|
|
<line x1="0.75" y1="23.249" x2="23.25" y2="0.749" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
|
|
<line x1="23.25" y1="23.249" x2="0.75" y2="0.749" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="admin-settings-screen__shell flex min-h-0 flex-1 justify-center overflow-hidden px-0 sm:px-4 lg:px-6">
|
|
<div class="admin-settings-screen__body flex min-h-0 w-full max-w-[1120px] flex-1 flex-col lg:flex-row">
|
|
<aside class="admin-settings-screen__nav-column w-full shrink-0 border-b border-[#e6e8eb] bg-[#f7f8fa] lg:w-72 lg:max-w-[320px] lg:flex-none lg:border-b-0 lg:border-r lg:border-[#e6e8eb]">
|
|
<div class="admin-settings-screen__nav-inner max-h-[40vh] overflow-y-auto p-4 lg:max-h-none lg:h-full lg:overflow-y-auto lg:p-5">
|
|
<label class="admin-settings-screen__search relative mb-4 block">
|
|
<span class="sr-only">설정 검색</span>
|
|
<svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#9aa3ad]" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<circle cx="11" cy="11" r="6.5" stroke="currentColor" stroke-width="1.5" />
|
|
<path d="M16 16l4.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
</svg>
|
|
<input
|
|
:value="navSearchInput"
|
|
class="admin-settings-screen__search-input w-full rounded-md border border-[#dce0e5] bg-white py-2 pr-3 pl-9 text-sm text-[#15171a] placeholder:text-[#9aa3ad] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
type="search"
|
|
autocomplete="off"
|
|
placeholder="설정 검색"
|
|
@input="onNavSearchInput"
|
|
@compositionupdate="onNavSearchInput"
|
|
@compositionend="onNavSearchCompositionEnd"
|
|
>
|
|
</label>
|
|
|
|
<p
|
|
v-if="filteredSettingsNavGroups.length === 0"
|
|
class="admin-settings-screen__nav-empty rounded-md border border-dashed border-[#dce0e5] px-3 py-4 text-center text-xs text-[#657080]"
|
|
>
|
|
검색과 일치하는 설정 항목이 없습니다.
|
|
</p>
|
|
<nav v-else class="admin-settings-screen__nav grid gap-5 text-sm" aria-label="설정 구역">
|
|
<template v-for="(group, gi) in filteredSettingsNavGroups" :key="group.heading">
|
|
<div v-if="gi > 0" class="admin-settings-screen__nav-separator h-px bg-[#dce0e5]" aria-hidden="true" />
|
|
<div class="admin-settings-screen__nav-group">
|
|
<p class="admin-settings-screen__nav-heading mb-2 px-2 text-xs font-semibold tracking-wide text-[#9aa3ad] uppercase">
|
|
{{ group.heading }}
|
|
</p>
|
|
<ul class="admin-settings-screen__nav-list grid gap-0.5">
|
|
<li v-for="item in group.items" :key="item.id">
|
|
<button
|
|
class="admin-settings-screen__nav-item flex w-full items-center gap-2 rounded-md px-2 py-2 text-left font-medium text-[#5d6673] transition-colors hover:bg-[#eceff2] hover:text-[#15171a]"
|
|
:class="activeSectionId === item.id ? 'bg-[#e9ecef] text-[#15171a]' : ''"
|
|
type="button"
|
|
@click="scrollToSection(item.id)"
|
|
>
|
|
<AdminSettingsNavIcon :icon-id="item.iconId" />
|
|
<span class="min-w-0 flex-1 truncate">{{ item.label }}</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
</nav>
|
|
|
|
<label class="admin-settings-screen__nav-jump mt-4 grid gap-1 lg:hidden">
|
|
<span class="mb-1 block text-xs font-medium text-[#657080]">구역 이동</span>
|
|
<span class="relative">
|
|
<select
|
|
class="w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-2 py-2 pr-10 text-sm"
|
|
:value="activeSectionId"
|
|
@change="onMobileNavChange"
|
|
>
|
|
<optgroup v-for="group in settingsNavGroups" :key="group.heading" :label="group.heading">
|
|
<option v-for="item in group.items" :key="item.id" :value="item.id">
|
|
{{ item.label }}
|
|
</option>
|
|
</optgroup>
|
|
</select>
|
|
<svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</aside>
|
|
|
|
<main
|
|
ref="mainScrollRef"
|
|
class="admin-settings-screen__content min-h-0 min-w-0 flex-1 overflow-y-auto bg-white lg:border-l lg:border-[#e6e8eb]"
|
|
@scroll.passive="onMainScroll"
|
|
>
|
|
<div class="admin-settings-screen__content-inner mx-auto mb-[60vh] w-full max-w-[760px] px-8 pt-16 pb-24 md:px-14 md:pt-10">
|
|
<p v-if="errorMessage" class="admin-settings-screen__error mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
|
{{ errorMessage }}
|
|
</p>
|
|
|
|
<form class="admin-settings-screen__form w-full space-y-8" @submit.prevent>
|
|
<h2 class="admin-settings-screen__section-heading z-20 -mt-[5px] mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
|
|
일반 설정
|
|
</h2>
|
|
<section
|
|
id="admin-settings-section-title"
|
|
data-testid="title-and-description"
|
|
class="admin-settings-screen__card admin-settings-screen__card--title-desc 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">
|
|
<h5 class="text-base font-semibold text-[#15171a] md:text-lg">
|
|
블로그 제목·설명
|
|
</h5>
|
|
<p
|
|
v-if="!editTitleDesc"
|
|
class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080] md:block"
|
|
>
|
|
공개 사이트에서 사이트 이름과 소개로 사용되는 값입니다.
|
|
</p>
|
|
</div>
|
|
<div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
|
|
<template v-if="!editTitleDesc">
|
|
<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="beginEditTitleDesc"
|
|
>
|
|
편집
|
|
</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="savingTitleDesc"
|
|
@click="cancelEditTitleDesc"
|
|
>
|
|
취소
|
|
</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="savingTitleDesc || !hasTitleDescChanges"
|
|
@click="saveTitleDescSection"
|
|
>
|
|
{{ savingTitleDesc ? '저장 중' : '저장' }}
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!editTitleDesc"
|
|
class="admin-settings-screen__readonly-list grid gap-4 border-t border-[#eceff2] pt-5 text-sm"
|
|
>
|
|
<div class="admin-settings-screen__readonly-row grid gap-1 md:grid-cols-[7.5rem_minmax(0,1fr)] md:items-center md:gap-5">
|
|
<h6 class="text-sm font-normal tracking-normal text-[#3f4650]">
|
|
사이트 이름
|
|
</h6>
|
|
<div class="min-w-0 text-sm font-normal leading-relaxed text-[#15171a]">
|
|
{{ form.title?.trim() ? form.title : '—' }}
|
|
</div>
|
|
</div>
|
|
<div class="admin-settings-screen__readonly-row grid gap-1 md:grid-cols-[7.5rem_minmax(0,1fr)] md:items-center md:gap-5">
|
|
<h6 class="text-sm font-normal tracking-normal text-[#3f4650]">
|
|
사이트 설명
|
|
</h6>
|
|
<div class="min-w-0 whitespace-pre-wrap text-sm font-normal leading-relaxed text-[#15171a]">
|
|
{{ form.description?.trim() ? form.description : '—' }}
|
|
</div>
|
|
</div>
|
|
<div class="admin-settings-screen__field grid gap-3 border-t border-[#eceff2] pt-5">
|
|
<div>
|
|
<span class="font-bold text-[#15171a]">업로드 제한</span>
|
|
<p class="mt-1 text-xs leading-relaxed text-[#657080]">
|
|
파일 추가나 글쓰기 미디어 업로드에서 한 번에 처리할 수 있는 최대치를 선택합니다.
|
|
</p>
|
|
</div>
|
|
<div class="grid gap-3 sm:grid-cols-2">
|
|
<label class="grid gap-1.5">
|
|
<span class="text-xs font-semibold text-[#657080]">파일 수</span>
|
|
<span class="relative">
|
|
<select
|
|
v-model.number="form.uploadMaxFileCount"
|
|
class="h-10 w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-3 pr-10 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
>
|
|
<option v-for="option in UPLOAD_FILE_COUNT_OPTIONS" :key="`upload-count-${option}`" :value="option">{{ option }}개</option>
|
|
</select>
|
|
<svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
|
|
</span>
|
|
</label>
|
|
<label class="grid gap-1.5">
|
|
<span class="text-xs font-semibold text-[#657080]">전체 용량</span>
|
|
<span class="relative">
|
|
<select
|
|
v-model.number="form.uploadMaxTotalSize"
|
|
class="h-10 w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-3 pr-10 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
>
|
|
<option v-for="option in UPLOAD_TOTAL_SIZE_OPTIONS" :key="`upload-total-${option}`" :value="option">{{ formatUploadSizeLimit(option) }}</option>
|
|
</select>
|
|
<svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="admin-settings-screen__card-body grid gap-5">
|
|
<label class="admin-settings-screen__field grid gap-2 text-sm">
|
|
<span class="font-medium text-[#3f4650]">사이트 이름</span>
|
|
<input
|
|
v-model="form.title"
|
|
class="rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
type="text"
|
|
required
|
|
>
|
|
</label>
|
|
<label class="admin-settings-screen__field grid gap-2 text-sm">
|
|
<span class="font-medium text-[#3f4650]">사이트 설명</span>
|
|
<textarea
|
|
v-model="form.description"
|
|
class="min-h-28 resize-y rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
required
|
|
/>
|
|
</label>
|
|
<div class="rounded-lg border border-[#eceff2] bg-[#f7f8fa] p-4">
|
|
<p class="text-xs font-semibold tracking-wide text-[#657080] uppercase">
|
|
공개 화면 미리보기
|
|
</p>
|
|
<div class="mt-3 flex items-center gap-3">
|
|
<div class="grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-xl bg-[#15171a] text-lg font-bold text-white">
|
|
<img
|
|
v-if="form.logoUrl"
|
|
class="h-full w-full object-cover"
|
|
:src="form.logoUrl"
|
|
alt=""
|
|
>
|
|
<span v-else>{{ form.logoText || '井' }}</span>
|
|
</div>
|
|
<div class="min-w-0">
|
|
<p class="truncate font-semibold text-[#15171a]">
|
|
{{ form.title || 'sori.studio' }}
|
|
</p>
|
|
<p class="truncate text-sm text-[#657080]">
|
|
{{ form.description || '사이트 설명이 공개 화면에 표시됩니다.' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
id="admin-settings-section-misc"
|
|
class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
|
|
>
|
|
<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="!editMisc"
|
|
class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
|
|
>
|
|
로고, 공개 URL, 푸터 저작권 문구를 관리합니다.
|
|
</p>
|
|
</div>
|
|
<div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
|
|
<template v-if="!editMisc">
|
|
<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="beginEditMisc"
|
|
>
|
|
편집
|
|
</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="savingMisc"
|
|
@click="cancelEditMisc"
|
|
>
|
|
취소
|
|
</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="savingMisc || !hasMiscChanges"
|
|
@click="saveMiscSection"
|
|
>
|
|
{{ savingMisc ? '저장 중' : '저장' }}
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!editMisc"
|
|
class="admin-settings-screen__misc-readonly grid gap-5 pt-5"
|
|
>
|
|
<div class="flex flex-col gap-5 md:flex-row md:items-start">
|
|
<div
|
|
class="admin-settings-screen__logo-preview grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-2xl bg-[#f7f8fa]"
|
|
:class="form.logoUrl ? 'border border-[#e6e8eb]' : 'border border-dashed border-[#cfd6df]'"
|
|
>
|
|
<img
|
|
v-if="form.logoUrl"
|
|
class="h-full w-full object-cover"
|
|
:src="form.logoUrl"
|
|
alt="사이트 로고"
|
|
>
|
|
<span v-else class="text-sm font-semibold text-[#8b95a1]">
|
|
미등록
|
|
</span>
|
|
</div>
|
|
<div class="admin-settings-screen__readonly-list grid min-w-0 flex-1 gap-4 text-sm">
|
|
<div class="admin-settings-screen__readonly-row grid gap-1 md:grid-cols-[7.5rem_minmax(0,1fr)] md:items-center md:gap-5">
|
|
<h3 class="text-sm font-normal text-[#3f4650]">
|
|
사이트 URL
|
|
</h3>
|
|
<p class="min-w-0 break-all text-sm font-normal leading-relaxed text-[#15171a]">
|
|
{{ form.siteUrl || '—' }}
|
|
</p>
|
|
</div>
|
|
<div class="admin-settings-screen__readonly-row grid gap-1 md:grid-cols-[7.5rem_minmax(0,1fr)] md:items-center md:gap-5">
|
|
<h3 class="text-sm font-normal text-[#3f4650]">
|
|
저작권 문구
|
|
</h3>
|
|
<p class="min-w-0 whitespace-pre-wrap text-sm font-normal leading-relaxed text-[#15171a]">
|
|
{{ form.copyrightText || '—' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="admin-settings-screen__card-body grid gap-6">
|
|
<div class="flex flex-col gap-5 md:flex-row md:items-center md:justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="grid h-20 w-20 shrink-0 place-items-center overflow-hidden rounded-2xl border border-[#e6e8eb] bg-[#f7f8fa]">
|
|
<img
|
|
v-if="form.logoUrl"
|
|
class="h-full w-full object-cover"
|
|
:src="form.logoUrl"
|
|
alt="사이트 로고"
|
|
>
|
|
<span v-else class="text-2xl font-semibold text-[#9aa3ad]">
|
|
{{ form.logoText || '井' }}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-base font-semibold text-[#15171a]">
|
|
로고
|
|
</h3>
|
|
<p class="mt-1 max-w-md text-sm leading-relaxed text-[#657080]">
|
|
1:1 비율 이미지로 등록합니다. 같은 이미지가 공개 로고와 파비콘으로 함께 사용됩니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="h-10 shrink-0 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#15171a] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
|
|
type="button"
|
|
:disabled="uploadingLogo"
|
|
@click="openLogoFilePicker"
|
|
>
|
|
{{ uploadingLogo ? '업로드 중' : form.logoUrl ? '로고 변경' : '로고 등록' }}
|
|
</button>
|
|
<input
|
|
ref="logoInputRef"
|
|
class="hidden"
|
|
type="file"
|
|
accept="image/jpeg,image/png,image/webp"
|
|
:disabled="uploadingLogo"
|
|
@change="uploadLogo"
|
|
>
|
|
</div>
|
|
|
|
<label class="admin-settings-screen__field grid gap-2 text-sm">
|
|
<span class="font-medium text-[#3f4650]">사이트 URL</span>
|
|
<input
|
|
v-model="form.siteUrl"
|
|
class="rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
type="url"
|
|
required
|
|
>
|
|
</label>
|
|
|
|
<label class="admin-settings-screen__field grid gap-2 text-sm">
|
|
<span class="font-medium text-[#3f4650]">저작권 문구</span>
|
|
<input
|
|
v-model="form.copyrightText"
|
|
class="rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
type="text"
|
|
required
|
|
>
|
|
</label>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section
|
|
id="admin-settings-section-social"
|
|
class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
|
|
>
|
|
<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">
|
|
SNS 정보
|
|
</h2>
|
|
<p
|
|
v-if="!editSocial"
|
|
class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
|
|
>
|
|
오른쪽 사이드바 FOLLOW 영역에 표시할 아이콘과 주소를 관리합니다.
|
|
</p>
|
|
</div>
|
|
<div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
|
|
<template v-if="!editSocial">
|
|
<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="beginEditSocial"
|
|
>
|
|
편집
|
|
</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="savingSocial"
|
|
@click="cancelEditSocial"
|
|
>
|
|
취소
|
|
</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="savingSocial || !hasSocialChanges"
|
|
@click="saveSocialSection"
|
|
>
|
|
{{ savingSocial ? '저장 중' : '저장' }}
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!editSocial"
|
|
class="admin-settings-screen__social-readonly pt-5"
|
|
>
|
|
<div
|
|
v-if="normalizeSocialLinks(form.socialLinks).length"
|
|
class="flex flex-wrap gap-2"
|
|
>
|
|
<span
|
|
v-for="item in normalizeSocialLinks(form.socialLinks)"
|
|
:key="item.id"
|
|
class="inline-flex items-center gap-2 rounded-full border border-[#dce0e5] bg-[#f7f8fa] px-3 py-1.5 text-sm font-semibold text-[#15171a]"
|
|
>
|
|
<span>{{ item.label }}</span>
|
|
<span class="max-w-[220px] truncate text-xs font-medium text-[#657080]">{{ item.url }}</span>
|
|
</span>
|
|
</div>
|
|
<p v-else class="text-sm text-[#657080]">
|
|
등록된 SNS 링크가 없습니다. 공개 화면의 FOLLOW 아이콘도 표시되지 않습니다.
|
|
</p>
|
|
</div>
|
|
|
|
<div v-else class="admin-settings-screen__social-edit grid gap-4 border-t border-[#eceff2] pt-5">
|
|
<div
|
|
v-for="(item, index) in form.socialLinks"
|
|
:key="item.id || index"
|
|
class="grid gap-3 rounded-lg border border-[#edf0f2] bg-[#fafafa] p-3 md:grid-cols-[220px_minmax(0,1fr)_auto] md:items-start"
|
|
>
|
|
<label class="grid gap-1.5 text-sm">
|
|
<span class="font-medium text-[#3f4650]">아이콘</span>
|
|
<div class="relative">
|
|
<select
|
|
class="h-10 w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-3 pr-9 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
:value="item.icon"
|
|
@change="updateSocialLinkIcon(index, $event.target.value)"
|
|
>
|
|
<option
|
|
v-for="preset in SOCIAL_ICON_PRESETS"
|
|
:key="preset.icon"
|
|
:value="preset.icon"
|
|
>
|
|
{{ preset.label }}
|
|
</option>
|
|
</select>
|
|
<svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
|
|
</div>
|
|
</label>
|
|
<label class="grid gap-1.5 text-sm">
|
|
<span class="font-medium text-[#3f4650]">주소</span>
|
|
<input
|
|
v-model="item.url"
|
|
class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
type="text"
|
|
:placeholder="getSocialIconPreset(item.icon).placeholder"
|
|
>
|
|
</label>
|
|
<button
|
|
class="mt-[26px] h-10 rounded-md border border-[#ffd1d1] bg-white px-4 text-sm font-semibold text-[#d73939] transition-colors hover:bg-[#fff5f5]"
|
|
type="button"
|
|
@click="removeSocialLink(index)"
|
|
>
|
|
삭제
|
|
</button>
|
|
<label
|
|
v-if="item.icon === 'custom'"
|
|
class="grid gap-1.5 text-sm md:col-span-3"
|
|
>
|
|
<span class="font-medium text-[#3f4650]">사용자 SVG 아이콘</span>
|
|
<textarea
|
|
v-model="item.iconSvg"
|
|
class="min-h-24 rounded-md border border-[#dce0e5] bg-white px-3 py-2 font-mono text-xs leading-relaxed text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
placeholder="<svg ...>...</svg>"
|
|
/>
|
|
<span class="text-xs leading-relaxed text-[#8b95a1]">
|
|
새 SNS 아이콘은 SVG 코드를 붙여 넣어 사용할 수 있습니다. 저장 시 기본적인 위험 태그는 제거됩니다.
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<button
|
|
class="inline-flex h-10 w-fit items-center justify-center rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#15171a] transition-colors hover:bg-[#f3f5f7]"
|
|
type="button"
|
|
@click="addSocialLink"
|
|
>
|
|
SNS 링크 추가
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<h2 class="admin-settings-screen__section-heading z-20 mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
|
|
게시물
|
|
</h2>
|
|
<section
|
|
id="admin-settings-section-post"
|
|
class="admin-settings-screen__card admin-settings-screen__card--post 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">
|
|
POST 설정
|
|
</h2>
|
|
<p
|
|
v-if="!editPost"
|
|
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="!editPost">
|
|
<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="beginEditPost"
|
|
>
|
|
편집
|
|
</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="savingPost"
|
|
@click="cancelEditPost"
|
|
>
|
|
취소
|
|
</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="savingPost || !hasPostChanges"
|
|
@click="savePostSection"
|
|
>
|
|
{{ savingPost ? '저장 중' : '저장' }}
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!editPost"
|
|
class="admin-settings-screen__post-readonly border-t border-[#eceff2] pt-5 text-sm"
|
|
>
|
|
<div class="admin-settings-screen__post-toggle flex items-center justify-between gap-4">
|
|
<span class="font-bold text-[#15171a]">수정일 표시</span>
|
|
<span class="admin-settings-screen__post-toggle-control relative inline-flex h-7 w-12 shrink-0 cursor-not-allowed items-center opacity-55 grayscale" aria-disabled="true">
|
|
<input
|
|
:checked="form.showPostUpdatedAt"
|
|
class="peer sr-only"
|
|
type="checkbox"
|
|
disabled
|
|
aria-label="수정일 표시"
|
|
>
|
|
<span class="absolute inset-0 rounded-full bg-[#c8ced3] transition-colors peer-checked:bg-[#6d747d]" aria-hidden="true" />
|
|
<span class="relative ml-1 size-5 rounded-full bg-[#f4f6f8] shadow transition-transform peer-checked:translate-x-5" aria-hidden="true" />
|
|
</span>
|
|
</div>
|
|
<div class="mt-5 flex items-center justify-between gap-4 border-t border-[#eceff2] pt-5">
|
|
<span class="font-bold text-[#15171a]">태그 최대 개수</span>
|
|
<span class="font-mono text-sm font-semibold text-[#657080]">
|
|
{{ normalizePostTagLimit(form.postTagLimit) }}개
|
|
</span>
|
|
</div>
|
|
<div class="mt-5 grid gap-3 border-t border-[#eceff2] pt-5">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<span class="font-bold text-[#15171a]">표시개수 설정</span>
|
|
<span class="text-xs text-[#657080]">공개 목록 기준</span>
|
|
</div>
|
|
<div class="grid gap-2 text-xs text-[#657080] sm:grid-cols-2">
|
|
<div class="flex items-center justify-between gap-3 rounded-md border border-[#edf0f2] px-3 py-2">
|
|
<span>Latest</span>
|
|
<strong class="font-mono text-[#15171a]">{{ normalizeDisplayCount(form.homeLatestPostLimit, DEFAULT_HOME_LATEST_POST_LIMIT) }}개</strong>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 rounded-md border border-[#edf0f2] px-3 py-2">
|
|
<span>Posts</span>
|
|
<strong class="font-mono text-[#15171a]">{{ normalizeDisplayCount(form.postListPageSize, DEFAULT_POST_LIST_PAGE_SIZE) }}개</strong>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 rounded-md border border-[#edf0f2] px-3 py-2">
|
|
<span>태그 게시물</span>
|
|
<strong class="font-mono text-[#15171a]">{{ normalizeDisplayCount(form.tagPostListPageSize, DEFAULT_TAG_POST_LIST_PAGE_SIZE) }}개</strong>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 rounded-md border border-[#edf0f2] px-3 py-2">
|
|
<span>Featured</span>
|
|
<strong class="font-mono text-[#15171a]">{{ normalizeDisplayCount(form.featuredPostLimit, DEFAULT_FEATURED_POST_LIMIT) }}개</strong>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 rounded-md border border-[#edf0f2] px-3 py-2 sm:col-span-2">
|
|
<span>Pages 섹션</span>
|
|
<strong class="font-mono text-[#15171a]">{{ normalizeDisplayCount(form.pageSectionItemLimit, DEFAULT_PAGE_SECTION_ITEM_LIMIT) }}개</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-5 grid gap-3 border-t border-[#eceff2] pt-5">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<span class="font-bold text-[#15171a]">업로드 제한</span>
|
|
<span class="text-xs text-[#657080]">1회 업로드 기준</span>
|
|
</div>
|
|
<div class="grid gap-2 text-xs text-[#657080] sm:grid-cols-2">
|
|
<div class="flex items-center justify-between gap-3 rounded-md border border-[#edf0f2] px-3 py-2">
|
|
<span>파일 수</span>
|
|
<strong class="font-mono text-[#15171a]">{{ normalizeUploadMaxFileCount(form.uploadMaxFileCount) }}개</strong>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 rounded-md border border-[#edf0f2] px-3 py-2">
|
|
<span>전체 용량</span>
|
|
<strong class="font-mono text-[#15171a]">{{ formatUploadSizeLimit(normalizeUploadMaxTotalSize(form.uploadMaxTotalSize)) }}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-else
|
|
class="grid gap-5 border-t border-[#eceff2] pt-5 text-sm"
|
|
>
|
|
<label class="admin-settings-screen__post-toggle flex items-center justify-between gap-4">
|
|
<span class="font-bold text-[#15171a]">수정일 표시</span>
|
|
<span class="admin-settings-screen__post-toggle-control relative inline-flex h-7 w-12 shrink-0 items-center">
|
|
<input
|
|
v-model="form.showPostUpdatedAt"
|
|
class="peer sr-only"
|
|
type="checkbox"
|
|
aria-label="수정일 표시"
|
|
>
|
|
<span class="absolute inset-0 rounded-full bg-[#c8ced3] transition-colors peer-checked:bg-[#15171a]" aria-hidden="true" />
|
|
<span class="relative ml-1 size-5 rounded-full bg-white shadow transition-transform peer-checked:translate-x-5" aria-hidden="true" />
|
|
</span>
|
|
</label>
|
|
<label class="admin-settings-screen__field grid gap-2">
|
|
<span class="font-bold text-[#15171a]">태그 최대 개수</span>
|
|
<input
|
|
v-model.number="form.postTagLimit"
|
|
class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
type="number"
|
|
:min="MIN_POST_TAG_LIMIT"
|
|
:max="MAX_POST_TAG_LIMIT"
|
|
step="1"
|
|
@blur="form.postTagLimit = normalizePostTagLimit(form.postTagLimit)"
|
|
>
|
|
<span class="text-xs leading-relaxed text-[#657080]">
|
|
최소 {{ MIN_POST_TAG_LIMIT }}개, 최대 {{ MAX_POST_TAG_LIMIT }}개까지 설정할 수 있습니다. 기본값은 {{ DEFAULT_POST_TAG_LIMIT }}개입니다.
|
|
</span>
|
|
</label>
|
|
<div class="admin-settings-screen__field grid gap-3 border-t border-[#eceff2] pt-5">
|
|
<div>
|
|
<span class="font-bold text-[#15171a]">표시개수 설정</span>
|
|
<p class="mt-1 text-xs leading-relaxed text-[#657080]">
|
|
공개 목록에서 한 번에 불러오고 보여줄 개수를 선택합니다.
|
|
</p>
|
|
</div>
|
|
<div class="grid gap-3 sm:grid-cols-2">
|
|
<label class="grid gap-1.5">
|
|
<span class="text-xs font-semibold text-[#657080]">Latest</span>
|
|
<span class="relative">
|
|
<select
|
|
v-model.number="form.homeLatestPostLimit"
|
|
class="h-10 w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-3 pr-10 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
>
|
|
<option v-for="option in POST_LIST_COUNT_OPTIONS" :key="`latest-${option}`" :value="option">{{ option }}개</option>
|
|
</select>
|
|
<svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
|
|
</span>
|
|
</label>
|
|
<label class="grid gap-1.5">
|
|
<span class="text-xs font-semibold text-[#657080]">Posts</span>
|
|
<span class="relative">
|
|
<select
|
|
v-model.number="form.postListPageSize"
|
|
class="h-10 w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-3 pr-10 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
>
|
|
<option v-for="option in POST_LIST_COUNT_OPTIONS" :key="`posts-${option}`" :value="option">{{ option }}개</option>
|
|
</select>
|
|
<svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
|
|
</span>
|
|
</label>
|
|
<label class="grid gap-1.5">
|
|
<span class="text-xs font-semibold text-[#657080]">태그 게시물</span>
|
|
<span class="relative">
|
|
<select
|
|
v-model.number="form.tagPostListPageSize"
|
|
class="h-10 w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-3 pr-10 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
>
|
|
<option v-for="option in POST_LIST_COUNT_OPTIONS" :key="`tag-posts-${option}`" :value="option">{{ option }}개</option>
|
|
</select>
|
|
<svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
|
|
</span>
|
|
</label>
|
|
<label class="grid gap-1.5">
|
|
<span class="text-xs font-semibold text-[#657080]">Featured</span>
|
|
<span class="relative">
|
|
<select
|
|
v-model.number="form.featuredPostLimit"
|
|
class="h-10 w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-3 pr-10 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
>
|
|
<option v-for="option in DISPLAY_COUNT_OPTIONS" :key="`featured-${option}`" :value="option">{{ option }}개</option>
|
|
</select>
|
|
<svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
|
|
</span>
|
|
</label>
|
|
<label class="grid gap-1.5 sm:col-span-2">
|
|
<span class="text-xs font-semibold text-[#657080]">Pages 섹션</span>
|
|
<span class="relative">
|
|
<select
|
|
v-model.number="form.pageSectionItemLimit"
|
|
class="h-10 w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-3 pr-10 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
>
|
|
<option v-for="option in DISPLAY_COUNT_OPTIONS" :key="`pages-${option}`" :value="option">{{ option }}개</option>
|
|
</select>
|
|
<svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<h2 class="admin-settings-screen__section-heading z-20 mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
|
|
사이트
|
|
</h2>
|
|
<section
|
|
id="admin-settings-section-home-cover"
|
|
class="admin-settings-screen__card admin-settings-screen__card--home-cover 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="!editHomeCover"
|
|
class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
|
|
>
|
|
홈 상단에 720px 너비 커버 이미지를 표시합니다. 라이트·다크 이미지를 각각 등록할 수 있고, 이미지·텍스트는 저장 버튼으로 함께 반영합니다.
|
|
</p>
|
|
</div>
|
|
<div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
|
|
<template v-if="!editHomeCover">
|
|
<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="beginEditHomeCover"
|
|
>
|
|
편집
|
|
</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="savingHomeCover"
|
|
@click="cancelEditHomeCover"
|
|
>
|
|
취소
|
|
</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="savingHomeCover || !hasHomeCoverChanges"
|
|
@click="saveHomeCoverSection"
|
|
>
|
|
{{ savingHomeCover ? '저장 중' : '저장' }}
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!editHomeCover"
|
|
class="admin-settings-screen__home-cover-readonly grid gap-4 border-t border-[#eceff2] pt-5 text-sm"
|
|
>
|
|
<div class="grid min-w-0 gap-6">
|
|
<div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<h3 class="text-sm font-bold text-[#15171a]">
|
|
라이트모드
|
|
</h3>
|
|
</div>
|
|
<div
|
|
v-if="form.homeCoverImageUrl"
|
|
class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
|
|
>
|
|
<HomeHero
|
|
class="!max-w-full"
|
|
:image-url="form.homeCoverImageUrl"
|
|
:dark-image-url="''"
|
|
:title="form.homeCoverTitle"
|
|
:text="form.homeCoverText"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="admin-settings-screen__home-cover-empty grid aspect-[720/215] w-full max-w-full place-items-center rounded-lg border border-dashed border-[#cfd6de] bg-[#f7f8fa] px-4 text-center text-sm text-[#657080]"
|
|
>
|
|
라이트모드 이미지가 없습니다.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<h3 class="text-sm font-bold text-[#15171a]">
|
|
다크모드
|
|
</h3>
|
|
</div>
|
|
<div
|
|
v-if="form.homeCoverDarkImageUrl"
|
|
class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
|
|
>
|
|
<HomeHero
|
|
class="!max-w-full"
|
|
:image-url="form.homeCoverDarkImageUrl"
|
|
:dark-image-url="''"
|
|
:title="form.homeCoverTitle"
|
|
:text="form.homeCoverText"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="admin-settings-screen__home-cover-empty grid aspect-[720/215] w-full max-w-full place-items-center rounded-lg border border-dashed border-[#cfd6de] bg-[#f7f8fa] px-4 text-center text-sm text-[#657080]"
|
|
>
|
|
다크모드 전용 이미지가 없습니다. 공개 화면에서는 라이트모드 이미지를 대신 사용합니다.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="admin-settings-screen__home-cover-edit grid min-w-0 gap-6 border-t border-[#eceff2] pt-5">
|
|
<div class="grid min-w-0 gap-6">
|
|
<div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
|
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="min-w-0">
|
|
<h3 class="text-sm font-bold text-[#15171a]">
|
|
라이트모드
|
|
</h3>
|
|
<p class="mt-1 text-sm leading-relaxed text-[#657080]">
|
|
기본 헤더 이미지입니다.
|
|
</p>
|
|
</div>
|
|
<div class="flex shrink-0 flex-wrap gap-2">
|
|
<button
|
|
class="h-10 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#15171a] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
|
|
type="button"
|
|
:disabled="uploadingHomeCover"
|
|
@click="openHomeCoverFilePicker"
|
|
>
|
|
{{ uploadingHomeCover ? '업로드 중' : '이미지 변경' }}
|
|
</button>
|
|
<button
|
|
v-if="form.homeCoverImageUrl"
|
|
class="h-10 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#657080] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
|
|
type="button"
|
|
:disabled="uploadingHomeCover"
|
|
@click="clearHomeCoverImage('light')"
|
|
>
|
|
삭제
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="form.homeCoverImageUrl"
|
|
class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
|
|
>
|
|
<HomeHero
|
|
class="!max-w-full"
|
|
:image-url="form.homeCoverImageUrl"
|
|
:dark-image-url="''"
|
|
:title="form.homeCoverTitle"
|
|
:text="form.homeCoverText"
|
|
/>
|
|
</div>
|
|
<button
|
|
v-else
|
|
class="admin-settings-screen__home-cover-dropzone grid aspect-[720/215] w-full max-w-full cursor-pointer place-items-center rounded-lg border border-dashed border-[#b8c1cc] bg-[#f7f8fa] px-4 text-center transition hover:border-[#15171a] hover:bg-white disabled:cursor-not-allowed disabled:opacity-60"
|
|
type="button"
|
|
:disabled="uploadingHomeCover"
|
|
@click="openHomeCoverFilePicker"
|
|
@dragover.prevent
|
|
@drop.prevent="dropHomeCover($event, 'light')"
|
|
>
|
|
<span class="grid place-items-center gap-2 text-sm font-semibold text-[#657080]">
|
|
<svg class="size-6 text-[#8a94a3]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M12 16V4" />
|
|
<path d="m7 9 5-5 5 5" />
|
|
<path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" />
|
|
</svg>
|
|
<span>라이트모드 이미지를 드롭하거나 선택하세요.</span>
|
|
</span>
|
|
</button>
|
|
<input
|
|
ref="homeCoverInputRef"
|
|
class="hidden"
|
|
type="file"
|
|
accept="image/jpeg,image/png,image/webp"
|
|
:disabled="uploadingHomeCover"
|
|
@change="uploadHomeCover($event, 'light')"
|
|
>
|
|
</div>
|
|
|
|
<div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
|
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="min-w-0">
|
|
<h3 class="text-sm font-bold text-[#15171a]">
|
|
다크모드
|
|
</h3>
|
|
<p class="mt-1 text-sm leading-relaxed text-[#657080]">
|
|
다크모드에서 교체되는 이미지입니다.
|
|
</p>
|
|
</div>
|
|
<div class="flex shrink-0 flex-wrap gap-2">
|
|
<button
|
|
class="h-10 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#15171a] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
|
|
type="button"
|
|
:disabled="uploadingHomeCoverDark"
|
|
@click="openHomeCoverDarkFilePicker"
|
|
>
|
|
{{ uploadingHomeCoverDark ? '업로드 중' : '이미지 변경' }}
|
|
</button>
|
|
<button
|
|
v-if="form.homeCoverDarkImageUrl"
|
|
class="h-10 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#657080] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
|
|
type="button"
|
|
:disabled="uploadingHomeCoverDark"
|
|
@click="clearHomeCoverImage('dark')"
|
|
>
|
|
삭제
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="form.homeCoverDarkImageUrl"
|
|
class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
|
|
>
|
|
<HomeHero
|
|
class="!max-w-full"
|
|
:image-url="form.homeCoverDarkImageUrl"
|
|
:dark-image-url="''"
|
|
:title="form.homeCoverTitle"
|
|
:text="form.homeCoverText"
|
|
/>
|
|
</div>
|
|
<button
|
|
v-else
|
|
class="admin-settings-screen__home-cover-dropzone grid aspect-[720/215] w-full max-w-full cursor-pointer place-items-center rounded-lg border border-dashed border-[#b8c1cc] bg-[#f7f8fa] px-4 text-center transition hover:border-[#15171a] hover:bg-white disabled:cursor-not-allowed disabled:opacity-60"
|
|
type="button"
|
|
:disabled="uploadingHomeCoverDark"
|
|
@click="openHomeCoverDarkFilePicker"
|
|
@dragover.prevent
|
|
@drop.prevent="dropHomeCover($event, 'dark')"
|
|
>
|
|
<span class="grid place-items-center gap-2 text-sm font-semibold text-[#657080]">
|
|
<svg class="size-6 text-[#8a94a3]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M12 16V4" />
|
|
<path d="m7 9 5-5 5 5" />
|
|
<path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" />
|
|
</svg>
|
|
<span>다크모드 이미지를 드롭하거나 선택하세요.</span>
|
|
</span>
|
|
</button>
|
|
<input
|
|
ref="homeCoverDarkInputRef"
|
|
class="hidden"
|
|
type="file"
|
|
accept="image/jpeg,image/png,image/webp"
|
|
:disabled="uploadingHomeCoverDark"
|
|
@change="uploadHomeCover($event, 'dark')"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<label class="admin-settings-screen__field grid gap-2 text-sm">
|
|
<span class="font-medium text-[#3f4650]">오버레이 제목</span>
|
|
<input
|
|
v-model="form.homeCoverTitle"
|
|
class="rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
type="text"
|
|
maxlength="120"
|
|
placeholder="선택 사항"
|
|
>
|
|
</label>
|
|
|
|
<label class="admin-settings-screen__field grid gap-2 text-sm">
|
|
<span class="font-medium text-[#3f4650]">오버레이 본문</span>
|
|
<textarea
|
|
v-model="form.homeCoverText"
|
|
class="min-h-[4.5rem] resize-y rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
maxlength="280"
|
|
rows="3"
|
|
placeholder="짧은 소개 문구 (선택 사항)"
|
|
/>
|
|
</label>
|
|
</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>
|
|
|
|
<section
|
|
id="admin-settings-section-announcement"
|
|
class="admin-settings-screen__card admin-settings-screen__card--announcement 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="!customizeAnnouncement"
|
|
class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
|
|
>
|
|
홈페이지 상단에 중요한 공지나 링크를 표시합니다.<br>방문자는 X로 이번 방문만 닫거나, 7일간 보지 않기를 선택할 수 있습니다.<br>공지를 수정·저장하면 다시 노출됩니다.
|
|
</p>
|
|
</div>
|
|
<div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
|
|
<template v-if="!customizeAnnouncement">
|
|
<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="beginCustomizeAnnouncement"
|
|
>
|
|
맞춤 설정
|
|
</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="savingAnnouncement"
|
|
@click="cancelCustomizeAnnouncement"
|
|
>
|
|
취소
|
|
</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="savingAnnouncement || !hasAnnouncementChanges"
|
|
@click="saveAnnouncementSection"
|
|
>
|
|
{{ savingAnnouncement ? '저장 중' : '저장' }}
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<label
|
|
v-if="!customizeAnnouncement"
|
|
class="admin-settings-screen__announcement-toggle flex items-center justify-between gap-4 border-t border-[#eceff2] pt-5 text-sm"
|
|
>
|
|
<span class="font-bold text-[#15171a]">사용</span>
|
|
<span class="admin-settings-screen__post-toggle-control relative inline-flex h-7 w-12 shrink-0 cursor-not-allowed items-center opacity-55 grayscale" aria-disabled="true">
|
|
<input
|
|
:checked="form.announcementEnabled"
|
|
class="peer sr-only"
|
|
type="checkbox"
|
|
disabled
|
|
aria-label="어나운스 바 사용"
|
|
>
|
|
<span class="absolute inset-0 rounded-full bg-[#c8ced3] transition-colors peer-checked:bg-[#6d747d]" aria-hidden="true" />
|
|
<span class="relative ml-1 size-5 rounded-full bg-[#f4f6f8] shadow transition-transform peer-checked:translate-x-5" aria-hidden="true" />
|
|
</span>
|
|
</label>
|
|
|
|
<div
|
|
v-else
|
|
class="admin-settings-screen__announcement-edit grid gap-6 border-t border-[#eceff2] pt-5"
|
|
>
|
|
<label class="admin-settings-screen__announcement-toggle flex items-center justify-between gap-4 text-sm">
|
|
<span class="font-bold text-[#15171a]">사용</span>
|
|
<span class="admin-settings-screen__post-toggle-control relative inline-flex h-7 w-12 shrink-0 items-center">
|
|
<input
|
|
v-model="form.announcementEnabled"
|
|
class="peer sr-only"
|
|
type="checkbox"
|
|
aria-label="어나운스 바 사용"
|
|
>
|
|
<span class="absolute inset-0 rounded-full bg-[#c8ced3] transition-colors peer-checked:bg-[#15171a]" aria-hidden="true" />
|
|
<span class="relative ml-1 size-5 rounded-full bg-white shadow transition-transform peer-checked:translate-x-5" aria-hidden="true" />
|
|
</span>
|
|
</label>
|
|
|
|
<label class="admin-settings-screen__field grid gap-2 text-sm">
|
|
<span class="font-medium text-[#3f4650]">어나운스</span>
|
|
<input
|
|
v-model="form.announcementText"
|
|
class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
maxlength="200"
|
|
placeholder="공지 문구"
|
|
>
|
|
</label>
|
|
|
|
<label class="admin-settings-screen__field grid gap-2 text-sm">
|
|
<span class="font-medium text-[#3f4650]">링크 (선택)</span>
|
|
<input
|
|
v-model="form.announcementUrl"
|
|
class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
maxlength="500"
|
|
placeholder="https://… 또는 /경로 (비우면 링크 없음)"
|
|
>
|
|
</label>
|
|
|
|
<div class="admin-settings-screen__field grid gap-2 text-sm">
|
|
<span class="font-medium text-[#3f4650]">배경색</span>
|
|
<div class="admin-settings-screen__announcement-color-editor flex flex-wrap items-center gap-3">
|
|
<div class="admin-settings-screen__announcement-colors flex flex-wrap items-center gap-2">
|
|
<button
|
|
v-for="preset in ANNOUNCEMENT_BACKGROUND_PRESETS"
|
|
:key="preset.id"
|
|
class="admin-settings-screen__announcement-color relative inline-flex size-9 items-center justify-center rounded-full border transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#15171a]"
|
|
:class="normalizeAnnouncementBackgroundColor(form.announcementBackgroundColor) === preset.value ? 'border-[#22a06b] ring-2 ring-[#22a06b] ring-offset-2' : 'border-[#dce0e5]'"
|
|
type="button"
|
|
:style="{ backgroundColor: preset.value }"
|
|
:title="preset.label"
|
|
:aria-label="`${preset.label} 배경`"
|
|
:aria-pressed="normalizeAnnouncementBackgroundColor(form.announcementBackgroundColor) === preset.value"
|
|
@click="form.announcementBackgroundColor = preset.value"
|
|
>
|
|
<span class="sr-only">{{ preset.label }}</span>
|
|
</button>
|
|
</div>
|
|
<label class="admin-settings-screen__announcement-color-input inline-flex h-10 items-center gap-2 rounded-md border border-[#dce0e5] bg-white px-2">
|
|
<input
|
|
class="size-7 rounded border-0 bg-transparent p-0"
|
|
type="color"
|
|
:value="normalizeAnnouncementBackgroundColor(form.announcementBackgroundColor || DEFAULT_ANNOUNCEMENT_BACKGROUND_COLOR)"
|
|
aria-label="어나운스 바 배경색 선택"
|
|
@input="form.announcementBackgroundColor = $event.target.value"
|
|
>
|
|
<input
|
|
v-model="form.announcementBackgroundColor"
|
|
class="h-8 w-28 border-0 bg-transparent px-1 text-sm font-semibold text-[#15171a] outline-none"
|
|
maxlength="7"
|
|
placeholder="#15171a"
|
|
aria-label="어나운스 바 배경색 직접 입력"
|
|
>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admin-settings-screen__field grid gap-2 text-sm">
|
|
<span class="font-medium text-[#3f4650]">텍스트 정렬</span>
|
|
<div class="admin-settings-screen__announcement-alignment inline-flex w-full rounded-md border border-[#dce0e5] bg-white p-1 sm:w-auto">
|
|
<button
|
|
v-for="option in ANNOUNCEMENT_ALIGNMENT_OPTIONS"
|
|
:key="option.value"
|
|
class="admin-settings-screen__announcement-align-option inline-flex h-9 flex-1 items-center justify-center rounded px-4 text-sm font-semibold transition sm:min-w-24"
|
|
:class="normalizeAnnouncementAlignment(form.announcementAlignment) === option.value ? 'bg-[#15171a] text-white' : 'text-[#657080] hover:bg-[#f4f6f8] hover:text-[#15171a]'"
|
|
type="button"
|
|
:aria-pressed="normalizeAnnouncementAlignment(form.announcementAlignment) === option.value"
|
|
@click="form.announcementAlignment = option.value"
|
|
>
|
|
{{ option.label }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<AdminSiteCodeSettingsCard
|
|
:form="form"
|
|
:editing="editSiteCode"
|
|
:saving="savingSiteCode"
|
|
:has-changes="hasSiteCodeChanges"
|
|
@begin="beginEditSiteCode"
|
|
@cancel="cancelEditSiteCode"
|
|
@save="saveSiteCodeSection"
|
|
/>
|
|
|
|
<AdminAdsSettingsCard
|
|
:form="form"
|
|
:editing="editAds"
|
|
:saving="savingAds"
|
|
:has-changes="hasAdsChanges"
|
|
@begin="beginEditAds"
|
|
@cancel="cancelEditAds"
|
|
@save="saveAdsSection"
|
|
/>
|
|
|
|
<h2 class="admin-settings-screen__section-heading z-20 mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
|
|
콘텐츠·안전
|
|
</h2>
|
|
<section
|
|
id="admin-settings-section-backup-summary"
|
|
class="admin-settings-screen__card admin-settings-screen__card--backup-summary rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
|
|
>
|
|
<div class="admin-settings-screen__card-head flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
|
<div class="min-w-0">
|
|
<h2 class="text-lg font-semibold text-[#15171a]">
|
|
사이트 용량
|
|
</h2>
|
|
<p class="mt-1 text-sm leading-relaxed text-[#657080]">
|
|
콘텐츠 수량과 업로드 파일 용량을 한눈에 확인합니다.
|
|
</p>
|
|
</div>
|
|
<button
|
|
class="inline-flex h-10 shrink-0 cursor-pointer items-center justify-center rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#15171a] transition hover:bg-[#f4f6f8] disabled:cursor-wait disabled:opacity-60"
|
|
type="button"
|
|
:disabled="backupSummaryPending"
|
|
@click="refreshBackupSummary"
|
|
>
|
|
{{ backupSummaryPending ? '집계 중' : '새로고침' }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-5 flex flex-wrap items-center gap-2 text-xs text-[#657080]">
|
|
<span class="rounded-full bg-[#f4f6f8] px-3 py-1">
|
|
기준 {{ formatBackupGeneratedAt(backupSummary?.generatedAt) }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="mt-5 grid gap-3 border-t border-[#eceff2] pt-5">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<span class="font-bold text-[#15171a]">콘텐츠</span>
|
|
<span class="text-xs text-[#657080]">DB 기준</span>
|
|
</div>
|
|
<div class="grid gap-2 text-xs text-[#657080] sm:grid-cols-2">
|
|
<div
|
|
v-for="metric in backupContentMetrics"
|
|
:key="`backup-content-${metric.label}`"
|
|
class="rounded-md border border-[#edf0f2] px-3 py-2"
|
|
:class="metric.span ? 'sm:col-span-2' : ''"
|
|
>
|
|
<div class="flex items-center justify-between gap-3">
|
|
<span>{{ metric.label }}</span>
|
|
<strong class="font-mono text-[#15171a]">{{ metric.value }}</strong>
|
|
</div>
|
|
<p
|
|
v-if="metric.helper"
|
|
class="mt-1 text-[11px] leading-relaxed text-[#657080]"
|
|
>
|
|
{{ metric.helper }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 grid gap-3 border-t border-[#eceff2] pt-5">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<span class="font-bold text-[#15171a]">파일·용량</span>
|
|
<span class="text-xs text-[#657080]">public/uploads 기준</span>
|
|
</div>
|
|
<div class="grid gap-2 text-xs text-[#657080]">
|
|
<div class="admin-settings-screen__backup-image-group grid gap-2">
|
|
<div
|
|
v-for="row in backupStorageSections.imageRows"
|
|
:key="`backup-storage-image-${row.label}`"
|
|
class="flex items-center justify-between gap-3 rounded-md border border-[#edf0f2] px-3 py-2"
|
|
:class="row.child ? 'border-dashed' : ''"
|
|
>
|
|
<span>{{ row.label }}</span>
|
|
<strong class="font-mono text-[#15171a]">{{ row.value }}</strong>
|
|
</div>
|
|
</div>
|
|
<div class="grid gap-2 sm:grid-cols-2">
|
|
<div
|
|
v-for="row in backupStorageSections.mainRows"
|
|
:key="`backup-storage-main-${row.label}`"
|
|
class="flex items-center justify-between gap-3 rounded-md border border-[#edf0f2] px-3 py-2"
|
|
>
|
|
<span>{{ row.label }}</span>
|
|
<strong class="font-mono text-[#15171a]">{{ row.value }}</strong>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 rounded-md border border-[#dce0e5] bg-[#fbfcfd] px-3 py-2">
|
|
<span class="font-bold text-[#15171a]">{{ backupStorageSections.totalRow.label }}</span>
|
|
<strong class="font-mono font-bold text-[#15171a]">{{ backupStorageSections.totalRow.value }}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
id="admin-settings-section-export"
|
|
class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
|
|
>
|
|
<div class="admin-settings-screen__card-head flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
|
<div class="min-w-0">
|
|
<h2 class="text-lg font-semibold text-[#15171a]">
|
|
게시물 내보내기
|
|
</h2>
|
|
<p class="mt-1 text-sm leading-relaxed text-[#657080]">
|
|
게시물을 Obsidian 호환 ZIP 백업으로 만들고, 준비된 분할 파일을 내려받습니다.
|
|
</p>
|
|
</div>
|
|
<button
|
|
class="inline-flex h-10 shrink-0 cursor-pointer items-center justify-center rounded-md bg-[#15171a] px-4 text-sm font-semibold text-white transition hover:bg-black"
|
|
type="button"
|
|
:aria-expanded="postImportExportPanel === 'export'"
|
|
aria-controls="admin-settings-export-panel"
|
|
@click="togglePostImportExportPanel('export')"
|
|
>
|
|
{{ postImportExportPanel === 'export' ? '접기' : '내보내기' }}
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
v-if="postImportExportPanel === 'export'"
|
|
id="admin-settings-export-panel"
|
|
class="admin-settings-screen__export-actions mt-4 grid gap-4 rounded-lg border border-[#e6e8eb] bg-[#fbfcfd] p-4"
|
|
>
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold text-[#15171a]">
|
|
Obsidian 호환 백업 준비
|
|
</p>
|
|
<p class="mt-1 text-sm leading-relaxed text-[#657080]">
|
|
전체·연도·월·직접 범위로 게시물을 골라 목표 용량 기준 ZIP 백업을 만듭니다.
|
|
</p>
|
|
</div>
|
|
<div class="grid gap-3">
|
|
<div class="admin-settings-screen__export-range grid gap-2 md:grid-cols-4">
|
|
<label class="grid gap-1 text-xs font-semibold text-[#5d6673]">
|
|
범위
|
|
<span class="relative">
|
|
<select
|
|
v-model="postExportDateRangeMode"
|
|
class="h-10 w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-3 pr-10 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
>
|
|
<option value="all">전체</option>
|
|
<option value="year">특정년</option>
|
|
<option value="month">특정월</option>
|
|
<option value="custom">직접 지정</option>
|
|
</select>
|
|
<svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
|
|
</span>
|
|
</label>
|
|
<label
|
|
v-if="postExportDateRangeMode === 'year' || postExportDateRangeMode === 'month'"
|
|
class="grid gap-1 text-xs font-semibold text-[#5d6673]"
|
|
>
|
|
연도
|
|
<span class="relative">
|
|
<select
|
|
v-model.number="postExportYear"
|
|
class="h-10 w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-3 pr-10 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
>
|
|
<option
|
|
v-for="year in postExportYearOptions"
|
|
:key="year"
|
|
:value="year"
|
|
>
|
|
{{ year }}
|
|
</option>
|
|
</select>
|
|
<svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
|
|
</span>
|
|
</label>
|
|
<label
|
|
v-if="postExportDateRangeMode === 'month'"
|
|
class="grid gap-1 text-xs font-semibold text-[#5d6673]"
|
|
>
|
|
월
|
|
<span class="relative">
|
|
<select
|
|
v-model.number="postExportMonth"
|
|
class="h-10 w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-3 pr-10 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
>
|
|
<option
|
|
v-for="month in postExportMonthOptions"
|
|
:key="month"
|
|
:value="month"
|
|
>
|
|
{{ month }}월
|
|
</option>
|
|
</select>
|
|
<svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
|
|
</span>
|
|
</label>
|
|
<label
|
|
v-if="postExportDateRangeMode === 'custom'"
|
|
class="grid gap-1 text-xs font-semibold text-[#5d6673]"
|
|
>
|
|
시작일
|
|
<input
|
|
v-model="postExportDateFrom"
|
|
class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
type="date"
|
|
>
|
|
</label>
|
|
<label
|
|
v-if="postExportDateRangeMode === 'custom'"
|
|
class="grid gap-1 text-xs font-semibold text-[#5d6673]"
|
|
>
|
|
종료일
|
|
<input
|
|
v-model="postExportDateTo"
|
|
class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
type="date"
|
|
>
|
|
</label>
|
|
</div>
|
|
<div class="admin-settings-screen__export-split grid gap-2 md:grid-cols-2">
|
|
<label class="grid gap-1 text-xs font-semibold text-[#5d6673]">
|
|
목표 ZIP 용량 (MB)
|
|
<input
|
|
v-model.number="postExportMaxFileSizeMb"
|
|
class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
type="number"
|
|
min="10"
|
|
max="2048"
|
|
step="10"
|
|
>
|
|
</label>
|
|
<label class="grid gap-1 text-xs font-semibold text-[#5d6673]">
|
|
ZIP당 최대 게시물 수
|
|
<input
|
|
v-model.number="postExportChunkSize"
|
|
class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
type="number"
|
|
min="1"
|
|
max="500"
|
|
step="1"
|
|
>
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center justify-end">
|
|
<button
|
|
class="admin-settings-screen__export-request inline-flex h-10 shrink-0 cursor-pointer items-center justify-center rounded-md bg-[#15171a] px-4 text-sm font-semibold text-white transition hover:bg-black disabled:cursor-not-allowed disabled:bg-[#c7cdd4]"
|
|
type="button"
|
|
:disabled="!canRequestPostExport"
|
|
:title="postExportRequestTitle"
|
|
@click="requestPostExport"
|
|
>
|
|
{{ requestingPostExport ? '요청 중...' : hasActivePostExportJobs ? '내보내기 진행 중' : '내보내기 요청' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section
|
|
v-if="normalizedPostExportJobs.length > 0"
|
|
id="admin-settings-section-export-results"
|
|
class="admin-settings-screen__card admin-settings-screen__card--export-results rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
|
|
>
|
|
<div class="admin-settings-screen__export-list">
|
|
<div class="mb-3 flex items-center justify-between gap-3">
|
|
<h3 class="text-sm font-semibold text-[#15171a]">
|
|
최근 내보내기 작업
|
|
</h3>
|
|
<button
|
|
class="inline-flex h-8 cursor-pointer items-center justify-center rounded px-3 text-xs font-semibold text-[#5d6673] transition hover:bg-[#eceff2] hover:text-[#15171a]"
|
|
type="button"
|
|
@click="refreshPostExportJobs"
|
|
>
|
|
새로고침
|
|
</button>
|
|
</div>
|
|
<div class="admin-settings-screen__export-items grid gap-3">
|
|
<article
|
|
v-for="job in normalizedPostExportJobs"
|
|
:key="job.id"
|
|
class="admin-settings-screen__export-item rounded-lg border border-[#e6e8eb] bg-white p-4"
|
|
>
|
|
<div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
|
|
<div class="min-w-0">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<span
|
|
v-if="job.status !== 'ready'"
|
|
class="inline-flex rounded-full px-2 py-1 text-xs font-semibold ring-1 ring-inset"
|
|
:class="getPostExportStatusClass(job.status)"
|
|
>
|
|
{{ getPostExportStatusLabel(job.status) }}
|
|
</span>
|
|
<span class="text-sm font-semibold text-[#15171a]">
|
|
게시물 {{ job.postCount }}개
|
|
</span>
|
|
<span class="text-sm text-[#9aa3ad]">
|
|
{{ job.files.length }}개 파일
|
|
</span>
|
|
<span class="text-sm text-[#657080]">
|
|
{{ job.rangeLabel || '전체' }}
|
|
</span>
|
|
</div>
|
|
<p class="mt-2 text-xs text-[#657080]">
|
|
만료: {{ formatPostDateTime(job.expiresAt) }}
|
|
</p>
|
|
</div>
|
|
<div class="flex shrink-0 items-center gap-2">
|
|
<button
|
|
v-if="job.status === 'failed'"
|
|
class="inline-flex h-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-[#dce0e5] px-3 text-xs font-semibold text-[#15171a] transition hover:bg-[#f4f6f8] disabled:cursor-not-allowed disabled:text-[#a6b0bb]"
|
|
type="button"
|
|
:disabled="isRetryingPostExportJob(job.id)"
|
|
@click="retryPostExportJob(job)"
|
|
>
|
|
{{ isRetryingPostExportJob(job.id) ? '재시도 중' : '재시도' }}
|
|
</button>
|
|
<button
|
|
class="inline-flex h-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-[#ffd5d5] px-3 text-xs font-semibold text-[#d64545] transition hover:bg-[#fff3f3] disabled:cursor-not-allowed disabled:border-[#e1e5ea] disabled:text-[#a6b0bb]"
|
|
type="button"
|
|
:disabled="job.status === 'queued' || job.status === 'processing' || isDeletingPostExportJob(job.id)"
|
|
@click="deletePostExportJob(job)"
|
|
>
|
|
{{ isDeletingPostExportJob(job.id) ? '삭제 중' : '삭제' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="shouldShowPostExportProgress(job)"
|
|
class="admin-settings-screen__export-progress mt-4 rounded-lg border border-[#edf0f3] bg-[#fbfcfd] p-3"
|
|
>
|
|
<div class="mb-2 flex items-center justify-between gap-3 text-xs">
|
|
<span class="font-semibold text-[#15171a]">
|
|
진행도 {{ getPostExportProgressLabel(job) }}
|
|
</span>
|
|
<span class="text-[#657080]">
|
|
{{ getPostExportProgressPercent(job) }}%
|
|
</span>
|
|
</div>
|
|
<div class="h-2 overflow-hidden rounded-full bg-[#e8edf2]">
|
|
<div
|
|
class="h-full rounded-full bg-[#15171a] transition-[width] duration-500"
|
|
:style="{ width: `${getPostExportProgressPercent(job)}%` }"
|
|
/>
|
|
</div>
|
|
<div class="mt-2 flex flex-col gap-1 text-xs text-[#657080] md:flex-row md:items-center md:justify-between">
|
|
<span>{{ getPostExportProgressDescription(job) }}</span>
|
|
<span>마지막 갱신: {{ formatPostDateTime(job.updatedAt) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<details
|
|
v-if="job.status === 'failed' && job.errorDetail"
|
|
class="admin-settings-screen__export-error mt-4 rounded-lg border border-[#ffd5d5] bg-[#fff7f7] p-3 text-xs text-[#8f2d2d]"
|
|
>
|
|
<summary class="cursor-pointer font-semibold">
|
|
실패 원인 보기
|
|
</summary>
|
|
<pre class="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed">{{ job.errorDetail }}</pre>
|
|
</details>
|
|
|
|
<div v-if="job.files.length > 0" class="admin-settings-screen__export-files mt-4 overflow-hidden rounded-md border border-[#edf0f3]">
|
|
<div class="flex flex-col gap-3 border-b border-[#edf0f3] bg-[#fbfcfd] px-3 py-3 md:flex-row md:items-center md:justify-between">
|
|
<label class="inline-flex cursor-pointer items-center gap-2 text-xs font-semibold text-[#394047] has-[:disabled]:cursor-not-allowed has-[:disabled]:text-[#a6b0bb]">
|
|
<input
|
|
class="size-4 rounded border-[#cfd6de] text-[#15171a] focus:ring-[#15171a] disabled:cursor-not-allowed"
|
|
type="checkbox"
|
|
:checked="areAllReadyPostExportFilesSelected(job)"
|
|
:disabled="getReadyPostExportFiles(job).length === 0 || isDownloadingPostExportJob(job.id)"
|
|
@change="toggleAllPostExportFiles(job)"
|
|
/>
|
|
전체 선택
|
|
</label>
|
|
<button
|
|
class="inline-flex h-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-[#15171a] bg-[#15171a] px-3 text-xs font-semibold text-white transition hover:bg-black disabled:cursor-not-allowed disabled:border-[#dce0e5] disabled:bg-white disabled:text-[#9aa3ad]"
|
|
type="button"
|
|
:disabled="getSelectedReadyPostExportFiles(job).length === 0 || isDownloadingPostExportJob(job.id)"
|
|
@click="downloadPostExportJobFiles(job)"
|
|
>
|
|
{{ isDownloadingPostExportJob(job.id) ? '다운로드 중' : `선택 파일 다운로드 ${getSelectedReadyPostExportFiles(job).length || ''}` }}
|
|
</button>
|
|
</div>
|
|
<AdminPostExportFileRow
|
|
v-for="file in job.files"
|
|
:key="file.id"
|
|
:file="file"
|
|
:selected="isPostExportFileSelected(job, file)"
|
|
:disabled="isPostExportFileSelectionDisabled(job, file)"
|
|
@toggle="togglePostExportFileSelection(job, file)"
|
|
/>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
id="admin-settings-section-import"
|
|
class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
|
|
>
|
|
<div class="admin-settings-screen__card-head flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
|
<div class="min-w-0">
|
|
<h2 class="text-lg font-semibold text-[#15171a]">
|
|
게시물 가져오기
|
|
</h2>
|
|
<p class="mt-1 text-sm leading-relaxed text-[#657080]">
|
|
내보내기로 만든 ZIP 백업을 게시물과 미디어 파일로 복원합니다.
|
|
</p>
|
|
</div>
|
|
<button
|
|
class="inline-flex h-10 shrink-0 cursor-pointer items-center justify-center rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#15171a] transition hover:bg-[#f4f6f8]"
|
|
type="button"
|
|
:aria-expanded="postImportExportPanel === 'import'"
|
|
aria-controls="admin-settings-import-panel"
|
|
@click="togglePostImportExportPanel('import')"
|
|
>
|
|
{{ postImportExportPanel === 'import' ? '접기' : '가져오기' }}
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
v-if="postImportExportPanel === 'import'"
|
|
id="admin-settings-import-panel"
|
|
class="admin-settings-screen__import-actions mt-5 grid gap-4 rounded-lg border border-dashed border-[#dce0e5] bg-[#fbfcfd] p-4"
|
|
>
|
|
<input
|
|
ref="postImportInputRef"
|
|
class="sr-only"
|
|
type="file"
|
|
accept=".zip,application/zip"
|
|
@change="handlePostImportFileChange"
|
|
>
|
|
<button
|
|
class="admin-settings-screen__import-dropzone grid min-h-32 cursor-pointer place-items-center rounded-lg border border-dashed border-[#b8c1cc] bg-white px-4 py-6 text-center transition hover:border-[#15171a] hover:bg-[#f7f8fa] disabled:cursor-not-allowed disabled:opacity-60"
|
|
type="button"
|
|
:disabled="importingPosts"
|
|
@click="openPostImportFilePicker"
|
|
@dragover.prevent
|
|
@drop.prevent="dropPostImportFile"
|
|
>
|
|
<span class="grid place-items-center gap-2 text-sm font-semibold text-[#657080]">
|
|
<svg class="size-6 text-[#8a94a3]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M12 16V4" />
|
|
<path d="m7 9 5-5 5 5" />
|
|
<path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" />
|
|
</svg>
|
|
<span>{{ postImportFileName || 'ZIP 파일을 드롭하거나 선택하세요.' }}</span>
|
|
<span class="text-xs font-medium text-[#8a94a3]">
|
|
같은 슬러그가 있으면 덮어쓰지 않고 새 슬러그로 가져옵니다.
|
|
</span>
|
|
</span>
|
|
</button>
|
|
<div class="flex items-center justify-end">
|
|
<button
|
|
class="inline-flex h-10 shrink-0 cursor-pointer items-center justify-center rounded-md bg-[#15171a] px-4 text-sm font-semibold text-white transition hover:bg-black disabled:cursor-not-allowed disabled:bg-[#c7cdd4]"
|
|
type="button"
|
|
:disabled="importingPosts || !postImportFile"
|
|
@click="importSelectedPostFile"
|
|
>
|
|
{{ importingPosts ? '가져오는 중...' : '적용' }}
|
|
</button>
|
|
</div>
|
|
<div
|
|
v-if="postImportResult"
|
|
class="rounded-md bg-[#f4fbf7] px-3 py-2 text-sm text-[#147a45] ring-1 ring-inset ring-[#b9e7cd]"
|
|
>
|
|
게시물 {{ postImportResult.importedCount }}개, 자산 {{ postImportResult.assetCount }}개를 가져왔습니다.
|
|
</div>
|
|
<div
|
|
v-if="postImportResult?.warningCount"
|
|
class="rounded-md bg-[#fff8e8] px-3 py-2 text-sm text-[#8a5a00] ring-1 ring-inset ring-[#f0d28a]"
|
|
>
|
|
<p class="font-semibold">
|
|
경고 {{ postImportResult.warningCount }}개가 있습니다.
|
|
</p>
|
|
<ul class="mt-2 grid gap-1 text-xs leading-relaxed">
|
|
<li
|
|
v-for="warning in postImportResult.warnings"
|
|
:key="warning"
|
|
>
|
|
{{ warning }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<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 master zenn"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="toast"
|
|
class="admin-settings-screen__toast fixed right-5 top-24 z-[60] rounded-md border px-4 py-3 text-sm font-semibold shadow-lg md:top-28"
|
|
:class="{
|
|
'border-green-200 bg-green-50 text-green-800': toast.type === 'success',
|
|
'border-red-200 bg-red-50 text-red-800': toast.type === 'error',
|
|
'border-[#e6e8eb] bg-white text-[#15171a]': toast.type === 'info'
|
|
}"
|
|
role="status"
|
|
>
|
|
{{ toast.message }}
|
|
</div>
|
|
</div>
|
|
</template>
|