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

132
app/api/contents/mycontent/route.ts Normal file
View 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 {}
}
}

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'}`}> <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.DAY_RANGE && `${rangeStart.toISOString().split('T')[0]} ~ ${rangeEnd.toISOString().split('T')[0]}`}
{selected === DateRangeEnum.ONE_MONTH&& '최근 1개월'} {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&& '전체'} {selected === DateRangeEnum.ALL&& '전체'}
</div> </div>
<div className={`pt-[3px] transition-transform ${isOpen ? 'rotate-180' : ''} flex-shrink-0`}> <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> <span className="text-sm">전체</span>
</button> </button>
<div className="h-1 "></div> <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 <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' : ''}`} 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={() => { onClick={() => {
@@ -81,6 +102,69 @@ export default function CalenderSelector( {dateString, is_small, onRangeChange}:
<span className="text-sm">최근 1개월</span> <span className="text-sm">최근 1개월</span>
</button> </button>
<div className="h-1 "></div> <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 <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' : ''}`} 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={() => { 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 [myChannelList, setMyChannelList] = useState<ListChannelItem[]>([]);
const [visibleChannelIds, setVisibleChannelIds] = useState<Set<string>>(new Set()); const [visibleChannelIds, setVisibleChannelIds] = useState<Set<string>>(new Set());
const [channelsReady, setChannelsReady] = useState<boolean>(false); const [channelsReady, setChannelsReady] = useState<boolean>(false);
const fetchListChannel = useCallback(async (options?: { const fetchListChannel = useCallback(async (options?: {
cache?: RequestCache; cache?: RequestCache;
signal?: AbortSignal; signal?: AbortSignal;
}): Promise<ListChannelItem[]> => { }): Promise<ListChannelItem[]> => {
const response = await fetch('/api/list_channel', { const response = await fetch('/api/channel/list', {
cache: options?.cache ?? 'no-store', cache: options?.cache ?? 'no-store',
signal: options?.signal, signal: options?.signal,
}); });
console.log('list_channel response:', response);
if (!response.ok) { if (!response.ok) {
let message = ''; let message = '';
@@ -141,13 +143,18 @@ export default function Page({user}: {user: any}) {
setSortKey(key); setSortKey(key);
}, [sortKey]); }, [sortKey]);
// 그래프에 표시할 선택 지표
const [selectedMetric, setSelectedMetric] = useState<'views'|'validViews'|'premiumViews'|'expectedRevenue'>('validViews')
const fetchMyContents = useCallback(async (s: Date, e: Date) => { const fetchMyContents = useCallback(async (s: Date, e: Date) => {
const qs = `start=${encodeURIComponent(s.toISOString())}&end=${encodeURIComponent(e.toISOString())}`; 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(); const data = await res.json();
if (!res.ok) throw new Error(data?.error ?? 'LOAD_FAILED'); if (!res.ok) throw new Error(data?.error ?? 'LOAD_FAILED');
const items = data.items ?? []; const items = data.items ?? [];
setCpv(data.cpv ?? 0); setCpv(data.cpv ?? 0);
console.log(items)
setRows(items); setRows(items);
// 초기 로드 시 전체 선택 // 초기 로드 시 전체 선택
setCheckedIds(new Set(items.map((it: any) => it.id))); setCheckedIds(new Set(items.map((it: any) => it.id)));
@@ -248,6 +255,7 @@ export default function Page({user}: {user: any}) {
// }, []); // }, []);
useEffect(() => { useEffect(() => {
const handleResize = () => { const handleResize = () => {
window.resizeTo(500, 500); 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)); const visibleRows = rows.filter(r => visibleChannelIds.size > 0 && r.handleId && visibleChannelIds.has(r.handleId));
console.log(visibleRows)
const sortedVisibleRows = useMemo(() => { const sortedVisibleRows = useMemo(() => {
const copy = [...visibleRows]; const copy = [...visibleRows];
const factor = sortDir === 'asc' ? 1 : -1; 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) }; return { views, premium, valid, revenue: Math.round(revenue) };
}, [sortedVisibleRows, checkedIds]); }, [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(() => { useEffect(() => {
if (visibleChannelIds.size === 0) return;
const visibleIdSet = new Set(visibleRows.map(r => r.id)); const visibleIdSet = new Set(visibleRows.map(r => r.id));
setCheckedIds(prev => { setCheckedIds(prev => {
if (prev.size === 0) return visibleIdSet; // 기본 전체 선택
const next = new Set(Array.from(prev).filter(id => visibleIdSet.has(id))); const next = new Set(Array.from(prev).filter(id => visibleIdSet.has(id)));
return next; 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 조회수 <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> <span className={`ml-1 inline-block w-3 text-[10px] ${sortKey==='premiumViews' ? 'opacity-100' : 'opacity-0'}`}>{sortDir==='asc'?'▲':'▼'}</span>
</th> </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> <span className={`ml-1 inline-block w-3 text-[10px] ${sortKey==='validViews' ? 'opacity-100' : 'opacity-0'}`}>{sortDir==='asc'?'▲':'▼'}</span>
</th> </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> <span className={`ml-1 inline-block w-3 text-[10px] ${sortKey==='expectedRevenue' ? 'opacity-100' : 'opacity-0'}`}>{sortDir==='asc'?'▲':'▼'}</span>
</th> </th>
</tr> </tr>
@@ -471,14 +520,24 @@ export default function Page({user}: {user: any}) {
}} }}
/> />
</td> </td>
<td className="right-border border-b-1 border-t-1 border-[#e6e9ef] text-center whitespace-nowrap overflow-hidden"> <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-center"> <div className="flex items-center justify-start">
{r.icon && <img src={r.icon} alt="icon" className="w-6 h-6 mr-2" />} {r.icon && <img src={r.icon} alt="icon" className="w-6 h-6 mr-2 rounded-full" />}
{r.handle} {r.handle}
</div> </div>
</td> </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">{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.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.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">{formatNumberWithCommas(r.premiumViews)}</td>
@@ -488,11 +547,21 @@ export default function Page({user}: {user: any}) {
</td> </td>
</tr> </tr>
))} ))}
{sortedVisibleRows.length === 1 && (
<tr>
<td colSpan={9} className="p-0">
<div style={{ height: 'calc(100% - 49px - 54px)' }} />
</td>
</tr>
)}
</tbody> </tbody>
</table> </table>
</div> </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>
<div className="text-xl font-bold mb-2">총 조회수</div> <div className="text-xl font-bold mb-2">총 조회수</div>
{/* <div className=""> <CalenderSelector dateString={dateString} is_ri={false} is_small={true} /> </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> </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>
<div className="text-xl font-bold mb-2"> 프리미엄 조회수</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 className="text-xs font-normal text-[#F94B37]"> + 0.24%</div> */}
</div> </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>
<div className="text-xl font-bold mb-2"> 유효 조회수</div> <div className="text-xl font-bold mb-2"> 유효 조회수</div>
{/* <div className=""> <CalenderSelector dateString={dateString} is_ri={false} is_small={true} /> </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 className="text-xs font-normal text-[#F94B37]"> + 0.24%</div> */}
</div> </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>
<div className="text-xl font-bold mb-2"> 예상 수익 </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 className="text-xs font-normal text-[#0000FF]"> - 1.24%</div> */}
</div> </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="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"> 유효 조회수 추이 </div> <div className="text-xl font-bold"> {metricLabel[selectedMetric]} 추이 </div>
<div className="text-normal text-gray-500"> 상위 테이블에서 설정한 데이터를 토대로 그래프가 표출됩니다.</div> <div className="text-normal text-gray-500"> 상위 테이블에서 설정한 데이터를 토대로 그래프가 표출됩니다.</div>
<div className="flex flex-row justify-start items-center"> <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 className=" p-2 pt-5 text-sm font-normal text-[#F94B37]"> + 0.24%</div> */}
</div> </div>
<div className="w-full flex-1 items-center justify-center flex" ref={chartRef}> <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> </div>
</div> </div>

10
app/constants/dateRange.ts
View File

@@ -3,6 +3,11 @@ export enum DateRangeEnum {
ALL= 1, ALL= 1,
ONE_MONTH= 2, ONE_MONTH= 2,
DAY_RANGE = 3, 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.ALL,
DateRangeEnum.ONE_MONTH, DateRangeEnum.ONE_MONTH,
DateRangeEnum.DAY_RANGE, DateRangeEnum.DAY_RANGE,
DateRangeEnum.ONE_WEEK,
DateRangeEnum.TWO_MONTHS,
DateRangeEnum.THREE_MONTHS,
DateRangeEnum.SIX_MONTHS,
DateRangeEnum.ONE_YEAR,
] as const; ] as const;

2
app/usr/2_mychannel/page.tsx
View File

@@ -70,7 +70,9 @@ export default function Page() {
try { try {
const resp = await fetch('/api/channel/mycode', { cache: 'no-store' }); const resp = await fetch('/api/channel/mycode', { cache: 'no-store' });
const data = await resp.json(); const data = await resp.json();
console.log('register_code:', data);
setRegisterCode(data.registerCode); setRegisterCode(data.registerCode);
} catch (e) { } catch (e) {
console.error('register_code 요청 에러:', e); console.error('register_code 요청 에러:', e);
} }

44
parsingServer/server.js
View File

@@ -345,6 +345,24 @@ const server = http.createServer((req, res) => {
} }
// 아바타 이미지 src 추출 // 아바타 이미지 src 추출
let handleText = null;
// 채널 핸들(@...) 추출: 헤더 텍스트 → canonical 폴백
try {
const handleNode = header.locator('.yt-core-attributed-string:has-text("@")').first();
await handleNode.waitFor({ state: 'visible', timeout: 4000 });
const txt = (await handleNode.innerText())?.trim();
const m = txt?.match(/@[^\s•|]+/);
if (m && m[0]) handleText = m[0];
} catch {}
if (!handleText) {
try {
const href = await page.locator('link[rel="canonical"]').getAttribute('href');
if (href) {
const mm = href.match(/https?:\/\/www\.youtube\.com\/(%2F)?(@[^/?#]+)/);
if (mm && mm[2]) handleText = decodeURIComponent(mm[2]);
}
} catch {}
}
let avatar = null; let avatar = null;
try { try {
const img = header.locator('img[src^="https://yt3.googleusercontent.com/"]').first(); const img = header.locator('img[src^="https://yt3.googleusercontent.com/"]').first();
@@ -354,7 +372,7 @@ const server = http.createServer((req, res) => {
await context.close(); await context.close();
await browser.close(); await browser.close();
sendJson(res, 200, { success: true, foundtext, avatar }); sendJson(res, 200, { success: true, foundtext, avatar, handle: handleText });
} catch (e) { } catch (e) {
try { await browser?.close(); } catch {} try { await browser?.close(); } catch {}
console.error('[isCodeMatch] playwright error:', e); console.error('[isCodeMatch] playwright error:', e);
@@ -447,6 +465,30 @@ const server = http.createServer((req, res) => {
if (t && t.startsWith('@')) handleText = t; if (t && t.startsWith('@')) handleText = t;
if (handleText) console.log(`[gethandle] (${id}) channel page handle found:`, handleText); if (handleText) console.log(`[gethandle] (${id}) channel page handle found:`, handleText);
} catch {} } catch {}
// 대체1: 채널 헤더 내 텍스트 기반(@...) 추출
if (!handleText) {
try {
console.log(`[gethandle] (${id}) try channel header text selector: #page-header .yt-core-attributed-string:has-text("@")`);
const textNode = page.locator('#page-header .yt-core-attributed-string:has-text("@")').first();
await textNode.waitFor({ state: 'visible', timeout: 4000 });
const txt = (await textNode.innerText())?.trim();
const m = txt?.match(/@[^\s•|]+/);
if (m && m[0]) handleText = m[0];
if (handleText) console.log(`[gethandle] (${id}) channel header text handle found:`, handleText);
} catch {}
}
// 대체2: canonical 링크에서 @handle 파싱
if (!handleText) {
try {
console.log(`[gethandle] (${id}) try canonical link for handle`);
const href = await page.locator('link[rel="canonical"]').getAttribute('href');
if (href) {
const m = href.match(/https?:\/\/www\.youtube\.com\/(%2F)?(@[^/?#]+)/);
if (m && m[2]) handleText = decodeURIComponent(m[2]);
}
if (handleText) console.log(`[gethandle] (${id}) canonical handle found:`, handleText);
} catch {}
}
// 채널 아바타 // 채널 아바타
try { try {
console.log(`[gethandle] (${id}) try channel page avatar selector: img[src*="yt3"]`); console.log(`[gethandle] (${id}) try channel page avatar selector: img[src*="yt3"]`);

45
prisma/migrations/20250909002928_dev/migration.sql Normal file
View File

@@ -0,0 +1,45 @@
/*
Warnings:
- You are about to drop the column `constPerView` on the `Handle` table. All the data in the column will be lost.
- You are about to drop the `contentDayView` table. If the table is not empty, all the data it contains will be lost.
*/
-- DropForeignKey
ALTER TABLE `Content` DROP FOREIGN KEY `Content_handleId_fkey`;
-- DropForeignKey
ALTER TABLE `contentDayView` DROP FOREIGN KEY `contentDayView_contentId_fkey`;
-- DropIndex
DROP INDEX `Content_handleId_fkey` ON `Content`;
-- AlterTable
ALTER TABLE `Content` MODIFY `handleId` VARCHAR(191) NULL;
-- AlterTable
ALTER TABLE `Handle` DROP COLUMN `constPerView`,
ADD COLUMN `costPerView` DOUBLE NOT NULL DEFAULT 1;
-- DropTable
DROP TABLE `contentDayView`;
-- CreateTable
CREATE TABLE `ContentDayView` (
`id` VARCHAR(191) NOT NULL,
`contentId` VARCHAR(191) NOT NULL,
`date` DATETIME(3) NOT NULL,
`views` INTEGER NOT NULL,
`validViews` INTEGER NOT NULL,
`premiumViews` INTEGER NOT NULL,
`watchTime` INTEGER NOT NULL,
UNIQUE INDEX `ContentDayView_contentId_date_key`(`contentId`, `date`),
PRIMARY KEY (`id`)
) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
-- AddForeignKey
ALTER TABLE `Content` ADD CONSTRAINT `Content_handleId_fkey` FOREIGN KEY (`handleId`) REFERENCES `Handle`(`id`) ON DELETE SET NULL ON UPDATE CASCADE;
-- AddForeignKey
ALTER TABLE `ContentDayView` ADD CONSTRAINT `ContentDayView_contentId_fkey` FOREIGN KEY (`contentId`) REFERENCES `Content`(`id`) ON DELETE RESTRICT ON UPDATE CASCADE;