Gloddy - 토스 useOverlay 이슈

오늘 한 일

• 너디너리 세션 듣기
• gloddy 개발
• next 블로그 만들기

gloddy

useModal 이슈

우리는 토스의 useOverlay를 사용하고 싶었지만 Next13과 호환되지 않아 직접 구현해서 사용하고 있었다.

그러다 한가지 문제가 발생했다.

상태가 useModal로 연 모달까지 전달이 되지 않는다.

해당 문제는 모임 개설하기 페이지에서 발생했다.

개설하기 전 모달이 띄워지고 확인을 누르면 요청을 보내는 동안 모달 내의 버튼이 비활성화 되어야 한다.

하지만 useModal로 연 모달은 상태를 전달받지 못해 비활성화 되지 않았다.

slash에서 이슈를 찾을 수 있었지만, 버그가 아닌 당연한 현상이고, 전역 상태를 사용하는 것을 해결책으로 제시하고 있었다.

부모에서 자식으로 전달하고 있지 않아 발생한 문제인 것 같다.

당장 useModal 훅을 변경하기엔 시간이 부족해서 다른 방법을 생각해봤다. 어쨌든 우리의 목표는 요청을 보내는 동안 비활성화가 되거나 유저가 중복으로 요청을 보내는 것을 막는 것이다.

그래서 우리는 해결책을 두 가지 생각했다.

해결책 1 - Modal 내부에서 요청을 보내기

Modal 외부에서 상태를 주입하는 것이 아닌 Modal 내부에서 요청을 보내는 것이다.

하지만 요청 로직이 Modal에 숨겨져 있으면 한 눈에 알아보기 힘들거 같았따. 코드를 보았을 때 요청을 보내는 로직이 드러나야 한다고 생각했다.

해결책 2 - 로딩 레이어를 덮기

우리의 목표를 생각해보면 요청을 보내는 동안 유저가 아무것도 할 수 없게 해야한다. 로딩 레이어를 덮으면서 기다리게 만들면 되지 않을까?

그래서 우리는 로딩 레이어를 덮는 방법으로 해결했다.

'use client'
import Loading from './Loading'
import { ModalWrapper } from '../Modal'
import { AnimatePresence } from 'framer-motion'
import { useEffect } from 'react'

interface LayerLoadingProps {
  isLoading: boolean
  layerNumber?: number
}

export default function LayerLoading({ isLoading, layerNumber = 1 }: LayerLoadingProps) {
  useEffect(() => {
    document.body.style.overflow = isLoading ? 'hidden' : 'unset'

    return () => {
      document.body.style.overflow = 'unset'
    }
  }, [isLoading])

  return (
    <AnimatePresence>
      {isLoading && (
        <ModalWrapper layerNumber={layerNumber}>
          <Loading />
        </ModalWrapper>
      )}
    </AnimatePresence>
  )
}

layerNumber를 둔 이유는 기존 모달보다 z-index를 높게 주기 위해서이다.

사용법

이제 사용할 때는 다음과 같이 사용했다.

<LayerLoading isLoading={status !== 'idle' && status !== 'error'} />

여기서의 status는 react-query의 MutationStatus이다.

status가 페칭 중이거나 성공했을 때 계속 로딩이 뜨게 구현했다. 왜냐하면 성공이 되었어도 다른 페이지로 넘어갈 때까지 로딩이 뜨게 하기 위해서이다.

이슈

모달에 useOnClickOutside라는 훅을 사용해서 모달 외부를 클릭하면 모달이 닫히게 구현했었다. 하지만 로딩 레이어를 추가로 덮었을 때에는 꺼지게 하지 않고 싶었다. 분기처리하는 prop을 추가하면 되겠지만 너무 복잡해질 것 같아서 일단 모달의 확인 버튼을 클릭하면 모달이 닫히고 로딩 레이어가 뜨게 구현했다.

next 블로그

확실히 익숙한 next를 쓰니까 금방 된다. 레퍼런스가 gatsby에 비해 많이 없지만, 다른 분들의 레포지토리를 참고해서 구현할 수 있었다.

지금 전체 글 가져오기와 블로그와 일지 글을 분리해서 각각 다르게 보이도록 구현했다.

이제 디자인을 좀 해야겠다. 너무 거창하게 할 생각말고 간단하고 깔끔하게 보이도록만 해야겠다.

내일 할 일

• gloddy 개발
• next 블로그 만들기