[ADD] #2 :: 행복의 말 한마디

rancuft · Apr 26, 2022 · 53f016a · 53f016a
1 parent 1edce4b
commit 53f016a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/rancuft/src/components/DrawGift/index.js b/rancuft/src/components/DrawGift/index.js
@@ -79,7 +79,7 @@ function DrowGift() {
       <S.FullBackground>
         <S.Background>
           <S.Pan>
-            <img alt="펜 그림입니다. 누르면 색깔을 고를 수 있습니다." src="img/Vector.svg"/>
+            <img alt="펜 그림입니다. 누르면 색깔을 고를 수 있습니다." title = "클릭 하시면 색상을 바꿀 수 있습니다." src="img/Vector.svg"/>
           </S.Pan>
           <S.Point>
             <input type="range" id="lineRange" min="0.1"  max="20.0" defaultValue = "5" step="0.1"/>
@@ -93,6 +93,10 @@ function DrowGift() {
           onMouseUp={handlerMouseUp}
           onMouseMove = {draw}>이 브라우저는 캔버스를 지원하지 않습니다 😅<br/> 선물 받아보기는 어떠신가요?</canvas>
           </S.DrawBox>
+
+          <S.Title>
+            <input type="text" placeholder="행복의 말 한마디를 해 주세요 💛"></input>
+          </S.Title>
         </S.Background>
        </S.FullBackground>
        )}

diff --git a/rancuft/src/components/DrawGift/style.js b/rancuft/src/components/DrawGift/style.js
@@ -41,4 +41,17 @@ float: right;
     border-color: red;
     margin-top: 15px;
   }
+`
+
+export const Title = styled.div`
+  margin-top: 35px;
+  margin-left: 30px;
+  input{
+    padding: 10px 20px 10px 20px;
+    width: 300px;
+    font-size: 15px;
+
+    border: solid 1.5px gray;
+    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+  }
 `