불필ㅇㅛ 내여ㄱ 삭ㅈ
This commit is contained in:
@@ -1,100 +0,0 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useSearchFilter } from '@/hooks/useSearchFilter';
|
||||
import SearchFilterButton from './SearchFilterButton';
|
||||
import { SearchFilter, formatDateRange } from '@/types/filter';
|
||||
|
||||
interface SearchFilterExampleProps {
|
||||
onFilterChange?: (filter: SearchFilter) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const SearchFilterExample: React.FC<SearchFilterExampleProps> = ({
|
||||
onFilterChange,
|
||||
className = ''
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const searchFilterOptions = onFilterChange ? {
|
||||
storageKey: 'transaction_search_filter',
|
||||
onFilterChange
|
||||
} : {
|
||||
storageKey: 'transaction_search_filter'
|
||||
};
|
||||
|
||||
const {
|
||||
filter,
|
||||
isModalOpen,
|
||||
openModal,
|
||||
closeModal,
|
||||
handleFilterConfirm,
|
||||
getDisplayText,
|
||||
isFilterActive,
|
||||
resetFilter
|
||||
} = useSearchFilter(searchFilterOptions);
|
||||
|
||||
return (
|
||||
<div className={`space-y-4 ${className}`}>
|
||||
{/* 조회조건 버튼과 필터 정보 */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 items-start sm:items-center justify-between">
|
||||
<div className="flex gap-2 items-center">
|
||||
<SearchFilterButton
|
||||
displayText={getDisplayText()}
|
||||
isActive={isFilterActive}
|
||||
onClick={openModal}
|
||||
/>
|
||||
|
||||
{/* 초기화 버튼 (필터가 활성화된 경우만 표시) */}
|
||||
{isFilterActive && (
|
||||
<button
|
||||
onClick={resetFilter}
|
||||
className="text-sm text-gray-500 hover:text-gray-700 underline"
|
||||
>
|
||||
{t('common.reset')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 현재 필터 요약 정보 */}
|
||||
<div className="text-sm text-gray-600">
|
||||
{filter.dateRange && (
|
||||
<span>
|
||||
{formatDateRange(filter.dateRange)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 현재 적용된 필터 상세 정보 (디버깅용) */}
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<h3 className="text-sm font-medium text-gray-900 mb-2">{t('filter.currentConditions')}</h3>
|
||||
<div className="space-y-1 text-sm text-gray-600">
|
||||
<div>
|
||||
<span className="font-medium">{t('filter.period')}:</span> {filter.period === 'custom' ? t('filter.periods.custom') : t(`filter.periods.${filter.period}`)}
|
||||
</div>
|
||||
{filter.dateRange && (
|
||||
<div>
|
||||
<span className="font-medium">{t('filter.dateRange')}:</span> {formatDateRange(filter.dateRange)}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<span className="font-medium">{t('filter.transactionType')}:</span> {t(`filter.transactionTypes.${filter.transactionType}`)}
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">{t('filter.sortOrder')}:</span> {t(`filter.sortOrders.${filter.sortOrder}`)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 조회조건 설정 모달
|
||||
<SearchFilterModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={closeModal}
|
||||
onConfirm={handleFilterConfirm}
|
||||
initialFilter={filter}
|
||||
/>
|
||||
*/}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchFilterExample;
|
||||
@@ -6,5 +6,4 @@ export { default as Services } from './Services';
|
||||
export { default as TabBar } from './TabBar';
|
||||
export { default as SlideMenu } from './SlideMenu';
|
||||
export { default as SearchFilterButton } from './SearchFilterButton';
|
||||
export { default as SearchFilterExample } from './SearchFilterExample';
|
||||
export { default as LanguageSwitcher } from './LanguageSwitcher';
|
||||
Reference in New Issue
Block a user