[ADD] #2 :: 펜 svg 및 range 위치 이동

rancuft · Apr 26, 2022 · 1edce4b · 1edce4b
1 parent 0c1527a
commit 1edce4b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/rancuft/public/img/Vector.svg b/rancuft/public/img/Vector.svg
diff --git 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
@@ -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;
+  }
 `