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

Organize settings home sections

Browse Source
This commit is contained in:
zenn
2026-08-14 12:35:12 +09:00
parent 053ca55a42
commit c8103cc4d6
3 changed files with 58 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
pages/settings.vue
View File

@@ -25,36 +25,49 @@
</button>
</header>
<div v-if="view === 'home'">
<div class="border-b border-line bg-paper px-4 py-3 text-xs font-semibold text-muted">관리</div>
<div class="divide-y divide-line bg-white">
<button
v-for="item in menuItems"
:key="item.id"
type="button"
class="flex w-full items-center justify-between px-4 py-4 text-left active:bg-paper"
@click="open(item.id)"
>
<span>
<span class="block text-base font-semibold text-ink">{{ item.label }}</span>
<span class="mt-1 block text-xs text-muted">{{ item.description }}</span>
</span>
<img class="h-6 w-6 opacity-60" src="~/assets/icons/keyboard_arrow_right.svg" alt="">
</button>
</div>
<div v-if="view === 'home'" class="md:grid md:grid-cols-2 md:gap-4 md:p-5 xl:grid-cols-3">
<section
v-for="section in menuSections"
:key="section.id"
class="md:overflow-hidden md:rounded-md md:border md:border-line md:bg-white md:shadow-sm"
>
<div class="border-b border-line bg-paper px-4 py-3 md:bg-white">
<h2 class="text-sm font-bold text-ink">{{ section.title }}</h2>
<p class="mt-1 text-xs font-semibold text-muted">{{ section.description }}</p>
</div>
<div class="divide-y divide-line bg-white">
<button
v-for="item in section.items"
:key="item.id"
type="button"
class="flex w-full items-center justify-between gap-3 px-4 py-4 text-left active:bg-paper"
@click="open(item.id)"
>
<span class="min-w-0">
<span class="block text-sm font-bold text-ink">{{ item.label }}</span>
<span class="mt-1 block text-xs font-semibold text-muted">{{ item.description }}</span>
</span>
<img class="h-6 w-6 shrink-0 opacity-60" src="~/assets/icons/keyboard_arrow_right.svg" alt="">
</button>
</div>
</section>
<div class="mt-3 border-y border-line bg-white">
<section class="mt-3 border-y border-line bg-white md:mt-0 md:overflow-hidden md:rounded-md md:border md:border-line md:shadow-sm">
<div class="border-b border-line bg-paper px-4 py-3 md:bg-white">
<h2 class="text-sm font-bold text-ink">데이터</h2>
<p class="mt-1 text-xs font-semibold text-muted">백업과 외부 확인용 기능입니다.</p>
</div>
<a
class="flex items-center justify-between px-4 py-4 active:bg-paper"
class="flex items-center justify-between gap-3 px-4 py-4 active:bg-paper"
href="/api/export/transactions.csv"
>
<span>
<span class="block text-base font-semibold text-ink">CSV 내보내기</span>
<span class="mt-1 block text-xs text-muted">전체 거래 데이터를 파일로 저장합니다.</span>
<span class="min-w-0">
<span class="block text-sm font-bold text-ink">CSV 내보내기</span>
<span class="mt-1 block text-xs font-semibold text-muted">전체 거래 데이터를 파일로 저장합니다.</span>
</span>
<span class="text-xl text-muted">↓</span>
<span class="shrink-0 text-xl text-muted">↓</span>
</a>
</div>
</section>
</div>
<div v-else-if="view === 'account'" class="px-4 py-4">
@@ -415,11 +428,25 @@ const { data: assetData, refresh: refreshAssets } = await useFetch('/api/assets'
const { data: categoryData, refresh: refreshCategories } = await useFetch('/api/categories')
const { data: shareLinkData, refresh: refreshShareLinks } = await useFetch('/api/share-links')
const menuItems = [
{ id: 'account', label: '계정 관리', description: '로그인 계정 확인과 로그아웃' },
{ id: 'sharing', label: '공유 링크 관리', description: '읽기 전용 공유 링크 생성과 삭제' },
{ id: 'assets', label: '자산 관리', description: '자산 추가, 수정, 삭제' },
{ id: 'categories', label: '카테고리 관리', description: '수입/지출 상위 분류와 하위 분류' }
const menuSections = [
{
id: 'account',
title: '계정',
description: '로그인 정보와 공유 권한을 관리합니다.',
items: [
{ id: 'account', label: '계정 관리', description: '이름, 비밀번호, 로그아웃' },
{ id: 'sharing', label: '공유 링크 관리', description: '읽기 전용 링크 생성과 삭제' }
]
},
{
id: 'money',
title: '가계부',
description: '입력할 때 사용하는 기본 항목입니다.',
items: [
{ id: 'assets', label: '자산 관리', description: '자산 추가, 수정, 삭제' },
{ id: 'categories', label: '카테고리 관리', description: '수입/지출 상위 분류와 하위 분류' }
]
}
] as const
const assetForm = reactive({