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-10-15 12:17:36 +00:00
parent 0ab4b037eb
commit 9c0aeb73e8
3 changed files with 157 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
app/components/Dashboard.tsx
View File

@@ -109,6 +109,8 @@ export default function Page({user}: {user: any}) {
const [dateString, setDateString] = useState<string>("2025.03.01 ~ 2025.03.31");
const chartRef = useRef<HTMLDivElement>(null);
const [hasRun, setHasRun] = useState(false);
const [calendarOpen, setCalendarOpen] = useState(false);
const [filterOpen, setFilterOpen] = useState(false);
// 전역 상수는 공용 파일에서 import
@@ -316,9 +318,16 @@ export default function Page({user}: {user: any}) {
expectedRevenue: { border: '#16A34A', bg: 'rgba(22, 163, 74, 0.25)' },
}
const selectedRows = useMemo(() => sortedVisibleRows.filter(r => checkedIds.has(r.id)), [sortedVisibleRows, checkedIds])
const [seriesMode, setSeriesMode] = useState<'items'|'series'>('items')
const selectedIdsKey = useMemo(() => {
const ids = Array.from(checkedIds)
if (ids.length === 0) return ''
ids.sort()
return ids.join(',')
}, [checkedIds])
const [seriesMode, setSeriesMode] = useState<'items'|'series'>('series')
const [seriesInterval, setSeriesInterval] = useState<'day'|'week'|'month'>('day')
const [seriesItems, setSeriesItems] = useState<Array<{ period: string, views: number, validViews: number, premiumViews: number, expectedRevenue: number }>>([])
const [seriesLoading, setSeriesLoading] = useState<boolean>(false)
const chartData = useMemo(() => {
const col = metricColor[selectedMetric]
if (seriesMode === 'series') {
@@ -337,6 +346,37 @@ export default function Page({user}: {user: any}) {
elements: { line: { tension: 0.35 } },
}), [])
// 시리즈 모드일 때 옵션/기간 변경 시 자동 데이터 로드
useEffect(() => {
if (seriesMode !== 'series') return;
const s = startDate; const e = endDate;
const qs = new URLSearchParams();
qs.set('start', s.toISOString());
qs.set('end', e.toISOString());
qs.set('mode', 'series');
qs.set('interval', seriesInterval);
if (selectedIdsKey) qs.set('contentIds', selectedIdsKey);
let cancelled = false;
setSeriesLoading(true);
(async () => {
try {
const res = await fetch(`/api/contents/mycontent?${qs.toString()}`, { cache: 'no-store' });
const data = await res.json();
if (res.ok && !cancelled) setSeriesItems(data.items || []);
} catch (e) {
if (!cancelled) console.error(e);
} finally {
if (!cancelled) setSeriesLoading(false);
}
})();
return () => { cancelled = true; };
}, [seriesMode, seriesInterval, startDate, endDate, selectedIdsKey]);
// 시리즈 모드 해제 시 스피너 숨김 보장
useEffect(() => {
if (seriesMode !== 'series') setSeriesLoading(false);
}, [seriesMode]);
// 채널 필터가 변경되면, 보이지 않는 콘텐츠는 선택 해제하되
// 초기 로딩 등으로 가시 채널이 비어있을 땐 해제하지 않음.
// 가시 채널이 채워지고 선택이 비어있으면 전체 선택으로 초기화.
@@ -364,7 +404,7 @@ export default function Page({user}: {user: any}) {
py-2
">
<div className="order-1 col-[1/5] row-[1/2] flex flex-row">
<div className="grow flex flex-row items-center overflow-y-hidden overflow-x-auto mx-1 scrollbar-thin-x scrollbar-outside-x">
<div className="grow h-[48px] flex flex-row items-center overflow-y-hidden overflow-x-auto mx-1 scrollbar-thin-x scrollbar-outside-x" style={{ scrollbarGutter: 'stable both-edges' }}>
{myChannelList.length === 0 ? (
<div className=" h-[32px] border-1 border-border-pale rounded-xl flex items-center justify-center bg-white mx-1 px-2 min-w-[fit-content] font-semibold text-[#848484]">
등록된 채널이 없습니다.
@@ -394,6 +434,8 @@ export default function Page({user}: {user: any}) {
dateString={dateString}
is_ri={true}
is_small={false}
isOpen={calendarOpen}
onOpenChange={(open)=>{ setCalendarOpen(open); if (open) setFilterOpen(false); }}
onRangeChange={(s,e)=>{
setStartDate(s); setEndDate(e);
setDateString(`${s.toISOString().slice(0,10)} ~ ${e.toISOString().slice(0,10)}`);
@@ -405,6 +447,8 @@ export default function Page({user}: {user: any}) {
channel_list={myChannelList}
visibleSet={visibleChannelIds}
onChangeVisible={(next) => setVisibleChannelIds(new Set(next))}
isOpen={filterOpen}
onOpenChange={(open)=>{ setFilterOpen(open); if (open) setCalendarOpen(false); }}
/>
<div className="w-2"> </div>
</div>
@@ -596,20 +640,11 @@ export default function Page({user}: {user: any}) {
<option value="series">기간별</option>
</select>
{seriesMode === 'series' && (
<>
<select className="border-1 border-[#e6e9ef] rounded px-2 py-1" value={seriesInterval} onChange={e => setSeriesInterval(e.target.value as any)}>
<option value="day">일</option>
<option value="week">주</option>
<option value="month">월</option>
</select>
<button className="border-1 border-[#e6e9ef] rounded px-2 py-1" onClick={async () => {
const s = startDate; const e = endDate;
const qs = new URLSearchParams({ start: s.toISOString(), end: e.toISOString(), mode: 'series', interval: seriesInterval })
const res = await fetch(`/api/contents/mycontent?${qs.toString()}`, { cache: 'no-store' })
const data = await res.json()
if (res.ok) setSeriesItems(data.items || [])
}}>불러오기</button>
</>
<select className="border-1 border-[#e6e9ef] rounded px-2 py-1" value={seriesInterval} onChange={e => setSeriesInterval(e.target.value as any)}>
<option value="day">일</option>
<option value="week">주</option>
<option value="month">월</option>
</select>
)}
</div>
<div className="flex flex-row justify-start items-center">
@@ -621,7 +656,13 @@ export default function Page({user}: {user: any}) {
{/* <div className=" p-2 pt-5 text-sm font-normal text-[#F94B37]"> + 0.24%</div> */}
</div>
<div className="w-full flex-1 items-center justify-center flex" ref={chartRef}>
<Line data={chartData} options={chartOptions} />
{seriesMode === 'series' && seriesLoading ? (
<div className="flex items-center justify-center w-full h-full">
<div className="animate-spin rounded-full h-8 w-8 border-4 border-[#e6e9ef]" style={{ borderTopColor: metricColor[selectedMetric].border }} />
</div>
) : (
<Line data={chartData} options={chartOptions} />
)}
</div>
</div>
</div>