[개선] 거래 항목 위계 개선 및 상세 배지 헤더 이동 (#121)

* feat: 거래 항목 위계 개선 및 상세 배지 위치 조정 (#120)

* refactor: 거래 타입/금액 표시 규칙 공용 유틸로 통합

Author: sscoderati

apps/web/src/lib/format.ts

@@ -7,7 +7,7 @@ export function formatTransactionType(type: string): string {
     INCOME: '수입',
     EXPENSE: '지출',
     TRANSFER: '이체',
-    DEBT_PAYMENT: '부채상환',
+    DEBT_PAYMENT: '부채 상환',
     SAVING: '저축',
   }
   return typeMap[type] ?? type
@@ -19,8 +19,18 @@ export function getTransactionSign(type: string): '+' | '-' | '' {
   return ''
 }
 
-export function getAmountColorClass(type: string): string {
-  if (type === 'INCOME') return 'text-blue-600 dark:text-blue-400'
-  if (type === 'EXPENSE') return 'text-rose-600 dark:text-rose-400'
+export function formatSignedAmount(type: string, amount: number): string {
+  return `${getTransactionSign(type)}${formatCurrency(amount)}원`
+}
+
+export function getAmountColorClass(type: string, tone: 'default' | 'semantic' = 'default'): string {
+  if (type === 'INCOME') return tone === 'semantic' ? 'text-blue-600' : 'text-blue-600 dark:text-blue-400'
+  if (type === 'EXPENSE') return tone === 'semantic' ? 'text-destructive' : 'text-rose-600 dark:text-rose-400'
   return 'text-muted-foreground'
 }
+
+export function getTransactionBadgeClass(type: string): string {
+  if (type === 'INCOME') return 'bg-blue-100 text-blue-800'
+  if (type === 'EXPENSE') return 'bg-destructive/10 text-destructive'
+  return 'bg-muted text-muted-foreground'
+}

apps/web/src/routes/transactions.tsx

@@ -27,6 +27,12 @@ import {
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { TouchEvent as ReactTouchEvent } from 'react'
 import { apiFetch, ensureAuthenticated } from '../lib/auth'
+import {
+  formatSignedAmount,
+  formatTransactionType,
+  getAmountColorClass,
+  getTransactionBadgeClass,
+} from '../lib/format'
 import { getSelectedLedgerId } from '../lib/ledger'
 import {
   consumeOpenCreateTransactionOnce,
@@ -132,11 +138,7 @@ function resolveScheduleDate(year: number, month: number, dayOfMonth: number, on
 }
 
 function getTransactionTypeLabel(type: TxType | null) {
-  if (type === 'INCOME') return '수입'
-  if (type === 'EXPENSE') return '지출'
-  if (type === 'DEBT_PAYMENT') return '부채 상환'
-  if (type === 'SAVING') return '저축'
-  if (type === 'TRANSFER') return '이체'
+  if (type) return formatTransactionType(type)
   return '템플릿 없음'
 }
 
@@ -620,6 +622,49 @@ function TransactionsPage() {
 
   const isTransferType = (type: TxType) => type === 'TRANSFER' || type === 'DEBT_PAYMENT' || type === 'SAVING'
 
+  const getAmountToneClass = (type: TxType) => getAmountColorClass(type, 'semantic')
+
+  const getTransactionPreview = (tx: Transaction) => {
+    const isTransfer = isTransferType(tx.type)
+    const typeLabel = getTransactionTypeLabel(tx.type)
+    const memoText = tx.memo?.trim() ?? ''
+
+    const categoryLabel = tx.categoryId
+      ? (categoryNameById.get(tx.categoryId) ?? '알 수 없는 카테고리')
+      : '카테고리 없음'
+
+    const accountOutName = tx.accountOutId ? (accountNameById.get(tx.accountOutId) ?? '알 수 없는 계좌') : null
+    const accountInName = tx.accountInId ? (accountNameById.get(tx.accountInId) ?? '알 수 없는 계좌') : null
+
+    const transferAccountLabel = isTransfer
+      ? [accountOutName, accountInName].filter(Boolean).join(' → ') || null
+      : null
+
+    const primaryLabel = isTransfer
+      ? (transferAccountLabel ?? (memoText || '계좌 정보 없음'))
+      : (memoText || categoryLabel)
+
+    const secondaryParts = [typeLabel]
+    if (isTransfer) {
+      if (memoText && primaryLabel !== memoText) secondaryParts.push(`메모 ${memoText}`)
+    } else {
+      if (primaryLabel !== categoryLabel) secondaryParts.push(categoryLabel)
+      if (accountOutName) secondaryParts.push(`출금 ${accountOutName}`)
+      if (accountInName) secondaryParts.push(`입금 ${accountInName}`)
+    }
+    if (tx.isFixed) secondaryParts.push('고정')
+
+    const secondaryMeta = secondaryParts.join(' · ')
+    const amountLabel = formatSignedAmount(tx.type, Number(tx.amount))
+
+    return {
+      primaryLabel,
+      secondaryMeta,
+      amountLabel,
+      amountToneClass: getAmountToneClass(tx.type),
+    }
+  }
+
   const filteredTransactions = useMemo(() => {
     let result = transactions
 
@@ -1217,46 +1262,7 @@ function TransactionsPage() {
             <div key={date} className="space-y-2">
               <p className="text-xs font-semibold text-muted-foreground">{date}</p>
               {items.map((tx) => {
-                const isTransfer = isTransferType(tx.type)
-                const memoText = tx.memo?.trim()
-
-                const transferAccountLabel = isTransfer
-                  ? [
-                      tx.accountOutId ? accountNameById.get(tx.accountOutId) ?? '알 수 없는 계좌' : null,
-                      tx.accountInId ? accountNameById.get(tx.accountInId) ?? '알 수 없는 계좌' : null,
-                    ]
-                      .filter(Boolean)
-                      .join(' → ') || null
-                  : null
-
-                const detailText = [
-                  transferAccountLabel,
-                  !transferAccountLabel
-                    ? tx.categoryId
-                      ? (categoryNameById.get(tx.categoryId) ?? '알 수 없는 카테고리')
-                      : '카테고리 없음'
-                    : null,
-                  !isTransfer && tx.accountOutId
-                    ? `출금 ${accountNameById.get(tx.accountOutId) ?? '알 수 없는 계좌'}`
-                    : null,
-                  !isTransfer && tx.accountInId
-                    ? `입금 ${accountNameById.get(tx.accountInId) ?? '알 수 없는 계좌'}`
-                    : null,
-                  memoText ? `메모 ${memoText}` : null,
-                ]
-                  .filter(Boolean)
-                  .join(' · ')
-
-                const typeLabel =
-                  tx.type === 'INCOME'
-                    ? '수입'
-                    : tx.type === 'EXPENSE'
-                      ? '지출'
-                      : tx.type === 'DEBT_PAYMENT'
-                        ? '부채 상환'
-                        : tx.type === 'SAVING'
-                          ? '저축'
-                          : '이체'
+                const preview = getTransactionPreview(tx)
 
                 return (
                   <div
@@ -1279,19 +1285,17 @@ function TransactionsPage() {
                     >
                       <button
                         type="button"
-                        className="flex flex-1 flex-col items-start gap-1 text-left focus-visible:outline-none"
+                        className="flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left focus-visible:outline-none"
                         onClick={() => { setSwipedTxId(null); setDetailTransaction(tx) }}
                       >
-                        <p className="text-sm font-medium">{typeLabel}</p>
-                        <p className="text-xs text-muted-foreground">{detailText}</p>
+                        <p className="w-full truncate text-sm font-medium text-foreground">{preview.primaryLabel}</p>
+                        <p className="w-full truncate text-xs text-muted-foreground">{preview.secondaryMeta}</p>
                       </button>
                       <div className="flex items-center gap-1">
                         <span
-                          className={`text-sm font-semibold ${
-                            isTransfer ? 'text-foreground' : tx.type === 'INCOME' ? 'text-blue-600' : 'text-foreground'
-                          }`}
+                          className={`shrink-0 text-sm font-semibold tabular-nums ${preview.amountToneClass}`}
                         >
-                          {isTransfer ? '' : tx.type === 'INCOME' ? '+' : '-'}{Number(tx.amount).toLocaleString()}원
+                          {preview.amountLabel}
                         </span>
                         {/* 데스크톱 호버 삭제 아이콘 */}
                         <button
@@ -1351,35 +1355,7 @@ function TransactionsPage() {
           ) : (
             <div className="mb-4 max-h-[45dvh] space-y-2 overflow-y-auto pr-1">
               {selectedDateTransactions.map((tx) => {
-                const isTransfer = isTransferType(tx.type)
-                const transferAccountLabel = isTransfer
-                  ? [
-                      tx.accountOutId ? accountNameById.get(tx.accountOutId) ?? '알 수 없는 계좌' : null,
-                      tx.accountInId ? accountNameById.get(tx.accountInId) ?? '알 수 없는 계좌' : null,
-                    ]
-                      .filter(Boolean)
-                      .join(' → ') || null
-                  : null
-                const memoText = tx.memo?.trim()
-                const detailText = [
-                  transferAccountLabel,
-                  !transferAccountLabel
-                    ? tx.categoryId
-                      ? (categoryNameById.get(tx.categoryId) ?? '알 수 없는 카테고리')
-                      : '카테고리 없음'
-                    : null,
-                  memoText ? `메모 ${memoText}` : null,
-                ]
-                  .filter(Boolean)
-                  .join(' · ')
-                const amountLabel = isTransfer
-                  ? `${Number(tx.amount).toLocaleString()}원`
-                  : `${tx.type === 'INCOME' ? '+' : '-'}${Number(tx.amount).toLocaleString()}원`
-                const amountClass = isTransfer
-                  ? 'text-foreground'
-                  : tx.type === 'INCOME'
-                    ? 'text-blue-600'
-                    : 'text-foreground'
+                const preview = getTransactionPreview(tx)
 
                 return (
                   <button
@@ -1391,21 +1367,13 @@ function TransactionsPage() {
                     }}
                     className="flex w-full items-center justify-between rounded-md border px-3 py-2 text-left transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                   >
-                    <div className="space-y-1">
-                      <p className="text-sm font-medium">
-                        {tx.type === 'INCOME'
-                          ? '수입'
-                          : tx.type === 'EXPENSE'
-                            ? '지출'
-                            : tx.type === 'DEBT_PAYMENT'
-                              ? '부채 상환'
-                              : tx.type === 'SAVING'
-                                ? '저축'
-                                : '이체'}
-                      </p>
-                      <p className="text-xs text-muted-foreground">{detailText}</p>
+                    <div className="min-w-0 space-y-0.5">
+                      <p className="truncate text-sm font-medium text-foreground">{preview.primaryLabel}</p>
+                      <p className="truncate text-xs text-muted-foreground">{preview.secondaryMeta}</p>
                     </div>
-                    <span className={`text-sm font-semibold ${amountClass}`}>{amountLabel}</span>
+                    <span className={`shrink-0 text-sm font-semibold tabular-nums ${preview.amountToneClass}`}>
+                      {preview.amountLabel}
+                    </span>
                   </button>
                 )
               })}
@@ -1669,19 +1637,8 @@ function TransactionsPage() {
 
       {detailTransaction ? (() => {
         const tx = detailTransaction
-        const isTransfer = isTransferType(tx.type)
-        const typeLabel =
-          tx.type === 'INCOME' ? '수입'
-            : tx.type === 'EXPENSE' ? '지출'
-            : tx.type === 'DEBT_PAYMENT' ? '부채 상환'
-            : tx.type === 'SAVING' ? '저축'
-            : '이체'
-        const typeBadgeClass =
-          tx.type === 'INCOME'
-            ? 'bg-blue-100 text-blue-800'
-            : tx.type === 'EXPENSE'
-              ? 'bg-rose-100 text-rose-800'
-              : 'bg-blue-100 text-blue-800'
+        const typeLabel = getTransactionTypeLabel(tx.type)
+        const typeBadgeClass = getTransactionBadgeClass(tx.type)
 
         const hasCategoriesLoaded = categoryNameById.size > 0
         const categoryName = tx.categoryId
@@ -1702,27 +1659,27 @@ function TransactionsPage() {
             >
               <SheetDragHandle />
               <SheetHeader className="mb-4 p-0">
-                <SheetTitle className="text-left">거래 상세</SheetTitle>
-              </SheetHeader>
-
-              <div className="space-y-3">
-                <div className="flex items-center justify-between">
+                <div className="flex items-center justify-between gap-2">
+                  <SheetTitle className="text-left">거래 상세</SheetTitle>
                   <span className={`inline-block rounded-full px-2.5 py-1 text-xs font-medium ${typeBadgeClass}`}>
                     {typeLabel}
                   </span>
-                  {tx.isFixed ? (
+                </div>
+              </SheetHeader>
+
+              <div className="space-y-3">
+                {tx.isFixed ? (
+                  <div className="flex justify-end">
                     <span className="flex items-center gap-1 text-xs text-muted-foreground">
                       <Pin className="size-3" /> 고정
                     </span>
-                  ) : null}
-                </div>
+                  </div>
+                ) : null}
 
                 <div className="flex items-baseline justify-between">
                   <span className="text-sm text-muted-foreground">금액</span>
-                  <span className={`text-lg font-bold ${
-                    isTransfer ? 'text-foreground' : tx.type === 'INCOME' ? 'text-blue-600' : 'text-foreground'
-                  }`}>
-                    {isTransfer ? '' : tx.type === 'INCOME' ? '+' : '-'}{Number(tx.amount).toLocaleString()}원
+                  <span className={`text-lg font-bold ${getAmountToneClass(tx.type)}`}>
+                    {formatSignedAmount(tx.type, Number(tx.amount))}
                   </span>
                 </div>
 

memories/task.md

@@ -237,6 +237,7 @@
   - 빈 상태 처리
 - **의존성:** 1-8, 1-13
 - **진행 메모 (2026-03-29):** 이슈 #37 기준 달력 뷰 구현 완료. 월 달력 그리드(모바일 도트/데스크톱 금액), 날짜 탭 슬라이드업(해당 날짜 거래 목록), 주간 합계, 월 수입/지출/순수입, 회계기준일 안내, 빈 날짜 표시까지 반영. 거래 목록의 검색 인라인 확장 기능은 미구현 상태.
+- **진행 메모 (2026-04-01):** 이슈 #120 기준 거래 항목 위계를 개선. 목록/달력 날짜 시트의 1행을 `type`에서 `primary summary(메모→카테고리/이체 계좌 경로 fallback)`로 전환하고, 2행에 `type + 보조 메타`를 배치했다. 금액 톤은 `수입=blue`, `지출=destructive`, `이체=muted`로 분리하고 `tabular-nums`를 적용해 가독성을 높였다.
 
 ### [1-17] 거래 상세 모달
 - **상태:** 완료