[250423] TIL

Today I Learned (2025-04-23)

인증 도메인 구현 TIL

오늘 배운 것

카카오 소셜 로그인 기반 인증 시스템을 설계하고 돌핀 프로젝트에 적용하는 방법을 학습했습니다.

인증 흐름

1. 온보딩 → 카카오 로그인 버튼 클릭
2. 카카오 인증 → 콜백으로 인증 코드 획득
3. 약관 동의 → 서비스/개인정보/위치정보 동의
4. 프로필 설정 → 닉네임, 소개글 입력
5. 홈 화면 진입

주요 구현 사항

1. KakaoLoginButton

const handleLogin = async () => {
  const { redirect_url } = await AUTH_API.authorize();
  window.location.href = redirect_url;
};

2. 인증 콜백 처리 (SSR)

// /auth/callback
export const getServerSideProps = async ({ query }) => {
  const { code } = query;
  // 코드로 토큰 발급 후 리다이렉트
  const { token } = await AUTH_API.getToken(code);
  return { redirect: { destination: '/auth/consent' } };
};

3. 약관 동의 페이지 (CSR)

// ConsentForm 핵심 로직
const handleSubmit = async () => {
  if (!allRequiredAgreed) return;
  await AUTH_API.consent({ privacy: true, location: true });
  router.push('/auth/signup');
};

4. 회원가입 정보 입력 (CSR)

// SignupForm 핵심 로직
const onSubmit = async (data) => {
  const profileUrl = data.profileImage 
    ? await uploadImage(data.profileImage) 
    : null;
    
  await AUTH_API.completeSignup({
    nickname: data.nickname,
    introduction: data.bio,
    profile_image: profileUrl
  });
  
  router.push('/');
};

기술적 고려사항

• 렌더링 전략: 인증 콜백은 SSR, 사용자 인터랙션이 많은 페이지는 CSR 사용
• 토큰 관리: HttpOnly 쿠키로 안전하게 보관
• 컴포넌트 설계: 재사용성 고려한 모듈화 (LoadingSpinner, ConsentForm 등)
• 유효성 검증: React Hook Form으로 사용자 입력 검증