From ce94673981e6991c3c75632cd7d725e9ca166f3f Mon Sep 17 00:00:00 2001
From: "sungjin.choi" <sungjin.choi@specialsource.company>
Date: Fri, 29 May 2026 10:28:43 +0900
Subject: [PATCH] =?UTF-8?q?chore=20:=20=EB=B2=A0=EB=84=88=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env               |  1 +
 src/views/Main.vue | 41 +++++++++++++++++++++--------------------
 2 files changed, 22 insertions(+), 20 deletions(-)
 create mode 100644 .env

diff --git a/.env b/.env
new file mode 100644
index 0000000..1216493
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+VITE_YOUTUBE_API_KEY=AIzaSyCMrcXrsvmXf3D88a6RlLAUetErOx1PxGc
\ No newline at end of file
diff --git a/src/views/Main.vue b/src/views/Main.vue
index 1bbab08..4ad4dbe 100644
--- a/src/views/Main.vue
+++ b/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);
-    if (res.data && res.data.items && res.data.items.length > 0) {
-      videos.value = res.data.items;
+    // 💡 유튜브 규칙상 채널 ID의 앞 글자 'UC'를 'UU'로 바꾸면
+    // 해당 채널의 '전체 업로드 영상 플레이리스트' ID가 됩니다. (비용 100유닛 -> 1유닛으로 단축)
+    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);
-
-    setTimeout(() => {
-      if (termInstance.value) {
-        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: '> ' } }
-    ];
+    console.error("유튜브 로드 실패:", err);
+    // 에러 원인 추적용 가이드 로그
+    if (err.response && err.response.status === 403) {
+      console.warn("⚠️ [인프라 경고] 유튜브 API 할당량이 만료되었거나, 구글에 의해 API 키가 차단되었습니다.");
+    }
   }
 };