Hide elements initially
Hides title suggestions and payment method fields initially, showing them based on category selection and amount input focus.
This commit is contained in:
gpt-engineer-app[bot]
@@ -33,6 +33,10 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 상태 관리 추가
|
||||||
|
const [showTitleSuggestions, setShowTitleSuggestions] = useState(false);
|
||||||
|
const [showPaymentMethod, setShowPaymentMethod] = useState(false);
|
||||||
|
|
||||||
// 현재 선택된 카테고리 가져오기
|
// 현재 선택된 카테고리 가져오기
|
||||||
const selectedCategory = form.watch('category');
|
const selectedCategory = form.watch('category');
|
||||||
const selectedPaymentMethod = form.watch('paymentMethod');
|
const selectedPaymentMethod = form.watch('paymentMethod');
|
||||||
@@ -40,11 +44,12 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
|
|||||||
// 선택된 카테고리에 대한 개인화된 제목 제안 목록 상태
|
// 선택된 카테고리에 대한 개인화된 제목 제안 목록 상태
|
||||||
const [titleSuggestions, setTitleSuggestions] = useState<string[]>([]);
|
const [titleSuggestions, setTitleSuggestions] = useState<string[]>([]);
|
||||||
|
|
||||||
// 카테고리가 변경될 때마다 개인화된 제목 목록 업데이트
|
// 카테고리가 변경될 때마다 개인화된 제목 목록 업데이트 및 제목 추천 표시
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (selectedCategory) {
|
if (selectedCategory) {
|
||||||
const suggestions = getPersonalizedTitleSuggestions(selectedCategory);
|
const suggestions = getPersonalizedTitleSuggestions(selectedCategory);
|
||||||
setTitleSuggestions(suggestions);
|
setTitleSuggestions(suggestions);
|
||||||
|
setShowTitleSuggestions(true);
|
||||||
}
|
}
|
||||||
}, [selectedCategory]);
|
}, [selectedCategory]);
|
||||||
|
|
||||||
@@ -83,9 +88,9 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 카테고리별 제목 제안 */}
|
{/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시 */}
|
||||||
{titleSuggestions.length > 0 && (
|
{showTitleSuggestions && titleSuggestions.length > 0 && (
|
||||||
<div className="mt-1 mb-2">
|
<div className="mt-1 mb-2 animate-fade-in">
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="flex flex-wrap gap-2">
|
||||||
{titleSuggestions.map((suggestion) => (
|
{titleSuggestions.map((suggestion) => (
|
||||||
<Badge
|
<Badge
|
||||||
@@ -128,49 +133,53 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
|
|||||||
placeholder="금액을 입력하세요"
|
placeholder="금액을 입력하세요"
|
||||||
value={field.value}
|
value={field.value}
|
||||||
onChange={handleAmountChange}
|
onChange={handleAmountChange}
|
||||||
|
onFocus={() => setShowPaymentMethod(true)}
|
||||||
disabled={isSubmitting}
|
disabled={isSubmitting}
|
||||||
/>
|
/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 구분선 추가 */}
|
{/* 지출 방법 필드는 금액 입력 시에만 표시 */}
|
||||||
<Separator className="my-2" />
|
{showPaymentMethod && (
|
||||||
|
<>
|
||||||
|
<Separator className="my-2 animate-fade-in" />
|
||||||
|
|
||||||
{/* 지출 방법 필드 수정 - 버튼 형식으로 변경 */}
|
<FormField
|
||||||
<FormField
|
control={form.control}
|
||||||
control={form.control}
|
name="paymentMethod"
|
||||||
name="paymentMethod"
|
render={({ field }) => (
|
||||||
render={({ field }) => (
|
<FormItem className="animate-fade-in">
|
||||||
<FormItem>
|
<FormLabel>지출 방법</FormLabel>
|
||||||
<FormLabel>지출 방법</FormLabel>
|
<div className="grid grid-cols-2 gap-3">
|
||||||
<div className="grid grid-cols-2 gap-3">
|
<div
|
||||||
<div
|
className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
|
||||||
className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
|
field.value === '신용카드'
|
||||||
field.value === '신용카드'
|
? 'border-neuro-income bg-neuro-income/10'
|
||||||
? 'border-neuro-income bg-neuro-income/10'
|
: 'border-gray-200 hover:bg-gray-50'
|
||||||
: 'border-gray-200 hover:bg-gray-50'
|
} ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||||
} ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`}
|
onClick={() => !isSubmitting && form.setValue('paymentMethod', '신용카드')}
|
||||||
onClick={() => !isSubmitting && form.setValue('paymentMethod', '신용카드')}
|
>
|
||||||
>
|
<CreditCard size={16} className="text-neuro-income" />
|
||||||
<CreditCard size={16} className="text-neuro-income" />
|
<span className="text-xs">신용카드</span>
|
||||||
<span className="text-sm">신용카드</span>
|
</div>
|
||||||
</div>
|
<div
|
||||||
<div
|
className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
|
||||||
className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
|
field.value === '현금'
|
||||||
field.value === '현금'
|
? 'border-neuro-income bg-neuro-income/10'
|
||||||
? 'border-neuro-income bg-neuro-income/10'
|
: 'border-gray-200 hover:bg-gray-50'
|
||||||
: 'border-gray-200 hover:bg-gray-50'
|
} ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||||
} ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`}
|
onClick={() => !isSubmitting && form.setValue('paymentMethod', '현금')}
|
||||||
onClick={() => !isSubmitting && form.setValue('paymentMethod', '현금')}
|
>
|
||||||
>
|
<Banknote size={16} className="text-neuro-income" />
|
||||||
<Banknote size={16} className="text-neuro-income" />
|
<span className="text-xs">현금</span>
|
||||||
<span className="text-sm">현금</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</FormItem>
|
||||||
</FormItem>
|
)}
|
||||||
)}
|
/>
|
||||||
/>
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="flex justify-end gap-2 pt-2">
|
<div className="flex justify-end gap-2 pt-2">
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -31,6 +31,10 @@ interface TransactionFormFieldsProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) => {
|
const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) => {
|
||||||
|
// 상태 관리를 추가합니다
|
||||||
|
const [showTitleSuggestions, setShowTitleSuggestions] = useState(false);
|
||||||
|
const [showPaymentMethod, setShowPaymentMethod] = useState(false);
|
||||||
|
|
||||||
const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const formattedValue = formatWithCommas(e.target.value);
|
const formattedValue = formatWithCommas(e.target.value);
|
||||||
form.setValue('amount', formattedValue);
|
form.setValue('amount', formattedValue);
|
||||||
@@ -45,11 +49,12 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
|
|||||||
// 선택된 카테고리에 대한 개인화된 제목 제안 목록 상태
|
// 선택된 카테고리에 대한 개인화된 제목 제안 목록 상태
|
||||||
const [titleSuggestions, setTitleSuggestions] = useState<string[]>([]);
|
const [titleSuggestions, setTitleSuggestions] = useState<string[]>([]);
|
||||||
|
|
||||||
// 카테고리가 변경될 때마다 개인화된 제목 목록 업데이트
|
// 카테고리가 변경될 때마다 개인화된 제목 목록 업데이트 및 제목 추천 표시
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (selectedCategory) {
|
if (selectedCategory) {
|
||||||
const suggestions = getPersonalizedTitleSuggestions(selectedCategory);
|
const suggestions = getPersonalizedTitleSuggestions(selectedCategory);
|
||||||
setTitleSuggestions(suggestions);
|
setTitleSuggestions(suggestions);
|
||||||
|
setShowTitleSuggestions(true);
|
||||||
}
|
}
|
||||||
}, [selectedCategory]);
|
}, [selectedCategory]);
|
||||||
|
|
||||||
@@ -90,9 +95,9 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 카테고리별 제목 제안 */}
|
{/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시 */}
|
||||||
{titleSuggestions.length > 0 && (
|
{showTitleSuggestions && titleSuggestions.length > 0 && (
|
||||||
<div className="mt-1 mb-3">
|
<div className="mt-1 mb-3 animate-fade-in">
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="flex flex-wrap gap-2">
|
||||||
{titleSuggestions.map((suggestion) => (
|
{titleSuggestions.map((suggestion) => (
|
||||||
<Badge
|
<Badge
|
||||||
@@ -135,6 +140,7 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
|
|||||||
placeholder="금액을 입력하세요"
|
placeholder="금액을 입력하세요"
|
||||||
{...field}
|
{...field}
|
||||||
onChange={handleAmountChange}
|
onChange={handleAmountChange}
|
||||||
|
onFocus={() => setShowPaymentMethod(true)}
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
@@ -142,46 +148,50 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 구분선 추가 */}
|
{/* 구분선과 지출 방법 필드는 금액 입력 시에만 표시 */}
|
||||||
<Separator className="my-4" />
|
{showPaymentMethod && (
|
||||||
|
<>
|
||||||
|
<Separator className="my-4 animate-fade-in" />
|
||||||
|
|
||||||
{/* 지출 방법 필드 수정 - 버튼 형식으로 변경 */}
|
{/* 지출 방법 필드 - 버튼 형식으로 변경 및 텍스트 크기 축소 */}
|
||||||
<FormField
|
<FormField
|
||||||
control={form.control}
|
control={form.control}
|
||||||
name="paymentMethod"
|
name="paymentMethod"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem className="animate-fade-in">
|
||||||
<FormLabel>지출 방법</FormLabel>
|
<FormLabel>지출 방법</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<div className="grid grid-cols-2 gap-3">
|
<div className="grid grid-cols-2 gap-3">
|
||||||
<div
|
<div
|
||||||
className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
|
className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
|
||||||
field.value === '신용카드'
|
field.value === '신용카드'
|
||||||
? 'border-neuro-income bg-neuro-income/10'
|
? 'border-neuro-income bg-neuro-income/10'
|
||||||
: 'border-gray-200 hover:bg-gray-50'
|
: 'border-gray-200 hover:bg-gray-50'
|
||||||
}`}
|
}`}
|
||||||
onClick={() => form.setValue('paymentMethod', '신용카드')}
|
onClick={() => form.setValue('paymentMethod', '신용카드')}
|
||||||
>
|
>
|
||||||
<CreditCard size={16} className="text-neuro-income" />
|
<CreditCard size={16} className="text-neuro-income" />
|
||||||
<span className="text-sm">신용카드</span>
|
<span className="text-xs">신용카드</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
|
className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
|
||||||
field.value === '현금'
|
field.value === '현금'
|
||||||
? 'border-neuro-income bg-neuro-income/10'
|
? 'border-neuro-income bg-neuro-income/10'
|
||||||
: 'border-gray-200 hover:bg-gray-50'
|
: 'border-gray-200 hover:bg-gray-50'
|
||||||
}`}
|
}`}
|
||||||
onClick={() => form.setValue('paymentMethod', '현금')}
|
onClick={() => form.setValue('paymentMethod', '현금')}
|
||||||
>
|
>
|
||||||
<Banknote size={16} className="text-neuro-income" />
|
<Banknote size={16} className="text-neuro-income" />
|
||||||
<span className="text-sm">현금</span>
|
<span className="text-xs">현금</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormMessage />
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user