diff --git a/src/components/CountNumber.tsx b/src/components/CountNumber.tsx
new file mode 100644
index 00000000..018aaf35
--- /dev/null
+++ b/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 (
+ {`${currentLength}/${maxLength}`}
+ )
+}
+
+const StyleCountNumber = styled.span`
+ position: relative;
+ right: ${(props) => props.right}px;
+ bottom: 3px;
+ font-size: 12px;
+ color: ${(props) => props.color};
+`
+
+export default CountNumber
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index a3de8865..28e71169 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -29,28 +29,35 @@ const Input = ({
}: InputProps) => {
return (
<>
-
+
+
+
>
)
}
+const InputWrapper = styled.div`
+ position: relative;
+`
+
const StyleInput = styled.input`
::placeholder {
font-size: ${(props) => props.placeholderSize};
color: ${(props) => props.placeholderColor};
}
+ position: relative;
placeholder: ${(props) => props.placeholder};
width: ${(props) => props.width};
height: ${(props) => props.height};