YouTube Analytics API 오류 처리추가

.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-    "recommendations": []
-}

index.css

@@ -860,6 +860,39 @@
   background: rgba(255, 255, 255, 0.15);
 }
 
+/* Sidebar Footer Actions */
+.sidebar-footer-actions {
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-footer-actions .logout-btn {
+  width: 100%;
+}
+
+.sidebar-inquiry-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  color: var(--color-text-gray-400);
+  text-decoration: none;
+  transition: color var(--transition-normal);
+  white-space: nowrap;
+  font-size: var(--text-sm);
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.sidebar-inquiry-btn:hover {
+  color: var(--color-text-white);
+}
+
+.sidebar-inquiry-btn.collapsed {
+  justify-content: center;
+  padding: 0.75rem;
+}
+
 /* Logout Button */
 .logout-btn {
   width: 100%;
@@ -2042,31 +2075,9 @@
   height: 64px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
   flex-shrink: 0;
 }
 
-.comp2-inquiry-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 8px;
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 14px;
-  text-decoration: none;
-  cursor: pointer;
-  transition: background 0.2s, border-color 0.2s, color 0.2s;
-}
-
-.comp2-inquiry-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.6);
-  color: #fff;
-}
-
 .comp2-back-btn {
   display: flex;
   align-items: center;
@@ -10512,3 +10523,27 @@
   cursor: not-allowed;
   transform: none;
 }
+
+/* Calendar panel scrollbar */
+.calendar-panel-scroll::-webkit-scrollbar {
+  width: 4px;
+}
+
+.calendar-panel-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.calendar-panel-scroll::-webkit-scrollbar-thumb {
+  background: #067C80;
+  border-radius: 999px;
+}
+
+.calendar-panel-scroll::-webkit-scrollbar-thumb:hover {
+  background: #088a8e;
+}
+
+/* Firefox */
+.calendar-panel-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: #067C80 transparent;
+}

src/components/Sidebar.tsx

@@ -175,16 +175,30 @@ const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, onHome, userI
             )}
           </div>
 
-          <button
+          <div className="sidebar-footer-actions">
-            className={`logout-btn ${isCollapsed ? 'collapsed' : ''}`}
+            <button
-            onClick={handleLogout}
+              className={`logout-btn ${isCollapsed ? 'collapsed' : ''}`}
-            disabled={isLoggingOut}
+              onClick={handleLogout}
-          >
+              disabled={isLoggingOut}
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+            >
-              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-            </svg>
+                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>
-            {!isCollapsed && <span className="logout-btn-label">{isLoggingOut ? t('sidebar.loggingOut') : t('sidebar.logout')}</span>}
+              </svg>
-          </button>
+              {!isCollapsed && <span className="logout-btn-label">{isLoggingOut ? t('sidebar.loggingOut') : t('sidebar.logout')}</span>}
+            </button>
+            <a
+              href="https://forms.gle/4a8mGebBYtdesvby9"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={`sidebar-inquiry-btn ${isCollapsed ? 'collapsed' : ''}`}
+              title="고객의견"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+              </svg>
+              {!isCollapsed && <span>고객의견</span>}
+            </a>
+          </div>
         </div>
       </div>
     </>

src/pages/Dashboard/CompletionContent.tsx

@@ -331,17 +331,6 @@ const CompletionContent: React.FC<CompletionContentProps> = ({
             </svg>
             <span>{t('completion.back')}</span>
           </button>
-          <a
-            href="https://forms.gle/4a8mGebBYtdesvby9"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="comp2-inquiry-btn"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-            </svg>
-            <span>문의하기</span>
-          </a>
         </div>
 
         <div className="comp2-title-row">

src/pages/Dashboard/ContentCalendarContent.tsx

@@ -643,7 +643,8 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
     return (
       <div
         ref={panelRef}
-        style={{ flex: 1, overflowY: 'auto', padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 20 }}
+        className="calendar-panel-scroll"
+        style={{ flex: 1, overflowY: 'auto', padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 20, maxHeight: 900 }}
       >
         {sortedDateKeys.map(dateKey => (
           <div

src/pages/Dashboard/DashboardContent.tsx

@@ -34,21 +34,6 @@ interface DailyData {
   lastPeriod: number;
 }
 
-// interface PlatformMetric {  // 미사용 — platform_data 기능 예정
-//   id: string;
-//   label: string;
-//   value: string;
-//   unit?: string;
-//   trend: number;
-//   trendDirection: 'up' | 'down';
-// }
-
-// interface PlatformData {  // 미사용 — platform_data 기능 예정
-//   platform: 'youtube' | 'instagram';
-//   displayName: string;
-//   metrics: PlatformMetric[];
-// }
-
 interface TopContent {
   id: string;
   title: string;
@@ -65,6 +50,12 @@ interface AudienceData {
   topRegions: { region: string; percentage: number }[];
 }
 
+interface DashboardError {
+  code: string;
+  message: string;
+  reconnect_url?: string;
+}
+
 interface DashboardResponse {
   contentMetrics: ContentMetric[];
   monthlyData: MonthlyData[];
@@ -72,7 +63,7 @@ interface DashboardResponse {
   topContent: TopContent[];
   audienceData: AudienceData;
   hasUploads: boolean;  // 업로드 영상 존재 여부 (false 시 mock 데이터 + 안내 메시지 표시)
-  // platformData: PlatformData[];  // 미사용
+  error: DashboardError | null;
 }
 
 interface ConnectedAccount {
@@ -487,8 +478,9 @@ const DashboardContent: React.FC<DashboardContentProps> = ({ onNavigate }) => {
 
   const [dashboardData, setDashboardData] = useState<DashboardResponse | null>(null);
   const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<DashboardError | null>(null);
   const [showMockData, setShowMockData] = useState(false);
+  const [retryTrigger, setRetryTrigger] = useState(0);
 
   // 계정 관련 state
   const [accounts, setAccounts] = useState<ConnectedAccount[]>([]);
@@ -576,25 +568,32 @@ const DashboardContent: React.FC<DashboardContentProps> = ({ onNavigate }) => {
 
         if (!response.ok) {
           const errorData = await response.json();
-
-          if (errorData.code === 'YOUTUBE_NOT_CONNECTED') {
-            setError('YouTube 계정을 연동하여 데이터를 확인하세요.');
-            setDashboardData(null);
-            return;
-          }
           if (errorData.code === 'YOUTUBE_ACCOUNT_SELECTION_REQUIRED') {
             setDashboardData(null);
             return;
           }
-          throw new Error(errorData.detail || `API Error: ${response.status}`);
+          if (errorData.code === 'YOUTUBE_API_FAILED') {
+            setError({ code: 'YOUTUBE_API_FAILED', message: 'YouTube Analytics API 호출에 실패했습니다.' });
+            setDashboardData(null);
+            return;
+          }
+          setError({ code: errorData.code || 'API_ERROR', message: errorData.detail || `API Error: ${response.status}`, reconnect_url: errorData.reconnect_url });
+          return;
         }
 
         const data: DashboardResponse = await response.json();
+
+        if (data.error) {
+          setError(data.error);
+          setDashboardData(data);
+          return;
+        }
+
         setDashboardData(data);
         setError(null);
       } catch (err) {
         console.error('Dashboard API Error:', err);
-        setError(err instanceof Error ? err.message : 'Unknown error');
+        setError({ code: 'UNKNOWN', message: err instanceof Error ? err.message : 'Unknown error' });
         setDashboardData(null);
       } finally {
         setIsLoading(false);
@@ -602,7 +601,7 @@ const DashboardContent: React.FC<DashboardContentProps> = ({ onNavigate }) => {
     };
 
     fetchDashboardData();
-  }, [mode, selectedAccountId, accountsLoaded]);
+  }, [mode, selectedAccountId, accountsLoaded, retryTrigger]);
 
   if (isLoading) {
     return (
@@ -612,11 +611,11 @@ const DashboardContent: React.FC<DashboardContentProps> = ({ onNavigate }) => {
     );
   }
 
-  // hasUploads === false: 업로드 영상 없음 → 전체 mock 데이터 표시 + 안내 배너
+  // hasUploads === false이고 error 없음: 업로드 영상 없음 → 전체 mock 데이터 표시 + 안내 배너
-  const isEmptyState = dashboardData?.hasUploads === false;
+  const isEmptyState = dashboardData?.hasUploads === false && !dashboardData?.error;
 
-  // 블러 조건: 1)계정 미연결  2)업로드 영상 없음  3)데이터 없음
+  // 블러 조건: 1)계정 미연결  2)업로드 영상 없음  3)데이터 없음  4)에러 있음
-  const isBlurred = accounts.length === 0 || isEmptyState || !dashboardData;
+  const isBlurred = accounts.length === 0 || isEmptyState || !dashboardData || !!error;
 
   // showMockData=true면 전체 mock 강제, 아니면 API 우선 / isEmptyState 시 mock 폴백
   const useReal = !showMockData && !isEmptyState;
@@ -673,11 +672,17 @@ const DashboardContent: React.FC<DashboardContentProps> = ({ onNavigate }) => {
               <svg className="w-5 h-5 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                 <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
               </svg>
-              <div>
+              <p className="font-semibold">{error.message}</p>
-                <p className="font-semibold">실제 데이터를 보려면 계정을 연동하세요.</p>
-              </div>
             </div>
-            {error.includes('YouTube') && (
+            {error.code === 'YOUTUBE_TOKEN_EXPIRED' && (
+              <button
+                onClick={() => onNavigate?.('내 정보')}
+                className="ml-4 px-4 py-2 bg-yellow-600 text-white rounded hover:bg-yellow-700 whitespace-nowrap"
+              >
+                재연동하러 가기 →
+              </button>
+            )}
+            {error.code === 'YOUTUBE_NOT_CONNECTED' && (
               <button
                 onClick={() => onNavigate?.('내 정보')}
                 className="ml-4 px-4 py-2 bg-yellow-600 text-white rounded hover:bg-yellow-700 whitespace-nowrap"
@@ -685,6 +690,14 @@ const DashboardContent: React.FC<DashboardContentProps> = ({ onNavigate }) => {
                 연동하러 가기 →
               </button>
             )}
+            {(error.code === 'YOUTUBE_API_FAILED' || error.code === 'DASHBOARD_DATA_ERROR') && (
+              <button
+                onClick={() => { setError(null); setRetryTrigger((n: number) => n + 1); }}
+                className="ml-4 px-4 py-2 bg-yellow-600 text-white rounded hover:bg-yellow-700 whitespace-nowrap"
+              >
+                재시도 →
+              </button>
+            )}
           </div>
         </div>
       )}

src/pages/Dashboard/UrlInputContent.tsx

@@ -266,13 +266,12 @@ const UrlInputContent: React.FC<UrlInputContentProps> = ({ onAnalyze, onAutocomp
                 </div>
               )}
             </div>
+
+            {/* 검색 버튼 */}
+            <button type="submit" className="url-input-button">
+              {t('landing.hero.analyzeButton')}
+            </button>
           </div>
-
-          {/* 검색 버튼 */}
-          <button type="submit" className="url-input-button">
-            {t('urlInput.searchButton')}
-          </button>
-
           {/* 에러 메시지 */}
           {error && (
             <p className="url-input-error">{error}</p>