공통화 및 코드 리팩토링

HyeonsangKim · HyeonsangKim · commit 3823462c6c74 · 2026-02-01T00:33:48.000+09:00
diff --git a/apps/mobile/app/(tabs)/index.tsx b/apps/mobile/app/(tabs)/index.tsx
@@ -2,7 +2,7 @@
 // PRD FR-101~FR-109: 지도 + 여행 리스트 + 자동 전환
 
 import { useEffect, useState, useCallback, useMemo, useRef } from 'react';
-import { View, Text, StyleSheet, ScrollView, RefreshControl, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet, ScrollView, RefreshControl, TouchableOpacity, Alert } from 'react-native';
 import { router } from 'expo-router';
 import { MaterialIcons } from '@expo/vector-icons';
 import { useTheme } from '../../lib/theme';
@@ -220,7 +220,7 @@ export default function GlobalHomeScreen() {
                 {categorizedTrips.past.length > 5 && (
                   <TouchableOpacity
                     style={[styles.showMoreButton, { borderColor: colors.border }]}
-                    onPress={() => {/* TODO: 전체 여행 목록 화면 */}}
+                    onPress={() => Alert.alert('준비 중', '전체 여행 목록 기능은 곧 추가될 예정입니다.')}
                     accessibilityLabel={`과거 여행 ${categorizedTrips.past.length - 5}개 더보기`}
                     accessibilityRole="button"
                   >
diff --git a/apps/mobile/app/trip/[id]/main.tsx b/apps/mobile/app/trip/[id]/main.tsx
@@ -33,7 +33,7 @@ export default function TripMainScreen() {
   const insets = useSafeAreaInsets();
   const { colors, spacing, typography, borderRadius, shadows } = useTheme();
   const { trips, destinations, loadDestinations, setActiveTrip } = useTripStore();
-  const { expenses, loadExpenses, getStats } = useExpenseStore();
+  const { expenses, loadExpenses, getStats, getTotalLocal } = useExpenseStore();
   const { hapticEnabled, currencyDisplayMode } = useSettingsStore();
   const showInKRW = currencyDisplayMode === 'krw';
 
@@ -68,17 +68,10 @@ export default function TripMainScreen() {
     return expenses.filter((e) => e.date === selectedDate);
   }, [expenses, selectedDate]);
 
-  // 현지통화별 총 지출 합계 (BudgetSummaryCard용)
+  // 현지통화별 총 지출 합계 (BudgetSummaryCard용) - 스토어 메서드 활용
   const totalSpentLocal = useMemo(() => {
-    const localAmounts: Record<string, number> = {};
-    for (const expense of expenses) {
-      localAmounts[expense.currency] = (localAmounts[expense.currency] || 0) + expense.amount;
-    }
-    // 금액이 큰 순서대로 정렬
-    return Object.entries(localAmounts)
-      .map(([currency, amount]) => ({ currency, amount }))
-      .sort((a, b) => b.amount - a.amount);
-  }, [expenses]);
+    return id ? getTotalLocal(id) : [];
+  }, [id, getTotalLocal, expenses]);
 
   // Current destination
   const currentDestination = useMemo(() => {
diff --git a/apps/mobile/lib/constants/layout.ts b/apps/mobile/lib/constants/layout.ts
@@ -20,3 +20,15 @@ export const FAB_CONSTANTS = {
   BOTTOM_POSITION: 24,
   RIGHT_POSITION: 16,
 } as const;
+
+// 헤더 버튼 스타일 (공통)
+export const HEADER_BUTTON = {
+  SIZE: 44,
+  HIT_SLOP: { top: 10, bottom: 10, left: 10, right: 10 },
+} as const;
+
+// 애니메이션 상수
+export const ANIMATION = {
+  SPRING_TENSION: 100,
+  SPRING_FRICTION: 10,
+} as const;
diff --git a/apps/mobile/lib/stores/expenseStore.ts b/apps/mobile/lib/stores/expenseStore.ts
@@ -3,11 +3,19 @@
 import { create } from 'zustand';
 import { Expense, ExpenseStats, Destination, DayExpenseGroup } from '../types';
 import { Category } from '../utils/constants';
-import { expenseApi, CreateExpenseDto } from '../api/expense';
+import { expenseApi, CreateExpenseDto, ExpenseResponse } from '../api/expense';
+import { parseServerDate, parseServerTime, formatDate } from '../utils/date';
+
+// 현지통화별 합계 타입
+export interface LocalAmountItem {
+  currency: string;
+  amount: number;
+}
 
 interface ExpenseState {
   expenses: Expense[];
   isLoading: boolean;
+  isInitialized: boolean;
   error: string | null;
 
   // 액션들
@@ -22,6 +30,7 @@ interface ExpenseState {
   getStats: (tripId: string) => ExpenseStats;
   getTotalByTrip: (tripId: string) => number;
   getTodayTotal: (tripId: string) => { totalKRW: number; byCurrency: Record<string, number> };
+  getTotalLocal: (tripId: string) => LocalAmountItem[];
 
   // 다중 국가 레이어 (FR-008)
   getExpensesByDateGrouped: (
@@ -31,53 +40,42 @@ interface ExpenseState {
   ) => DayExpenseGroup[];
 }
 
+/**
+ * 서버 응답을 클라이언트 Expense 타입으로 변환
+ */
+function toExpense(e: ExpenseResponse, fallbackDate?: string, fallbackTime?: string): Expense {
+  return {
+    id: e.id,
+    tripId: e.tripId,
+    destinationId: e.destinationId,
+    amount: Number(e.amount),
+    currency: e.currency,
+    amountKRW: Number(e.amountKRW),
+    exchangeRate: Number(e.exchangeRate),
+    category: e.category,
+    memo: e.memo,
+    date: parseServerDate(e.expenseDate, fallbackDate),
+    time: parseServerTime(e.expenseTime, fallbackTime),
+    createdAt: e.createdAt,
+  };
+}
+
 export const useExpenseStore = create<ExpenseState>((set, get) => ({
   expenses: [],
   isLoading: false,
+  isInitialized: false,
   error: null,
 
   loadExpenses: async (tripId) => {
     set({ isLoading: true, error: null });
     try {
       const { data } = await expenseApi.getByTrip(tripId);
-
-      // Convert server response to local type
-      const expenses: Expense[] = data.map((e: any) => {
-        // 날짜 파싱 - 로컬 타임존 기준
-        let dateStr = e.date;
-        if (e.expenseDate) {
-          const d = new Date(e.expenseDate);
-          dateStr = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
-        }
-
-        // 시간 파싱
-        let timeStr = e.time;
-        if (e.expenseTime) {
-          const t = new Date(e.expenseTime);
-          timeStr = `${String(t.getHours()).padStart(2, '0')}:${String(t.getMinutes()).padStart(2, '0')}`;
-        }
-
-        return {
-          id: e.id,
-          tripId: e.tripId,
-          destinationId: e.destinationId,
-          amount: Number(e.amount),
-          currency: e.currency,
-          amountKRW: Number(e.amountKRW),
-          exchangeRate: Number(e.exchangeRate),
-          category: e.category,
-          memo: e.memo,
-          date: dateStr,
-          time: timeStr,
-          createdAt: e.createdAt,
-        };
-      });
-
-      set({ expenses, isLoading: false });
+      const expenses: Expense[] = data.map((e) => toExpense(e));
+      set({ expenses, isLoading: false, isInitialized: true });
     } catch (error) {
       const message = error instanceof Error ? error.message : '지출 내역을 불러오는데 실패했습니다';
-      console.error('Failed to load expenses:', error);
-      set({ isLoading: false, error: message });
+      set({ isLoading: false, isInitialized: true, error: message });
+      throw error;
     }
   },
 
@@ -95,34 +93,7 @@ export const useExpenseStore = create<ExpenseState>((set, get) => ({
     };
 
     const { data } = await expenseApi.create(expenseData.tripId, dto);
-
-    // 날짜/시간 파싱
-    let dateStr = expenseData.date;
-    if (data.expenseDate) {
-      const d = new Date(data.expenseDate);
-      dateStr = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
-    }
-
-    let timeStr = expenseData.time;
-    if (data.expenseTime) {
-      const t = new Date(data.expenseTime);
-      timeStr = `${String(t.getHours()).padStart(2, '0')}:${String(t.getMinutes()).padStart(2, '0')}`;
-    }
-
-    const expense: Expense = {
-      id: data.id,
-      tripId: expenseData.tripId,
-      destinationId: expenseData.destinationId,
-      amount: Number(data.amount),
-      currency: data.currency,
-      amountKRW: Number(data.amountKRW),
-      exchangeRate: Number(data.exchangeRate),
-      category: data.category,
-      memo: data.memo,
-      date: dateStr,
-      time: timeStr,
-      createdAt: data.createdAt,
-    };
+    const expense = toExpense(data, expenseData.date, expenseData.time);
 
     set((state) => ({ expenses: [expense, ...state.expenses] }));
     return expense;
@@ -209,9 +180,7 @@ export const useExpenseStore = create<ExpenseState>((set, get) => ({
   },
 
   getTodayTotal: (tripId) => {
-    const today = new Date();
-    const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
-
+    const todayStr = formatDate(new Date());
     const todayExpenses = get().expenses.filter(
       (e) => e.tripId === tripId && e.date === todayStr
     );
@@ -227,6 +196,19 @@ export const useExpenseStore = create<ExpenseState>((set, get) => ({
     return { totalKRW, byCurrency };
   },
 
+  getTotalLocal: (tripId) => {
+    const tripExpenses = get().expenses.filter((e) => e.tripId === tripId);
+    const localAmounts: Record<string, number> = {};
+
+    for (const expense of tripExpenses) {
+      localAmounts[expense.currency] = (localAmounts[expense.currency] || 0) + expense.amount;
+    }
+
+    return Object.entries(localAmounts)
+      .map(([currency, amount]) => ({ currency, amount }))
+      .sort((a, b) => b.amount - a.amount);
+  },
+
   // PRD FR-008: 특정 날짜의 지출을 국가별로 그룹화
   getExpensesByDateGrouped: (tripId, date, destinations) => {
     const dayExpenses = get().expenses.filter(
diff --git a/apps/mobile/lib/stores/tripStore.ts b/apps/mobile/lib/stores/tripStore.ts
@@ -4,13 +4,14 @@ import { create } from 'zustand';
 import { getCountryCode } from '../utils/constants';
 import { Trip, Destination, CurrentLocation } from '../types';
 import { tripApi, CreateTripDto, TripResponse } from '../api/trip';
+import { formatDate, parseServerDate } from '../utils/date';
 
 interface TripState {
   trips: Trip[];
   activeTrip: Trip | null;
   activeTrips: Trip[];
   isLoading: boolean;
-  isInitialized: boolean; // 초기 데이터 로딩 완료 여부
+  isInitialized: boolean;
   error: string | null;
   hasAutoNavigatedToTrip: boolean;
 
@@ -43,44 +44,50 @@ interface TripState {
   setHasAutoNavigatedToTrip: (value: boolean) => void;
 }
 
-// Helper: Convert date to YYYY-MM-DD format (로컬 타임존 기준)
-function toDateString(date: string | Date): string {
-  if (!date) return '';
-  const d = typeof date === 'string' ? new Date(date) : date;
-  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+// 서버 방문지 응답 타입
+interface DestinationResponse {
+  id: string;
+  country: string;
+  countryName?: string;
+  city?: string;
+  currency: string;
+  startDate?: string;
+  endDate?: string;
+  orderIndex: number;
+  createdAt: string;
 }
 
 // Helper: Convert API response to local Trip type
 function toTrip(response: TripResponse): Trip {
   return {
     id: response.id,
     name: response.name,
-    startDate: toDateString(response.startDate),
-    endDate: toDateString(response.endDate),
+    startDate: parseServerDate(response.startDate, response.startDate),
+    endDate: parseServerDate(response.endDate, response.endDate),
     budget: response.budget,
     createdAt: response.createdAt,
   };
 }
 
 // Helper: Convert API response destinations to local type
-function toDestination(dest: any, tripId: string): Destination {
+function toDestination(dest: DestinationResponse, tripId: string): Destination {
   return {
     id: dest.id,
     tripId,
     country: dest.country,
     countryName: dest.countryName,
     city: dest.city,
     currency: dest.currency,
-    startDate: dest.startDate ? toDateString(dest.startDate) : undefined,
-    endDate: dest.endDate ? toDateString(dest.endDate) : undefined,
+    startDate: dest.startDate ? parseServerDate(dest.startDate) : undefined,
+    endDate: dest.endDate ? parseServerDate(dest.endDate) : undefined,
     orderIndex: dest.orderIndex,
     createdAt: dest.createdAt,
   };
 }
 
 // Helper: Get active trips from trips array
 function filterActiveTrips(trips: Trip[]): Trip[] {
-  const today = toDateString(new Date());
+  const today = formatDate(new Date());
   return trips.filter((t) => t.startDate <= today && t.endDate >= today);
 }
 
@@ -128,7 +135,7 @@ export const useTripStore = create<TripState>((set, get) => ({
       // Set current destination if active trip exists
       if (activeTrip) {
         const tripDestinations = allDestinations.filter(d => d.tripId === activeTrip.id);
-        const today = toDateString(new Date());
+        const today = formatDate(new Date());
         const currentDest = tripDestinations.find(
           d => d.startDate && d.endDate && d.startDate <= today && d.endDate >= today
         ) || tripDestinations[0] || null;
@@ -137,17 +144,18 @@ export const useTripStore = create<TripState>((set, get) => ({
     } catch (error) {
       const message = error instanceof Error ? error.message : '여행 목록을 불러오는데 실패했습니다';
       set({ isLoading: false, isInitialized: true, error: message });
+      throw error;
     }
   },
 
   loadDestinations: async (tripId) => {
     try {
       const { data } = await tripApi.getById(tripId);
       if (data.destinations) {
-        const destinations = data.destinations.map((d: any) => toDestination(d, tripId));
-        const today = toDateString(new Date());
+        const destinations = data.destinations.map((d) => toDestination(d as DestinationResponse, tripId));
+        const today = formatDate(new Date());
         const currentDest = destinations.find(
-          (d: Destination) => d.startDate && d.endDate && d.startDate <= today && d.endDate >= today
+          (d) => d.startDate && d.endDate && d.startDate <= today && d.endDate >= today
         ) || destinations[0] || null;
 
         set((state) => ({
@@ -159,7 +167,9 @@ export const useTripStore = create<TripState>((set, get) => ({
         }));
       }
     } catch (error) {
-      console.error('Failed to load destinations:', error);
+      const message = error instanceof Error ? error.message : '방문지 정보를 불러오는데 실패했습니다';
+      set({ error: message });
+      throw error;
     }
   },
 
@@ -202,7 +212,7 @@ export const useTripStore = create<TripState>((set, get) => ({
     }));
 
     // Update active trips if applicable
-    const today = toDateString(new Date());
+    const today = formatDate(new Date());
     if (trip.startDate <= today && trip.endDate >= today) {
       set((state) => ({
         activeTrip: trip,
@@ -257,7 +267,7 @@ export const useTripStore = create<TripState>((set, get) => ({
     if (trip) {
       // Set current destination from existing destinations
       const tripDestinations = get().destinations.filter(d => d.tripId === trip.id);
-      const today = toDateString(new Date());
+      const today = formatDate(new Date());
       const currentDest = tripDestinations.find(
         d => d.startDate && d.endDate && d.startDate <= today && d.endDate >= today
       ) || tripDestinations[0] || null;
@@ -318,7 +328,7 @@ export const useTripStore = create<TripState>((set, get) => ({
 
   getCurrentLocation: (tripId) => {
     const destinations = get().destinations.filter(d => d.tripId === tripId);
-    const today = toDateString(new Date());
+    const today = formatDate(new Date());
     const currentDest = destinations.find(
       d => d.startDate && d.endDate && d.startDate <= today && d.endDate >= today
     ) || destinations[0] || null;
diff --git a/apps/mobile/lib/utils/constants.ts b/apps/mobile/lib/utils/constants.ts
diff --git a/apps/mobile/lib/utils/date.ts b/apps/mobile/lib/utils/date.ts
