From 5f8eb4897f8c9c53ffc2f83d2a8673de249e6dc9 Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Wed, 1 Nov 2023 16:57:24 +0900
Subject: [PATCH] style: Change input tag style

---
 src/components/CurrencyInput/index.jsx |  4 +++-
 src/styles/Common.styles.js            | 21 +++++++++++++++++++++
 src/styles/CurrencyInput.styles.js     | 22 ++--------------------
 3 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/components/CurrencyInput/index.jsx b/src/components/CurrencyInput/index.jsx
index 94f5697..0318909 100644
--- a/src/components/CurrencyInput/index.jsx
+++ b/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="가격을 입력해주세요"
diff --git a/src/styles/Common.styles.js b/src/styles/Common.styles.js
index 3fa0558..1154a87 100644
--- a/src/styles/Common.styles.js
+++ b/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};
+  }
+`;
diff --git a/src/styles/CurrencyInput.styles.js b/src/styles/CurrencyInput.styles.js
index 5a507d9..93af433 100644
--- a/src/styles/CurrencyInput.styles.js
+++ b/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' })`
-  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};
+  & > input {
+    caret-color: transparent;
   }
 `;