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};