[ADD] #2 :: input -> button 변경 및 hover 시 이벤트

rancuft · Apr 26, 2022 · 9466c13 · 9466c13
1 parent 13be4eb
commit 9466c13
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/rancuft/src/components/DrawGift/index.js b/rancuft/src/components/DrawGift/index.js
@@ -74,8 +74,7 @@ function DrowGift() {
 
   return (
     // https://stickode.tistory.com/240 내가 원하는것!
-    <>
-      {isMobile && (                
+    <>           
       <S.FullBackground>
         <S.Background>
           <S.Pan>
@@ -98,12 +97,10 @@ function DrowGift() {
             <input type="text" placeholder="행복의 말 한마디를 해 주세요 💛"></input>
           </S.Title>
           <S.GiftButton>
-            <input type="button" value="선물 하기"></input>
+            <button>선물 하기</button>
           </S.GiftButton>
         </S.Background>
        </S.FullBackground>
-       )}
-      {isPc && <h2>TEST</h2>}
     </>
   );
 

diff --git a/rancuft/src/components/DrawGift/style.js b/rancuft/src/components/DrawGift/style.js
@@ -57,12 +57,16 @@ export const Title = styled.div`
 `
 
 export const GiftButton = styled.div`
- input{
+ button{
    margin-top: 40px;
    margin-left: 37%;
    padding: 5px 25px 5px 25px;
    background-color: white;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  }
+ button:hover{
+   background-color: black;
+   color:white;
+ }
 `