MyLifePlaylist💖 모달창 스타일링 수정, 해시태그 입력 UI 구현

전체적인 스타일링 변경 중간완성을 한 데 이어 모달창 디자인을 개선하려고 한다.

MyLikes💖 스타일링 변경 중간완성

 

Figma 디자인

특히 선택형 필드의 옵션값을 추가하는 방법으로 여러 사이트에서 사용하는 해시태그를 추가하는 UI를 적용해보기로 했다. 쉼표를 입력하면 입력한 텍스트가 박스형식으로 변하고 지울 수도 있다. Tagify라는 라이브러리로 손쉽게 구현 가능한데, 직접 연습해보기로 했다.

 

결과

 

직접 구현해보니 눈에 잘 안들어와서 디자인을 조금 바꾸었다. 분홍색깔을 더 잘어울리는 색으로 바꾸고 싶은데 색 조합이 어렵다ㅠㅠ
카테고리 추가 모달창만 스타일링을 변경하였고, 리스트 등록 모달창과 리스트 수정 모달창도 바뀐 스타일링을 적용해야 한다.
나중에 더 나은 색깔로 변경할 예정이다.

 

🙌 github commit 🙌

feat: restyle AddCategoryModal · hahagarden/project-machine@bc20e38

 

할 일

유효성 검사 추가하기(category, category field, option 추가시 이미 존재하는 이름이면 추가 안되도록 하기) 완료 ✅