Kakao Login

kakao-login.jsx

import { useCallback, useEffect } from 'react';

import { Button } from 'components/button';
import { iconKakaoTalk } from 'components/icon';

const KAKAO_SDK_ID = 'solvesql_kakao_sdk';
const KAKAO_SDK_PATH = '//developers.kakao.com/sdk/js/kakao.min.js';

export const KakaoLogin = props => {
  const { appKey, className } = props;

  useEffect(() => {
    // initialize kakao Javascript SDK
    if (!document.getElementById(KAKAO_SDK_ID)) {
      const sdk = document.createElement('script');
      sdk.id = KAKAO_SDK_ID;
      sdk.src = KAKAO_SDK_PATH;
      sdk.onload = () => {
        window.Kakao.init(appKey);
      };

      document.body.append(sdk);
    }
  }, [appKey]);

  const performLogin = useCallback(() => {
    if (window.Kakao === undefined) {
      // TODO: Kakao SDK 로딩 실패 처리
      return;
    }

    const successLogin = async response => {
      // 로그인 성공 시 callback
    };

    const failureLogin = response => {
      // 로그인 실패 시 callback
    };

    const { Kakao } = window;
    Kakao.Auth.login({
      throughTalk: true,
      persistAccessToken: false,
      success: successLogin,
      fail: failureLogin
    });
  }, []);

  return (
    <Button className={className} onClick={performLogin}>
      {iconKakaoTalk}
      카카오 로그인
    </Button>
  );
};