리포트/거래 화면 디자인 패치 및 FAB 거래 입력 동작 복구 (#119)

* iOS Safari 입력 필드 폰트 크기 조정으로 자동 확대 방지 스타일 추가

* 보고서 페이지 레이아웃 내부 컨테이너 너비 제한 div 추가

* 거래 생성 시트 호출 로직 useCallback으로 리팩토링 및 FAB 클릭 동작 수정

* 수입 색상을 파랑 계열로, 지출 색상을 밝은 빨강 계열로 변경 및 관련 스타일 업데이트

* 수입 색상을 파랑 계열로 변경 및 관련 스타일 일괄 업데이트

* 최근 카테고리 버튼 활성 상태 스타일 추가 및 전환 효과 적용

* fix: FAB 거래 입력 시트 오픈 안전성 보강

sessionStorage 접근을 예외 안전하게 감싸 Safari 프라이빗 모드에서도 FAB 클릭이 깨지지 않도록 수정하고 이벤트/키 문자열을 공용 상수로 통합

Made-with: Cursor

Author: sscoderati

apps/web/src/components/dashboard/MonthlySummaryCard.tsx

@@ -17,7 +17,7 @@ export function MonthlySummaryCard({ data }: Props) {
       <CardContent className="space-y-3">
         <div className="flex justify-between">
           <span className="text-muted-foreground">수입</span>
-          <span className="font-semibold text-emerald-600 dark:text-emerald-400">
+          <span className="font-semibold text-blue-600 dark:text-blue-400">
             +{formatCurrency(totalIncome)}원
           </span>
         </div>
@@ -33,7 +33,7 @@ export function MonthlySummaryCard({ data }: Props) {
             <span
               className={`font-bold ${
                 netIncome >= 0
-                  ? 'text-emerald-600 dark:text-emerald-400'
+                  ? 'text-blue-600 dark:text-blue-400'
                   : 'text-rose-600 dark:text-rose-400'
               }`}
             >

apps/web/src/components/dashboard/NetAssetCard.tsx

@@ -11,7 +11,11 @@ export function NetAssetCard({ data }: Props) {
   const { totalAssets, totalLiabilities, netAsset } = data
 
   return (
-    <Link to="/reports" className="block transition-opacity hover:opacity-80">
+    <Link
+      to="/reports"
+      search={{ tab: 'BALANCE' }}
+      className="block transition-opacity hover:opacity-80"
+    >
       <Card className="cursor-pointer">
         <CardHeader>
           <CardTitle className="text-lg">순자산</CardTitle>
@@ -33,7 +37,7 @@ export function NetAssetCard({ data }: Props) {
               <span
                 className={`font-bold ${
                   netAsset >= 0
-                    ? 'text-emerald-600 dark:text-emerald-400'
+                    ? 'text-blue-600 dark:text-blue-400'
                     : 'text-rose-600 dark:text-rose-400'
                 }`}
               >

apps/web/src/components/layout/AppLayout.tsx

@@ -1,9 +1,13 @@
-import { useRouterState } from '@tanstack/react-router'
+import { useNavigate, useRouterState } from '@tanstack/react-router'
 import { useState } from 'react'
 import { BottomNav } from './BottomNav'
 import { Sidebar } from './Sidebar'
 import { FAB } from './FAB'
 import { cn } from '@repo/ui/lib/utils'
+import {
+  emitOpenCreateTransactionEvent,
+  markOpenCreateTransactionOnce,
+} from '../../lib/transactions-open'
 
 interface AppLayoutProps {
   children: React.ReactNode
@@ -14,6 +18,7 @@ const FAB_ROUTES = ['/dashboard', '/transactions']
 
 export function AppLayout({ children }: AppLayoutProps) {
   const router = useRouterState()
+  const navigate = useNavigate()
   const currentPath = router.location.pathname
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
 
@@ -29,10 +34,15 @@ export function AppLayout({ children }: AppLayoutProps) {
   )
 
   const handleFABClick = () => {
-    // TODO: Open transaction input bottom sheet/modal
-    if (process.env.NODE_ENV !== 'production') {
-      console.log('FAB clicked - open transaction input')
+    if (currentPath === '/transactions') {
+      emitOpenCreateTransactionEvent()
+      return
     }
+
+    markOpenCreateTransactionOnce()
+    void navigate({
+      to: '/transactions',
+    })
   }
 
   if (!needsLayout) {

apps/web/src/lib/format.ts

@@ -20,7 +20,7 @@ export function getTransactionSign(type: string): '+' | '-' | '' {
 }
 
 export function getAmountColorClass(type: string): string {
-  if (type === 'INCOME') return 'text-emerald-600 dark:text-emerald-400'
+  if (type === 'INCOME') return 'text-blue-600 dark:text-blue-400'
   if (type === 'EXPENSE') return 'text-rose-600 dark:text-rose-400'
   return 'text-muted-foreground'
 }

apps/web/src/lib/transactions-open.ts

@@ -0,0 +1,31 @@
+export const OPEN_CREATE_EVENT = 'transactions:open-create'
+const OPEN_CREATE_ONCE_KEY = 'transactions:open-create-once'
+
+export function emitOpenCreateTransactionEvent() {
+  if (typeof window === 'undefined') return
+  window.dispatchEvent(new CustomEvent(OPEN_CREATE_EVENT))
+}
+
+export function markOpenCreateTransactionOnce() {
+  if (typeof window === 'undefined') return
+
+  try {
+    window.sessionStorage.setItem(OPEN_CREATE_ONCE_KEY, '1')
+  } catch {
+    // ignore storage write errors
+  }
+}
+
+export function consumeOpenCreateTransactionOnce() {
+  if (typeof window === 'undefined') return false
+
+  try {
+    const shouldOpen = window.sessionStorage.getItem(OPEN_CREATE_ONCE_KEY) === '1'
+    if (shouldOpen) {
+      window.sessionStorage.removeItem(OPEN_CREATE_ONCE_KEY)
+    }
+    return shouldOpen
+  } catch {
+    return false
+  }
+}

apps/web/src/routes/reports.tsx

@@ -290,7 +290,7 @@ function AnnualBarChart({ data, ariaLabel }: AnnualBarChartProps) {
             <div key={month} className="flex flex-1 flex-col items-center gap-1">
               <div className="flex w-full items-end justify-center gap-0.5" style={{ height: 140 }}>
                 <div
-                  className="w-full max-w-[14px] rounded-t bg-primary/70 transition-all"
+                  className="w-full max-w-[14px] rounded-t bg-blue-500/70 transition-all"
                   style={{ height: incomeH || 2 }}
                   title={`${month}월 수입 ${fmt(income)}원`}
                 />
@@ -307,7 +307,7 @@ function AnnualBarChart({ data, ariaLabel }: AnnualBarChartProps) {
       </div>
       <div className="mt-2 flex items-center justify-end gap-4 pr-1" aria-hidden="true">
         <div className="flex items-center gap-1.5">
-          <span className="h-2 w-3 rounded-sm bg-primary/70" />
+          <span className="h-2 w-3 rounded-sm bg-blue-500/70" />
           <span className="text-xs text-muted-foreground">수입</span>
         </div>
         <div className="flex items-center gap-1.5">
@@ -335,7 +335,7 @@ function NetAssetCard({ summary }: { summary: BalanceReport['summary'] }) {
         <div
           className={cn(
             'flex items-center gap-1 mt-1.5 text-sm font-medium',
-            isPositive ? 'text-emerald-500' : isNegative ? 'text-red-500' : 'text-muted-foreground',
+            isPositive ? 'text-blue-500' : isNegative ? 'text-red-400' : 'text-muted-foreground',
           )}
         >
           {isPositive ? (
@@ -351,11 +351,11 @@ function NetAssetCard({ summary }: { summary: BalanceReport['summary'] }) {
       <div className="grid grid-cols-2 gap-3 mt-4 pt-4 border-t">
         <div>
           <p className="text-xs text-muted-foreground mb-0.5">총 자산</p>
-          <p className="text-sm font-semibold text-emerald-600">{formatAmount(summary.totalAssets)}</p>
+          <p className="text-sm font-semibold text-blue-600">{formatAmount(summary.totalAssets)}</p>
         </div>
         <div>
           <p className="text-xs text-muted-foreground mb-0.5">총 부채</p>
-          <p className="text-sm font-semibold text-red-500">{formatAmount(summary.totalLiabilities)}</p>
+          <p className="text-sm font-semibold text-red-400">{formatAmount(summary.totalLiabilities)}</p>
         </div>
       </div>
     </div>
@@ -385,7 +385,7 @@ function AccountGroupSection({
         className="w-full flex items-center justify-between px-4 py-3 bg-muted/40 hover:bg-muted/60 transition-colors"
       >
         <span className="text-sm font-semibold">{group.major}</span>
-        <span className={cn('text-sm font-bold', isAsset ? 'text-emerald-600' : 'text-red-500')}>
+        <span className={cn('text-sm font-bold', isAsset ? 'text-blue-600' : 'text-red-400')}>
           {formatAmount(group.total)}
         </span>
       </button>
@@ -411,7 +411,7 @@ function AccountGroupSection({
                   )
                 })}
               </div>
-              <span className={cn('text-sm font-medium', isAsset ? 'text-foreground' : 'text-red-500')}>
+              <span className={cn('text-sm font-medium', isAsset ? 'text-foreground' : 'text-red-400')}>
                 {formatAmount(account.balance)}
               </span>
             </div>
@@ -442,7 +442,7 @@ function CashFlowCard({ cashFlow }: { cashFlow: CashFlow }) {
             <span
               className={cn(
                 'text-sm font-medium',
-                value > 0 ? 'text-emerald-600' : value < 0 ? 'text-red-500' : 'text-muted-foreground',
+                value > 0 ? 'text-blue-600' : value < 0 ? 'text-red-400' : 'text-muted-foreground',
               )}
             >
               {value === 0 ? '0원' : formatChange(value)}
@@ -455,7 +455,7 @@ function CashFlowCard({ cashFlow }: { cashFlow: CashFlow }) {
         <span
           className={cn(
             'text-sm font-bold',
-            cashFlow.total > 0 ? 'text-emerald-600' : cashFlow.total < 0 ? 'text-red-500' : 'text-muted-foreground',
+            cashFlow.total > 0 ? 'text-blue-600' : cashFlow.total < 0 ? 'text-red-400' : 'text-muted-foreground',
           )}
         >
           {cashFlow.total === 0 ? '0원' : formatChange(cashFlow.total)}
@@ -801,8 +801,8 @@ function AnnualReportTab() {
               {incomeCategories.length > 0 && (
                 <>
                   <div className={`flex items-center gap-1.5 px-4 pb-1 ${expenseCategories.length > 0 ? 'border-t pt-3' : 'pt-3'}`}>
-                    <TrendingUp className="size-3.5 text-primary" />
-                    <span className="text-xs font-medium text-primary">수입</span>
+                    <TrendingUp className="size-3.5 text-blue-600" />
+                    <span className="text-xs font-medium text-blue-600">수입</span>
                   </div>
                   {incomeCategories.map((cat) => (
                     <div key={cat.categoryId} className="flex items-center justify-between px-4 py-2.5">
@@ -1001,6 +1001,7 @@ function ReportsPage() {
 
   return (
     <div className="min-h-[calc(100dvh-4rem)] bg-background pb-10 sm:min-h-screen">
+      <div className="mx-auto w-full max-w-6xl">
 
       {/* Tab Bar */}
       <div role="tablist" className="sticky top-0 z-10 flex border-b bg-background">
@@ -1290,6 +1291,7 @@ function ReportsPage() {
           )}
         </div>
       </div>
+      </div>
 
       {/* Drilldown sheet */}
       {drillStat && (
@@ -1328,7 +1330,7 @@ function ReportsPage() {
                           {tx.isFixed ? ' · 고정' : ''}
                         </p>
                       </div>
-                      <span className={`ml-4 shrink-0 text-sm font-semibold tabular-nums ${tx.type === 'INCOME' ? 'text-primary' : 'text-destructive'}`}>
+                      <span className={`ml-4 shrink-0 text-sm font-semibold tabular-nums ${tx.type === 'INCOME' ? 'text-blue-600' : 'text-destructive'}`}>
                         {tx.type === 'INCOME' ? '+' : '-'}{fmt(tx.amount)}원
                       </span>
                     </li>
@@ -1361,8 +1363,8 @@ function SummaryCard({
   const isPos = diff > 0
   const DiffIcon = isPos ? TrendingUp : TrendingDown
   const diffColor = diffPositiveIsGood
-    ? isPos ? 'text-primary' : 'text-muted-foreground'
-    : isPos ? 'text-destructive' : 'text-primary'
+    ? isPos ? 'text-blue-600' : 'text-muted-foreground'
+    : isPos ? 'text-destructive' : 'text-blue-600'
 
   return (
     <div className="rounded-xl border bg-card p-4 shadow-sm">