Feat: OneLinerInput, TextInput 구현

[hankim0904]

📌요구사항

• OneLinerInput 구현 -> 다양한 text input 컴포넌트의 베이스가 되는 컴포넌트
• TextInput 구현 -> OneLinerInput에 ract hook form 적용한 컴포넌트

📌작업 진행 상황 (에러, 막혔던 부분, 그외 궁금한것 등등)

• OneLinerInput 구현 후 정보 수정 모달에 들어가는 input 컴포넌트 3개를 따로 구현할 계획이었으나
  TextInput 하나로 3개를 커버할 수 있도록 변경했음

알림

• OneLinerInput의 사용되지 않는 prop들은 추후 삭제하거나 필요시 남겨놓을 예정임
• 유효한 url임을 검사하는 정규식은 임시임
• 아무리 생각해도 error메세지가 필요할 것 같아서 기능만 구현하고 스타일은 적용하지 않음

팀원들의 의견이 필요한 것들

• width를 100%로 지정함
• maxLength를 감지하기 위해 mode는 onChange로 했음
• 주현님한테 OneLinerInput에 ...props에 대해 물어볼 것
• 한 줄 소개와 대표 링크 필수 여부 논의할 것
• 한 줄 소개 input이 반응형 mobile일때 줄바꿈이 되는 기능은 구현하지 못했음

덜 한 부분

• Modal Textarea에 react hook form 적용하는 거는 아직 못했음

사용방법

import { useForm } from "react-hook-form";
import TextInput from "@/components/domains/myPage/TextInput";

export default function StudyList() {
  const { control, handleSubmit } = useForm({
    mode: "onChange",
    defaultValues: {
      nickname: "코끼리", // 이 값은 기존 정보로 api에서 받아온 data로 대체하면 됩니다.
      link: "https://www.naver.com/",
      introduction: "안녕하세요. 프론트엔드 코끼리입니다.",
    },
  });

  const onSubmit = (data: unknown) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <TextInput name="nickname" control={control} />
      <TextInput name="link" control={control} />
      <TextInput name="introduction" control={control} />
      <button type="submit">제출</button>
    </form>
  );
}

📌스크린샷 / 테스트결과 (선택)

TextInput_test.mp4

📌이슈 번호

close #74

[github-actions]

올바른 PR 형식

올바른 PR 형식입니다.
코드 작성하시느라 수고 많으셨습니다 :)