chore : 베너변경

.env

@@ -0,0 +1 @@
+VITE_YOUTUBE_API_KEY=AIzaSyCMrcXrsvmXf3D88a6RlLAUetErOx1PxGc

src/views/Main.vue

@@ -261,35 +261,36 @@ const triggerOverlayProcess = (durationMs, initialMsg) => {
   }, stepTime);
 };
 
-const apiKey = 'AIzaSyD51LHwqoY8spjq6rsY_RlhBXzb96j7D6o';
+const apiKey = import.meta.env.VITE_YOUTUBE_API_KEY;
 const channelId = 'UC8L92ju0V88s6TcmLPb8Bkg';
 const maxResults = 8;
 const apiUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${channelId}&maxResults=${maxResults}&order=date&type=video&key=${apiKey}`;
 
 const fetchVideos = async () => {
   try {
-    const res = await axios.get(apiUrl);
+    // 💡 유튜브 규칙상 채널 ID의 앞 글자 'UC'를 'UU'로 바꾸면
-    if (res.data && res.data.items && res.data.items.length > 0) {
+    // 해당 채널의 '전체 업로드 영상 플레이리스트' ID가 됩니다. (비용 100유닛 -> 1유닛으로 단축)
-      videos.value = res.data.items;
+    const uploadPlaylistId = channelId.replace(/^UC/, 'UU');
+    const playlistApiUrl = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=${uploadPlaylistId}&maxResults=${maxResults}&key=${apiKey}`;
+
+    const res = await axios.get(playlistApiUrl);
+
+    // 🌟 [매핑 매직] 유저님이 짜두신 기존 <template>의 video.id.videoId 및 video.snippet 구조와
+    // 100% 호환되도록 데이터 골격을 가공하여 videos 배열에 주입합니다.
+    if (res.data && res.data.items) {
+      videos.value = res.data.items.map(item => ({
+        id: { videoId: item.snippet.resourceId?.videoId },
+        snippet: item.snippet
+      }));
     } else {
-      throw new Error("API returned empty items. Check quota.");
+      videos.value = [];
     }
   } catch (err) {
-    console.error("유튜브 로드 실패 (할당량 초과 또는 키 폐기 가능성):", err);
+    console.error("유튜브 로드 실패:", err);
-
+    // 에러 원인 추적용 가이드 로그
-    setTimeout(() => {
+    if (err.response && err.response.status === 403) {
-      if (termInstance.value) {
+      console.warn("⚠️ [인프라 경고] 유튜브 API 할당량이 만료되었거나, 구글에 의해 API 키가 차단되었습니다.");
-        termInstance.value.echo(`[[b;red;][WARN]] YOUTUBE API QUOTA EXCEEDED OR KEY REVOKED.`);
+    }
-        termInstance.value.echo(`[[b;var(--tui-color);][SYS]] ENFORCING RETRO INTERFACE STANDBY DATA... SUCCESS.`);
-      }
-    }, 1000);
-
-    videos.value = [
-      { id: { videoId: 'dQw4w9WgXcQ' }, snippet: { title: '> ' } },
-      { id: { videoId: 'kJQP7kiw5Fk' }, snippet: { title: '> ' } },
-      { id: { videoId: '9bZkp7q19f0' }, snippet: { title: '> ' } },
-      { id: { videoId: 'LXb3EKWsInQ' }, snippet: { title: '> ' } }
-    ];
   }
 };