Improve title suggestion display
- Fix issue where title suggestions were not hidden correctly. - Add animation to collapsible content for a smoother user experience.
This commit is contained in:
gpt-engineer-app[bot]
@@ -49,7 +49,12 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
|
|||||||
if (selectedCategory) {
|
if (selectedCategory) {
|
||||||
const suggestions = getPersonalizedTitleSuggestions(selectedCategory);
|
const suggestions = getPersonalizedTitleSuggestions(selectedCategory);
|
||||||
setTitleSuggestions(suggestions);
|
setTitleSuggestions(suggestions);
|
||||||
setShowTitleSuggestions(true);
|
// 약간의 지연 후 제목 추천 표시 (애니메이션을 위해)
|
||||||
|
setTimeout(() => {
|
||||||
|
setShowTitleSuggestions(true);
|
||||||
|
}, 100);
|
||||||
|
} else {
|
||||||
|
setShowTitleSuggestions(false);
|
||||||
}
|
}
|
||||||
}, [selectedCategory]);
|
}, [selectedCategory]);
|
||||||
|
|
||||||
@@ -88,21 +93,29 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시 */}
|
{/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시, 서랍처럼 열리는 애니메이션 적용 */}
|
||||||
{showTitleSuggestions && titleSuggestions.length > 0 && (
|
{selectedCategory && (
|
||||||
<div className="mt-1 mb-2 animate-fade-in">
|
<div
|
||||||
<div className="flex flex-wrap gap-2">
|
className={`overflow-hidden transition-all duration-300 ease-out ${
|
||||||
{titleSuggestions.map((suggestion) => (
|
showTitleSuggestions
|
||||||
<Badge
|
? 'max-h-24 opacity-100 translate-y-0'
|
||||||
key={suggestion}
|
: 'max-h-0 opacity-0 -translate-y-4'
|
||||||
variant="outline"
|
}`}
|
||||||
className="cursor-pointer hover:bg-neuro-income/10 transition-colors px-3 py-1"
|
>
|
||||||
onClick={() => handleTitleSuggestionClick(suggestion)}
|
{titleSuggestions.length > 0 && (
|
||||||
>
|
<div className="flex flex-wrap gap-2 mt-1 mb-2">
|
||||||
{suggestion}
|
{titleSuggestions.map((suggestion) => (
|
||||||
</Badge>
|
<Badge
|
||||||
))}
|
key={suggestion}
|
||||||
</div>
|
variant="outline"
|
||||||
|
className="cursor-pointer hover:bg-neuro-income/10 transition-colors px-3 py-1"
|
||||||
|
onClick={() => handleTitleSuggestionClick(suggestion)}
|
||||||
|
>
|
||||||
|
{suggestion}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -140,46 +153,50 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 지출 방법 필드는 금액 입력 시에만 표시 */}
|
{/* 지출 방법 필드는 금액 입력 시에만 표시 - 서랍처럼 열리는 애니메이션 적용 */}
|
||||||
{showPaymentMethod && (
|
<div
|
||||||
<>
|
className={`overflow-hidden transition-all duration-300 ease-out ${
|
||||||
<Separator className="my-2 animate-fade-in" />
|
showPaymentMethod
|
||||||
|
? 'max-h-36 opacity-100 translate-y-0'
|
||||||
|
: 'max-h-0 opacity-0 -translate-y-4'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Separator className="my-2" />
|
||||||
|
|
||||||
<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-xs">신용카드</span>
|
||||||
</div>
|
|
||||||
<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-xs">현금</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</FormItem>
|
<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-xs">현금</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex justify-end gap-2 pt-2">
|
<div className="flex justify-end gap-2 pt-2">
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -54,7 +54,12 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
|
|||||||
if (selectedCategory) {
|
if (selectedCategory) {
|
||||||
const suggestions = getPersonalizedTitleSuggestions(selectedCategory);
|
const suggestions = getPersonalizedTitleSuggestions(selectedCategory);
|
||||||
setTitleSuggestions(suggestions);
|
setTitleSuggestions(suggestions);
|
||||||
setShowTitleSuggestions(true);
|
// 약간의 지연 후 제목 추천 표시 (애니메이션을 위해)
|
||||||
|
setTimeout(() => {
|
||||||
|
setShowTitleSuggestions(true);
|
||||||
|
}, 100);
|
||||||
|
} else {
|
||||||
|
setShowTitleSuggestions(false);
|
||||||
}
|
}
|
||||||
}, [selectedCategory]);
|
}, [selectedCategory]);
|
||||||
|
|
||||||
@@ -96,20 +101,28 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시 */}
|
{/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시 */}
|
||||||
{showTitleSuggestions && titleSuggestions.length > 0 && (
|
{selectedCategory && (
|
||||||
<div className="mt-1 mb-3 animate-fade-in">
|
<div
|
||||||
<div className="flex flex-wrap gap-2">
|
className={`mt-1 mb-3 overflow-hidden transition-all duration-300 ease-out ${
|
||||||
{titleSuggestions.map((suggestion) => (
|
showTitleSuggestions
|
||||||
<Badge
|
? 'max-h-24 opacity-100 translate-y-0'
|
||||||
key={suggestion}
|
: 'max-h-0 opacity-0 -translate-y-4'
|
||||||
variant="outline"
|
}`}
|
||||||
className="cursor-pointer hover:bg-neuro-income/10 transition-colors px-3 py-1"
|
>
|
||||||
onClick={() => handleTitleSuggestionClick(suggestion)}
|
{titleSuggestions.length > 0 && (
|
||||||
>
|
<div className="flex flex-wrap gap-2">
|
||||||
{suggestion}
|
{titleSuggestions.map((suggestion) => (
|
||||||
</Badge>
|
<Badge
|
||||||
))}
|
key={suggestion}
|
||||||
</div>
|
variant="outline"
|
||||||
|
className="cursor-pointer hover:bg-neuro-income/10 transition-colors px-3 py-1"
|
||||||
|
onClick={() => handleTitleSuggestionClick(suggestion)}
|
||||||
|
>
|
||||||
|
{suggestion}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -149,49 +162,53 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 구분선과 지출 방법 필드는 금액 입력 시에만 표시 */}
|
{/* 구분선과 지출 방법 필드는 금액 입력 시에만 표시 */}
|
||||||
{showPaymentMethod && (
|
<div
|
||||||
<>
|
className={`overflow-hidden transition-all duration-300 ease-out ${
|
||||||
<Separator className="my-4 animate-fade-in" />
|
showPaymentMethod
|
||||||
|
? 'max-h-36 opacity-100 translate-y-0'
|
||||||
|
: 'max-h-0 opacity-0 -translate-y-4'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Separator className="my-4" />
|
||||||
|
|
||||||
{/* 지출 방법 필드 - 버튼 형식으로 변경 및 텍스트 크기 축소 */}
|
{/* 지출 방법 필드 - 버튼 형식으로 변경 및 텍스트 크기 축소 */}
|
||||||
<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>
|
||||||
<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-xs">신용카드</span>
|
<span className="text-xs">신용카드</span>
|
||||||
</div>
|
|
||||||
<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-xs">현금</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</FormControl>
|
<div
|
||||||
<FormMessage />
|
className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
|
||||||
</FormItem>
|
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-xs">현금</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user