feat:홈택스 기간 버튼 선택 상태 표시 추가

This commit is contained in:
김보곤
2026-02-03 17:38:14 +09:00
parent b4b5eca356
commit 5b1f2a45f7

View File

@@ -338,6 +338,7 @@ className="flex items-center gap-2 px-3 py-1.5 bg-blue-100 text-blue-700 rounded
const [dataSource, setDataSource] = useState('local'); // 'local': 로컬 DB, 'api': 바로빌 API
const [syncing, setSyncing] = useState(false); // 동기화 중 여부
const [lastSyncAt, setLastSyncAt] = useState({ sales: null, purchase: null }); // 마지막 동기화 시간
const [selectedPeriod, setSelectedPeriod] = useState(null); // 선택된 기간 버튼 ('q1', 'q2', 'q3', 'q4', 'h1', 'h2', 'year')
// 진단 관련 상태
const [showDiagnoseModal, setShowDiagnoseModal] = useState(false);
@@ -657,6 +658,7 @@ className="flex items-center gap-2 px-3 py-1.5 bg-blue-100 text-blue-700 rounded
const lastDay = new Date(year, startMonth + 3, 0);
setDateFrom(formatKoreanDate(firstDay));
setDateTo(formatKoreanDate(lastDay));
setSelectedPeriod('q' + quarter);
};
// 기(반기) 계산 (1기: 1-6월, 2기: 7-12월)
@@ -668,6 +670,7 @@ className="flex items-center gap-2 px-3 py-1.5 bg-blue-100 text-blue-700 rounded
const lastDay = new Date(year, startMonth + 6, 0);
setDateFrom(formatKoreanDate(firstDay));
setDateTo(formatKoreanDate(lastDay));
setSelectedPeriod('h' + half);
};
// 1년 계산
@@ -678,6 +681,7 @@ className="flex items-center gap-2 px-3 py-1.5 bg-blue-100 text-blue-700 rounded
const lastDay = new Date(year, 11, 31);
setDateFrom(formatKoreanDate(firstDay));
setDateTo(formatKoreanDate(lastDay));
setSelectedPeriod('year');
};
// 거래처 필터링
@@ -749,26 +753,47 @@ className="px-3 py-2 text-sm border border-[#ced4da] rounded bg-white focus:bord
<input
type="date"
value={dateFrom}
onChange={(e) => setDateFrom(e.target.value)}
onChange={(e) => { setDateFrom(e.target.value); setSelectedPeriod(null); }}
className="px-3 py-2 text-sm border border-[#ced4da] rounded bg-white focus:border-[#86b7fe] focus:ring-2 focus:ring-[#86b7fe]/25 outline-none"
/>
<span className="text-[#6c757d] px-1">~</span>
<input
type="date"
value={dateTo}
onChange={(e) => setDateTo(e.target.value)}
onChange={(e) => { setDateTo(e.target.value); setSelectedPeriod(null); }}
className="px-3 py-2 text-sm border border-[#ced4da] rounded bg-white focus:border-[#86b7fe] focus:ring-2 focus:ring-[#86b7fe]/25 outline-none"
/>
</div>
{/* 분기/기/년 버튼 그룹 */}
<div className="flex items-center">
<button onClick={() => handleQuarter(1)} className="px-3 py-2 text-xs border border-[#ced4da] bg-white hover:bg-[#e9ecef] transition-colors rounded-l">1분기</button>
<button onClick={() => handleQuarter(2)} className="px-3 py-2 text-xs border-t border-b border-[#ced4da] bg-white hover:bg-[#e9ecef] transition-colors">2분기</button>
<button onClick={() => handleQuarter(3)} className="px-3 py-2 text-xs border-t border-b border-[#ced4da] bg-white hover:bg-[#e9ecef] transition-colors">3분기</button>
<button onClick={() => handleQuarter(4)} className="px-3 py-2 text-xs border border-[#ced4da] bg-white hover:bg-[#e9ecef] transition-colors">4분기</button>
<button onClick={() => handleHalf(1)} className="px-3 py-2 text-xs border-t border-b border-r border-[#ced4da] bg-white hover:bg-[#e9ecef] transition-colors">1</button>
<button onClick={() => handleHalf(2)} className="px-3 py-2 text-xs border-t border-b border-r border-[#ced4da] bg-white hover:bg-[#e9ecef] transition-colors">2</button>
<button onClick={handleYear} className="px-3 py-2 text-xs border border-[#ced4da] bg-white hover:bg-[#e9ecef] transition-colors rounded-r">1</button>
<button
onClick={() => handleQuarter(1)}
className={`px-3 py-2 text-xs border border-[#ced4da] transition-colors rounded-l ${selectedPeriod === 'q1' ? 'bg-[#0d6efd] text-white border-[#0d6efd]' : 'bg-white hover:bg-[#e9ecef]'}`}
>1분기</button>
<button
onClick={() => handleQuarter(2)}
className={`px-3 py-2 text-xs border-t border-b border-[#ced4da] transition-colors ${selectedPeriod === 'q2' ? 'bg-[#0d6efd] text-white border-[#0d6efd]' : 'bg-white hover:bg-[#e9ecef]'}`}
>2분기</button>
<button
onClick={() => handleQuarter(3)}
className={`px-3 py-2 text-xs border-t border-b border-[#ced4da] transition-colors ${selectedPeriod === 'q3' ? 'bg-[#0d6efd] text-white border-[#0d6efd]' : 'bg-white hover:bg-[#e9ecef]'}`}
>3분기</button>
<button
onClick={() => handleQuarter(4)}
className={`px-3 py-2 text-xs border border-[#ced4da] transition-colors ${selectedPeriod === 'q4' ? 'bg-[#0d6efd] text-white border-[#0d6efd]' : 'bg-white hover:bg-[#e9ecef]'}`}
>4분기</button>
<button
onClick={() => handleHalf(1)}
className={`px-3 py-2 text-xs border-t border-b border-r border-[#ced4da] transition-colors ${selectedPeriod === 'h1' ? 'bg-[#0d6efd] text-white border-[#0d6efd]' : 'bg-white hover:bg-[#e9ecef]'}`}
>1</button>
<button
onClick={() => handleHalf(2)}
className={`px-3 py-2 text-xs border-t border-b border-r border-[#ced4da] transition-colors ${selectedPeriod === 'h2' ? 'bg-[#0d6efd] text-white border-[#0d6efd]' : 'bg-white hover:bg-[#e9ecef]'}`}
>2</button>
<button
onClick={handleYear}
className={`px-3 py-2 text-xs border border-[#ced4da] transition-colors rounded-r ${selectedPeriod === 'year' ? 'bg-[#0d6efd] text-white border-[#0d6efd]' : 'bg-white hover:bg-[#e9ecef]'}`}
>1</button>
</div>
{/* 검색 버튼 */}
<button