최근 옵션 패널 UI를 구현하면서,컴포넌트를 좀 더 범용적으로 만들고 싶다는 욕심이 생겼다.그래서 TypeScript의 제네릭(Generic)을 이용한 추상화를 시도했다.결론부터 말하자면, 결과는 “굳이 그럴 필요는 없었다”였다.1. 시작은 단순한 옵션 패널이었다처음 작성했던 코드는 아래와 같다.입력창, 슬라이더, 색상 선택 UI를 나란히 배치하는 단순한 구조였다. 각 컴포넌트는 label + 입력 영역으로 구성되어 있었고,비슷한 형태의 레이아웃이 반복되고 있었다.또한 앞으로 다른 옵션(예: 테두리, 정렬 등) 을 추가할 계획도 있었기 때문에,이 구조를 그대로 늘려가면 관리가 점점 어려워질 것 같았다.그래서 “이 패턴을 하나의 컴포넌트로 추상화할 수 있지 않을까?”라는 생각을 하게 되었다.2..

커스텀 슬라이더를 구현하는 과정에서, CSS의 hover 효과가 정상적으로 작동하지 않는 상황을 마주했다.상황슬라이더의 구조는 단순했다. {/* 회색 배경 */} {/* 흰색 진행 바 */} {/* 투명 슬라이더 */}원래 의도는 이랬다:회색 바 위에 흰색 바가 진행도를 나타냄hover 시 회색 바의 색이 살짝 밝아지길 원함그런데 문제는,아무리 hover:bg-[#535764]를 줘도 hover가 먹히지 않았다.원인 추적원인은 금방 찾았다.input[type="range"]가 absolute로 맨 위를 덮고 있었던 것이다.즉, hover를 감지해야 하는 div 위를 투명한 input이 막고 있었던 것이다.첫 번째 시도: z-index처음엔 이렇게 생각했다.“그럼 input을 z-index로..

UI를 만들다 보면 마우스를 올렸을 때 색상이나 스타일이 살짝 바뀌는 효과를 자주 넣게 된다.보통은 CSS :hover나 Tailwind의 hover: 클래스로 간단히 해결된다.그런데 이번에 이런 상황이 있었다.슬라이더의 진행도를 JS로 계산해서 linear-gradient로 표현하고 있었는데,hover시에 어두운 부분의 색상을 살짝 바꾸고 싶었다.단순히 색만 바뀌는 게 아니라, 진행도가 JS 계산식으로 동적으로 결정되는 구조라서 hover: 클래스로는 적용이 불가능했다.왜냐하면 CSS의 :hover는 정적인 스타일 변경에만 적용되며, JS로 계산된 값에는 접근할 수 없기 때문이다. 슬라이더의 진행도(percent)를 기반으로 그라디언트를 계산하는 구조라서, hover 상태에서 이 값을 조정하려면 JS가..