여태까지는 체크박스를 만들 때 체크박스 자체를 css로 스타일링했지 이미지를 넣는 식의 행동을 하지는 않았었다.
근데 이번에 디자이너가 체크박스를 꼭 이렇게 맞춰 달라고 해서 ㄱ-
다음 단계로 나아가야만 했다.
스택오버플로우랑 이것저것 포스팅을 다 많이 봤는데 하라는 대로 다 해도 안 돼서 chat gpt한테 싸가지 없게
"not working"
"not working, either" 이렇게 보내고 있었다...
어느 정도 가니까 gpt도 니 image path 다시 확인해보래...
이... AI 자식이...!
근데 확인해보니까 이미지도 안 뜨는 건 내가 잘못 넣고 있는 것이었다^^;;;
하핫...^^;;;
스타일드 컴포넌트에서 background-image: url() 을 쓸 때 path를 직접 쳐 넣는 것밖에는 안 되는 것 같아서 계속 그렇게 부르고 있었더니 안 됐었다.
근데 보통 위에서 import 이름 from '경로'; 하면 걔 자체를 가지고 올 수 있는 게 맞으니까? 이 방식을 찾아봤더니 밑의 블로그가 나왔다.
[React] styled-components에서 background-image 가 안 들어감
이걸 참고해서 하니까 됐다... 하...
원래는 antd Checkbox로 만들다가 이미지 가져와야 되는 거면 아예 새로 만들어야 될 것 같길래 새로 만들었는데 이랬더니 타입이 뭐가 안 된다고 에러 나서ㅎㅎ
근데 사실 antd Checkbox도 antd가 만든 컴포넌트인 것이지 안에 코드 자체는 input과 label로 이루어져 있기 때문에 여기다 그대로 적용시켰더니 잘 작동하게 되었다!
<Checkbox className="checkbox-round" name="guide-checked" onChange={onCheckboxChange} checked={checked}>
안내사항을 확인하였습니다.
</Checkbox>// 원래 체크박스를 안 보이게 숨김
input[type='checkbox'] {
display: none;
}
// antd의 체크박스 안 보이게 숨김
.ant-checkbox {
display: none;
padding-bottom: 6px;
}
// 체크한 다음에 네모난 border가 생기길래 적용
.ant-checkbox-checked {
&:after {
border: none;
}
}
.ant-checkbox-wrapper.checkbox-round {
display: flex;
align-items: center;
}
.ant-checkbox-inner {
border-radius: 50%;
width: 22px;
height: 22px;
}
.checkbox-round {
vertical-align: middle;
font-size: 16px;
font-weight: ${({ checkbox }) => (checkbox ? 600 : 300)};
color: ${({ checkbox }) => (checkbox ? '#46b476' : '#6d7582')};
background-image: ${({ checkbox }) => (checkbox ? `url(${CheckboxChecked})` : `url(${CheckboxUnchecked})`)};
background-repeat: no-repeat;
span:nth-child(2) {
padding-left: 30px;
}
}- 결과
