디자인시스템

상단 내용 작성 예정  ( 2025-01-31 ~ ) 2025. 02. 02 추가∙ useControllableState() 공부∙ ReactNode, ReactChild, ReactElement 공부 후, 재작성 될 예정 (아마 코드 또한 변경될 예정)   합성 컴포넌트의는 다음과 같다 1. Header, Body, Footer를 모두 호출한 경우2. Body와 Footer만 호출한 경우3. Body만 호출하고 Body에 스타일링을 덮어씌운 경우사용자가 필요한 컴포넌트만을 호출함에 따라 다양한 모양의 컴포넌트를 만들 수 있다.또한 각 컴포넌트에 className(tailwindCSS), style을 props로 넘겨주어 디자인을 수정할 수 있다. 📄 App.tsx (필요한 경우 펼쳐서 보기)더보기im..

"🍡 보기 좋은 떡이 먹기도 좋다"사람의 오감 중 가장 발달한 감각이 시각이라고한다.외부 자극에 대한 반응이 가장 민감하고 빠른 감각이기도한다고 한다.위 속담이 괜히 있는 말이 아니며, 작자는 요리를 취미로 하면서 플레이팅이 중요하다고 생각한다.기능도 중요하지만, 디자인 또한 무시할 수 없으며, 이 디자인이 사용자에게 얼마나 편리한지 또한 굉장히 중요하다. 전체적인 디자인을 위해 컴포넌트를 하나씩 제작하게 될텐데 이때, 유용한 Headless UI에 대해 알아보자.  🤕 HeadlessHeadless란, 디자인 없이 기능만 제공해주는 라이브러리이다.접근성, 상태관리와 같은 복잡한 동작을 처리하면서 개발자가 스타일을 완전히 제어 할 수 있다. `MUI`, `Bootstrap` 등의 외부 라이브러리는 기..