From 1edce4b14b85d0096d6df1bede69ede8659b9ae0 Mon Sep 17 00:00:00 2001
From: joungeun <lje0818ovo@naver.com>
Date: Tue, 26 Apr 2022 22:06:09 +0900
Subject: [PATCH] =?UTF-8?q?[ADD]=20#2=20::=20=ED=8E=9C=20svg=20=EB=B0=8F?=
 =?UTF-8?q?=20range=20=EC=9C=84=EC=B9=98=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 rancuft/public/img/Vector.svg            |  3 +++
 rancuft/src/components/DrawGift/index.js | 13 ++++++++-----
 rancuft/src/components/DrawGift/style.js | 16 +++++++++++++++-
 3 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 rancuft/public/img/Vector.svg

diff --git a/rancuft/public/img/Vector.svg b/rancuft/public/img/Vector.svg
new file mode 100644
index 0000000..3ff8685
--- /dev/null
+++ b/rancuft/public/img/Vector.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.08573 2.91356L13.0862 6.91425L4.39929 15.6016L0.832505 15.9953C0.355018 16.0482 -0.0484094 15.6444 0.00471426 15.1669L0.401579 11.5975L9.08573 2.91356V2.91356ZM15.5606 2.31793L13.6822 0.43946C13.0962 -0.146487 12.146 -0.146487 11.56 0.43946L9.7929 2.20668L13.7934 6.20737L15.5606 4.44015C16.1465 3.85389 16.1465 2.90388 15.5606 2.31793V2.31793Z" fill="black"/>
+</svg>
diff --git a/rancuft/src/components/DrawGift/index.js b/rancuft/src/components/DrawGift/index.js
index e94e69e..80b56a5 100644
--- a/rancuft/src/components/DrawGift/index.js
+++ b/rancuft/src/components/DrawGift/index.js
@@ -34,7 +34,7 @@ function DrowGift() {
     line = e.target.value;
   }
 
-  
+
   const handlerMouseDown = e => {
     if(ctx) {
       drawing = true;
@@ -78,6 +78,13 @@ function DrowGift() {
       {isMobile && (                
       <S.FullBackground>
         <S.Background>
+          <S.Pan>
+            <img alt="펜 그림입니다. 누르면 색깔을 고를 수 있습니다." src="img/Vector.svg"/>
+          </S.Pan>
+          <S.Point>
+            <input type="range" id="lineRange" min="0.1"  max="20.0" defaultValue = "5" step="0.1"/>
+          </S.Point>
+          
           <S.DrawBox>
           <canvas 
           ref={canvas} 
@@ -86,10 +93,6 @@ function DrowGift() {
           onMouseUp={handlerMouseUp}
           onMouseMove = {draw}>이 브라우저는 캔버스를 지원하지 않습니다 😅<br/> 선물 받아보기는 어떠신가요?</canvas>
           </S.DrawBox>
-          <S.Point>
-            <input type="range" id="lineRange" min="0.1"  max="20.0" defaultValue = "5" step="0.1"/>
-          </S.Point>
-          HI
         </S.Background>
        </S.FullBackground>
        )}
diff --git a/rancuft/src/components/DrawGift/style.js b/rancuft/src/components/DrawGift/style.js
index 301a025..5cd3265 100644
--- a/rancuft/src/components/DrawGift/style.js
+++ b/rancuft/src/components/DrawGift/style.js
@@ -24,7 +24,21 @@ export const DrawBox = styled.div`
   }
 
 `
+export const Pan = styled.div`
+  float: right;
+  img{
+    cursor: pointer;
+    margin-left: 5px;
+    margin-bottom: 10px;
+    width: 30px;
+  }
+`
 
 export const Point = styled.div`
-
+float: right;
+  input{
+    cursor: pointer; // 올렸을시 손가락으로 변경
+    border-color: red;
+    margin-top: 15px;
+  }
 `
\ No newline at end of file