📌

✨ 컬러리스트 사이트(아직 없음

tailwind와 css 사용

재사용되는 컴포넌트 분리하기

ColorSelectionInput 으로

각각 margin을 주는 대신... gap-?을 사용하기

<form
  className="flex flex-col gap-2"
  ...>

useId

label과 input을 htmlFor로 연결해줄 때, react 18부터 사용가능한 useId를 사용하면 편리함~

svg import하기

/src/img/icon.svg와 같은 절대 경로를 하드코딩하면, 개발 중에만 사용 가능... 빌드하고 나면 assets 폴더로 이동해야 하기 때문에, svg 파일은 상대경로로 import하게 되면 번들러가 알아서 적절한 url을 문자열로 제공함.

icon에 크기 지정해주기

사용자가 보지 못하는 hidden input에는 readonly를 걸어줄 것

안 그러면 react가 value는 있는데, onChange가 없다고 경고를 띄움...

<input type="text" name="colors" value={JSON.stringify(colors)} hidden={true} readOnly />

버튼은 height를 직접 지정하지 말자

글자 크기가 변하면, height가 동적으로 늘어나도록

border-radius는 tailwind 에서는 rounded rounded-lg rounded-xl 등으로