ISLAND-IDs · rrayy-25809 · Sep 27, 2025 · Sep 22, 2025 · Sep 22, 2025 · Sep 22, 2025
diff --git a/.github/workflows/claude_chat.yml b/.github/workflows/claude_chat.yml
@@ -0,0 +1,34 @@
+name: Claude Code Action
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+
+permissions:
+  id-token: write  # 이 부분 추가
+
+jobs:
+  claude-code-action:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Claude Code Action Official
+        uses: anthropics/claude-code-action@v0.0.31
+        with:
+          trigger_phrase: "@claude"  # 이 문구를 포함한 주석에서 트리거가 발생합니다.
+          label_trigger: "claude"    # 라벨을 기준으로 트리거를 걸 수 있습니다.
+          branch_prefix: "claude/"   # 브랜치 이름에 붙을 접두어입니다.
+          timeout_minutes: 30        # 실행 타임아웃을 30분으로 설정합니다.
+          use_sticky_comment: true   # 한 개의 고정된 댓글로 결과를 남깁니다.
+          use_commit_signing: false  # 커밋 서명은 사용하지 않습니다.
+          use_bedrock: false         # Amazon Bedrock 사용 안 함.
+          use_vertex: false          # Google Vertex AI 사용 안 함.
+
+          # 필수 API 키가 필요한 경우 GitHub Secrets에서 키를 참조하세요.
+          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
+          # github_token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/index.html b/index.html
@@ -2,12 +2,12 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="src/asset/icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ISLAND-IDs</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/asset/icon.png b/src/asset/icon.png
diff --git a/src/components/ID.tsx b/src/components/ID.tsx
@@ -1,17 +1,16 @@
-type IDProps = {
+type Props = {
   Song_Name?: string;
   Artist_Name?: string;
-  Release_Date?: string;
+  Cover_Art?: string;
 };
 
-function ID({ Song_Name, Artist_Name, Release_Date }: IDProps) {
+function ID({ Song_Name, Artist_Name, Cover_Art}: Props) {
   return (
     <div className="release-card">
-      <div className="release-image">Cover Art</div>
+      <img className="release-image" src={Cover_Art} alt={Song_Name} />
       <div className="release-info">
         <h3>{Song_Name}</h3>
         <div className="release-artist">{Artist_Name}</div>
-        <div className="release-date">{Release_Date}</div>
       </div>
     </div>
   );

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -6,12 +6,17 @@ function HomePage(){
     const { t } = useTranslation();
 
     return (
-        <section className="hero">
-            <div className="hero-content">
-                <h1>ISLAND</h1>
-                <p>{t("sub_title")}</p>
-            </div>
-        </section>
+        <div>
+            <section className="hero">
+                <div className="hero-content">
+                    <h1>ISLAND</h1>
+                    <p>{t("sub_title")}</p>
+                </div>
+            </section>
+            <section className="ID-list">
+
+            </section>
+        </div>
     )
 }
 

diff --git a/src/pages/id_submit.tsx b/src/pages/id_submit.tsx
@@ -1,8 +1,10 @@
 function SubmitPage() {
   return (
-    <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSetYQu8xbPS9Ndz5ncRogDczAnL6vlLbrNPz-b4qDq9TiDSVw/viewform?embedded=true">
+    <div className="submit_form">
+      <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSetYQu8xbPS9Ndz5ncRogDczAnL6vlLbrNPz-b4qDq9TiDSVw/viewform?embedded=true">
       Loading...
-    </iframe>
+      </iframe>
+    </div>
   );
 }
 

diff --git a/src/pages/pages.scss b/src/pages/pages.scss
@@ -24,4 +24,21 @@
         opacity: 0.7;
         text-transform: uppercase;
     }
+}
+
+.submit_form {
+    margin-top: 100px;
+    width: 100%;
+
+    iframe {
+        width: 80%;
+        margin-left: 10%;
+        height: 1500px;
+        border: none;
+
+        @media (max-width: 768px) {
+            width: 100%;
+            margin-left: 0;
+        }
+    }
 }