zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

설정 선택 입력 공통화

Browse Source
This commit is contained in:
zenn
2026-07-23 17:55:30 +09:00
parent 4783881829
commit f510a88e56
5 changed files with 148 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
pages/admin/settings/index.vue
View File

@@ -94,6 +94,33 @@ const {
} = useImeSearchInput(navSearchQuery)
const activeSectionId = ref('admin-settings-section-title')
const scrollSpySuspended = ref(false)
const uploadFileCountSelectOptions = UPLOAD_FILE_COUNT_OPTIONS.map((option) => ({
value: option,
label: `${option}개`
}))
const uploadTotalSizeSelectOptions = UPLOAD_TOTAL_SIZE_OPTIONS.map((option) => ({
value: option,
label: formatUploadSizeLimit(option)
}))
const postListCountSelectOptions = POST_LIST_COUNT_OPTIONS.map((option) => ({
value: option,
label: `${option}개`
}))
const displayCountSelectOptions = DISPLAY_COUNT_OPTIONS.map((option) => ({
value: option,
label: `${option}개`
}))
const socialIconSelectOptions = SOCIAL_ICON_PRESETS.map((preset) => ({
value: preset.icon,
label: preset.label
}))
const postExportDateRangeModeOptions = [
{ value: 'all', label: '전체' },
{ value: 'year', label: '특정년' },
{ value: 'month', label: '특정월' },
{ value: 'custom', label: '직접 지정' }
]
/** 블로그 제목·설명 카드 편집 모드 여부 */
const editTitleDesc = ref(false)
/** 사이트 정보 카드 편집 모드 여부 */
@@ -370,12 +397,22 @@ const postExportYearOptions = computed(() => {
return Array.from({ length: 10 }, (_, index) => currentYear - index)
})
const postExportYearSelectOptions = computed(() => postExportYearOptions.value.map((year) => ({
value: year,
label: String(year)
})))
/**
* Export 월 선택지
* @type {ReadonlyArray<number>}
*/
const postExportMonthOptions = Array.from({ length: 12 }, (_, index) => index + 1)
const postExportMonthSelectOptions = postExportMonthOptions.map((month) => ({
value: month,
label: `${month}월`
}))
/**
* 게시물 export 요청 버튼 활성 가능 여부
* @returns {boolean} 활성 가능 여부
@@ -2356,30 +2393,26 @@ onBeforeUnmount(() => {
</p>
</div>
<div class="grid gap-3 sm:grid-cols-2">
<label class="grid gap-1.5">
<div 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">
<AdminSelectInput
v-model="form.uploadMaxFileCount"
:options="uploadFileCountSelectOptions"
label="업로드 파일 수"
select-class="admin-settings-screen__select h-10 rounded-md border-[#dce0e5] text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
width-class="w-full"
/>
</div>
<div 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>
<AdminSelectInput
v-model="form.uploadMaxTotalSize"
:options="uploadTotalSizeSelectOptions"
label="업로드 전체 용량"
select-class="admin-settings-screen__select h-10 rounded-md border-[#dce0e5] text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
width-class="w-full"
/>
</div>
</div>
</div>
</div>
@@ -2655,25 +2688,17 @@ onBeforeUnmount(() => {
: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">
<div 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>
<AdminSelectInput
:model-value="item.icon"
:options="socialIconSelectOptions"
label="SNS 아이콘"
select-class="admin-settings-screen__select h-10 rounded-md border-[#dce0e5] text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
width-class="w-full"
@update:model-value="(icon) => updateSocialLinkIcon(index, icon)"
/>
</div>
<label class="grid gap-1.5 text-sm">
<span class="font-medium text-[#3f4650]">주소</span>
<input
@@ -2876,66 +2901,56 @@ onBeforeUnmount(() => {
</p>
</div>
<div class="grid gap-3 sm:grid-cols-2">
<label class="grid gap-1.5">
<div 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">
<AdminSelectInput
v-model="form.homeLatestPostLimit"
:options="postListCountSelectOptions"
label="Latest 표시개수"
select-class="admin-settings-screen__select h-10 rounded-md border-[#dce0e5] text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
width-class="w-full"
/>
</div>
<div 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">
<AdminSelectInput
v-model="form.postListPageSize"
:options="postListCountSelectOptions"
label="Posts 표시개수"
select-class="admin-settings-screen__select h-10 rounded-md border-[#dce0e5] text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
width-class="w-full"
/>
</div>
<div 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">
<AdminSelectInput
v-model="form.tagPostListPageSize"
:options="postListCountSelectOptions"
label="태그 게시물 표시개수"
select-class="admin-settings-screen__select h-10 rounded-md border-[#dce0e5] text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
width-class="w-full"
/>
</div>
<div 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">
<AdminSelectInput
v-model="form.featuredPostLimit"
:options="displayCountSelectOptions"
label="Featured 표시개수"
select-class="admin-settings-screen__select h-10 rounded-md border-[#dce0e5] text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
width-class="w-full"
/>
</div>
<div 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>
<AdminSelectInput
v-model="form.pageSectionItemLimit"
:options="displayCountSelectOptions"
label="Pages 섹션 표시개수"
select-class="admin-settings-screen__select h-10 rounded-md border-[#dce0e5] text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
width-class="w-full"
/>
</div>
</div>
</div>
</div>
@@ -3652,63 +3667,42 @@ onBeforeUnmount(() => {
</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
<div class="grid gap-1 text-xs font-semibold text-[#5d6673]">
<span>범위</span>
<AdminSelectInput
v-model="postExportDateRangeMode"
:options="postExportDateRangeModeOptions"
label="내보내기 범위"
select-class="admin-settings-screen__export-select h-10 rounded-md border-[#dce0e5] text-sm font-semibold text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
width-class="w-full"
/>
</div>
<div
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
<span>연도</span>
<AdminSelectInput
v-model="postExportYear"
:options="postExportYearSelectOptions"
label="내보내기 연도"
select-class="admin-settings-screen__export-select h-10 rounded-md border-[#dce0e5] text-sm font-semibold text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
width-class="w-full"
/>
</div>
<div
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>
<span>월</span>
<AdminSelectInput
v-model="postExportMonth"
:options="postExportMonthSelectOptions"
label="내보내기 월"
select-class="admin-settings-screen__export-select h-10 rounded-md border-[#dce0e5] text-sm font-semibold text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
width-class="w-full"
/>
</div>
<label
v-if="postExportDateRangeMode === 'custom'"
class="grid gap-1 text-xs font-semibold text-[#5d6673]"