Safari에서 비동기 처리 후 호출하는 window.open() 우회해서 해결

 

기능 요구사항은 '신고하기 버튼 클릭시 신고하는 폼으로 이동하기' 였는데, 이 최소 기능만을 구현하고 테스트해보니 사용자 입장에서 신고하는 폼에 필요한 양식들을 작성하기 위해서는 기존 페이지가 변경되지 않는 것이 사용자 경험에 더 좋을 것 같았습니다.

 

그래서 팀원들과 논의 후 신고하는 폼은 새 탭으로 열리게 하고, 기존 페이지는 이동없이 유지하도록하면서, 기존 기획/디자인에서 있었던 토스트는 삭제하는 방향으로 수정했습니다.

 

새 탭으로 열리게 하는 것은 다음 코드와 같이 자바스크립트 window 객체의 open 함수로 간단하게 구현할 수 있었습니다.

'use client'

export default function Page({
  params: { userId, messageId },
}: {
  params: { userId: string; messageId: string }
}) {
  const router = useRouter()
  const { mutateAsync } = usePatchMessageStatus()
  const changeStatus = async () => {
    const redirectURL = '쪽지함 리스트 url'
    const openReportForm = '신고하는 구글폼 주소'
     try {
        const response = await mutateAsync({
        messageId,
        status: 'reported',
      })
      window.open(openReportForm) // 새로운 창으로 신고 폼 열기
      router.push(redirectURL) // 쪽지함 리스트로 이동
      if (!response) {
        console.error('Reported response is empty: ', response)
           router.back()
      }
    } catch (error) {
      console.error('Failed to change status from normal to reported: ', error)
          router.back()
    }
  }
  return (
  .....
  )}

 

 

크롬에서 잘 열리는 걸 확인했는데 이후 사파리로 테스트 해보니 새 탭이 열리지 않았습니다. 팝업 알림조차도 뜨지 않음.

 

MDN 문서를 찾아보니 사파리에서는 click 이벤트가 발생한지 1000ms이후에 window.open 메서드가 호출되면 팝업이 차단된다고 합니다.

 

어떤 비동기 작업 후에 window.open()을 호출하려고 하면 그 사이의 지연 때문에 브라우저가 이를 사용자가 직접 클릭한 것이 아닌 스크립트에 의해 자동으로 생성된 팝업으로 인식하고 차단할 수 있다는 내용...

 

 

 

사파리에서 비동기 처리 후에 window.open()을 호출하도록 새 탭을 만들기 위해서 다음 순서를 따르는 과정이 필요했습니다

 

- 빈 팝업을 띄우고

- 필요한 비동기를 수행하고

- 빈 팝업의 location.href를 바꾼다.

 

그래서 기존엔 띨롱 window.open(url) 하던 것에서 다음과 같이 함수를 만드는 방향으로 수정했습니다.

 

https://youtu.be/Waxwfmhaqxc

// src/shared/hooks/util/openTabUtil.ts
export const openInNewTab = (url: string) => {
  const newWindow = window.open(url, '_blank', 'noopener, popup')
  if (newWindow) newWindow.opener = null
}


// src/app/messagebox/[userId]/[type]/[messageId]/report/page.tsx
import { openInNewTab } from '@/shared/hooks/util/openTabUtil'

export default function Page({
  params: { userId, messageId },
}: {
  params: { userId: string; messageId: string }
}) {
  {/* 생략 */}
  const changeStatus = async () => {
    try {
      const response = await mutateAsync({
        messageId,
        status: 'reported',
      })
      openInNewTab(`신고하는 폼 주소`)
      if (!response) {
        router.back()
      }
    } catch (error) {
      router.back()
    }
  }
  
  return (
  {/* 생략 */}
  )
}