설정 선택 입력 공통화

docs/todo.md

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

docs/update.md

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

package-lock.json

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

package.json

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

pages/admin/settings/index.vue

@@ -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]"