InputText 컴포넌트를 분리한다.

[KIMSEI1124]

📑 개요

import styled from 'styled-components';
import tw from 'twin.macro';

type InputTextProps = {
  $width?: string;
  $isValid?: boolean;
  $void?: boolean;
  $resize?: boolean;
};

const InputDefault = styled.input<InputTextProps>`
  ${tw`
    h-8
    rounded-md
    px-2
    transition

    placeholder:text-gray-300
    hover:outline-gray-400
    focus:!outline-none
    focus:ring
    focus:ring-main
    `}
  ${(props) => (props.$void ? '' : tw`outline outline-1`)}
  ${(props) =>
    props.$isValid === false
      ? tw`outline-label-red text-label-red`
      : tw`outline-gray-300`}
  ${(props) => (props.$width ? `width:${props.$width};` : tw`grow`)}
`;

const InputTitle = styled.input<InputTextProps>`
  ${tw`
      h-8
      bg-transparent
      font-bold
      px-2
      transition

      placeholder:text-gray-300
      hover:border-gray-400
      focus:!outline-none
      focus:border-main
  `}
  ${(props) => (props.$void ? '' : tw`border-b-2`)}
  ${(props) =>
    props.$isValid === false
      ? tw`border-label-red text-label-red`
      : tw`border-gray-300`}
  ${(props) => (props.$width ? `width:${props.$width};` : tw`grow`)}
`;

const InputTextArea = styled.textarea<InputTextProps>`
  ${tw`
    rounded-md
    px-2
    transition

    placeholder:text-gray-300
    hover:outline-gray-400
    focus:!outline-none
    focus:ring
    focus:ring-main
    `}
  ${(props) => (props.$void ? '' : tw`outline outline-1`)}
  ${(props) =>
    props.$isValid === false
      ? tw`outline-label-red text-label-red`
      : tw`outline-gray-300`}
  ${(props) => (props.$width ? `width:${props.$width};` : tw`grow`)}
  ${(props) => (props.$resize === false ? tw`resize-none` : '')}
`;

export { InputDefault, InputTitle, InputTextArea };

해당 컴포넌트를 분리하고 스타일 옵션과 컴포넌트 옵션을 분리합니다.

🚀 상세 작업 내용

---

• 스타일 관련 코드 분리
• 컴포넌트 분리
• 스토리북 등록
• 마이그레이션

⏰ 예상 소요 시간

---

2일

📁 ETC

---