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

3
docs/todo.md
View File

@@ -8,8 +8,6 @@
- `components/content/ContentMarkdownRenderer.vue`: 파싱·블록 렌더링·라이브 편집 중개·라이트박스·광고 삽입 책임을 분리. - `components/content/ContentMarkdownRenderer.vue`: 파싱·블록 렌더링·라이브 편집 중개·라이트박스·광고 삽입 책임을 분리.
- `components/admin/AdminPostForm.vue`: 태그 입력, 대표 이미지 선택, 발행/초안 저장 상태, 우측 설정 패널 책임을 분리. - `components/admin/AdminPostForm.vue`: 태그 입력, 대표 이미지 선택, 발행/초안 저장 상태, 우측 설정 패널 책임을 분리.
- `pages/admin/media/index.vue`: 미디어 목록, 폴더 트리, 상세 모달, 재생성 액션을 작은 단위로 분리. - `pages/admin/media/index.vue`: 미디어 목록, 폴더 트리, 상세 모달, 재생성 액션을 작은 단위로 분리.
- 관리자 UI 공통 컴포넌트 정리.
- 설정 화면 select 입력의 공통 컴포넌트 적용 범위 검토.
- 최근 브라우저 회귀 테스트 추가. - 최근 브라우저 회귀 테스트 추가.
- 태그 추천 선택 후 다음 태그 후보가 포커스 해제 없이 유지되는지 확인. - 태그 추천 선택 후 다음 태그 후보가 포커스 해제 없이 유지되는지 확인.
- 관리자 미디어 대표 이미지/본문 이미지 탭 전환 중 역할 배지가 노출되지 않는지 확인. - 관리자 미디어 대표 이미지/본문 이미지 탭 전환 중 역할 배지가 노출되지 않는지 확인.
@@ -24,7 +22,6 @@
## 1차 관리자 개발 ## 1차 관리자 개발
## 2차 관리자 개발 ## 2차 관리자 개발
## 프론트엔드 개발 ## 프론트엔드 개발

5
docs/update.md
View File

@@ -1,5 +1,10 @@
# 업데이트 이력 # 업데이트 이력
## v1.11.15
- 관리자 설정 화면의 업로드 제한·SNS 아이콘·공개 표시개수·게시물 내보내기 범위 select를 공용 `AdminSelectInput`으로 정리.
- 설정 화면 select 옵션을 `{ value, label }` 구조로 모아 반복 마크업과 chevron SVG 중복 제거.
## v1.11.14 ## v1.11.14
- 관리자 멤버 고급 필터의 필드·조건·상태 선택 입력을 공용 `AdminSelectInput` 기준으로 정리. - 관리자 멤버 고급 필터의 필드·조건·상태 선택 입력을 공용 `AdminSelectInput` 기준으로 정리.

4
package-lock.json generated
View File

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

2
package.json
View File

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

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

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