모달 백 스크롤 막기

view/edit 모드 둘 중에 하나라도 true((changeModalState('view'|'edit', true))면 document.body.style.overflow = 'hidden' 옵션을 주려고 했다.

• 1차 시도 (그냥 시원하게 실패, 동작부터 이상했다)

// const viewTaskBtn = useCallback(
//    (task: Task) => {
//      setSelectedTask(task)
      if (!viewTask) {
        changeModalState('view', true)
        document.body.style.overflow = 'hidden'
      } else {
      document.body.style.overflow = 'auto'
      
//      }
//    },
//    [viewTask, changeModalState],
//  )

• 2차 시도 (성공)

useEffect에서 [viewTask, editTask]를 dependency로 두고 view, edit 모드 둘 중에 하나만 true면 백 고정, 그 이외의 상황에서는 모두 auto로 돌려줬다.

  useEffect(() => {
    if (viewTask || editTask) {
      document.body.style.overflow = 'hidden'
    } else {
      document.body.style.overflow = 'auto'
    }
    return () => {
      document.body.style.overflow = 'auto'
    }
  }, [viewTask, editTask])