Organize settings home sections

docs/changelog.md

@@ -75,3 +75,5 @@
 - 거래 삭제 확인을 브라우저 기본 confirm 대신 앱 스타일의 바텀시트로 변경했다.
 - 거래 목록 API가 월간 조회뿐 아니라 연간 조회도 받을 수 있도록 확장했다.
 - 자산 상세 화면의 월 이동 위치를 헤더 아래 공통 구조로 맞추고, 일별/월별/연별 보기 전환과 전환 모션을 추가했다.
+- 로컬 개발 DB에 누락되어 있던 공유 링크와 카테고리 표시 migration을 적용하고, 빈 이체 migration 디렉터리를 제거했다.
+- 설정 홈을 계정, 가계부, 데이터 섹션으로 나누어 각 항목의 목적이 먼저 보이도록 정리했다.

pages/settings.vue

@@ -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({

todo.md

@@ -30,7 +30,6 @@
 
 ## 6. 설정
 
-- 설정 홈의 항목 구성을 다시 정리한다.
 - 주 화폐, 월 시작일, 주간 시작일 같은 기본 설정 항목을 구현한다.
 - 설정 변경이 실제 화면 계산과 표시 방식에 반영되도록 연결한다.