style: CountNumber 공통 컴포넌트 제작

src/components/CountNumber.tsx

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled'
+
+type CountNumberProps = {
+  currentLength: number
+  maxLength: number
+  color: string
+  right: number
+}
+
+type StyleCountNumberProps = {
+  color: string
+  right: number
+}
+
+const CountNumber = ({ right, currentLength, maxLength, color }: CountNumberProps): JSX.Element => {
+  return (
+    <StyleCountNumber
+      right={right}
+      color={color}
+    >{`${currentLength}/${maxLength}`}</StyleCountNumber>
+  )
+}
+
+const StyleCountNumber = styled.span<StyleCountNumberProps>`
+  position: relative;
+  right: ${(props) => props.right}px;
+  bottom: 3px;
+  font-size: 12px;
+  color: ${(props) => props.color};
+`
+
+export default CountNumber

src/components/Input.tsx

@@ -29,28 +29,35 @@ const Input = ({
 }: InputProps) => {
   return (
     <>
-      <StyleInput
-        placeholder={placeholder}
-        placeholderSize={placeholderSize}
-        placeholderColor={placeholderColor}
-        width={width}
-        height={height}
-        borderColor={borderColor}
-        borderWidth={borderWidth}
-        inputTextColor={inputTextColor}
-        inputTextSize={inputTextSize}
-        inputBackgroundColor={inputBackgroundColor}
-        borderRadius={borderRadius}
-      ></StyleInput>
+      <InputWrapper>
+        <StyleInput
+          placeholder={placeholder}
+          placeholderSize={placeholderSize}
+          placeholderColor={placeholderColor}
+          width={width}
+          height={height}
+          borderColor={borderColor}
+          borderWidth={borderWidth}
+          inputTextColor={inputTextColor}
+          inputTextSize={inputTextSize}
+          inputBackgroundColor={inputBackgroundColor}
+          borderRadius={borderRadius}
+        ></StyleInput>
+      </InputWrapper>
     </>
   )
 }
 
+const InputWrapper = styled.div`
+  position: relative;
+`
+
 const StyleInput = styled.input<InputProps>`
   ::placeholder {
     font-size: ${(props) => props.placeholderSize};
     color: ${(props) => props.placeholderColor};
   }
+  position: relative;
   placeholder: ${(props) => props.placeholder};
   width: ${(props) => props.width};
   height: ${(props) => props.height};