UPDATE

package.json

@@ -26,6 +26,7 @@
     "@types/react-dom": "^19.1.7",
     "@types/swiper": "^5.4.3",
     "@vitejs/plugin-react": "^5.0.0",
+    "baseline-browser-mapping": "^2.9.3",
     "eslint": "^9.33.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",

public/_redirects

@@ -1,4 +1,6 @@
 /about       /index.html   200
 /submit-id   /index.html   200
+/demo        /index.html   200
 /*           /index.html   200
 /song/*      /index.html   200
+/contract    /index.html   200

src/main.tsx

@@ -1,11 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import App from './App'; // 최상위 레이아웃 컴포넌트, 공통 레이아웃
+
+// 최상위 레이아웃 컴포넌트, 공통 레이아웃
+import App from './App';
+
+// 페이지 컴포넌트
 import HomePage from './pages/Home';
 import SubmitPage from './pages/id_submit';
+import DemoPage from './pages/Demo_submit';
 import About from './pages/about';
 import SongPage from './pages/song';
+import Contract from './pages/contract';
 
 const router = createBrowserRouter([
   {
@@ -14,7 +20,9 @@ const router = createBrowserRouter([
     children: [
       { index: true, element: <HomePage/> },
       { path: 'submission', element: <SubmitPage /> },
+      { path: 'demo', element: <DemoPage /> },
       { path: 'about', element: <About/> },
+      { path: 'contract', element: <Contract/> },
       { path: 'song/:id', element: <SongPage /> },
     ],
   },

src/pages/Demo_submit.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import MetaTag from "../components/metaTag";
+
+function DemoPage() {
+  const containerRef = useRef<HTMLIFrameElement | null>(null);
+  const [height, setHeight] = useState(1700);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    const iframe = containerRef.current;
+    const width = iframe?.clientWidth;
+
+    if (iframe && width != undefined){
+      if (width < 600) {
+        setHeight(1700 + (600 - width));
+      }
+    }
+  }, []);
+
+  return (
+    <div className="submit_form" style={{"backgroundColor": "#e4f3e5"}}>
+      <MetaTag title={"ISLAND · "+ t("submit_demo")} description={t("submit_demo_page_description")} keywords="submit" imgsrc="../asset/icon.png" url="https://island-ids.netlify.app/demo/"/>
+      <iframe
+      src="https://docs.google.com/forms/d/e/1FAIpQLSfrqx6XdomSSxBG6DaL-9FLyrm7kaxxz0UI9QyUQeoB-qCwSg/viewform?usp=header"
+      ref={containerRef}
+       style={{
+          height: `${height}px`
+        }}
+      >
+      Loading...
+      </iframe>
+    </div>
+  );
+}
+
+export default DemoPage;

src/pages/Home.tsx

@@ -13,6 +13,7 @@ import "./pages.scss";
 function HomePage(){
     //API를 써서 리스트 가져오기?
     const { t } = useTranslation();
+    const length = releases.length
 
     return (
       <div>
@@ -42,10 +43,9 @@ function HomePage(){
           >
             {releases.map(
               (song, idx) => (
-                console.log("song"),
                 (
                   <SwiperSlide key={idx}>
-                    <Song_card {...song} index={idx}/>
+                    <Song_card {...song} index={length - idx}/>
                   </SwiperSlide>
                 )
               )

src/pages/about.tsx

@@ -41,7 +41,7 @@ function About() {
                     </div>
                     <div className="team-section">
                         <div className="team-role">A&R Team</div>
-                        <a className="team-member" href="https://linktr.ee/speedymusic" target='_blank'>🎵 Speedy</a>
+                        <a className="team-member" href="https://linktr.ee/nune01_" target='_blank'>🎵 Nune</a>
                         <a className="team-member" href="https://music.hexa.cat/" target='_blank'>🎵 hexa.cat</a>
                     </div>
                     <div className="team-section">

src/pages/contract.tsx

@@ -0,0 +1,17 @@
+import Text_Card from "../components/text_card";
+
+function Contract() {
+    return (
+        <div className="contract">
+            <Text_Card title="Contract for ISLAND Release">
+                <iframe
+                    width="100%"
+                    height="600"
+                    src="ISLAND_Record_Release_Contract.pdf"
+                ></iframe>
+            </Text_Card>
+        </div>
+    )
+}
+
+export default Contract

src/pages/id_submit.tsx

@@ -19,7 +19,7 @@ function SubmitPage() {
   }, []);
 
   return (
-    <div className="submit_form">
+    <div className="submit_form" style={{"backgroundColor": "azure"}}>
       <MetaTag title={"ISLAND · "+ t("submit_id")} description={t("submit_id_page_description")} keywords="submit" imgsrc="../asset/icon.png" url="https://island-ids.netlify.app/submission/"/>
       <iframe
       src="https://docs.google.com/forms/d/e/1FAIpQLSetYQu8xbPS9Ndz5ncRogDczAnL6vlLbrNPz-b4qDq9TiDSVw/viewform?embedded=true"

src/pages/pages.scss

@@ -39,7 +39,6 @@
 }
 
 .submit_form {
-    background-color: azure;
     margin-top: 85px;
     width: 100%;
 
@@ -191,6 +190,10 @@
     }
 }
 
+.contract {
+    margin-top: 100px;
+}
+
 .song {
     margin-top: 100px;
     margin-bottom: 85px;
@@ -282,5 +285,4 @@
             color: white;
         }
     }
-
 }

src/pages/song.tsx

@@ -6,7 +6,8 @@ import './pages.scss';
 
 function SongPage() {
     const { id } = useParams();
-    const song = releases[id as unknown as number]; // string을 number로 변환해야 함
+    const idx = releases.length - Number(id);
+    const song = releases[idx];
     const { t } = useTranslation();
 
     return (
@@ -29,4 +30,4 @@ function SongPage() {
     );
 }
 
-export default SongPage;
+export default SongPage;

src/releases.json

@@ -1,22 +1,22 @@
 [
     {
-        "Song_Name": "Dance VIP",
+        "Song_Name": "Dance VIP (Extended Mix)",
         "Artist_Name": "rrayy",
         "Cover_Art": "https://i1.sndcdn.com/artworks-iaMIZrXjJXGWNzuz-MkkI4g-t1080x1080.jpg",
         "Platforms" : {
-            "SoundCloud": "https://soundcloud.com/rrayy-25809/dance-vip-mix",
-            "Spotify": "https://open.spotify.com/track/3uPAiH1VDa0GghVW5cNYn6?si=d4d8b9eeaea94e82",
-            "AppleMusic": "https://music.apple.com/us/album/1842664455?i=1842664456"
+            "SoundCloud": "https://soundcloud.com/rrayy-25809/dance-vip-extended-mix",
+            "Spotify": "https://open.spotify.com/track/7KCsdZb0spDTSn91USJxSt?si=88910dc443db4339",
+            "AppleMusic": "https://music.apple.com/us/album/1842664455?i=1842664457"
         }
     },
     {
-        "Song_Name": "Dance VIP (Extended Mix)",
+        "Song_Name": "Dance VIP",
         "Artist_Name": "rrayy",
         "Cover_Art": "https://i1.sndcdn.com/artworks-iaMIZrXjJXGWNzuz-MkkI4g-t1080x1080.jpg",
         "Platforms" : {
-            "SoundCloud": "https://soundcloud.com/rrayy-25809/dance-vip-extended-mix",
-            "Spotify": "https://open.spotify.com/track/7KCsdZb0spDTSn91USJxSt?si=88910dc443db4339",
-            "AppleMusic": "https://music.apple.com/us/album/1842664455?i=1842664457"
+            "SoundCloud": "https://soundcloud.com/rrayy-25809/dance-vip-mix",
+            "Spotify": "https://open.spotify.com/track/3uPAiH1VDa0GghVW5cNYn6?si=d4d8b9eeaea94e82",
+            "AppleMusic": "https://music.apple.com/us/album/1842664455?i=1842664456"
         }
     },
     {