From d3e8c36872114bd3594c6e5c54464ee67a37a153 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 22 Mar 2025 12:18:33 +0000
Subject: [PATCH] Refactor payment method selection

Refactored the payment method selection to use a button-style interface with icons and smaller font size.
---
 src/components/expenses/ExpenseForm.tsx       | 42 +++++++++++--------
 .../transaction/TransactionFormFields.tsx     | 42 ++++++++++++-------
 2 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/src/components/expenses/ExpenseForm.tsx b/src/components/expenses/ExpenseForm.tsx
index 0784cb9..f5aa618 100644
--- a/src/components/expenses/ExpenseForm.tsx
+++ b/src/components/expenses/ExpenseForm.tsx
@@ -4,12 +4,11 @@ import { useForm } from 'react-hook-form';
 import { Form, FormField, FormItem, FormLabel } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import { Loader2 } from 'lucide-react';
+import { Loader2, CreditCard, Banknote } from 'lucide-react';
 import ExpenseCategorySelector from './ExpenseCategorySelector';
 import { Badge } from '@/components/ui/badge';
 import { getPersonalizedTitleSuggestions } from '@/utils/userTitlePreferences';
 import { Separator } from '@/components/ui/separator';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 
 export interface ExpenseFormValues {
   title: string;
@@ -36,6 +35,7 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
   
   // 현재 선택된 카테고리 가져오기
   const selectedCategory = form.watch('category');
+  const selectedPaymentMethod = form.watch('paymentMethod');
   
   // 선택된 카테고리에 대한 개인화된 제목 제안 목록 상태
   const [titleSuggestions, setTitleSuggestions] = useState<string[]>([]);
@@ -137,29 +137,37 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
         {/* 구분선 추가 */}
         <Separator className="my-2" />
         
-        {/* 지출 방법 필드 추가 */}
+        {/* 지출 방법 필드 수정 - 버튼 형식으로 변경 */}
         <FormField
           control={form.control}
           name="paymentMethod"
           render={({ field }) => (
             <FormItem>
               <FormLabel>지출 방법</FormLabel>
-              <RadioGroup
-                onValueChange={field.onChange}
-                defaultValue={field.value}
-                className="flex gap-4"
-                value={field.value}
-                disabled={isSubmitting}
-              >
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="신용카드" id="credit-card" />
-                  <label htmlFor="credit-card" className="cursor-pointer">신용카드</label>
+              <div className="grid grid-cols-2 gap-3">
+                <div
+                  className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
+                    field.value === '신용카드'
+                      ? 'border-neuro-income bg-neuro-income/10'
+                      : 'border-gray-200 hover:bg-gray-50'
+                  } ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`}
+                  onClick={() => !isSubmitting && form.setValue('paymentMethod', '신용카드')}
+                >
+                  <CreditCard size={16} className="text-neuro-income" />
+                  <span className="text-sm">신용카드</span>
                 </div>
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="현금" id="cash" />
-                  <label htmlFor="cash" className="cursor-pointer">현금</label>
+                <div
+                  className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
+                    field.value === '현금'
+                      ? 'border-neuro-income bg-neuro-income/10'
+                      : 'border-gray-200 hover:bg-gray-50'
+                  } ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`}
+                  onClick={() => !isSubmitting && form.setValue('paymentMethod', '현금')}
+                >
+                  <Banknote size={16} className="text-neuro-income" />
+                  <span className="text-sm">현금</span>
                 </div>
-              </RadioGroup>
+              </div>
             </FormItem>
           )}
         />
diff --git a/src/components/transaction/TransactionFormFields.tsx b/src/components/transaction/TransactionFormFields.tsx
index 1ea7bb0..bddc893 100644
--- a/src/components/transaction/TransactionFormFields.tsx
+++ b/src/components/transaction/TransactionFormFields.tsx
@@ -8,7 +8,7 @@ import { categoryIcons, EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
 import { Badge } from '@/components/ui/badge';
 import { getPersonalizedTitleSuggestions } from '@/utils/userTitlePreferences';
 import { Separator } from '@/components/ui/separator';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { CreditCard, Banknote } from 'lucide-react';
 
 // Form schema for validation - 카테고리를 4개로 확장 및 지출 방법 추가
 export const transactionFormSchema = z.object({
@@ -39,6 +39,9 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
   // 현재 선택된 카테고리 가져오기
   const selectedCategory = form.watch('category');
   
+  // 현재 선택된 지불 방법 가져오기
+  const selectedPaymentMethod = form.watch('paymentMethod');
+  
   // 선택된 카테고리에 대한 개인화된 제목 제안 목록 상태
   const [titleSuggestions, setTitleSuggestions] = useState<string[]>([]);
   
@@ -142,7 +145,7 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
       {/* 구분선 추가 */}
       <Separator className="my-4" />
       
-      {/* 지출 방법 필드 추가 */}
+      {/* 지출 방법 필드 수정 - 버튼 형식으로 변경 */}
       <FormField
         control={form.control}
         name="paymentMethod"
@@ -150,21 +153,30 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
           <FormItem>
             <FormLabel>지출 방법</FormLabel>
             <FormControl>
-              <RadioGroup
-                onValueChange={field.onChange}
-                defaultValue={field.value}
-                className="flex gap-4"
-                value={field.value}
-              >
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="신용카드" id="credit-card" />
-                  <label htmlFor="credit-card" className="cursor-pointer">신용카드</label>
+              <div className="grid grid-cols-2 gap-3">
+                <div
+                  className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
+                    field.value === '신용카드'
+                      ? 'border-neuro-income bg-neuro-income/10'
+                      : 'border-gray-200 hover:bg-gray-50'
+                  }`}
+                  onClick={() => form.setValue('paymentMethod', '신용카드')}
+                >
+                  <CreditCard size={16} className="text-neuro-income" />
+                  <span className="text-sm">신용카드</span>
                 </div>
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="현금" id="cash" />
-                  <label htmlFor="cash" className="cursor-pointer">현금</label>
+                <div
+                  className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
+                    field.value === '현금'
+                      ? 'border-neuro-income bg-neuro-income/10'
+                      : 'border-gray-200 hover:bg-gray-50'
+                  }`}
+                  onClick={() => form.setValue('paymentMethod', '현금')}
+                >
+                  <Banknote size={16} className="text-neuro-income" />
+                  <span className="text-sm">현금</span>
                 </div>
-              </RadioGroup>
+              </div>
             </FormControl>
             <FormMessage />
           </FormItem>