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