[NextUI] Textarea 커스텀하기

Jinny·2024년 12월 31일

next.js

목록 보기

7/7

Next UI 도입하게 된 배경

프로젝트를 하면서 리뷰 작성 input에 아래 사진과 같이 label로 글씨를 굵게 설정하고 placeholder에 위치한 요소에 글자를 입력하는 UI 디자인을 적용하기 위해 Next UI를 적용하기로 정했다. 이 라이브러리를 선택한 이유는 react-textarea-autosize 기반으로 자동으로 입력 내용을 늘어주기 때문에 선택하게 되었다.

❗UI 라이브러리 없이 적용한 경우 발생하는 문제

textarea에 padding 값을 적용하면 placeholder 위치도 오른쪽으로 치우치는 문제가 있었다. tailwind로 plceholder:p-0 으로 적용을 시도했으나, 따로 placeholder 부분만 padding 값을 적용하지 못하는 상태였다. margin 역시 값이 적용되지 않는다.

✍️ UI 라이브러리 없이 사용한 코드

TextareaAutoSize는 react-textarea-autosize 라이브러리로 값을 입력하면 알아서 사이즈가 늘어나는 컴포넌트이다.

   <div className='relative flex flex-col'>
        <h3 className='absolute left-10 top-5 text-lg font-bold'>
          리뷰를 작성해 주세요
        </h3>
        <TextareaAutosize
          {...register('content')}
          className='h-[356px] border outline-none resize-none placeholder:text-sm pt-10 px-8 placeholder:-px-8'
          placeholder={`
            🞄 책을 읽고 나서 어떤 기분이 들었나요?
            🞄 이 책에서 가장 기억에 남는 장면이나 문장이 있었나요?
            🞄 다른 사람들에게 이 책을 추천하고 싶다면, 어떤 이유인가요?
            🞄 책 속에서 가장 공감한 내용은 무엇인가요?
            🞄 아쉬웠던 점이 있다면 간단히 적어주세요.`}
          minRows={13}
        />
      </div>

실제로 값을 입력하면 입력되는 글자 배치가 맞지 않는 것을 확인할 수 있다.

Next UI에서 제공하는 slots

next-ui에서 제공하는 Textarea 컴포넌트는 classNames를 통해 스타일링을 구체적으로 설정할 수 있다. 우선 제공하는 slot에 대해 알아보자.

base: 정렬, 배치, 일반적인 모양을 처리하는 용도

label: 텍스트 영역의 위, 안쪽 또는 왼쪽에 표시되는 레이블이다.

inputWrapper: label (내부에 있는 경우)과 내부 래퍼(innterWrapper)를 감싸주는 용도

input: textarea 입력 요소

description: 텍스트 영역에 대한 설명

errorMessage: 텍스트 영역에 대한 오류 메세지

headerWrapper: label과 clearButton을 감싸는 용도

✍️ Next UI로 적용한 코드

AutoSize를 적용하려면 minRows 또는 maxRows를 적용해주면 된다. input에 padding을 적용하면 placeholder와 텍스트가 입력되는 위치와 동일해서 쉽게 해결할 수 있었다.

 <Textarea
        {...register('content')}
        className='border outline-none placeholder:text-sm'
        classNames={{
          base: 'min-h-[356px] resize-y',
          inputWrapper: 'min-h-[356px] p-5',
          input: 'min-h-[208px]  resize-none',
          label: 'text-lg font-bold mb-4',
        }}
        label='리뷰를 작성해 주세요'
        placeholder={` 🞄 책을 읽고 나서 어떤 기분이 들었나요?
 🞄 이 책에서 가장 기억에 남는 장면이나 문장이 있었나요?
 🞄 다른 사람들에게 이 책을 추천하고 싶다면, 어떤 이유인가요?
 🞄 책 속에서 가장 공감한 내용은 무엇인가요?
 🞄 아쉬웠던 점이 있다면 간단히 적어주세요.`}
        minRows={13}
      />

스크롤바 커스텀하기

textarea가 자동으로 사이즈가 늘어나면서 스크롤 바 스타일을 global.css를 통해 스타일을 적용해 주었다.

textarea::-webkit-scrollbar {
 @apply w-2;
}
textarea::-webkit-scrollbar-track {
 @apply bg-customGrey-100 rounded-sm;
}
textarea::-webkit-scrollbar-thumb {
 @apply bg-customGrey-400 rounded-sm cursor-auto;
}
textarea::-webkit-scrollbar-thumb:hover {
 @apply bg-customGrey-600;
}