또수정
This commit is contained in:
132
app/api/contents/mycontent/route.ts
Normal file
132
app/api/contents/mycontent/route.ts
Normal file
@@ -0,0 +1,132 @@
|
||||
export const runtime = 'nodejs'
|
||||
import { NextResponse } from 'next/server'
|
||||
import { PrismaClient } from '@/app/generated/prisma'
|
||||
import { auth } from '@/auth'
|
||||
|
||||
function parseIsoDate(value: string | null): Date | null {
|
||||
if (!value) return null
|
||||
const d = new Date(value)
|
||||
return Number.isFinite(d.getTime()) ? d : null
|
||||
}
|
||||
|
||||
export async function GET(request: Request) {
|
||||
const prisma = new PrismaClient()
|
||||
try {
|
||||
const session = await auth()
|
||||
if (!session?.user?.email) {
|
||||
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
|
||||
}
|
||||
|
||||
const { searchParams } = new URL(request.url)
|
||||
const startParam = searchParams.get('start')
|
||||
const endParam = searchParams.get('end')
|
||||
|
||||
const start = parseIsoDate(startParam)
|
||||
const end = parseIsoDate(endParam)
|
||||
if (!start || !end) {
|
||||
return NextResponse.json({ error: 'invalid start/end' }, { status: 400 })
|
||||
}
|
||||
if (start > end) {
|
||||
return NextResponse.json({ error: 'start after end' }, { status: 400 })
|
||||
}
|
||||
|
||||
// 날짜를 UTC 기준 하루 경계로 확장
|
||||
const startDay = new Date(Date.UTC(start.getUTCFullYear(), start.getUTCMonth(), start.getUTCDate(), 0, 0, 0, 0))
|
||||
const endDay = new Date(Date.UTC(end.getUTCFullYear(), end.getUTCMonth(), end.getUTCDate(), 23, 59, 59, 999))
|
||||
|
||||
// 사용자 소속 핸들 조회 (없으면 사용자 필터 생략)
|
||||
const userHandles = await prisma.handle.findMany({
|
||||
where: { users: { some: { email: session.user.email } } },
|
||||
select: { id: true, handle: true },
|
||||
})
|
||||
const handleIds = userHandles.map(h => h.id)
|
||||
|
||||
// 선택된 채널 필터(query): handleId, handleIds(쉼표), handle, handles(쉼표)
|
||||
const handleIdParam = searchParams.get('handleId')
|
||||
const handleIdsParam = searchParams.get('handleIds')
|
||||
const handleParam = searchParams.get('handle')
|
||||
const handlesParam = searchParams.get('handles')
|
||||
let selectedHandleIds: string[] | null = null
|
||||
if (handleIdParam) selectedHandleIds = [handleIdParam]
|
||||
if (!selectedHandleIds && handleIdsParam) selectedHandleIds = handleIdsParam.split(',').map(s => s.trim()).filter(Boolean)
|
||||
if (!selectedHandleIds && (handleParam || handlesParam)) {
|
||||
const targetHandles = (handlesParam ? handlesParam.split(',') : [handleParam!]).map(s => s!.trim()).filter(Boolean)
|
||||
if (targetHandles.length > 0) {
|
||||
const matched = await prisma.handle.findMany({ where: { handle: { in: targetHandles } }, select: { id: true } })
|
||||
selectedHandleIds = matched.map(m => m.id)
|
||||
}
|
||||
}
|
||||
|
||||
const where: any = {
|
||||
date: { gte: startDay, lte: endDay },
|
||||
}
|
||||
if (selectedHandleIds && selectedHandleIds.length > 0) {
|
||||
// 지정된 채널만
|
||||
where.content = { handleId: { in: selectedHandleIds } }
|
||||
} else if (handleIds.length > 0) {
|
||||
// 사용자 소속 채널만
|
||||
where.content = { handleId: { in: handleIds } }
|
||||
}
|
||||
|
||||
const grouped = await prisma.contentDayView.groupBy({
|
||||
by: ['contentId'],
|
||||
where,
|
||||
_sum: {
|
||||
views: true,
|
||||
validViews: true,
|
||||
premiumViews: true,
|
||||
watchTime: true,
|
||||
},
|
||||
})
|
||||
|
||||
const contentIds = grouped.map(g => g.contentId).filter(Boolean)
|
||||
const contents = contentIds.length > 0 ? await prisma.content.findMany({
|
||||
where: { id: { in: contentIds } },
|
||||
select: {
|
||||
id: true,
|
||||
subject: true,
|
||||
pubDate: true,
|
||||
handle: { select: { id: true, handle: true, avatar: true, costPerView: true } },
|
||||
},
|
||||
}) : []
|
||||
const idToContent = new Map(contents.map(c => [c.id, c]))
|
||||
|
||||
const items = grouped.map(g => {
|
||||
const c = idToContent.get(g.contentId) as any
|
||||
const h = c?.handle as (undefined | { id: string, handle: string, avatar: string | null, costPerView?: number })
|
||||
const views = g._sum?.views ?? 0
|
||||
const validViews = g._sum?.validViews ?? 0
|
||||
const premiumViews = g._sum?.premiumViews ?? 0
|
||||
const watchTime = g._sum?.watchTime ?? 0
|
||||
const cpv = typeof h?.costPerView === 'number' ? h!.costPerView! : 0
|
||||
const expectedRevenue = Math.max(0, Math.round(validViews * cpv))
|
||||
return {
|
||||
id: c?.id ?? g.contentId,
|
||||
subject: c?.subject ?? '',
|
||||
pubDate: (c?.pubDate ?? null) as any,
|
||||
views,
|
||||
premiumViews,
|
||||
watchTime,
|
||||
handle: h?.handle ?? '',
|
||||
handleId: h?.id ?? null,
|
||||
icon: h?.avatar ?? '',
|
||||
validViews,
|
||||
expectedRevenue,
|
||||
}
|
||||
})
|
||||
items.sort((a, b) => {
|
||||
const pa = a.pubDate ? new Date(a.pubDate as any).getTime() : 0
|
||||
const pb = b.pubDate ? new Date(b.pubDate as any).getTime() : 0
|
||||
return pb - pa
|
||||
})
|
||||
|
||||
return NextResponse.json({ success: true, start: startDay.toISOString(), end: endDay.toISOString(), count: items.length, items })
|
||||
} catch (e) {
|
||||
console.error('[contents/mycontent] error:', e)
|
||||
return NextResponse.json({ error: 'query failed' }, { status: 500 })
|
||||
} finally {
|
||||
try { await (prisma as any).$disconnect() } catch {}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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={() => {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -3,6 +3,11 @@ export enum DateRangeEnum {
|
||||
ALL= 1,
|
||||
ONE_MONTH= 2,
|
||||
DAY_RANGE = 3,
|
||||
ONE_WEEK = 4,
|
||||
TWO_MONTHS = 5,
|
||||
THREE_MONTHS = 6,
|
||||
SIX_MONTHS = 7,
|
||||
ONE_YEAR = 8,
|
||||
}
|
||||
|
||||
// 필요 시 값 배열 등 유틸도 함께 노출 가능
|
||||
@@ -10,6 +15,11 @@ export const DATE_RANGE_VALUES = [
|
||||
DateRangeEnum.ALL,
|
||||
DateRangeEnum.ONE_MONTH,
|
||||
DateRangeEnum.DAY_RANGE,
|
||||
DateRangeEnum.ONE_WEEK,
|
||||
DateRangeEnum.TWO_MONTHS,
|
||||
DateRangeEnum.THREE_MONTHS,
|
||||
DateRangeEnum.SIX_MONTHS,
|
||||
DateRangeEnum.ONE_YEAR,
|
||||
] as const;
|
||||
|
||||
|
||||
|
||||
@@ -70,7 +70,9 @@ export default function Page() {
|
||||
try {
|
||||
const resp = await fetch('/api/channel/mycode', { cache: 'no-store' });
|
||||
const data = await resp.json();
|
||||
console.log('register_code:', data);
|
||||
setRegisterCode(data.registerCode);
|
||||
|
||||
} catch (e) {
|
||||
console.error('register_code 요청 에러:', e);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user