Published on

이미지 작업(..이라 쓰고 삽질기)

4분

사이드 프로젝트 위와 같은 디자인을 참고하면서 실제로 구현해보고 싶었는데 며칠을 헤맸던 거 같다...

사각형 부분은 뒷 배경만 opacity 값을 다르게 주면 되는거였는데 CSS가 계속 발목을 잡았다.

일단 업로드에 대한 부분은 다음과 같이 구현했다.

const uploadImageToStorage = () => {
  if (imgUpload === null) return

  const id = Date.now() / imgUpload.name.length
  const imageRef = ref(storage, `images/${imgUpload.name}_${id}`)

  uploadBytes(imageRef, imgUpload as File).then((snapshot) => {
    getDownloadURL(snapshot.ref).then((url) => {
      setImgUrl((prev) => [...prev, { url, id: `images/${imgUpload.name}_${id}` }])
      setImgUpload(null)
    })
  })
}

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault()
  if (!imgUpload) return
  uploadImageToStorage()
}

useEffect(() => {
  if (imgUpload !== null) uploadImageToStorage()
}, [setImgUrl])

구현할 때 chatgpt의 힘을 좀 빌려서 했지만 만능(?)은 아니라 혼자서도 고민해봤다. useEffect의 의존성 배열에 대체 뭘 넣어야 하지..?

사진 업로드 테스트를 하면서 useEffect 때문에 파이어베이스에 너무 요청을 보내져서 할당량을 초과해버렸다...

다음날에 의존성 배열에 setImgUrl을 넣었는데 다시 보니깐 imgUrl을 넣어줘도 될 거 같은데 한 번 테스트 해봐야겠다.

firebaselog
profilechangeGIF

구글링을 열심히 해 본 결과, 코드에서처럼 PreviewImgPositionWrap 에 before selector를 씌워주니 디자인처럼 구현된 거 같기는 한데,

const PreviewOuterImage = styled.div<{ url?: string }>`
...
  background-image: url(${(props) => props.url});
  background-size: cover;
  background-position: center;
...
`

const PreviewImgPositionWrap = styled.div<{ url: string }>`
  &::before {
    content: '';
    background-image: url(${(props) => props.url});
    background-size: cover;
    opacity: 0.5;
    position: absolute;
    inset: 0;
  }
`

<{ url: string }>을 2번 작성했는데 정말 두번씩이나 적을 필요가 있는지는 더 연구해봐야 할 것 같다.

다음날에 이거랑 같이 골머리를 앓던 사진 삭제 기능도 팀원 덕분에 구현됐다.

그런데 이 글을 쓰기 며칠전에는 따로 버그가 없었는데,

사진 저장 후에 삭제를 하면 파이어베이스 스토리지에 있는 것과 함께 프리뷰도 삭제하고 싶었는데...

타입스크립트를 쓰면서 그런건지, 저장 버튼 클릭 후에 삭제 버튼을 클릭하면 프리뷰가 삭제가 안되고 있어서 어디서 잘못된건지 봐야할 거 같다..

profilechangeGIF2