👨‍💻 사건

• 팀프로젝트 이미지 업로드를 구현중, 이미지 업로드 버튼의 스타일이 게시물 등록만 달라서 이를 해결하기 위해 전에 공부하였던 styled-component 오버라이드를 통해 해결해보고자 하였다.

✅ 해결

• 이미지 업로드 버튼의 스타일이 게시물 등록만 달라서, styled-component 오버라이드를 통하여 수정하였다.

...
const ImageUploadButton = ({ className, setUploadImg, uploadImg, inputRef }) => {
...

...
return (
...
  <ImgUploadButton
    uploadImg={postImages}
    setUploadImg={setUploadImg}
    // 오버라이드를 위하여 className 을 부여 ( 부여한 이유는 styled-component 가 스타일을 적용하는 방식을 이해한다면 알 수 있다. )
    className={className}
    inputRef={inputRef}
  />
...
...
const ImgUploadButton = styled(ImageUploadButton)`
  position: fixed;
  margin-left: 26.6rem;
  bottom: 1.6rem;
  width: 5rem;
  height: 5rem;
  background-image: url(${UPLOAD_FILE_ICON});
  background-position: center;
  background-size: cover;
  cursor: pointer;
  z-index: 100;
`;

💭 개선

혹시 내가 전에 공부한 내용을 너무 활용하고자 하는 마음이 커서 굳이 오버라이딩을 사용했는지 돌아보아야 한다.