From 8bb60fc0803e5fed8886958db1ce923594b54d4b Mon Sep 17 00:00:00 2001
From: joungeun <lje0818ovo@naver.com>
Date: Wed, 13 Apr 2022 18:56:37 +0900
Subject: [PATCH] =?UTF-8?q?[ADD]=20#2=20::=20draw=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 rancuft/src/components/DrawGift/index.js | 28 ++++++++++++++++++++++++
 rancuft/src/components/DrawGift/style.js | 17 ++++++++++++++
 rancuft/src/container/Draw.js            | 10 +++++++++
 rancuft/src/route/main_router.js         |  5 +++--
 4 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 rancuft/src/components/DrawGift/index.js
 create mode 100644 rancuft/src/components/DrawGift/style.js
 create mode 100644 rancuft/src/container/Draw.js

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>
-    
-    
   );
 };