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={() => {

116
app/components/Dashboard.tsx
View File

@@ -53,14 +53,16 @@ export default function Page({user}: {user: any}) {
const [myChannelList, setMyChannelList] = useState<ListChannelItem[]>([]);
const [visibleChannelIds, setVisibleChannelIds] = useState<Set<string>>(new Set());
const [channelsReady, setChannelsReady] = useState<boolean>(false);
const fetchListChannel = useCallback(async (options?: {
cache?: RequestCache;
signal?: AbortSignal;
}): Promise<ListChannelItem[]> => {
const response = await fetch('/api/list_channel', {
const response = await fetch('/api/channel/list', {
cache: options?.cache ?? 'no-store',
signal: options?.signal,
});
console.log('list_channel response:', response);
if (!response.ok) {
let message = '';
@@ -141,13 +143,18 @@ export default function Page({user}: {user: any}) {
setSortKey(key);
}, [sortKey]);
// 그래프에 표시할 선택 지표
const [selectedMetric, setSelectedMetric] = useState<'views'|'validViews'|'premiumViews'|'expectedRevenue'>('validViews')
const fetchMyContents = useCallback(async (s: Date, e: Date) => {
const qs = `start=${encodeURIComponent(s.toISOString())}&end=${encodeURIComponent(e.toISOString())}`;
const res = await fetch(`/api/my_contents?${qs}`, { cache: 'no-store' });
const res = await fetch(`/api/contents/mycontent?${qs}`, { cache: 'no-store' });
const data = await res.json();
if (!res.ok) throw new Error(data?.error ?? 'LOAD_FAILED');
const items = data.items ?? [];
setCpv(data.cpv ?? 0);
console.log(items)
setRows(items);
// 초기 로드 시 전체 선택
setCheckedIds(new Set(items.map((it: any) => it.id)));
@@ -248,6 +255,7 @@ export default function Page({user}: {user: any}) {
// }, []);
useEffect(() => {
const handleResize = () => {
window.resizeTo(500, 500);
@@ -283,6 +291,7 @@ export default function Page({user}: {user: any}) {
// 빈 집합은 "아무 채널도 선택되지 않음"으로 간주하여 행을 숨깁니다
const visibleRows = rows.filter(r => visibleChannelIds.size > 0 && r.handleId && visibleChannelIds.has(r.handleId));
console.log(visibleRows)
const sortedVisibleRows = useMemo(() => {
const copy = [...visibleRows];
const factor = sortDir === 'asc' ? 1 : -1;
@@ -318,10 +327,50 @@ export default function Page({user}: {user: any}) {
return { views, premium, valid, revenue: Math.round(revenue) };
}, [sortedVisibleRows, checkedIds]);
// 채널 필터가 변경되면, 보이지 않는 콘텐츠는 선택 해제
// 그래프 데이터/옵션
const metricLabel: Record<'views'|'validViews'|'premiumViews'|'expectedRevenue', string> = {
views: '총 조회수',
validViews: '유효 조회수',
premiumViews: '프리미엄 조회수',
expectedRevenue: '예상 수익',
}
const metricColor: Record<'views'|'validViews'|'premiumViews'|'expectedRevenue', { border: string, bg: string }> = {
views: { border: '#1f6feb', bg: 'rgba(31, 111, 235, 0.25)' },
validViews: { border: '#F94B37', bg: 'rgba(249, 75, 55, 0.25)' },
premiumViews: { border: '#7C3AED', bg: 'rgba(124, 58, 237, 0.25)' },
expectedRevenue: { border: '#16A34A', bg: 'rgba(22, 163, 74, 0.25)' },
}
const selectedRows = useMemo(() => sortedVisibleRows.filter(r => checkedIds.has(r.id)), [sortedVisibleRows, checkedIds])
const chartData = useMemo(() => {
const labels = selectedRows.map(r => r.subject)
const dataVals = selectedRows.map(r => (r as any)[selectedMetric] as number)
const col = metricColor[selectedMetric]
return {
labels,
datasets: [{
label: metricLabel[selectedMetric],
data: dataVals,
borderColor: col.border,
backgroundColor: col.bg,
tension: 0.35,
}]
}
}, [selectedRows, selectedMetric])
const chartOptions = useMemo(() => ({
responsive: true,
plugins: { legend: { display: false }, title: { display: false } },
scales: { x: { grid: { display: false } }, y: { grid: { display: true } } },
elements: { line: { tension: 0.35 } },
}), [])
// 채널 필터가 변경되면, 보이지 않는 콘텐츠는 선택 해제하되
// 초기 로딩 등으로 가시 채널이 비어있을 땐 해제하지 않음.
// 가시 채널이 채워지고 선택이 비어있으면 전체 선택으로 초기화.
useEffect(() => {
if (visibleChannelIds.size === 0) return;
const visibleIdSet = new Set(visibleRows.map(r => r.id));
setCheckedIds(prev => {
if (prev.size === 0) return visibleIdSet; // 기본 전체 선택
const next = new Set(Array.from(prev).filter(id => visibleIdSet.has(id)));
return next;
});
@@ -440,10 +489,10 @@ export default function Page({user}: {user: any}) {
<th className="border-b-1 right-border border-[#e6e9ef] whitespace-nowrap cursor-pointer select-none" onClick={()=> handleSort('premiumViews')}>premium 조회수
<span className={`ml-1 inline-block w-3 text-[10px] ${sortKey==='premiumViews' ? 'opacity-100' : 'opacity-0'}`}>{sortDir==='asc'?'▲':'▼'}</span>
</th>
<th className="border-b-1 right-border border-[#e6e9ef] whitespace-nowrap cursor-pointer select-none bg-[#FFF3F2]" onClick={()=> handleSort('validViews')}>유효 조회수
<th className="border-b-1 right-border border-[#e6e9ef] whitespace-nowrap cursor-pointer select-none " onClick={()=> handleSort('validViews')}>유효 조회수
<span className={`ml-1 inline-block w-3 text-[10px] ${sortKey==='validViews' ? 'opacity-100' : 'opacity-0'}`}>{sortDir==='asc'?'▲':'▼'}</span>
</th>
<th className="border-b-1 border-[#e6e9ef] whitespace-nowrap min-w-[180px] cursor-pointer select-none bg-[#FFF3F2]" onClick={()=> handleSort('expectedRevenue')}>예상수익
<th className="border-b-1 border-[#e6e9ef] whitespace-nowrap min-w-[180px] cursor-pointer select-none " onClick={()=> handleSort('expectedRevenue')}>예상수익
<span className={`ml-1 inline-block w-3 text-[10px] ${sortKey==='expectedRevenue' ? 'opacity-100' : 'opacity-0'}`}>{sortDir==='asc'?'▲':'▼'}</span>
</th>
</tr>
@@ -471,14 +520,24 @@ export default function Page({user}: {user: any}) {
}}
/>
</td>
<td className="right-border border-b-1 border-t-1 border-[#e6e9ef] text-center whitespace-nowrap overflow-hidden">
<div className="flex items-center justify-center">
{r.icon && <img src={r.icon} alt="icon" className="w-6 h-6 mr-2" />}
<td className="right-border border-b-1 border-t-1 border-[#e6e9ef] text-left whitespace-nowrap overflow-hidden pl-3">
<div className="flex items-center justify-start">
{r.icon && <img src={r.icon} alt="icon" className="w-6 h-6 mr-2 rounded-full" />}
{r.handle}
</div>
</td>
<td className="right-border border-b-1 border-t-1 border-[#e6e9ef] text-center whitespace-nowrap overflow-hidden">{new Date(r.pubDate).toISOString().slice(0,10)}</td>
<td className="right-border border-b-1 border-t-1 border-[#e6e9ef] text-center whitespace-nowrap overflow-hidden">{r.subject}</td>
<td className="right-border border-b-1 border-t-1 border-[#e6e9ef] text-center whitespace-nowrap overflow-hidden">
<a
href={`https://www.youtube.com/watch?v=${encodeURIComponent(r.id)}`}
target="_blank"
rel="noopener noreferrer"
className="text-[#1f6feb] hover:underline"
title={r.subject}
>
{r.subject}
</a>
</td>
<td className="right-border border-b-1 border-t-1 border-[#e6e9ef] text-center">{formatNumberWithCommas(r.watchTime)}</td>
<td className="right-border border-b-1 border-t-1 border-[#e6e9ef] text-center">{formatNumberWithCommas(r.views)}</td>
<td className="right-border border-b-1 border-t-1 border-[#e6e9ef] text-center">{formatNumberWithCommas(r.premiumViews)}</td>
@@ -488,11 +547,21 @@ export default function Page({user}: {user: any}) {
</td>
</tr>
))}
{sortedVisibleRows.length === 1 && (
<tr>
<td colSpan={9} className="p-0">
<div style={{ height: 'calc(100% - 49px - 54px)' }} />
</td>
</tr>
)}
</tbody>
</table>
</div>
<div className="border-1 border-[#e6e9ef] col-[1/5] sm:col-[1/3] sm:row-[3/4] xl:col-[1/2] xl:row-[3/4] bg-white rounded-lg flex flex-col justify-around items-start p-3">
<div className={`border-1 col-[1/5] sm:col-[1/3] sm:row-[3/4] xl:col-[1/2] xl:row-[3/4] bg-white rounded-lg flex flex-col justify-around items-start p-3 cursor-pointer`}
style={{ borderColor: selectedMetric==='views' ? metricColor.views.border : '#e6e9ef' }}
onClick={() => setSelectedMetric('views')}
>
<div>
<div className="text-xl font-bold mb-2">총 조회수</div>
{/* <div className=""> <CalenderSelector dateString={dateString} is_ri={false} is_small={true} /> </div> */}
@@ -503,7 +572,10 @@ export default function Page({user}: {user: any}) {
</div>
</div>
<div className="border-1 border-[#e6e9ef] col-[1/5] sm:col-[3/5] sm:row-[3/4] xl:col-[2/3] xl:row-[3/4] bg-white rounded-lg flex flex-col justify-around items-start p-3">
<div className={`border-1 col-[1/5] sm:col-[3/5] sm:row-[3/4] xl:col-[2/3] xl:row-[3/4] bg-white rounded-lg flex flex-col justify-around items-start p-3 cursor-pointer`}
style={{ borderColor: selectedMetric==='premiumViews' ? metricColor.premiumViews.border : '#e6e9ef' }}
onClick={() => setSelectedMetric('premiumViews')}
>
<div>
<div className="text-xl font-bold mb-2"> 프리미엄 조회수</div>
@@ -514,7 +586,10 @@ export default function Page({user}: {user: any}) {
{/* <div className="text-xs font-normal text-[#F94B37]"> + 0.24%</div> */}
</div>
</div>
<div className="border-1 border-[#F94B37] col-[1/5] sm:col-[1/3] sm:row-[4/5] xl:col-[1/2] xl:row-[4/5] bg-white rounded-lg flex flex-col justify-around items-start p-3">
<div className={`border-1 col-[1/5] sm:col-[1/3] sm:row-[4/5] xl:col-[1/2] xl:row-[4/5] bg-white rounded-lg flex flex-col justify-around items-start p-3 cursor-pointer`}
style={{ borderColor: selectedMetric==='validViews' ? metricColor.validViews.border : '#e6e9ef' }}
onClick={() => setSelectedMetric('validViews')}
>
<div>
<div className="text-xl font-bold mb-2"> 유효 조회수</div>
{/* <div className=""> <CalenderSelector dateString={dateString} is_ri={false} is_small={true} /> </div> */}
@@ -525,7 +600,10 @@ export default function Page({user}: {user: any}) {
{/* <div className="text-xs font-normal text-[#F94B37]"> + 0.24%</div> */}
</div>
</div>
<div className="border-1 border-[#e6e9ef] col-[1/5] sm:col-[3/5] sm:row-[4/5] xl:col-[2/3] xl:row-[4/5] bg-white rounded-lg flex flex-col justify-around items-start p-3">
<div className={`border-1 col-[1/5] sm:col-[3/5] sm:row-[4/5] xl:col-[2/3] xl:row-[4/5] bg-white rounded-lg flex flex-col justify-around items-start p-3 cursor-pointer`}
style={{ borderColor: selectedMetric==='expectedRevenue' ? metricColor.expectedRevenue.border : '#e6e9ef' }}
onClick={() => setSelectedMetric('expectedRevenue')}
>
<div>
<div className="text-xl font-bold mb-2"> 예상 수익 </div>
@@ -536,15 +614,19 @@ export default function Page({user}: {user: any}) {
{/* <div className="text-xs font-normal text-[#0000FF]"> - 1.24%</div> */}
</div>
</div>
<div className="border-1 border-[#F94B37] hidden xl:col-[3/5] xl:row-[3/5] bg-white rounded-lg p-4 xl:flex xl:flex-col">
<div className="text-xl font-bold"> 유효 조회수 추이 </div>
<div className="border-1 hidden xl:col-[3/5] xl:row-[3/5] bg-white rounded-lg p-4 xl:flex xl:flex-col" style={{ borderColor: metricColor[selectedMetric].border }}>
<div className="text-xl font-bold"> {metricLabel[selectedMetric]} 추이 </div>
<div className="text-normal text-gray-500"> 상위 테이블에서 설정한 데이터를 토대로 그래프가 표출됩니다.</div>
<div className="flex flex-row justify-start items-center">
<div className="font-bold text-3xl my-4"> 33,500 </div>
<div className="font-bold text-3xl my-4"> {formatNumberWithCommas(
selectedMetric === 'views' ? totals.views :
selectedMetric === 'validViews' ? totals.valid :
selectedMetric === 'premiumViews' ? totals.premium : totals.revenue
)} </div>
{/* <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={data} options={options} />
<Line data={chartData} options={chartOptions} />
</div>
</div>
</div>