[FE] useKakaoTalkShare 훅에서 사용하는 useEffect

[Largopie]

// useKakaoTalkSahre.tsx

import { useEffect } from 'react';

declare global {
  export interface Window {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    Kakao: any;
  }
}

interface KakaoTalkShareInfo {
  path: string;
  meetingName?: string;
  hostName?: string;
}

export default function useKakaoTalkShare() {
  const { Kakao } = window;

  const handleKakaoTalkShare = (templateId: number, shareInfo: KakaoTalkShareInfo) => {
    Kakao.Share.sendCustom({
      templateId: templateId,
      templateArgs: {
        path: shareInfo.path,
        meetingName: shareInfo.meetingName,
        hostName: shareInfo.hostName,
      },
    });
  };

  useEffect(() => {
    if (!Kakao.isInitialized()) {
      Kakao.init(process.env.KAKAO_KEY);
    }
  }, [Kakao]);

  return { handleKakaoTalkShare };
}

해당 훅에서 Kakao KEY를 init해주는 과정이 해당 훅을 불러올 때마다 실행된다는 약간 애매모호한 느낌이 있습니다.

여기서 제안된 내용은

• "src/index.tsx 파일에 처음 진입 시 init하게 하자"
• "나중에 Kakao 관련 로직이 분포되어 있기 때문에 코드를 찾는데 어려움이 생길 수 있다"

와 같은 의견이 있었지만, 추후 리팩터링 시 다시 재논의 해보기로 결정되었습니다. 따라서 해당 내용을 Discussions에 기재합니다.