Google Authentication renderButton issue

🚨 Issue

Google signin 버튼이 렌더링이 안되어 회원가입 페이지가 검은화면으로 나오는 이슈 발생

google script 내부에서 코드가 변경되었는지 정상적으로 작동하고 있던 코드에 문제가 생겨서 의아했다.

console

GoogleLogin.tsx

const GoogleLogin = () => {
  const googleElId = 'google-login-api'
  const googleElRef = useRef<HTMLButtonElement | null>(null)
  // 콘솔 창에서는 Ref에서 오류가 났다고 하지만 디버깅해보니 문제는 없는 상태

  const load = useAtomValue(googleScriptAtom)

  useInitGoogle()  // initialize hook

  useEffect(() => {
    if (!load || !window.google) return

    const parent = document.querySelector<HTMLDivElement>(`#${googleElId}`)
    window.google.accounts.id.renderButton(parent, {
      width: '360',
      click_listener() {
        googleElRef.current?.focus()
      },
    })
  }, [load])

  if (!load) return null
  return (
      <Button btnRef={googleElRef}>
        <div id={googleElId} />
        <GoogleIcon />
        Continue with Google
      </Button>
  )
}

간단한 컴포넌트라 첫 줄부터 콘솔을 찍어보면서 디버깅 해보았다.

renderButton 에서 에러가 발생한 것을 확인했는데,

window.google.accounts.id.renderButton(parent, {
  width: '360', 
  click_listener() {
    googleElRef.current?.focus()
  },
})

source 탭에서 확인해보니 width가 문제였다.

Google Authentication 공식 문서 는 바뀐게 없었는데..?

🧐 How to solved

단위가 없어서 값이 제대로 들어가지 않는 건가 싶어서 '360' → '360px'로 수정한 후 정상 작동하는 것을 확인했다.

흠.. string 타입인데 적용 예시는 number 타입이네? ‘360’이 아니라 360으로 값이 들어가야 하나?

number로 변경하니 이것도 제대로 작동했다.

🧐 문서가 굉장히 헷갈리는 듯

✨ summary

• width: ‘number’ → X
• width: number → O
• width: ‘number + unit’ → O