[React] input type date 아이콘 커스텀

✨ 구현된 모습

왼쪽을 오른쪽 처럼 수정

 

---

CSS

const SearchYM = styled.input`
  font-family: var(--font-Pretendard-Regular);
  font-size: 23px;
  font-weight: bold;
  border: 0px;
  &:focus {
    outline: none;
  }
  
  // 날짜 선택 아이콘 커스텀
  &::-webkit-inner-spin-button,
  &::-webkit-calendar-picker-indicator {
    background: url("/image/icon_DateA.png") center center no-repeat;
    cursor: pointer;
    &:hover {
      background-color: #eeeeee;
      border-radius: 20px;
    }
  }
`;

여기서 조금 애먹었던 건 background: url()을 적었는데 분명 경로가 맞는데 404 에러가 뜨는 것이다!

왜 이러는지 전혀 이해할 수 없었는데 구글링의 결과, 아이콘의 이미지를 src 폴더가 아닌 public 폴더에 넣었더니 해결이 되었다 ^^!