motaju/ef_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

또수정

Browse Source
This commit is contained in:
motaju
2025-09-09 06:15:34 +00:00
parent fd34eb370f
commit 94b34d5946
7 changed files with 415 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
app/components/CalenderSelector.tsx
View File

@@ -39,6 +39,11 @@ export default function CalenderSelector( {dateString, is_small, onRangeChange}:
<div className={`flex-1 min-w-0 font-semibold ${is_small ? 'text-xs':'text-sm'}`}>
{selected === DateRangeEnum.DAY_RANGE && `${rangeStart.toISOString().split('T')[0]} ~ ${rangeEnd.toISOString().split('T')[0]}`}
{selected === DateRangeEnum.ONE_MONTH&& '최근 1개월'}
{selected === DateRangeEnum.ONE_WEEK&& '최근 1주일'}
{selected === DateRangeEnum.TWO_MONTHS&& '최근 2개월'}
{selected === DateRangeEnum.THREE_MONTHS&& '최근 3개월'}
{selected === DateRangeEnum.SIX_MONTHS&& '최근 6개월'}
{selected === DateRangeEnum.ONE_YEAR&& '최근 1년'}
{selected === DateRangeEnum.ALL&& '전체'}
</div>
<div className={`pt-[3px] transition-transform ${isOpen ? 'rotate-180' : ''} flex-shrink-0`}>
@@ -65,6 +70,22 @@ export default function CalenderSelector( {dateString, is_small, onRangeChange}:
<span className="text-sm">전체</span>
</button>
<div className="h-1 "></div>
<button
className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.ONE_WEEK? 'bg-[#FFF3F2] font-semibold' : ''}`}
onClick={() => {
setSelected(DateRangeEnum.ONE_WEEK);
const end = new Date();
const start = new Date(end.getTime() - 7*24*60*60*1000);
setRangeStart(start);
setRangeEnd(end);
onRangeChange?.(start, end);
setIsOpen(false);
}}
>
<OneMonth color={selected === DateRangeEnum.ONE_WEEK ? '#F94B37' : '#848484'} width={16} height={16} />
<span className="text-sm">최근 1주일</span>
</button>
<div className="h-1 "></div>
<button
className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.ONE_MONTH? 'bg-[#FFF3F2] font-semibold' : ''}`}
onClick={() => {
@@ -81,6 +102,69 @@ export default function CalenderSelector( {dateString, is_small, onRangeChange}:
<span className="text-sm">최근 1개월</span>
</button>
<div className="h-1 "></div>
<button
className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.TWO_MONTHS? 'bg-[#FFF3F2] font-semibold' : ''}`}
onClick={() => {
setSelected(DateRangeEnum.TWO_MONTHS);
const end = new Date();
const start = new Date(end.getTime() - 60*24*60*60*1000);
setRangeStart(start);
setRangeEnd(end);
onRangeChange?.(start, end);
setIsOpen(false);
}}
>
<OneMonth color={selected === DateRangeEnum.TWO_MONTHS ? '#F94B37' : '#848484'} width={16} height={16} />
<span className="text-sm">최근 2개월</span>
</button>
<div className="h-1 "></div>
<button
className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.THREE_MONTHS? 'bg-[#FFF3F2] font-semibold' : ''}`}
onClick={() => {
setSelected(DateRangeEnum.THREE_MONTHS);
const end = new Date();
const start = new Date(end.getTime() - 90*24*60*60*1000);
setRangeStart(start);
setRangeEnd(end);
onRangeChange?.(start, end);
setIsOpen(false);
}}
>
<OneMonth color={selected === DateRangeEnum.THREE_MONTHS ? '#F94B37' : '#848484'} width={16} height={16} />
<span className="text-sm">최근 3개월</span>
</button>
<div className="h-1 "></div>
<button
className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.SIX_MONTHS? 'bg-[#FFF3F2] font-semibold' : ''}`}
onClick={() => {
setSelected(DateRangeEnum.SIX_MONTHS);
const end = new Date();
const start = new Date(end.getTime() - 182*24*60*60*1000);
setRangeStart(start);
setRangeEnd(end);
onRangeChange?.(start, end);
setIsOpen(false);
}}
>
<OneMonth color={selected === DateRangeEnum.SIX_MONTHS ? '#F94B37' : '#848484'} width={16} height={16} />
<span className="text-sm">최근 6개월</span>
</button>
<div className="h-1 "></div>
<button
className={`flex items-center gap-2 px-2 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.ONE_YEAR? 'bg-[#FFF3F2] font-semibold' : ''}`}
onClick={() => {
setSelected(DateRangeEnum.ONE_YEAR);
const end = new Date();
const start = new Date(end.getTime() - 365*24*60*60*1000);
setRangeStart(start);
setRangeEnd(end);
onRangeChange?.(start, end);
setIsOpen(false);
}}
>
<OneMonth color={selected === DateRangeEnum.ONE_YEAR ? '#F94B37' : '#848484'} width={16} height={16} />
<span className="text-sm">최근 1년</span>
</button>
<div
className={`flex items-center gap-1 px-2 pr-0 h-[32px] rounded-md hover:bg-[#f6f6f6] text-left ${selected === DateRangeEnum.DAY_RANGE ? 'bg-[#FFF3F2] font-semibold' : ''}`}
onClick={() => {