style: Change input tag style

src/components/CurrencyInput/index.jsx

@@ -1,3 +1,4 @@
+import { Input } from '../../styles/Common.styles';
 import * as S from '../../styles/CurrencyInput.styles';
 
 function CurrencyInput({ value, setValue, autofocus }) {
@@ -24,7 +25,8 @@ function CurrencyInput({ value, setValue, autofocus }) {
 
   return (
     <S.CurrencyInput>
-      <S.CurrencyInputField
+      <Input
+        type="text"
         value={getRenderValue()}
         onChange={handleOnChange}
         placeholder="가격을 입력해주세요"

src/styles/Common.styles.js

@@ -17,3 +17,24 @@ export const SubTitle = styled.h2`
   user-select: none;
   box-sizing: border-box;
 `;
+
+export const Input = styled.input`
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  border-radius: 10px;
+  box-sizing: border-box;
+  color: ${({ theme }) => theme.colors.gray900};
+  font-size: 16px;
+  font-weight: 600;
+  border: none;
+
+  &:focus,
+  &:active {
+    outline: none;
+  }
+
+  &:placeholder-shown {
+    caret-color: ${({ theme }) => theme.colors.primary};
+  }
+`;

src/styles/CurrencyInput.styles.js

@@ -5,26 +5,8 @@ export const CurrencyInput = styled.div`
   ${({ theme }) => theme.hoverBorder};
   ${({ theme }) => theme.activeTransform};
   padding: 0;
-`;
 
-export const CurrencyInputField = styled.input.attrs({ type: 'text' })`
+  & > input {
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  border-radius: 10px;
-  box-sizing: border-box;
-  color: ${({ theme }) => theme.colors.gray900};
-  font-size: 16px;
-  font-weight: 600;
     caret-color: transparent;
-  border: none;
-
-  &:focus,
-  &:active {
-    outline: none;
-  }
-
-  &:placeholder-shown {
-    caret-color: ${({ theme }) => theme.colors.primary};
   }
 `;