[기능추가] [4-6][4-7] 설정 기본/모바일 네비게이션 UI (#116)

sscoderati · web-flow · commit 189ec78a82ec · 2026-03-31T19:08:34.000+09:00
* 설정 기본 설정 UI 추가

* 설정 모바일 하위 화면 뒤로가기 헤더 추가

* 리뷰 반영: 기본 설정 goal null 처리
diff --git a/apps/web/src/routes/settings.tsx b/apps/web/src/routes/settings.tsx
@@ -11,11 +11,12 @@ import {
 } from '@dnd-kit/core'
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
+import { showSuccessSnackbar } from '@repo/ui/components/ui/snackbar'
 import { apiFetch, ensureAuthenticated, logout, markSkipLoginRefreshOnce } from '../lib/auth'
 import { clearSelectedLedgerId, getSelectedLedgerId } from '../lib/ledger'
 import { getThemeMode, setThemeMode, type ThemeMode } from '../lib/theme'
 
-type SettingsSection = 'CATEGORY' | 'ACCOUNT' | 'BUDGET' | 'SCHEDULE' | 'INSTALLMENT' | 'APP'
+type SettingsSection = 'CATEGORY' | 'ACCOUNT' | 'BUDGET' | 'SCHEDULE' | 'INSTALLMENT' | 'BASIC' | 'APP'
 type CategoryType = 'INCOME' | 'EXPENSE'
 type AccountType = 'ASSET' | 'LIABILITY'
 type ScheduleWeekend = 'FORWARD' | 'BACKWARD'
@@ -91,13 +92,27 @@ type Installment = {
   }
 }
 
+type LedgerDetail = {
+  id: number
+  bookName: string
+  goal: string | null
+  fiscalStartDay: number
+}
+
 type WrappedResponse<T> =
   | T[]
   | {
       success?: boolean
       data?: T[]
     }
 
+type WrappedSingleResponse<T> =
+  | T
+  | {
+      success?: boolean
+      data?: T
+    }
+
 async function ensureAuthenticatedAndLedgerSelected() {
   const isAuthenticated = await ensureAuthenticated()
 
@@ -178,9 +193,15 @@ function SettingsPage() {
   }
 
   const [section, setSection] = useState<SettingsSection>('CATEGORY')
+  const [isMobileDetailOpen, setIsMobileDetailOpen] = useState(false)
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
   const [themeMode, setThemeModeState] = useState<ThemeMode>('system')
   const [isLoggingOut, setIsLoggingOut] = useState(false)
+  const [basicLoading, setBasicLoading] = useState(false)
+  const [basicSubmitting, setBasicSubmitting] = useState(false)
+  const [basicBookName, setBasicBookName] = useState('')
+  const [basicGoal, setBasicGoal] = useState('')
+  const [basicFiscalStartDay, setBasicFiscalStartDay] = useState('1')
 
   // category states
   const [categoryType, setCategoryType] = useState<CategoryType>('EXPENSE')
@@ -334,6 +355,80 @@ function SettingsPage() {
     }
   }
 
+  const fetchBasicSettings = async () => {
+    if (!ledgerId) return
+
+    setBasicLoading(true)
+    setErrorMessage(null)
+
+    try {
+      const response = await apiFetch(`/api/ledgers/${ledgerId}`)
+      if (!response.ok) throw new Error(await getApiErrorMessage(response, '기본 설정 조회 실패'))
+
+      const payload = (await response.json()) as WrappedSingleResponse<LedgerDetail>
+      const ledger = (payload && typeof payload === 'object' && 'data' in payload
+        ? payload.data
+        : payload) as LedgerDetail | undefined
+
+      if (!ledger) {
+        throw new Error('기본 설정 데이터를 확인할 수 없습니다.')
+      }
+
+      setBasicBookName(ledger.bookName)
+      setBasicGoal(ledger.goal ?? '')
+      setBasicFiscalStartDay(String(ledger.fiscalStartDay))
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : '기본 설정 조회 중 오류가 발생했습니다.')
+    } finally {
+      setBasicLoading(false)
+    }
+  }
+
+  const updateBasicSettings = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    if (!ledgerId) return
+
+    const bookName = basicBookName.trim()
+    if (!bookName) {
+      setErrorMessage('가계부 이름을 입력해주세요.')
+      return
+    }
+
+    const fiscalStartDay = Number(basicFiscalStartDay)
+    if (!Number.isInteger(fiscalStartDay) || fiscalStartDay < 1 || fiscalStartDay > 28) {
+      setErrorMessage('회계기준일은 1~28 사이의 정수여야 합니다.')
+      return
+    }
+
+    setBasicSubmitting(true)
+    setErrorMessage(null)
+
+    try {
+      const goal = basicGoal.trim()
+      const payload: { bookName: string; fiscalStartDay: number; goal: string | null } = {
+        bookName,
+        fiscalStartDay,
+        goal: goal === '' ? null : goal,
+      }
+
+      const response = await apiFetch(`/api/ledgers/${ledgerId}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      })
+      if (!response.ok) throw new Error(await getApiErrorMessage(response, '기본 설정 저장 실패'))
+
+      showSuccessSnackbar('기본 설정이 저장되었습니다.', {
+        description: '가계부 이름, 목표, 회계기준일이 업데이트되었어요.',
+      })
+      await fetchBasicSettings()
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : '기본 설정 저장 중 오류가 발생했습니다.')
+    } finally {
+      setBasicSubmitting(false)
+    }
+  }
+
   useEffect(() => {
     void fetchCategories()
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -363,6 +458,12 @@ function SettingsPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [section, ledgerId])
 
+  useEffect(() => {
+    if (section !== 'BASIC') return
+    void fetchBasicSettings()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [section, ledgerId])
+
   useEffect(() => {
     setThemeModeState(getThemeMode())
   }, [])
@@ -436,6 +537,16 @@ function SettingsPage() {
     { value: 'light', label: '라이트', description: '항상 밝은 테마를 사용합니다.' },
     { value: 'dark', label: '다크', description: '항상 어두운 테마를 사용합니다.' },
   ]
+  const settingSectionItems: Array<{ key: SettingsSection; label: string }> = [
+    { key: 'CATEGORY', label: '카테고리' },
+    { key: 'ACCOUNT', label: '계좌' },
+    { key: 'BUDGET', label: '예산' },
+    { key: 'SCHEDULE', label: '반복 일정' },
+    { key: 'INSTALLMENT', label: '할부' },
+    { key: 'BASIC', label: '기본 설정' },
+    { key: 'APP', label: '앱 설정' },
+  ]
+  const currentSectionLabel = settingSectionItems.find((item) => item.key === section)?.label ?? '설정'
 
   const scheduleCategoryNameMap = useMemo(
     () => new Map<number, string>(categories.map((category) => [category.id, category.minor])),
@@ -1294,20 +1405,34 @@ function SettingsPage() {
       <div className="space-y-2">
         <h1 className="text-2xl font-bold">설정</h1>
         <p className="text-sm text-muted-foreground">
-          카테고리, 계좌, 예산, 반복 일정, 할부, 앱 설정을 관리할 수 있습니다.
+          카테고리, 계좌, 예산, 반복 일정, 할부, 기본 설정, 앱 설정을 관리할 수 있습니다.
         </p>
       </div>
 
-      <section className="rounded-xl border bg-card p-4 shadow-sm">
-        <div className="flex gap-2">
-          {([
-            { key: 'CATEGORY', label: '카테고리' },
-            { key: 'ACCOUNT', label: '계좌' },
-            { key: 'BUDGET', label: '예산' },
-            { key: 'SCHEDULE', label: '반복 일정' },
-            { key: 'INSTALLMENT', label: '할부' },
-            { key: 'APP', label: '앱 설정' },
-          ] as const).map((item) => (
+      {!isMobileDetailOpen ? (
+        <section className="rounded-xl border bg-card p-4 shadow-sm md:hidden">
+          <div className="space-y-2">
+            {settingSectionItems.map((item) => (
+              <button
+                key={item.key}
+                type="button"
+                className="flex w-full items-center justify-between rounded-md border bg-background px-3 py-3 text-left text-sm font-medium hover:bg-accent"
+                onClick={() => {
+                  setSection(item.key)
+                  setIsMobileDetailOpen(true)
+                }}
+              >
+                <span>{item.label}</span>
+                <span className="text-muted-foreground">›</span>
+              </button>
+            ))}
+          </div>
+        </section>
+      ) : null}
+
+      <section className="hidden rounded-xl border bg-card p-4 shadow-sm md:block">
+        <div className="flex flex-wrap gap-2">
+          {settingSectionItems.map((item) => (
             <button
               key={item.key}
               type="button"
@@ -1324,9 +1449,26 @@ function SettingsPage() {
         </div>
       </section>
 
-      {errorMessage ? <p className="text-sm text-destructive">{errorMessage}</p> : null}
+      {isMobileDetailOpen ? (
+        <section className="rounded-xl border bg-card p-3 shadow-sm md:hidden">
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              className="inline-flex min-h-11 min-w-11 items-center justify-center rounded-md border bg-background text-lg leading-none hover:bg-accent"
+              onClick={() => setIsMobileDetailOpen(false)}
+              aria-label="설정 메인으로 돌아가기"
+            >
+              ←
+            </button>
+            <h2 className="text-base font-semibold">{currentSectionLabel}</h2>
+          </div>
+        </section>
+      ) : null}
+
+      <div className={isMobileDetailOpen ? '' : 'hidden md:block'}>
+        {errorMessage ? <p className="text-sm text-destructive">{errorMessage}</p> : null}
 
-      {section === 'BUDGET' ? (
+        {section === 'BUDGET' ? (
         <>
           {/* 월 선택 헤더 */}
           <section className="rounded-xl border bg-card p-4 shadow-sm">
@@ -2056,6 +2198,66 @@ function SettingsPage() {
             )}
           </section>
         </>
+      ) : section === 'BASIC' ? (
+        <>
+          <section className="rounded-xl border bg-card p-4 shadow-sm">
+            {basicLoading ? (
+              <p className="text-sm text-muted-foreground">기본 설정 불러오는 중...</p>
+            ) : (
+              <form className="grid gap-3 md:grid-cols-2" onSubmit={updateBasicSettings}>
+                <label className="md:col-span-2 flex flex-col gap-1 text-sm">
+                  <span className="text-xs text-muted-foreground">가계부 이름</span>
+                  <input
+                    className="rounded-md border bg-background px-3 py-2 text-sm"
+                    value={basicBookName}
+                    onChange={(event) => setBasicBookName(event.target.value)}
+                    placeholder="예: 우리집 가계부"
+                    maxLength={100}
+                  />
+                </label>
+
+                <label className="md:col-span-2 flex flex-col gap-1 text-sm">
+                  <span className="text-xs text-muted-foreground">목표 문구</span>
+                  <input
+                    className="rounded-md border bg-background px-3 py-2 text-sm"
+                    value={basicGoal}
+                    onChange={(event) => setBasicGoal(event.target.value)}
+                    placeholder="예: 월 50만원 저축"
+                    maxLength={200}
+                  />
+                </label>
+
+                <label className="flex flex-col gap-1 text-sm">
+                  <span className="text-xs text-muted-foreground">회계기준일 (1~28)</span>
+                  <input
+                    className="rounded-md border bg-background px-3 py-2 text-sm"
+                    type="number"
+                    min={1}
+                    max={28}
+                    step={1}
+                    value={basicFiscalStartDay}
+                    onChange={(event) => setBasicFiscalStartDay(event.target.value)}
+                    placeholder="1"
+                  />
+                </label>
+
+                <p className="flex items-end text-xs text-muted-foreground">
+                  예: 25일로 설정하면 매월 25일 ~ 다음 달 24일을 한 달로 집계합니다.
+                </p>
+
+                <div className="md:col-span-2">
+                  <button
+                    type="submit"
+                    className="rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground disabled:opacity-60"
+                    disabled={basicSubmitting || !basicBookName.trim()}
+                  >
+                    {basicSubmitting ? '저장 중...' : '기본 설정 저장'}
+                  </button>
+                </div>
+              </form>
+            )}
+          </section>
+        </>
       ) : section === 'APP' ? (
         <>
           <section className="rounded-xl border bg-card p-4 shadow-sm">
@@ -2249,6 +2451,7 @@ function SettingsPage() {
           </section>
         </>
       )}
+      </div>
     </div>
   )
 }
diff --git a/memories/task.md b/memories/task.md
@@ -557,25 +557,27 @@
 - **의존성:** 1-7
 
 ### [4-6] 설정 — 기본 설정 UI
-- **상태:** 대기
+- **상태:** 완료
 - **범위:** `apps/web`
 - **설명:** 설정 > 기본 설정 하위 화면. 가계부 이름, 목표 문구, 회계기준일(1~28) 수정 폼. PATCH API 호출.
+- **진행 메모 (2026-03-31):** `apps/web/src/routes/settings.tsx`에 `기본 설정` 섹션을 추가해 `GET /api/ledgers/:ledgerId`로 현재 값을 로드하고 `PATCH /api/ledgers/:ledgerId`로 저장하도록 연결. 회계기준일은 프론트에서 1~28 범위를 검증하고, 저장 성공 시 성공 스낵바를 노출하도록 반영.
 - **참조:** screen-design §6-11, db-schema §2
 - **완료 조건:**
-  - 가계부 이름·목표·회계기준일 수정 동작
-  - 회계기준일 1~28 범위 검증
-  - 저장 시 성공 스낵바
+  - 가계부 이름·목표·회계기준일 수정 동작 ✓
+  - 회계기준일 1~28 범위 검증 ✓
+  - 저장 시 성공 스낵바 ✓
 - **의존성:** 1-5, 1-8
 
 ### [4-7] 설정 하위 화면 뒤로가기 헤더
-- **상태:** 대기
+- **상태:** 완료
 - **범위:** `apps/web`
 - **설명:** 모바일에서 설정 하위 화면(카테고리, 계좌, 반복 일정, 예산, 할부, 기본 설정, 앱 설정) 진입 시 상단에 ← 아이콘 + 화면명 헤더 표시. 데스크톱에서는 마스터-디테일 레이아웃이므로 미적용.
+- **진행 메모 (2026-03-31):** `apps/web/src/routes/settings.tsx`에 모바일 전용 설정 메인 메뉴(리스트)와 하위 화면 상태를 추가하고, 하위 화면 진입 시 ← 버튼 + 화면명 헤더를 노출하도록 반영. 뒤로가기 버튼으로 모바일 설정 메인으로 복귀되며, 데스크톱(`md`)에서는 기존 섹션 탭과 콘텐츠만 노출되도록 분기했다.
 - **참조:** screen-design §2 설정, §6-11
 - **완료 조건:**
-  - 모바일에서 모든 설정 하위 화면에 뒤로가기 헤더 표시
-  - ← 탭 시 설정 메인으로 복귀
-  - 데스크톱에서는 뒤로가기 헤더 미노출
+  - 모바일에서 모든 설정 하위 화면에 뒤로가기 헤더 표시 ✓
+  - ← 탭 시 설정 메인으로 복귀 ✓
+  - 데스크톱에서는 뒤로가기 헤더 미노출 ✓
 - **의존성:** 1-7
 
 ### [4-8] 모바일 반응형 최적화
