[feat] 분야별 내역 페이지 UI 구현

src/components/common/BottomSheet.tsx

@@ -13,23 +13,28 @@ const BottomSheet = ({ isOpen, onClose, title, children }: BottomSheetProps) =>
     <AnimatePresence>
       {isOpen && (
         <>
+          {/* 1. 배경(Dimmer): MobileLayout의 너비에 맞추고 중앙 정렬 */}
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             onClick={onClose}
-            className="fixed inset-0 z-[100] bg-black/40"
-          />          <motion.div
-            initial={{ y: '100%' }}
-            animate={{ y: 0 }}
-            exit={{ y: '100%' }}
+            className="fixed inset-0 z-[100] bg-black/40 w-full max-w-[360px] mx-auto left-0 right-0"
+          />
+
+          {/* 2. 시트 본체: MobileLayout 하단에 딱 붙도록 설정 */}
+          <motion.div
+            initial={{ y: '100%', x: '-50%' }} // x: '-50%'는 중앙 정렬을 위해 필요해요!
+            animate={{ y: 0, x: '-50%' }}
+            exit={{ y: '100%', x: '-50%' }}
             transition={{ type: 'spring', damping: 25, stiffness: 200 }}
-            className="fixed bottom-0 left-0 right-0 z-[101] rounded-t-3xl bg-white px-8 pb-10 pt-12 shadow-2xl"
+            // 💡 left-1/2와 max-w-[360px]가 핵심입니다! ㅋ
+            className="fixed bottom-0 left-1/2 z-[101] w-full max-w-[360px] rounded-t-3xl bg-white px-8 pb-10 pt-12 shadow-2xl"
           >
             <div className="absolute left-1/2 top-4 h-1.5 w-12 -translate-x-1/2 rounded-full bg-gray-200" />
-            
+
             {title && <h2 className="mb-8 text-2xl font-bold text-gray-900">{title}</h2>}
-            
+
             {children}
           </motion.div>
         </>

src/components/skeleton/Skeleton.tsx

@@ -0,0 +1,5 @@
+import { cn } from '@/utils/cn';
+
+export const Skeleton = ({ className }: { className?: string }) => {
+  return <div className={cn('animate-pulse bg-neutral-10 rounded', className)} />;
+};

src/features/asset/constants/AssetSectionLayout.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { cn } from '@/utils/cn';
+
+interface AssetSectionLayoutProps {
+  children: ReactNode;
+  className?: string;
+  /** 하단 회색 구분선(8px) 표시 여부 (기본값: true) */
+  showDivider?: boolean;
+}
+
+export const AssetSectionLayout = ({ children, className, showDivider = true }: AssetSectionLayoutProps) => {
+  return (
+    <section className={cn('px-5 py-8 bg-white', showDivider && 'border-b-[8px] border-neutral-5', className)}>
+      {children}
+    </section>
+  );
+};

src/features/asset/constants/account.ts

@@ -32,4 +32,4 @@ export interface TransactionGroup {
   totalIncome: number;
   totalExpense: number;
   items: TransactionItem[];
-}
+}

src/features/asset/constants/category.ts

@@ -1,20 +1,47 @@
 import WIcon from '@/assets/icons/asset/W.svg';
 import LeisureIcon from '@/assets/icons/asset/Leisure.svg';
 import TrafficIcon from '@/assets/icons/asset/Traffic.svg';
-import FoodIcon from '@/assets/icons/asset/Food.svg';
+//import FoodIcon from '@/assets/icons/asset/Food.svg';
 import ShoppingIcon from '@/assets/icons/asset/Shopping.svg';
+import MedicalIcon from '@/assets/icons/asset/Medical.svg';
+import DishIcon from '@/assets/icons/asset/Dish.svg';
+import ShoppingBag from '@/assets/icons/asset/Shopping-Bag.svg';
+import LivingIcon from '@/assets/icons/asset/Living.svg';
+import CafeIcon from '@/assets/icons/asset/Cafe.svg';
 import DefaultIcon from '@/assets/icons/asset/Default.svg';
+import OthersIcon from '@/assets/icons/asset/Others.svg';
 
 export interface CategoryStyle {
   bgColor: string;
+  barColor: string;
   icon: string;
 }
 
-export const CATEGORY_STYLES: Record<string, CategoryStyle> = {
-  transfer: { bgColor: 'bg-atomic-yellow-90', icon: WIcon }, // 이체
-  shopping: { bgColor: 'bg-atomic-light-blue-90', icon: ShoppingIcon }, // 쇼핑
-  traffic: { bgColor: 'bg-atomic-red-90', icon: TrafficIcon }, // 교통
-  food: { bgColor: 'bg-atomic-yellow-90', icon: FoodIcon }, // 음식
-  leisure: { bgColor: 'bg-neutral-10', icon: LeisureIcon }, // 여가
-  default: { bgColor: 'bg-neutral-30', icon: DefaultIcon }, // 기본값
+// 💡 새로 추가할 한글 라벨 정의
+export const CATEGORY_LABELS: Record<string, string> = {
+  transfer: '이체',
+  traffic: '교통 · 자동차',
+  shopping: '쇼핑',
+  food: '식비',
+  leisure: '취미 · 여가',
+  medical: '의료 · 건강',
+  market: '편의점 · 마트 · 잡화',
+  living: '주거 · 통신',
+  cafe: '카페 · 디저트',
+  others: '그외', // 상세 페이지에서도 쓰이니 추가해두면 좋아요
+  default: '카테고리 없음',
 };
+
+export const CATEGORY_STYLES: Record<string, CategoryStyle> = {
+  transfer: { bgColor: 'bg-atomic-yellow-90', barColor: 'bg-atomic-yellow-50', icon: WIcon }, // 이체
+  shopping: { bgColor: 'bg-atomic-orange-90', barColor: 'bg-atomic-orange-50', icon: ShoppingBag }, // 쇼핑
+  traffic: { bgColor: 'bg-atomic-red-90', barColor: 'bg-atomic-red-50', icon: TrafficIcon }, // 교통
+  food: { bgColor: 'bg-atomic-blue-90', barColor: 'bg-atomic-blue-50', icon: DishIcon }, // 음식
+  leisure: { bgColor: 'bg-neutral-10', barColor: 'bg-neutral-30', icon: LeisureIcon }, // 여가
+  default: { bgColor: 'bg-neutral-30', barColor: 'bg-neutral-50', icon: DefaultIcon }, // 기본값
+  medical: { bgColor: 'bg-neutral-40', barColor: 'bg-neutral-60', icon: MedicalIcon }, // 의료
+  market: { bgColor: 'bg-atomic-light-blue-90', barColor: 'bg-atomic-light-blue-50', icon: ShoppingIcon }, // 마켓
+  living: { bgColor: 'bg-atomic-purple-90', barColor: 'bg-atomic-purple-50', icon: LivingIcon }, // 주거
+  cafe: { bgColor: 'bg-atomic-green-90', barColor: 'bg-atomic-green-50', icon: CafeIcon }, // 카페
+  others: { bgColor: 'bg-neutral-60', barColor: 'bg-neutral-80', icon: OthersIcon }, // 그외
+};