디자인시스템

style={{ "--loading-text-color": color } as CSSProperties} 을 통해 css 에서 사용할 수 있는 전역 변수를 설정한다. 해당 의미는 전역 변수로 --loading-text-color 를 color 값으로 지정하였다.또한 c

Progress Linear 컴포넌트 구현기를 공유하고자 한다. 이와 비슷한 걸로 ProgressCircle 컴포넌트 구현한 내용도 있기에 참고해도 괜찮을거 같다. 실제적인 로직은 원형과 선형이기 때문에 로직적으로는 비슷하지 않겠지만, 설계는 비슷하게 하였다. 작업

Circle 기반 Progress 를 구현했는데 해당 과정을 공유하고자 한다. SVG 를 이용해서 구현했기에 이번 기회에 svg 에 대해 좀 더 알아보는 계기가 되었다. 그리고 progress UI 를 infinte 로 순회하면 로딩 UI 가 되기 때문에 해당 기능을

범용적으로 사용할 수있는 Tooltip 개발기를 공유하고자 한다.툴팁을 개발할 때 hover 되면 툴팁이 나오도록 설계 했기 때문에 hover 여부를 파악하기 위해 useHover hooks 를 만들어 hover 여부를 판단하는 커스텀훅을 개발하였다.범용적으로 hove

아이콘 컴포넌트 구현 방식은 정말 다양하게 있다.아이콘 이미지를 cdn 에 올려서 이미지 주소를 받아서 처리하는 방식도 있지만, 다른 방법을 공유하고자 한다. 사전\_설정해당 컴포넌트를 설정하기 위해서는 svg 아이콘들을 등록하고 index.tsx 파일에서 svg 파일

Select 컴포넌트를 구현하면서 경험한 것을 공유하고자 한다. HTML 의 select, option 을 제공하는데 스타일링 때문에 div 와 button 으로 해당 컴포넌트를 구현했으며 추후에 HTML 의 select, option 요소를 활용한 NativeSele

Slider 컴포넌트 구현 과정을 공유하고자 한다배포된 환경에서 보기 (링크 연결하기)SliderSlider 를 구현하면서 Slider 컴포넌트와 hover 시 툴팁 UI 와 나와야 하므로 SliderTooltip 컴포너트를 구현하였다. 한 번에 설명하는 것보다 분리

아주 간단한 로딩스피너를 구현해봤다.핵심은 border 를 이용해서 spinner 영역을 만들고 border-top 을 지정함으로서 스피너의 색상을 지정한다. 그리고 animation 으로 360도 회전하면 스피너를 만들 수 있다.좀 더 복잡하지만 더 범용성 있는 것도

범용성을 가지는 체크박스를 구현한 내용을 공유하고자 한다.기존 HTMLInput 요소의 속성과 필자가 정의한 속성을 이용해야하기 때문에 위와 같이 타입을 정의했고, 기존 HTMLInput 요소 중에 label 을 다른 의미로 사용하기 때문에 Omit 으로 제거했다.우선

TextField 컴포넌트 구현 경험을 공유하고자 한다.배포된 환경에서 보기TextField주로 속성에 따라 스타일링하는 작업을 수행하였다. 그 중에 고려했던 내용 몇 가지를 공유하고자 한다.일반적으로 label 요소는 input 요소와 연결하면 좀 더 유저 친화적이기