NextJs에서 DasiyUI 일부 컴포넌트 사용시 style 문제 (Typescript) (DetailedHTMLProps, Properties, HTMLAttributes)

오늘도 평화로운 날이 있을 수 없는…

기존 프로젝트를 진행하면서 신규를 또 진행하는 어이없는 일정을 진행하며…
이번 문제는 DasiyUI에서 Countdown 컴포넌트를 적용하면서 발생한 문제로..

바로 아래의 문제의 코드를 보자.

<div className="flex flex-col">
  <span className="font-mono countdown text-3xl">
    <span style={{ '--value': seconds }}></span>
  </span>
  sec
</div>

위 코드에서 span 태그 안에 style에 —value라는 css 키 요소가 문제였다.
에러는 다음과 같이 발생했다.

'{ "--value": number; }' 형식은 'Properties<string | number, string & {}>' 형식에 할당할 수 없습니다.
  개체 리터럴은 알려진 속성만 지정할 수 있으며 'Properties<string | number, string & {}>' 형식에 '"--value"'이(가) 없습니다.ts(2322)
index.d.ts(1863, 9): 필요한 형식은 여기에서 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>' 형식에 선언된 'style' 속성에서 가져옵니다.

에디터 내에서는 에러가 발생하지만 개발용으로 구동 시 잘 돌아간다.
하지만 빌드를 하여 프로덕션으로 가면 이야기가 달라진다.
저 에러를 해결하지 않는 이상 빌드는 진행되지 않는다.

그렇다면 어떻게 해결했는가?

뭐 index.d.ts 라는 파일을 만들고 새로 declare? 재정의 해보고 정의 파일을 src 디렉토리 밖에 빼기도 하고 했지만 당연 안되었다. -_-;;
문제는 어떤거 때문에 발생했다는 것을 알고 있고 이걸 어떻게 해결해야 하는지도 알고 있지만 그 해결 방법을 구현하는 방법을 몰랐다.

마치 해외 여행 나가서 밥 주세요를 그 국가 언어로 못하는 느낌이랄까…
다시 정리하면 새로 재정의하는 것이 아닌 해당 css 키가 CSS 속성이라는 것 만 알려주면 되는 문제였다.

as React.CSSProperties

그래서 아래의 코드로 간단하게 해결할 수 있었다.

<div className="flex flex-col">
  <span className="font-mono countdown text-3xl">
    <span style={{ '--value': seconds } as React.CSSProperties}></span>
  </span>
  sec
</div>

이 간단한 문제로 고통을 받았더니 맨탈이 흔들렸다.
주식시장에서 손절칠 때랑 비슷한 유형이지만 맛은 다른 고통…
이제는 그만 맛보고 싶다 ㅎㅎ

참고한 stackoverflow