diff --git a/src/index.tsx b/src/index.tsx index 7152cf1..5f2500c 100755 --- a/src/index.tsx +++ b/src/index.tsx @@ -11,7 +11,5 @@ if (!rootElement) { const root = ReactDOM.createRoot(rootElement); root.render( - - ); diff --git a/src/pages/Dashboard/DashboardContent.tsx b/src/pages/Dashboard/DashboardContent.tsx index ce2c3b4..c3270d4 100755 --- a/src/pages/Dashboard/DashboardContent.tsx +++ b/src/pages/Dashboard/DashboardContent.tsx @@ -7,6 +7,8 @@ import { XAxis, CartesianGrid, Tooltip, } from 'recharts'; +// 환경변수에서 테스트 모드 확인 +const isTestPage = import.meta.env.VITE_IS_TESTPAGE === 'true'; // ===================================================== // Types // ===================================================== @@ -486,6 +488,7 @@ const DashboardContent: React.FC = ({ onNavigate }) => { const [dashboardData, setDashboardData] = useState(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); + const [showMockData, setShowMockData] = useState(false); // 계정 관련 state const [accounts, setAccounts] = useState([]); @@ -612,6 +615,9 @@ const DashboardContent: React.FC = ({ onNavigate }) => { // hasUploads === false: 업로드 영상 없음 → 전체 mock 데이터 표시 + 안내 배너 const isEmptyState = dashboardData?.hasUploads === false; + // 블러 조건: 1)계정 미연결 2)업로드 영상 없음 3)데이터 없음 + const isBlurred = accounts.length === 0 || isEmptyState || !dashboardData; + // API 데이터 우선 사용, 없거나 영상 없음(isEmptyState) 시 Mock 데이터로 폴백 const contentMetrics = (!isEmptyState && dashboardData?.contentMetrics?.length) ? dashboardData.contentMetrics : MOCK_CONTENT_METRICS; const topContent = (!isEmptyState && dashboardData?.topContent?.length) ? dashboardData.topContent : MOCK_TOP_CONTENT; @@ -649,7 +655,7 @@ const DashboardContent: React.FC = ({ onNavigate }) => {

아직 업로드된 영상이 없습니다.

-

ADO2에서 영상을 업로드하면 실제 통계가 표시됩니다. 현재 샘플 데이터입니다.

+

ADO2에서 영상을 업로드하면 실제 통계가 표시됩니다.

@@ -664,7 +670,7 @@ const DashboardContent: React.FC = ({ onNavigate }) => {
-

아래는 샘플 데이터입니다. 실제 데이터를 보려면 계정을 연동하세요.

+

실제 데이터를 보려면 계정을 연동하세요.

{error.includes('YouTube') && ( @@ -775,7 +781,10 @@ const DashboardContent: React.FC = ({ onNavigate }) => { {/* Content Performance Section */}
-

{t('dashboard.contentPerformance')}

+
+

{t('dashboard.contentPerformance')}

+

ADO2에서 업로드한 영상의 통계가 표시됩니다.

+
-
+
{contentMetrics.map((metric: ContentMetric, index: number) => ( @@ -801,84 +810,92 @@ const DashboardContent: React.FC = ({ onNavigate }) => { {/* Two Column Layout */} -
- {/* 추이 차트 섹션 (mode=month: 연간, mode=day: 일별) */} - -
-
-

{chartSectionTitle}

-
-
- - {chartCurrentLabel} -
-
- - {chartPreviousLabel} +
+ {/* 추이 차트 섹션 (mode=month: 연간, mode=day: 일별) */} + +
+
+

{chartSectionTitle}

+
+
+ + {chartCurrentLabel} +
+
+ + {chartPreviousLabel} +
+
+ +
-
- -
-
- + - {/* Top Content Section */} - -
-

{t('dashboard.popularContent')}

-
- {topContent.map((content, index) => ( - - - - ))} + {/* Top Content Section */} + +
+

{t('dashboard.popularContent')}

+
+ {topContent.map((content, index) => ( + + + + ))} +
-
- -
+ +
{/* Audience Insights Section */} -

{t('dashboard.audienceInsights')}

- {!isEmptyState && !hasRealAudienceData && ( -
-
- - - -

- 누적 데이터가 부족하여 실제 시청자 데이터가 없습니다. 현재 샘플 데이터로 표시됩니다. -

-
-
- )} +
+

{t('dashboard.audienceInsights')}

+

선택한 채널의 통계가 표시됩니다.

+
{audienceData ? ( -
- -
-

{t('dashboard.ageDistribution')}

- +
+
+ +
+

{t('dashboard.ageDistribution')}

+ +
+ + +
+

{t('dashboard.genderDistribution')}

+ +
+ + +
+

{t('dashboard.topRegions')}

+ ({ label: r.region, percentage: r.percentage }))} delay={1400} /> +
+ +
+ {dashboardData && !isEmptyState && !hasRealAudienceData && ( +
+
+

+ 누적 데이터가 부족하여 실제 시청자 데이터가 없습니다. +

+
- - -
-

{t('dashboard.genderDistribution')}

- -
- - -
-

{t('dashboard.topRegions')}

- ({ label: r.region, percentage: r.percentage }))} delay={1400} /> -
- + )}
) : (
@@ -886,6 +903,39 @@ const DashboardContent: React.FC = ({ onNavigate }) => {
)} + + {/* 개발자 모드 전용: mock 데이터 블러 해제 버튼 */} + {isTestPage && isEmptyState && ( + + )}
); };