JavaScript/HeadlessUI (1) 썸네일형 리스트형 [Next.js/Headless UI] Components Button 만들기 (디자인과 기능 분리, 커스터마이징) 들어가며✍️ Headless UI아래에서 구현한 버튼을 통해 프로젝트 전반에서 재사용 가능한 컴포넌트를 구축하고, 디자인과 기능을 분리하는 경험을 쌓고자 했습니다.💭 초기 목표토글: 사용자가 나의카드에서 상태를 쉽게 전환할 수 있도록 합니다.기본 버튼: 링크 연결 및 페이지 이동 기능을 제공합니다.Submit 버튼: 폼 제출을 구현합니다.🖼️ 현실Headless UI를 기반으로 다음과 같은 버튼 컴포넌트를 설계하고 구현하였습니다.각 버튼의 특성을 유지하면서도 커스터마이징할 수 있도록 작업했습니다. (버튼 내용: children) 1. MyToggle: 상태 변경을 위한 토글 버튼사용자의 상호작용에 따라 상태를 변경하는 버튼입니다.Headless UI의 Switch 컴포넌트를 활용하여, 상태 변화에 따.. 이전 1 다음
