Refactor: 更新開發文件, Dev Container。AI重構404倒數邏輯、QR Code生成器的資源釋放、RFID轉換器的字串處理、刪除多餘首頁連結。

Author: Pencil126

.devcontainer/devcontainer.json

@@ -5,18 +5,13 @@
   // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
   "image": "mcr.microsoft.com/devcontainers/javascript-node:24-bookworm",
   "features": {
-    "ghcr.io/devcontainers/features/github-cli:1": {
-      "installDirectlyFromGitHubRelease": true,
-      "version": "latest"
-    },
+    "ghcr.io/devcontainers/features/github-cli:1": {},
     "ghcr.io/devcontainers/features/node:1": {
       "nodeGypDependencies": true,
       "installYarnUsingApt": true,
-      "version": "24.14.0",
-      "pnpmVersion": "latest",
-      "nvmVersion": "latest"
+      "version": "24.14.0"
     }
-  }
+  },
 
   // Features to add to the dev container. More info: https://containers.dev/features.
   // "features": {},
@@ -25,7 +20,7 @@
   // "forwardPorts": [],
 
   // Use 'postCreateCommand' to run commands after the container is created.
-  // "postCreateCommand": "yarn install",
+  "postCreateCommand": "yarn"
 
   // Configure tool-specific properties.
   // "customizations": {},

CLAUDE.md AGENTS.mdCLAUDE.md renamed to AGENTS.md

@@ -1,6 +1,22 @@
-# CLAUDE.md
+# AGENTS.md
 
-此文件為 Claude Code (claude.ai/code) 在處理此專案時的開發指引。
+此文件為各種 AI Coding Agent 在處理此專案時的開發指引。
+
+## Agent 必讀規範
+
+- 只使用 Yarn，禁止使用 npm（安裝與執行腳本皆同）。
+- 不要修改 `public/` 內容：該目錄為建置產物，應由 `yarn build` 生成。
+- 變更應聚焦需求本身，避免順手重構不相干檔案。
+- 修改 JSON 資料時務必維持既有 schema，避免破壞 Gatsby build。
+- 提交前一定要執行 `yarn prettier` 以統一程式碼風格。
+- 涉及 API 端點（`functions/api/`）時，需保留 CORS 行為與既有回傳格式相容性。
+
+## Agent 工作流程
+
+1. 先讀需求，再找出受影響檔案與資料來源（頁面、模板、JSON、API）。
+2. 優先做最小變更，避免改動既有命名與資料路徑。
+3. 完成修改後執行格式化與必要建置檢查。
+4. 回報變更檔案、核心差異、驗證結果與未完成風險。
 
 ## 專案概述
 
@@ -47,7 +63,7 @@ yarn prettier
 ### 專案結構
 
 ```
-├── CLAUDE.md              # 開發指引文件
+├── AGENTS.md              # Agent 開發指引文件
 ├── README.md              # 專案說明文件
 ├── package.json           # 相依套件與腳本
 ├── gatsby-config.js       # Gatsby 設定檔

README.md

@@ -15,7 +15,7 @@
 
 ## Quick start
 
-先安裝依賴
+先安裝依賴（如使用 Dev Container 可省略）
 
 ```bash
 yarn

src/pages/404.js

@@ -8,39 +8,38 @@ const NotFoundPage = () => {
 
   // 開始倒數
   React.useEffect(() => {
-    let id = setInterval(() => {
-      setCountDown(countDown - 1);
+    const id = setInterval(() => {
+      setCountDown((prev) => prev - 1);
     }, 1000);
     return () => clearInterval(id);
-  });
+  }, []);
 
   // 倒數結束回首頁
   React.useEffect(() => {
     if (countDown <= 0) {
       window.location.href = "/";
     }
-  });
+  }, [countDown]);
 
   return (
     <div
       className="h-screen w-screen content-center items-center justify-center m-0"
       style={{ background: "#4d689b" }}
     >
-      <AppHeader title="iOS Club - 404 Opps" />
+      <AppHeader title="iOS Club - 404 Oops" />
       <div className="h-full w-full flex flex-col justify-center items-center p-20">
         <div className="w-full flex flex-col md:flex-row items-center justify-center space-x-4 space-y-3">
           <LogoSvg className="h-48 w-48 md:w-32 md:h-32 text-white fill-current" />
-          <h2 className="text-white text-xl md:text-3xl">網頁努力建置中...</h2>
+          <h2 className="px-3 text-white text-xl md:text-3xl font-bold">
+            網頁努力建置中⋯⋯
+          </h2>
         </div>
-        <p className="py-3 text-white">在 {countDown} 秒後幫您回首頁</p>
-        <a
-          href="/"
-          className="pt-3 underline underline-offset-2 text-white font-blod"
-        >
-          ..或點我回首頁
+        <p className="py-3 text-white">在 {countDown} 秒後幫您回到首頁</p>
+        <a href="/" className="pt-3 underline underline-offset-2 text-white">
+          或者點我直接回首頁
         </a>
         <div className="mt-10">
-          <h2 className="text-lg text-white">404 Not Found</h2>
+          <h2 className="text-lg text-white font-bold">404：Page Not Found</h2>
         </div>
       </div>
     </div>

src/pages/index.js

@@ -314,7 +314,7 @@ const AnnouncementLiet = (props) => {
             <a
               className="text-blue-500 underline underline-offset-2 font-bold"
               href={node.url}
-              target="__blank"
+              target="_blank"
             >
               {node.urlText}
             </a>
@@ -422,11 +422,6 @@ const socialItems = [
     icon: "akar-icons:discord-fill",
     href: "https://discord.com/invite/z2VPCNFupv",
   },
-  {
-    name: "Threads",
-    icon: "akar-icons--threads-fill",
-    href: "https://www.threads.net/@fcu.iosclub",
-  },
 ];
 
 export const qldata = graphql`

src/pages/qrcode_generator.js

@@ -1,18 +1,26 @@
 import * as React from "react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Footer from "../components/footer";
 import Navbar from "../components/navbar";
 import AppHeader from "../components/header";
 import SliderButton from "../components/buttons/slider_button";
 import { Icon } from "@iconify/react";
 
+const logo = "https://i.meee.com.tw/0SiZRVA.jpg";
+
 const QRCodeGeneratorPage = () => {
   const [urlInput, setUrlInput] = useState("");
   const [qrCodeUrl, setQrCodeUrl] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
 
-  const logo = "https://i.meee.com.tw/0SiZRVA.jpg";
+  useEffect(() => {
+    return () => {
+      if (qrCodeUrl && qrCodeUrl.startsWith("blob:")) {
+        URL.revokeObjectURL(qrCodeUrl);
+      }
+    };
+  }, [qrCodeUrl]);
 
   const generateQRCode = async () => {
     if (!urlInput.trim()) {
@@ -95,6 +103,10 @@ const QRCodeGeneratorPage = () => {
             const blob = await imgResponse.blob();
             const url = URL.createObjectURL(blob);
             setQrCodeUrl(url);
+            setTimeout(
+              () => previewRef.current?.scrollIntoView({ behavior: "smooth" }),
+              100,
+            );
           } else {
             throw new Error(`圖片下載失敗 (${imgResponse.status})`);
           }

src/pages/rfid_converter.js

@@ -25,7 +25,7 @@ const RfidConverterPage = () => {
       // 分割成位元組
       const bytes = [];
       for (let i = 0; i < hexStr.length; i += 2) {
-        bytes.push(hexStr.substr(i, 2));
+        bytes.push(hexStr.slice(i, i + 2));
       }
 
       // 創建副本來避免修改原始數組
@@ -62,7 +62,7 @@ const RfidConverterPage = () => {
       // 分割成位元組
       const bytes = [];
       for (let i = 0; i < hex.length; i += 2) {
-        bytes.push(hex.substr(i, 2));
+        bytes.push(hex.slice(i, i + 2));
       }
 
       // 創建副本來避免修改原始數組
@@ -133,11 +133,11 @@ const RfidConverterPage = () => {
                   value={hexInput}
                   onChange={(e) => setHexInput(e.target.value)}
                   placeholder="請輸入16進制卡號..."
-                  className="flex-1 px-4 py-3 border-2 border-gray-300 rounded-lg font-mono text-lg focus:border-btnbg focus:outline-none transition-colors"
+                  className="flex-1 px-4 py-3 border-2 border-gray-300 rounded-full font-mono text-lg focus:border-btnbg focus:outline-none transition-colors"
                 />
                 <button
                   onClick={clearHex}
-                  className="px-4 py-3 border border-gray-400 text-gray-700 rounded-lg hover:bg-btnbg hover:text-white transition-colors flex items-center justify-center"
+                  className="px-4 py-3 text-gray-700 rounded-full hover:bg-btnbg hover:text-white transition-colors flex items-center justify-center"
                   title="清除輸入"
                 >
                   <Icon icon="mdi:close" className="text-xl" />
@@ -199,11 +199,11 @@ const RfidConverterPage = () => {
                   value={decInput}
                   onChange={(e) => setDecInput(e.target.value)}
                   placeholder="請輸入10進制卡號..."
-                  className="flex-1 px-4 py-3 border-2 border-gray-300 rounded-lg font-mono text-lg focus:border-btnbg focus:outline-none transition-colors"
+                  className="flex-1 px-4 py-3 border-2 border-gray-300 rounded-full font-mono text-lg focus:border-btnbg focus:outline-none transition-colors"
                 />
                 <button
                   onClick={clearDec}
-                  className="px-4 py-3 border border-gray-400 text-gray-700 rounded-lg hover:bg-btnbg hover:text-white transition-colors flex items-center justify-center"
+                  className="px-4 py-3 text-gray-700 rounded-full hover:bg-btnbg hover:text-white transition-colors flex items-center justify-center"
                   title="清除輸入"
                 >
                   <Icon icon="mdi:close" className="text-xl" />