React styled-components textarea 및 placeholder 사용

textarea는 평소 쓰던 styled-components에서
div를 textarea로 바꿔주는 느낌이다.

const Container = styled.div`
  width: 50px;
  height: 50px;
`;

div가 이랬다면,

const Content = styled.textarea`
  width: 570px;
  height: 280px;
  
  color: #000;
  font-family: "Gowun Dodum";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 200%; /* 40px */
  letter-spacing: -0.2px;
  
  resize: none; // 사용자가 크기 조절 못하도록
  word-wrap: break-word;
  resize: none;
  border: none;
  outline: none;
  
  &::placeholder{
    color: var(--Grey-Dark, #757575);
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%; /* 16px */
	}
`;

const Page1 = () => {

  const [letterContent, setLetterContent] = useState('');
    const handleLetterChange = (event) => {
      const content = event.target.value;
      // 300자까지만 입력 받음
      if (content.length <= 300) {
        setLetterContent(content);
      }
    };
  
  return (
          
            <Content 
              value={letterContent}
              onChange={handleLetterChange} 
              placeholder="편지를 입력하세요..."
            />

          <NumberCount>
            ({letterContent.length}/300)
          </NumberCount>

  );
};
 
export default Page1;

textarea는 이렇다.
placeholder 사용법이 스크롤바 구현할 때랑 비슷해서
익숙했다.