Feat/29/field components

[cksrlcks]

❓이슈

• close Feat : [공용] 입력 필드 컴포넌트 작업 #29

✍️ Description

대시보드 페이지 내부에서 사용할 공용 필드 컴포넌트들을 작업했습니다.

• Input
• Textarea
• TagInput
• DateInput
• ImageUpload
• SearchInput

전달사항

• 샘플페이지를 같이 넣어두었습니다. ('/form' 으로 접속하시면 됩니다.)
• Input, Textarea, SearchInput 컴포넌트는 controlled, uncontrolled 둘다 사용하실 수 있습니다.
• TagInput, DateInput, ImageUpload는 controlled로만 작동합니다.
• controlled 컴포넌트를 RHF(React Hook Form)에 연결하는 샘플은 /app/(dashboard)/form/page.tsx를 확인해주세요
• 검색과 일반 인풋의 스타일 가이드가 맞지 않아서, 하나로 통일했습니다.
• 이미지 업로드시 기존 이미지 삭제를 못하는것 같아서 삭제 버튼을 추가했습니다.
• 이미지 업로드 컴포넌트에 추가 클래스네임을 전달해서 프로필 페이지에도 사용하시면 됩니다.
• 태그인풋은 엔터시 입력되고, 백스페이스로 삭제하는 기능을 넣었어요.
• 나중에 시간이 나면 데이트피커 UI css 커스텀 하겠습니다. (기본UI가 별로 안이뻐요)

고민했던 방법
개인적으로 리액트 컴포넌트에서 dom의 외형을 예측할 수 있는 구조를 좋아해서, context를 이용해서 compound형식으로 하고 싶었는데 다른 분들이 사용하시기에 약간 어색하실수도 있을것 같아서 간단하게 작업했습니다.

// 고민했던 방법 (컨텍스트 이용)
<FormItem>
  <FormLabel>라벨</FormLabel>
  <Input />
  <FormMessage />
</FormItem>

// 이번 프로젝트에 선택한 방법
<Input 
  label='제목'
  error={errors.title?.message}
/>

✅ Checklist

PR

• Branch Convention 확인

  feat/* 기능 구현, fix/* 버그 수정, refactor/* 개선

• Base Branch 확인
• 적절한 Label 지정
• Assignee 및 Reviewer 지정

Test

• 로컬 작동 확인

Additional Notes

• (없음)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
taskify	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 9, 2025 0:38am

[SeokChan-Lee]

고생하셨습니다 👍
추후 해당 컴포넌트 가져다가 기존 만든 인풋 필드 수정하도록 하겠습니다 🫡