[TIL] 2024-03-14 StyledComponent customized props 관련

이미지 등록 전에 숫자 '0'은 회색인데

이미지 등록하고 나서의 사진 갯수 숫자 '3'은 색깔이 있게 처리하고 싶었다.

스타일드 컴포넌트가 커스텀 props를 만들 수 있는 건 아는데 타입스크립트로 작업하니까 해당 태그에 없는 속성을 내 맘대로 정의하거나 하면 타입이 맞지 않는다고 esLint로 호되게 혼내면서(과장 중) 안 돌려줘서 잉잉 울었다...
찾아도 찾아도 잘 모르겠어서 선배한테 물어봤더니 친절하게 알려주었다.

• 저 빈 이미지 박스가 대충 이렇게 생겼다고 치자(정신사나운 거 정리한 버전)
• <ImageEnrollBox> 가 내가 styled.div로 만든 스타일드 컴포넌트이다.
• 여기에다가 isImage 라는 속성을 주어서 signatureImgArr이 존재하지 않거나 빈 배열일 경우에는 0이라는 숫자가 회색으로 그 외의 경우에는 초록색으로 보이게 만들려고 boolean 값으로 넘겨주었다.

<ImageEnrollBox isImage={!signatureImgArr || signatureImgArr.length === 0}>
  <div>
    <label>
      <img src={emptyImgIcon} alt="img-preview" />
      <div className="image-count">
        <span>{signatureImgArr ? signatureImgArr.length : 0}</span>
        <span>/{type[imgType].maxImgCount}</span>
      </div>
      <input />
    </label>
  </div>
  {signatureImgArr
    ? signatureImgArr.map((el, idx) => {
        return (
          <div>        
            <div className="enrolled-image-numbering">{idx + 1}</div>
            <div className="enrolled-image-dimmed" />
            <div className="enrolled-image">
              <img role="presentation" id="img-preview" src={el.imgInfo} alt={el.name} />
            </div>
          </div>
        );
      })
    : null}
</ImageEnrollBox>

• 저 isImage라는 속성을 그냥 사용 할 수는 없고 인터페이스 선언을 해 주고 이 인터페이스 props를 ImageEnrollBox에 연결시켜주어야 사용할 수 있다.

interface ImageEnrollBoxProps {
  isImage?: boolean;
}

export const ImageEnrollBox = styled.div<ImageEnrollBoxProps>`
  .image-count {
    span:nth-child(1) {
      color: ${({ isImage }) => (isImage ? '#afb3b8' : '#46b476')};
    }
    span:nth-child(2) {
      color: #afb3b8;
    }
  }
`

이제 스타일드 컴포넌트 정복했다ㅋ 막이래