{socials.map(social => {
const isSelected = selectedSocials.includes(social.id);
+ const isYoutube = social.id === 'Youtube';
+
return (
diff --git a/src/pages/Dashboard/DashboardContent.tsx b/src/pages/Dashboard/DashboardContent.tsx
index ff1cd77..a958540 100755
--- a/src/pages/Dashboard/DashboardContent.tsx
+++ b/src/pages/Dashboard/DashboardContent.tsx
@@ -1,103 +1,690 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
-const StatCard: React.FC<{ label: string; value: string; trend: string }> = ({ label, value, trend }) => (
+// =====================================================
+// Types
+// =====================================================
+
+interface ContentMetric {
+ id: string;
+ label: string;
+ labelEn: string;
+ value: string;
+ trend: number;
+ trendDirection: 'up' | 'down';
+}
+
+interface MonthlyData {
+ month: string;
+ thisYear: number;
+ lastYear: number;
+}
+
+interface PlatformMetric {
+ id: string;
+ label: string;
+ value: string;
+ unit?: string;
+ trend: number;
+ trendDirection: 'up' | 'down';
+}
+
+interface PlatformData {
+ platform: 'youtube' | 'instagram';
+ displayName: string;
+ metrics: PlatformMetric[];
+}
+
+interface TopContent {
+ id: string;
+ title: string;
+ thumbnail: string;
+ platform: 'youtube' | 'instagram';
+ views: string;
+ engagement: string;
+ date: string;
+}
+
+interface AudienceData {
+ ageGroups: { label: string; percentage: number }[];
+ gender: { male: number; female: number };
+ topRegions: { region: string; percentage: number }[];
+}
+
+// =====================================================
+// Mock Data
+// =====================================================
+
+const CONTENT_METRICS: ContentMetric[] = [
+ { id: 'impressions', label: '총 노출수', labelEn: 'IMPRESSIONS', value: '2.4M', trend: 12.5, trendDirection: 'up' },
+ { id: 'reach', label: '도달', labelEn: 'REACH', value: '1.8M', trend: 9.2, trendDirection: 'up' },
+ { id: 'likes', label: '좋아요', labelEn: 'LIKES', value: '158.2K', trend: 8.3, trendDirection: 'up' },
+ { id: 'comments', label: '댓글', labelEn: 'COMMENTS', value: '24.9K', trend: 2.1, trendDirection: 'down' },
+ { id: 'shares', label: '공유', labelEn: 'SHARES', value: '8.4K', trend: 15.7, trendDirection: 'up' },
+ { id: 'saves', label: '저장', labelEn: 'SAVES', value: '12.3K', trend: 22.4, trendDirection: 'up' },
+ { id: 'engagement', label: '참여율', labelEn: 'ENGAGEMENT', value: '4.8%', trend: 0.5, trendDirection: 'up' },
+ { id: 'content', label: '콘텐츠', labelEn: 'CONTENT', value: '127', trend: 4, trendDirection: 'up' },
+];
+
+const MONTHLY_DATA: MonthlyData[] = [
+ { month: '1월', thisYear: 180000, lastYear: 145000 },
+ { month: '2월', thisYear: 195000, lastYear: 158000 },
+ { month: '3월', thisYear: 210000, lastYear: 172000 },
+ { month: '4월', thisYear: 185000, lastYear: 168000 },
+ { month: '5월', thisYear: 240000, lastYear: 195000 },
+ { month: '6월', thisYear: 275000, lastYear: 210000 },
+ { month: '7월', thisYear: 320000, lastYear: 235000 },
+ { month: '8월', thisYear: 295000, lastYear: 248000 },
+ { month: '9월', thisYear: 310000, lastYear: 262000 },
+ { month: '10월', thisYear: 285000, lastYear: 255000 },
+ { month: '11월', thisYear: 340000, lastYear: 278000 },
+ { month: '12월', thisYear: 380000, lastYear: 295000 },
+];
+
+const PLATFORM_DATA: PlatformData[] = [
+ {
+ platform: 'youtube',
+ displayName: 'YouTube',
+ metrics: [
+ { id: 'views', label: '조회수', value: '1.25M', trend: 18.2, trendDirection: 'up' },
+ { id: 'watchTime', label: '시청 시간', value: '4,820', unit: '시간', trend: 12.5, trendDirection: 'up' },
+ { id: 'avgViewDuration', label: '평균 시청 시간', value: '3:24', trend: 5.2, trendDirection: 'up' },
+ { id: 'subscribers', label: '구독자', value: '45.2K', trend: 5.8, trendDirection: 'up' },
+ { id: 'newSubscribers', label: '신규 구독자', value: '1.2K', trend: 12.3, trendDirection: 'up' },
+ { id: 'engagement', label: '참여율', value: '4.8', unit: '%', trend: 0.3, trendDirection: 'up' },
+ { id: 'ctr', label: '클릭률 (CTR)', value: '6.2', unit: '%', trend: 1.1, trendDirection: 'up' },
+ { id: 'revenue', label: '예상 수익', value: '₩2.4M', trend: 8.5, trendDirection: 'up' },
+ ],
+ },
+ {
+ platform: 'instagram',
+ displayName: 'Instagram',
+ metrics: [
+ { id: 'reach', label: '도달', value: '892K', trend: 22.4, trendDirection: 'up' },
+ { id: 'impressions', label: '노출', value: '1.58M', trend: 15.1, trendDirection: 'up' },
+ { id: 'profileVisits', label: '프로필 방문', value: '28.4K', trend: 18.7, trendDirection: 'up' },
+ { id: 'followers', label: '팔로워', value: '28.5K', trend: 8.2, trendDirection: 'up' },
+ { id: 'newFollowers', label: '신규 팔로워', value: '892', trend: 15.6, trendDirection: 'up' },
+ { id: 'storyViews', label: '스토리 조회', value: '156K', trend: 3.2, trendDirection: 'down' },
+ { id: 'reelPlays', label: '릴스 재생', value: '423K', trend: 45.2, trendDirection: 'up' },
+ { id: 'websiteClicks', label: '웹사이트 클릭', value: '3.2K', trend: 11.8, trendDirection: 'up' },
+ ],
+ },
+];
+
+const TOP_CONTENT: TopContent[] = [
+ { id: '1', title: '겨울 펜션 프로모션 영상', thumbnail: 'https://picsum.photos/seed/content1/120/68', platform: 'youtube', views: '125.4K', engagement: '8.2%', date: '2025.01.15' },
+ { id: '2', title: '스테이 머뭄 소개 릴스', thumbnail: 'https://picsum.photos/seed/content2/120/68', platform: 'instagram', views: '89.2K', engagement: '12.5%', date: '2025.01.22' },
+ { id: '3', title: '신년 특가 이벤트 안내', thumbnail: 'https://picsum.photos/seed/content3/120/68', platform: 'youtube', views: '67.8K', engagement: '6.4%', date: '2025.01.08' },
+ { id: '4', title: '펜션 야경 타임랩스', thumbnail: 'https://picsum.photos/seed/content4/120/68', platform: 'instagram', views: '54.3K', engagement: '15.8%', date: '2025.01.28' },
+];
+
+const AUDIENCE_DATA: AudienceData = {
+ ageGroups: [
+ { label: '18-24', percentage: 12 },
+ { label: '25-34', percentage: 35 },
+ { label: '35-44', percentage: 28 },
+ { label: '45-54', percentage: 18 },
+ { label: '55+', percentage: 7 },
+ ],
+ gender: { male: 42, female: 58 },
+ topRegions: [
+ { region: '서울', percentage: 32 },
+ { region: '경기', percentage: 24 },
+ { region: '부산', percentage: 12 },
+ { region: '인천', percentage: 8 },
+ { region: '대구', percentage: 6 },
+ ],
+};
+
+// =====================================================
+// Animation Components
+// =====================================================
+
+interface AnimatedItemProps {
+ children: React.ReactNode;
+ index: number;
+ baseDelay?: number;
+ className?: string;
+}
+
+const AnimatedItem: React.FC videoStatus === 'complete' && toggleSocial(social.id)}
- className={`completion-social-card ${videoStatus !== 'complete' ? 'disabled' : ''}`}
+ onClick={() => {
+ if (videoStatus !== 'complete') return;
+ if (isYoutube) {
+ handleYoutubeConnect();
+ } else {
+ // Instagram, Facebook은 아직 미구현
+ }
+ }}
+ className={`completion-social-card ${videoStatus !== 'complete' ? 'disabled' : ''} ${social.connected ? 'connected' : ''} ${isSelected ? 'selected' : ''}`}
>
);
})}
+ {youtubeError && (
+
- 
- {social.id}
+ {/* 연결된 경우 채널 썸네일 표시, 아니면 플랫폼 로고 */}
+ {social.connected && social.thumbnailUrl ? (
+ 
+ ) : (
+
+ )}
+
- {social.email}
+ {social.isConnecting ? (
+ 연결 중...
+ ) : social.connected ? (
+
+ {social.connected && social.channelName ? (
+ <>
+ {social.channelName}
+ {social.id}
+
+ ) : (
+ {social.id}
+ )}
+
+
+
+ 인증됨
+
+ {isYoutube && (
+
+ )}
+
+ ) : (
+
+ {isYoutube ? '계정 연결' : '준비 중'}
+
+ )}
{youtubeError}
+ )}
+ {children}
+
+ );
+};
+
+interface AnimatedSectionProps {
+ children: React.ReactNode;
+ delay?: number;
+ className?: string;
+}
+
+const AnimatedSection: React.FC
+ {children}
+
+ );
+};
+
+// =====================================================
+// UI Components
+// =====================================================
+
+const TrendIcon: React.FC<{ direction: 'up' | 'down' }> = ({ direction }) => (
+
+);
+
+const StatCard: React.FC
- {label}
+ {labelEn}
);
-const DashboardContent: React.FC = () => {
+const MetricCard: React.FC{value}
- {trend} +
+
+
+
+);
+
+// =====================================================
+// Chart Component with Tooltip
+// =====================================================
+
+interface TooltipData {
+ x: number;
+ y: number;
+ month: string;
+ thisYear: number;
+ lastYear: number;
+}
+
+const formatNumber = (num: number): string => {
+ if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
+ if (num >= 1000) return (num / 1000).toFixed(0) + 'K';
+ return num.toString();
+};
+
+const YearOverYearChart: React.FC<{ data: MonthlyData[] }> = ({ data }) => {
+ const [tooltip, setTooltip] = useState
+ {label}
+
+
+ {value}
+ {unit && {unit}}
+
+
+
+
-
-
+ 대시보드
-실시간 마케팅 퍼포먼스를 확인하세요.
-
+