552 lines
23 KiB
TypeScript
552 lines
23 KiB
TypeScript
"use client";
|
|
import { useEffect, useRef, useState, useCallback, useMemo } from "react";
|
|
import { DateRangeEnum } from "@/app/constants/dateRange";
|
|
import { useSession, signIn } from "next-auth/react";
|
|
|
|
import CalenderSelector from "@/app/components/CalenderSelector";
|
|
import SvgChannelFilter from "@/app/components/svgs/svgChannelFilter";
|
|
import ChannelFilter from "@/app/components/ChannelFilter";
|
|
|
|
// App.tsx
|
|
import {
|
|
Chart as ChartJS,
|
|
CategoryScale,
|
|
LinearScale,
|
|
PointElement,
|
|
LineElement,
|
|
Title,
|
|
Tooltip,
|
|
Legend,
|
|
} from "chart.js";
|
|
import { Line } from "react-chartjs-2";
|
|
|
|
// Chart.js 모듈 등록 (꼭 필요)
|
|
ChartJS.register(
|
|
CategoryScale,
|
|
LinearScale,
|
|
PointElement,
|
|
LineElement,
|
|
Title,
|
|
Tooltip,
|
|
Legend
|
|
);
|
|
|
|
type ListChannelRawItem = {
|
|
id: string;
|
|
email?: string;
|
|
handle: string;
|
|
isApproved: boolean;
|
|
createtime: string;
|
|
icon?: string;
|
|
};
|
|
|
|
type ListChannelItem = {
|
|
id: string;
|
|
email?: string;
|
|
handle: string;
|
|
createtime: string;
|
|
is_approved: boolean;
|
|
icon?: string;
|
|
};
|
|
|
|
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', {
|
|
cache: options?.cache ?? 'no-store',
|
|
signal: options?.signal,
|
|
});
|
|
|
|
if (!response.ok) {
|
|
let message = '';
|
|
try {
|
|
message = await response.text();
|
|
} catch {}
|
|
throw new Error(`list_channel 요청 실패: ${response.status} ${message}`);
|
|
}
|
|
|
|
const data = (await response.json()) as { items: ListChannelRawItem[] } | unknown;
|
|
const items = (data as { items: ListChannelRawItem[] })?.items ?? [];
|
|
|
|
return items.map((item) => ({
|
|
id: item.id,
|
|
email: item.email,
|
|
handle: item.handle,
|
|
createtime: item.createtime,
|
|
is_approved: item.isApproved,
|
|
icon: item.icon,
|
|
}));
|
|
}, []);
|
|
|
|
const [chanellist, setChanellist] = useState<string[]>([]);
|
|
const [contentlist, setContentlist] = useState<{
|
|
id: string;
|
|
subject: string;
|
|
pubDate: Date;
|
|
views: number;
|
|
validViews: number;
|
|
premiumViews: number;
|
|
watchTime: number;
|
|
publisher?: string;
|
|
}[]>([]);
|
|
const [selectedChannels, setSelectedChannels] = useState<string[]>(chanellist);
|
|
const [loading, setLoading] = useState<boolean>(false);
|
|
const [dateRange, setDateRange] = useState<{
|
|
startDate: Date;
|
|
endDate: Date;
|
|
}>({
|
|
startDate: new Date(),
|
|
endDate: new Date()
|
|
});
|
|
|
|
const [dateString, setDateString] = useState<string>("2025.03.01 ~ 2025.03.31");
|
|
const chartRef = useRef<HTMLDivElement>(null);
|
|
const [hasRun, setHasRun] = useState(false);
|
|
|
|
// 전역 상수는 공용 파일에서 import
|
|
|
|
const [globalDateRangeType, setGlobalDateRangeType] = useState<number>(DateRangeEnum.ALL);
|
|
const [dateRangeBlock1, setDateRangeBlock1] = useState<number>(DateRangeEnum.ALL);
|
|
const [dateRangeBlock2, setDateRangeBlock2] = useState<number>(DateRangeEnum.ALL);
|
|
const [dateRangeBlock3, setDateRangeBlock3] = useState<number>(DateRangeEnum.ALL);
|
|
const [dateRangeBlock4, setDateRangeBlock4] = useState<number>(DateRangeEnum.ALL);
|
|
const [dateRangeGraph, setDateRangeGraph] = useState<number>(DateRangeEnum.ALL);
|
|
|
|
const [startDate, setStartDate] = useState<Date>(new Date(Date.now()-30*24*60*60*1000));
|
|
const [endDate, setEndDate] = useState<Date>(new Date());
|
|
const [cpv, setCpv] = useState<number>(0);
|
|
const [rows, setRows] = useState<Array<{
|
|
id: string;
|
|
subject: string;
|
|
pubDate: string;
|
|
views: number;
|
|
premiumViews: number;
|
|
watchTime: number;
|
|
handle: string;
|
|
handleId: string | null;
|
|
icon: string;
|
|
validViews: number;
|
|
expectedRevenue: number;
|
|
}>>([]);
|
|
const [checkedIds, setCheckedIds] = useState<Set<string>>(new Set());
|
|
const [sortKey, setSortKey] = useState<'handle'|'subject'|'pubDate'|'watchTime'|'views'|'premiumViews'|'validViews'|'expectedRevenue'>('pubDate');
|
|
const [sortDir, setSortDir] = useState<'asc'|'desc'>('desc');
|
|
const handleSort = useCallback((key: 'handle'|'subject'|'pubDate'|'watchTime'|'views'|'premiumViews'|'validViews'|'expectedRevenue') => {
|
|
setSortDir(prev => (sortKey === key ? (prev === 'asc' ? 'desc' : 'asc') : 'desc'));
|
|
setSortKey(key);
|
|
}, [sortKey]);
|
|
|
|
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 data = await res.json();
|
|
if (!res.ok) throw new Error(data?.error ?? 'LOAD_FAILED');
|
|
const items = data.items ?? [];
|
|
setCpv(data.cpv ?? 0);
|
|
setRows(items);
|
|
// 초기 로드 시 전체 선택
|
|
setCheckedIds(new Set(items.map((it: any) => it.id)));
|
|
}, []);
|
|
|
|
|
|
|
|
const data = {
|
|
labels: ["Jan", "Feb", "Mar", "Apr", "May"],
|
|
datasets: [
|
|
{
|
|
label: "",
|
|
data: [120000, 150000, 200000, 190000, 230000],
|
|
borderColor: "#F94B37", // 새로운 색상 적용
|
|
backgroundColor: "rgba(249, 75, 55, 0.5)", // 배경색도 변경
|
|
},
|
|
],
|
|
};
|
|
|
|
const options = {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: { display: false },
|
|
title: { display: false, text: "정산 수익 추이" },
|
|
},
|
|
|
|
scales: {
|
|
x: {
|
|
grid: {
|
|
display: false,
|
|
},
|
|
},
|
|
y: {
|
|
grid: {
|
|
display: true,
|
|
},
|
|
ticks: {
|
|
stepSize: 20000,
|
|
},
|
|
},
|
|
},
|
|
elements: {
|
|
line: {
|
|
tension: 0.4, // 곡선으로 변경
|
|
},
|
|
},
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!hasRun) {
|
|
if (chartRef.current) {
|
|
setHasRun(true);
|
|
chartRef.current.style.width = '10px';
|
|
setTimeout(() => {
|
|
chartRef.current!.style.width = '100%';
|
|
}, 100);
|
|
}
|
|
}
|
|
}, [hasRun, chartRef.current]);
|
|
|
|
const handleCheckboxChange = (channel: string) => {
|
|
setSelectedChannels(prev =>
|
|
prev.includes(channel)
|
|
? prev.filter(c => c !== channel)
|
|
: [...prev, channel]
|
|
);
|
|
};
|
|
|
|
const filteredContentList = contentlist.filter(content =>
|
|
selectedChannels.length === 0 || (content.publisher && selectedChannels.includes(content.publisher))
|
|
);
|
|
|
|
const formatNumberWithCommas = (number: number): string => {
|
|
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
};
|
|
|
|
|
|
// useEffect(() => {
|
|
// setLoading(true);
|
|
// fetch('/api/channels')
|
|
// .then(response => response.json())
|
|
// .then(data => {
|
|
// setChanellist(data);
|
|
// setSelectedChannels(data); // 기본값으로 모든 채널 선택
|
|
// })
|
|
// .finally(() => setLoading(false));
|
|
// }, []);
|
|
|
|
// useEffect(() => {
|
|
// setLoading(true);
|
|
// fetch('/api/contents')
|
|
// .then(response => response.json())
|
|
// .then(data => {
|
|
// const sortedData = data.sort((a: any, b: any) => b.views - a.views);
|
|
// setContentlist(sortedData);
|
|
// })
|
|
// .finally(() => setLoading(false));
|
|
// }, []);
|
|
|
|
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
window.resizeTo(500, 500);
|
|
setTimeout(() => {
|
|
window.resizeTo(window.screen.availWidth, window.screen.availHeight);
|
|
}, 1000);
|
|
};
|
|
|
|
handleResize();
|
|
|
|
}, []);
|
|
|
|
// 내 채널 목록: 최초 1회만 호출
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
const items = await fetchListChannel({ cache: 'no-store' });
|
|
console.log('list_channel:', items);
|
|
setMyChannelList(items);
|
|
// 초기에는 전체 채널 가시
|
|
setVisibleChannelIds(new Set(items.map(i => i.id)));
|
|
setChannelsReady(true);
|
|
} catch (e) {
|
|
console.error('list_channel 요청 에러:', e);
|
|
}
|
|
})();
|
|
}, [fetchListChannel]);
|
|
|
|
|
|
if (loading) {
|
|
return <div className="spinner">Loading...</div>;
|
|
}
|
|
|
|
// 빈 집합은 "아무 채널도 선택되지 않음"으로 간주하여 행을 숨깁니다
|
|
const visibleRows = rows.filter(r => visibleChannelIds.size > 0 && r.handleId && visibleChannelIds.has(r.handleId));
|
|
const sortedVisibleRows = useMemo(() => {
|
|
const copy = [...visibleRows];
|
|
const factor = sortDir === 'asc' ? 1 : -1;
|
|
copy.sort((a,b) => {
|
|
let va: any, vb: any;
|
|
switch (sortKey) {
|
|
case 'pubDate': va = new Date(a.pubDate).getTime(); vb = new Date(b.pubDate).getTime(); break;
|
|
case 'watchTime': va = a.watchTime; vb = b.watchTime; break;
|
|
case 'views': va = a.views; vb = b.views; break;
|
|
case 'premiumViews': va = a.premiumViews; vb = b.premiumViews; break;
|
|
case 'validViews': va = a.validViews; vb = b.validViews; break;
|
|
case 'expectedRevenue': va = a.expectedRevenue; vb = b.expectedRevenue; break;
|
|
case 'handle': va = a.handle; vb = b.handle; break;
|
|
case 'subject': va = a.subject; vb = b.subject; break;
|
|
default: va = 0; vb = 0;
|
|
}
|
|
if (typeof va === 'string' && typeof vb === 'string') return va.localeCompare(vb) * factor;
|
|
return ((va as number) - (vb as number)) * factor;
|
|
});
|
|
return copy;
|
|
}, [visibleRows, sortKey, sortDir]);
|
|
const allVisibleChecked = visibleRows.length > 0 && visibleRows.every(r => checkedIds.has(r.id));
|
|
const totals = useMemo(() => {
|
|
let views = 0, premium = 0, valid = 0, revenue = 0;
|
|
for (const r of sortedVisibleRows) {
|
|
if (checkedIds.has(r.id)) {
|
|
views += r.views;
|
|
premium += r.premiumViews;
|
|
valid += r.validViews;
|
|
revenue += r.expectedRevenue;
|
|
}
|
|
}
|
|
return { views, premium, valid, revenue: Math.round(revenue) };
|
|
}, [sortedVisibleRows, checkedIds]);
|
|
|
|
// 채널 필터가 변경되면, 보이지 않는 콘텐츠는 선택 해제
|
|
useEffect(() => {
|
|
const visibleIdSet = new Set(visibleRows.map(r => r.id));
|
|
setCheckedIds(prev => {
|
|
const next = new Set(Array.from(prev).filter(id => visibleIdSet.has(id)));
|
|
return next;
|
|
});
|
|
}, [visibleChannelIds, rows]);
|
|
|
|
|
|
return (
|
|
<div className="
|
|
grid
|
|
grid-cols-[1fr_1fr_1fr_1fr]
|
|
grid-rows-[36px_minmax(300px,auto)_135px_135px_135px_135px]
|
|
sm:grid-rows-[36px_minmax(400px,600px)_minmax(200px,250px)_minmax(200px,250px)]
|
|
gap-2
|
|
w-full
|
|
h-full
|
|
lg:gap-5
|
|
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">
|
|
{myChannelList.length === 0 ? (
|
|
<div className=" h-[36px] 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]">
|
|
등록된 채널이 없습니다.
|
|
</div>
|
|
) : visibleChannelIds.size === 0 ? (
|
|
<div className=" h-[36px] 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-[#F94B37]">
|
|
선택된 채널이 없습니다. 오른쪽 필터에서 채널을 선택하세요.
|
|
</div>
|
|
) : (
|
|
myChannelList.filter(c => visibleChannelIds.has(c.id)).map((channel, index) => (
|
|
<div key={index} className=" h-[36px] border-1 border-border-pale rounded-xl flex items-center justify-center bg-white mx-1 px-2 min-w-[fit-content] font-semibold">
|
|
<div className="w-[24px] h-[24px] rounded-full border-1 border-[#e6e9ef] overflow-hidden mr-2">
|
|
{channel.icon ? (
|
|
<img src={channel.icon} alt="channel icon" className="w-[24px] h-[24px] rounded-full" />
|
|
) : (
|
|
<div className="w-[24px] h-[24px] bg-[#e6e9ef] rounded-full border-1 border-[#848484]" />
|
|
)}
|
|
</div>
|
|
<span className="text-sm font-semibold">{channel.handle}</span>
|
|
</div>
|
|
))
|
|
)}
|
|
|
|
</div>
|
|
<div className='flex flex-row items-center'>
|
|
<CalenderSelector
|
|
dateString={dateString}
|
|
is_ri={true}
|
|
is_small={false}
|
|
onRangeChange={(s,e)=>{
|
|
setStartDate(s); setEndDate(e);
|
|
setDateString(`${s.toISOString().slice(0,10)} ~ ${e.toISOString().slice(0,10)}`);
|
|
fetchMyContents(s,e).catch(console.error);
|
|
}}
|
|
/>
|
|
<div className="w-2"> </div>
|
|
<ChannelFilter
|
|
channel_list={myChannelList}
|
|
visibleSet={visibleChannelIds}
|
|
onChangeVisible={(next) => setVisibleChannelIds(new Set(next))}
|
|
/>
|
|
<div className="w-2"> </div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="
|
|
border-1 border-[#e6e9ef] rounded-lg bg-white col-[1/5] row-[2/3]
|
|
min-h-[300px]
|
|
overflow-auto
|
|
">
|
|
<table className="w-full h-full border-separate border-spacing-y-1 table-auto px-[10px]">
|
|
<colgroup>
|
|
<col className="w-[56px]" />
|
|
<col className="min-w-[160px] max-w-[180px]" />
|
|
<col className="min-w-[140px] w-[160px]" />
|
|
<col className="min-w-[280px]" />
|
|
<col className="min-w-[120px] w-[120px]" />
|
|
<col className="min-w-[120px] w-[120px]" />
|
|
<col className="min-w-[160px] w-[160px]" />
|
|
<col className="min-w-[140px] w-[140px]" />
|
|
<col className="w-[300px]" />
|
|
</colgroup>
|
|
<thead>
|
|
<tr className="sticky top-0 bg-white h-[49px] z-1">
|
|
<th className="border-b-1 border-[#e6e9ef] pl-2 whitespace-nowrap">
|
|
<input
|
|
type="checkbox"
|
|
className="w-[18px] h-[18px]"
|
|
checked={allVisibleChecked}
|
|
onChange={() => {
|
|
const next = new Set(checkedIds);
|
|
if (allVisibleChecked) {
|
|
visibleRows.forEach(r => next.delete(r.id));
|
|
} else {
|
|
visibleRows.forEach(r => next.add(r.id));
|
|
}
|
|
setCheckedIds(next);
|
|
}}
|
|
/>
|
|
</th>
|
|
<th className="border-b-1 right-border border-[#e6e9ef] whitespace-nowrap cursor-pointer select-none" onClick={()=> handleSort('handle')}>핸들
|
|
<span className={`ml-1 inline-block w-3 text-[10px] ${sortKey==='handle' ? 'opacity-100' : 'opacity-0'}`}>{sortDir==='asc'?'▲':'▼'}</span>
|
|
</th>
|
|
<th className="border-b-1 right-border border-[#e6e9ef] whitespace-nowrap cursor-pointer select-none" onClick={()=> handleSort('pubDate')}>게시일
|
|
<span className={`ml-1 inline-block w-3 text-[10px] ${sortKey==='pubDate' ? 'opacity-100' : 'opacity-0'}`}>{sortDir==='asc'?'▲':'▼'}</span>
|
|
</th>
|
|
<th className="border-b-1 right-border border-[#e6e9ef] whitespace-nowrap cursor-pointer select-none" onClick={()=> handleSort('subject')}>영상 제목
|
|
<span className={`ml-1 inline-block w-3 text-[10px] ${sortKey==='subject' ? 'opacity-100' : 'opacity-0'}`}>{sortDir==='asc'?'▲':'▼'}</span>
|
|
</th>
|
|
<th className="border-b-1 right-border border-[#e6e9ef] whitespace-nowrap cursor-pointer select-none" onClick={()=> handleSort('watchTime')}>시청시간
|
|
<span className={`ml-1 inline-block w-3 text-[10px] ${sortKey==='watchTime' ? 'opacity-100' : 'opacity-0'}`}>{sortDir==='asc'?'▲':'▼'}</span>
|
|
</th>
|
|
<th className="border-b-1 right-border border-[#e6e9ef] whitespace-nowrap cursor-pointer select-none" onClick={()=> handleSort('views')}>조회수
|
|
<span className={`ml-1 inline-block w-3 text-[10px] ${sortKey==='views' ? 'opacity-100' : 'opacity-0'}`}>{sortDir==='asc'?'▲':'▼'}</span>
|
|
</th>
|
|
<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')}>유효 조회수
|
|
<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')}>예상수익
|
|
<span className={`ml-1 inline-block w-3 text-[10px] ${sortKey==='expectedRevenue' ? 'opacity-100' : 'opacity-0'}`}>{sortDir==='asc'?'▲':'▼'}</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{visibleChannelIds.size === 0 && (
|
|
<tr>
|
|
<td colSpan={8} className="text-center py-6 text-[#848484]">선택된 채널이 없습니다. 채널 필터에서 채널을 선택하세요.</td>
|
|
</tr>
|
|
)}
|
|
{visibleChannelIds.size > 0 && visibleRows.length === 0 && (
|
|
<tr>
|
|
<td colSpan={8} className="text-center py-6 text-[#848484]">표시할 데이터가 없습니다.</td>
|
|
</tr>
|
|
)}
|
|
{sortedVisibleRows.map((r) => (
|
|
<tr key={r.id} className="h-[54px] border-1 border-[#e6e9ef] rounded-lg font-semibold">
|
|
<td className="justify-center items-center rounded-l-lg border-l-1 border-t-1 border-b-1 border-[#e6e9ef] pl-2">
|
|
<input type="checkbox" className="w-[18px] h-[18px]"
|
|
checked={checkedIds.has(r.id)}
|
|
onChange={(e)=>{
|
|
const next = new Set(checkedIds);
|
|
if (e.target.checked) next.add(r.id); else next.delete(r.id);
|
|
setCheckedIds(next);
|
|
}}
|
|
/>
|
|
</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" />}
|
|
{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">{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>
|
|
<td className="right-border border-b-1 border-t-1 border-[#e6e9ef] text-center bg-[#FFF3F2]">{formatNumberWithCommas(r.validViews)}</td>
|
|
<td className=" border-[#e6e9ef] text-center border-r-1 border-b-1 border-t-1 rounded-r-lg whitespace-nowrap px-2 bg-[#FFF3F2]">
|
|
<span className="inline-block min-w-[180px] text-center">{formatNumberWithCommas(Math.round(r.expectedRevenue))}</span>
|
|
</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>
|
|
<div className="text-xl font-bold mb-2">총 조회수</div>
|
|
{/* <div className=""> <CalenderSelector dateString={dateString} is_ri={false} is_small={true} /> </div> */}
|
|
</div>
|
|
<div>
|
|
<div className="text-3xl font-bold"> {formatNumberWithCommas(totals.views)} <span className="text-sm text-[#848484]"> 회</span></div>
|
|
{/* <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-[3/4] xl:col-[2/3] xl:row-[3/4] bg-white rounded-lg flex flex-col justify-around items-start p-3">
|
|
|
|
<div>
|
|
<div className="text-xl font-bold mb-2"> 프리미엄 조회수</div>
|
|
{/* <div className=""> <CalenderSelector dateString={dateString} is_ri={false} is_small={true} /> </div> */}
|
|
</div>
|
|
<div>
|
|
<div className="text-3xl font-bold"> {formatNumberWithCommas(totals.premium)} <span className="text-sm text-[#848484]"> 회</span></div>
|
|
{/* <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>
|
|
<div className="text-xl font-bold mb-2"> 유효 조회수</div>
|
|
{/* <div className=""> <CalenderSelector dateString={dateString} is_ri={false} is_small={true} /> </div> */}
|
|
</div>
|
|
|
|
<div>
|
|
<div className="text-3xl font-bold"> {formatNumberWithCommas(totals.valid)} <span className="text-sm text-[#848484]"> 회</span></div>
|
|
{/* <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>
|
|
<div className="text-xl font-bold mb-2"> 예상 수익 </div>
|
|
{/* <div className=""> <CalenderSelector dateString={dateString} is_ri={false} is_small={true} /> </div> */}
|
|
</div>
|
|
<div>
|
|
<div className="text-3xl font-bold"> {formatNumberWithCommas(totals.revenue)} <span className="text-sm text-[#848484]"> 원</span></div>
|
|
{/* <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="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=" 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} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |