diff --git a/rancuft/src/components/DrawGift/index.js b/rancuft/src/components/DrawGift/index.js
new file mode 100644
index 0000000..5355b14
--- /dev/null
+++ b/rancuft/src/components/DrawGift/index.js
@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { useMediaQuery } from "react-responsive";
+import * as S from "./style.js";
+
+function DrowGift() {
+  const isMobile = useMediaQuery({
+    query: "(max-width:767px)",
+  });
+  const isPc = useMediaQuery({
+    query: "(min-width:768px)",
+  });
+
+  
+  return (
+    <>
+      {isMobile && (                
+      <S.FullBackground>
+        <S.Background>
+          HI
+        </S.Background>
+       </S.FullBackground>
+       )}
+      {isPc && <h2>TEST</h2>}
+    </>
+  );
+}
+
+export default DrowGift;
diff --git a/rancuft/src/components/DrawGift/style.js b/rancuft/src/components/DrawGift/style.js
new file mode 100644
index 0000000..4e9a7cc
--- /dev/null
+++ b/rancuft/src/components/DrawGift/style.js
@@ -0,0 +1,17 @@
+import styled from "@emotion/styled";
+
+export const Background = styled.div`
+  top: 30px;
+  position: relative;
+`;
+
+export const FullBackground = styled.div`
+  position: absolute;
+  top:15%;
+  bottom: 20%;
+  right: 50%;
+  padding-right:30px;
+  padding-left:30px;
+  padding-bottom:200px;
+  transform: translateX(50%);
+`;
diff --git a/rancuft/src/container/Draw.js b/rancuft/src/container/Draw.js
new file mode 100644
index 0000000..41b6490
--- /dev/null
+++ b/rancuft/src/container/Draw.js
@@ -0,0 +1,10 @@
+import Draw from "../components/DrawGift/index"
+
+const DrawContainer = () => {
+    return( <>
+    <Draw />
+    </>
+    )
+}
+
+export default DrawContainer;
\ No newline at end of file
diff --git a/rancuft/src/route/main_router.js b/rancuft/src/route/main_router.js
index a187966..05b54c7 100644
--- a/rancuft/src/route/main_router.js
+++ b/rancuft/src/route/main_router.js
@@ -1,14 +1,15 @@
 import { FC, Suspense, useCallback } from "react";
 import { Routes, Route, useNavigate } from "react-router-dom";
+import DrawContainer from "../container/Draw";
 import { LoginContainer } from "../container/index";
 
 const MainRouter = () => {
   return (
     <Routes>
       <Route path="" element={<LoginContainer />} />
+      <Route path="/home" element={<LoginContainer/>}/>
+      <Route path="/draw" element={<DrawContainer/>}/>
     </Routes>
-    
-    
   );
 };