인프런 커뮤니티 질문&답변

안녕하세요.

카카오 개발자 페이지가 리뉴얼된 이후 실습을 진행하시는 경우, 별도의 웹 플랫폼 등록 없이 애플리케이션만 생성하시면 됩니다.

진행 순서

1. 아래 링크에서 앱을 생성해 주세요. https://developers.kakao.com/console/app

2. 앱 생성 후 바로 "258. (25.12.07) 카카오 개발자 페이지 변경 내용 적용하기" 강의를 따라해 주세요. (해당 강의는 앱 생성 직후의 상태에서 촬영되었습니다)

참고 사항

• 현재 시점에서 버튼 클릭 시 반응이 없는 것은 정상입니다. 버튼 클릭 후 페이지 이동 기능은 이후 강의에서 다룹니다.

• "258. (25.12.07) 카카오 개발자 페이지 변경 내용 적용하기" 강의는 모든 개발 완료 후 촬영되어 카카오 로그인이 작동하는 모습을 보여줍니다. 이는 "리뉴얼된 사이트에서 이렇게 설정하면 나중에 카카오 로그인이 정상 작동합니다"를 안내하기 위한 영상입니다.

• 해당 강의에서는 리뉴얼된 카카오 개발자 사이트에서 키 정보를 입력하는 방법만 참고하시고, 이후 학습을 단계적으로 진행해 주세요.

   

안녕하세요, 인프런 AI 인턴입니다. aae님.

카카오 개발자 센터가 리뉴얼되면서 Web 플랫폼 등록에 대한 혼란을 겪고 계신 것 같습니다. 아래에 해결 방법을 간단히 안내드릴게요.

Web 플랫폼 등록 방법:

1. 카카오 개발자 센터 접속: 카카오 개발자 센터에 로그인하세요.
   
2. 내 애플리케이션 -> ‘앱 선택’ -> 앱 설정 -> 플랫폼: 이 경로를 따라가시면 기존에 설정된 플랫폼 또는 새롭게 등록할 플랫폼 정보를 관리할 수 있습니다.
   
3. 플랫폼 추가: 플랫폼에 웹을 추가하고, 웹 플랫폼 아래에 리다이렉트 URI를 설정합니다. 리뉴얼 후에도 이 부분은 크게 변경되지 않았습니다.
   

리다이렉트 및 버튼 반응 문제 해결:

• 리다이렉트 URL 확인: 앱 설정에서 Redirect URI를 정확히 입력했는지 확인하세요.
  
• 로그인 버튼의 onClick 핸들러 추가: 현재 코드에서 onClick 핸들러가 빠져 있습니다. 아래와 같이 버튼에 onClick 이벤트를 추가하여 로그인 로직을 연결해 주세요.
  

import React from 'react';

function handleLogin() {
  // Kakao 로그인 함수 호출
  window.Kakao.Auth.authorize({
    redirectUri: 'http://localhost:4000/auth/kakao/callback', // 리다이렉트 URI 설정된 값
  });
}

const KakaoLoginButton: React.FC = () => {
  return (
    <button 
      className="w-full flex items-center justify-center gap-2 bg-[#FEE500] text-[#000000] py-3 rounded-lg hover:bg-[#FDD800] transition-colors font-medium"
      onClick={handleLogin} // onClick 이벤트 추가
    >
      <img
        src="https://developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_small.png"
        alt="Kakao Logo"
        className="w-5 h-5"
      />
      Continue with Kakao
    </button>
  );
}

export default KakaoLoginButton;

이렇게 handleLogin 함수를 추가하여 로그인 버튼 클릭 시 카카오 인증 페이지로 이동할 수 있도록 설정합니다. 만약 기능 구현이 어려운 부분이 있으면, 카카오 로그인 구현 관련 질문을 여러분의 환경에 적합하게 참고하시길 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.