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-24 10:58:32 +09:00
parent eb27d2846f
commit aa01be3688
7 changed files with 140 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
components/admin/AdminSettingsNavigation.vue Normal file
View File

@@ -0,0 +1,119 @@
<script setup>
/**
* 관리자 설정 화면 내비게이션
* @property {string} searchValue - 검색 입력 표시값
* @property {Array} filteredGroups - 검색 결과가 반영된 내비 그룹
* @property {Array} groups - 전체 내비 그룹
* @property {string} activeSectionId - 현재 활성 섹션 id
*/
defineProps({
searchValue: {
type: String,
default: ''
},
filteredGroups: {
type: Array,
default: () => []
},
groups: {
type: Array,
default: () => []
},
activeSectionId: {
type: String,
default: ''
}
})
const emit = defineEmits([
'search-input',
'search-composition-end',
'navigate'
])
/**
* 모바일 구역 선택 변경을 부모 내비게이션 요청으로 전달한다.
* @param {Event} event - change 이벤트
* @returns {void}
*/
const onMobileNavChange = (event) => {
const target = event.target
if (!(target instanceof HTMLSelectElement) || !target.value) {
return
}
emit('navigate', target.value)
}
</script>
<template>
<aside class="admin-settings-navigation 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-navigation__inner 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-navigation__search 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="searchValue"
class="admin-settings-navigation__search-input 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="$emit('search-input', $event)"
@compositionupdate="$emit('search-input', $event)"
@compositionend="$emit('search-composition-end', $event)"
>
</label>
<p
v-if="filteredGroups.length === 0"
class="admin-settings-navigation__empty 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-navigation__list admin-settings-screen__nav grid gap-5 text-sm" aria-label="설정 구역">
<template v-for="(group, gi) in filteredGroups" :key="group.heading">
<div v-if="gi > 0" class="admin-settings-navigation__separator admin-settings-screen__nav-separator h-px bg-[#dce0e5]" aria-hidden="true" />
<div class="admin-settings-navigation__group admin-settings-screen__nav-group">
<p class="admin-settings-navigation__heading 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-navigation__items admin-settings-screen__nav-list grid gap-0.5">
<li v-for="item in group.items" :key="item.id">
<button
class="admin-settings-navigation__item 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="$emit('navigate', 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-navigation__jump 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 groups" :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>
</template>

3
docs/map.md
View File

@@ -258,7 +258,8 @@
| pages/admin/tags/index.vue | 태그 관리(메인 태그 드래그 정렬 자동 저장·more vert 메뉴, 일반 태그 배지 more vert 메뉴·검색/정렬, 태그 추가 버튼), 액션 피드백 토스트 |
| pages/admin/tags/new.vue | 태그 생성 |
| pages/admin/tags/[id].vue | 태그 수정 |
| pages/admin/settings/index.vue | 사이트 설정 Ghost형 전체 화면, 카드별 필드만 PATCH하고 성공 필드만 폼에 반영하는 독립 저장, **블로그 제목·설명** 편집 상태·저장 요청·스냅샷 복원 연결, **사이트 정보** 편집 상태·저장 요청·로고 업로드 처리 연결, **SNS 정보** 편집 상태·저장 요청 연결, **POST 설정** 편집 상태·저장 요청·스냅샷 복원 연결, **메인 화면** 편집 상태·저장 요청·커버 업로드 처리 연결, **브랜드** 컬러 정규화·편집 상태·저장 요청 연결, **어나운스 바** 편집 상태·저장 요청 연결, **스팸 필터** 편집 상태·저장 요청·값 정규화 연결, **사이트 용량** 데이터 조회·새로고침 이벤트 연결, **게시물 내보내기** 요청 body 생성·작업 등록·목록 갱신·작업 액션 연결, **게시물 가져오기** 파일 검증·작업 생성 요청·작업 센터 모달 연결, 진행 중 요청 버튼 잠금 |
| pages/admin/settings/index.vue | 사이트 설정 Ghost형 전체 화면, 카드별 필드만 PATCH하고 성공 필드만 폼에 반영하는 독립 저장, 설정 검색 상태·활성 구역 계산·스크롤 이동 처리, **블로그 제목·설명** 편집 상태·저장 요청·스냅샷 복원 연결, **사이트 정보** 편집 상태·저장 요청·로고 업로드 처리 연결, **SNS 정보** 편집 상태·저장 요청 연결, **POST 설정** 편집 상태·저장 요청·스냅샷 복원 연결, **메인 화면** 편집 상태·저장 요청·커버 업로드 처리 연결, **브랜드** 컬러 정규화·편집 상태·저장 요청 연결, **어나운스 바** 편집 상태·저장 요청 연결, **스팸 필터** 편집 상태·저장 요청·값 정규화 연결, **사이트 용량** 데이터 조회·새로고침 이벤트 연결, **게시물 내보내기** 요청 body 생성·작업 등록·목록 갱신·작업 액션 연결, **게시물 가져오기** 파일 검증·작업 생성 요청·작업 센터 모달 연결, 진행 중 요청 버튼 잠금 |
| components/admin/AdminSettingsNavigation.vue | 관리자 설정 좌측 내비게이션(설정 검색 입력·검색 결과 목록·모바일 구역 선택·구역 이동 이벤트) |
| components/admin/AdminHomeCoverSettingsCard.vue | 관리자 설정 메인 화면 카드(라이트·다크 커버 미리보기·드롭존·파일 선택·오버레이 문구·저장 이벤트) |
| components/admin/AdminBrandSettingsCard.vue | 관리자 설정 브랜드 컬러 카드(읽기 미리보기·색상 입력·텍스트 입력·예시 배지·저장 이벤트) |
| components/admin/AdminTitleDescriptionSettingsCard.vue | 관리자 설정 블로그 제목·설명 카드(읽기 행·편집 입력·공개 화면 미리보기·저장 이벤트) |

2
docs/todo.md
View File

@@ -4,7 +4,7 @@
- 거대 컴포넌트 책임 분리 진행.
- `components/admin/AdminMarkdownEditor.vue`: 미디어 모달, 슬래시 명령, 히스토리·선택 복원, 라이브/소스 전환 로직을 단계적으로 composable 또는 하위 컴포넌트로 분리.
- `pages/admin/settings/index.vue`: Import 작업 센터·사이트 용량·게시물 가져오기·게시물 내보내기 요청·최근 내보내기 작업 목록·스팸 필터·브랜드·POST 설정·블로그 제목/설명·사이트 정보·SNS 정보·어나운스 바·메인 화면처럼 설정 카드별 저장·상태·검증 로직을 카드 컴포넌트 또는 composable 단위로 추가 분리.
- `pages/admin/settings/index.vue`: 설정 카드별 편집 상태·스냅샷·저장 요청 로직을 composable 단위로 추가 분리.
- `pages/admin/settings/index.vue`: 업로드 제한 셀렉트가 블로그 제목·설명 읽기 카드 안에 있으나 저장 필드는 POST 설정에 묶여 있어, 별도 업로드 제한 카드 또는 POST 설정 편집 영역으로 위치와 저장 흐름을 정리.
- `components/content/ContentMarkdownRenderer.vue`: 파싱·블록 렌더링·라이브 편집 중개·라이트박스·광고 삽입 책임을 분리.
- `components/admin/AdminPostForm.vue`: 태그 입력, 대표 이미지 선택, 발행/초안 저장 상태, 우측 설정 패널 책임을 분리.

6
docs/update.md
View File

@@ -1,5 +1,11 @@
# 업데이트 이력
## v1.11.31
- 관리자 설정 좌측 내비게이션을 `AdminSettingsNavigation` 컴포넌트로 분리.
- 설정 검색 입력·검색 결과 목록·모바일 구역 선택 렌더링 책임을 설정 화면에서 하위 컴포넌트로 이동.
- 설정 화면은 검색 상태·활성 구역 계산·스크롤 이동 처리만 담당하도록 정리.
## v1.11.30
- 관리자 설정의 메인 화면 카드를 `AdminHomeCoverSettingsCard` 컴포넌트로 분리.

4
package-lock.json generated
View File

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

2
package.json
View File

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

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

@@ -745,19 +745,6 @@ const scrollToSection = (sectionId) => {
}, 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>}
@@ -2020,75 +2007,15 @@ onBeforeUnmount(() => {
<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>
<AdminSettingsNavigation
:search-value="navSearchInput"
:filtered-groups="filteredSettingsNavGroups"
:groups="settingsNavGroups"
:active-section-id="activeSectionId"
@search-input="onNavSearchInput"
@search-composition-end="onNavSearchCompositionEnd"
@navigate="scrollToSection"
/>
<main
ref="mainScrollRef"