diff --git a/src/App.tsx b/src/App.tsx
index ef68097..7baf3e3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -18,6 +18,7 @@ import TemplateComponent from "@src/component/template/TemplateComponent";
 import {dummyWedding} from "@remote/value/Wedding";
 import TemplatesPage from "@page/templates/TemplatesPage";
 import GlobalStyle from "@src/GlobalStyle";
+import WeddingPage from "@page/wedding/WeddingPage";
 
 const {Kakao} = window as any;
 
@@ -59,8 +60,10 @@ function App() {
                 {/*not found*/}
                 <Route path={'*'} element={<Navigate to={'/'}/>}/>
 
-                {/*temp*/}
-                <Route path={'template1'} element={(
+                {/*wedding*/}
+                {/*<Route path={'wedding'} element={}/>*/}
+                <Route path={'wedding/:url'} element={<WeddingPage/>}/>
+                <Route path={'sample'} element={(
                     <div style={{display: 'flex', justifyContent: 'center'}}>
                         <TemplateComponent wedding={dummyWedding}/>
                     </div>
diff --git a/src/component/template/component/PreviewTemplate.tsx b/src/component/template/component/PreviewTemplate.tsx
index ec53bd4..7c0498a 100644
--- a/src/component/template/component/PreviewTemplate.tsx
+++ b/src/component/template/component/PreviewTemplate.tsx
@@ -1,4 +1,4 @@
-import React, {HTMLProps, useRef, useState} from 'react';
+import React from 'react';
 import Text from "@designsystem/component/text";
 import {Column, Row} from "@designsystem/component/flexLayout";
 import Icon, {IconType} from "@designsystem/foundation/icon";
diff --git a/src/page/wedding/WeddingPage.tsx b/src/page/wedding/WeddingPage.tsx
new file mode 100644
index 0000000..e0a3604
--- /dev/null
+++ b/src/page/wedding/WeddingPage.tsx
@@ -0,0 +1,30 @@
+import React, {useEffect, useState} from 'react';
+import Wedding from "@remote/value/Wedding";
+import weddingApi from "@remote/api/WeddingApi";
+import {useParams} from "react-router-dom";
+import {Row} from "@designsystem/component/flexLayout";
+import TemplateComponent from "@src/component/template/TemplateComponent";
+
+function WeddingPage() {
+    const {url} = useParams();
+    const [wedding, setWedding] = useState<Wedding>();
+
+    useEffect(() => {
+        if (!url) return;
+        
+        (async () => {
+            const {data} = await weddingApi.getWedding(url);
+            setWedding(data);
+        })();
+    }, []);
+    
+    return (
+        <Row $justifyContent={'center'}>
+            {wedding && (
+                <TemplateComponent wedding={wedding}/>
+            )}
+        </Row>
+    );
+}
+
+export default WeddingPage;
\ No newline at end of file
diff --git a/src/remote/api/FileApi.ts b/src/remote/api/FileApi.ts
index 809a089..662682c 100644
--- a/src/remote/api/FileApi.ts
+++ b/src/remote/api/FileApi.ts
@@ -6,16 +6,16 @@ class FileApi {
     static PATH = 'file';
 
     async upload(file: File): Promise<ResponseData<Upload>> {
-        const formData = new FormData();
-        formData.append('file', file);
-
-        const {data} = await customApi.post(`${FileApi.PATH}/upload`, formData, {
-            headers: {
-                "Content-Type": "multipart/form-data"
-            }
+        const {data} = await customApi.postForm(`${FileApi.PATH}/upload`, {
+            file
         });
         return data;
     }
+    
+    async getMusics(): Promise<ResponseData<string[]>> {
+        const {data} = await customApi.get(`${FileApi.PATH}/music`);
+        return data;
+    }
 }
 
 const fileApi = new FileApi();