2024. 04. 23(화) Today I Learned

What I Did Today

1. 최종 프로젝트

• 소셜 로그인 구현

---

최종 프로젝트 일지

주요 구현 내용

1. 소셜 로그인 기능 구현

• Supabase에서 제공하는 소셜 로그인 기능을 활용

import { supabase } from "@/api/supabase";

// 카카오 로그인
export const signInWithKakao = async () => {
  try {
    const { error } = await supabase.auth.signInWithOAuth({
      provider: "kakao",
      options: {
        redirectTo: "http://localhost:3000/home", // 리다이렉션
        queryParams: {
          prompt: "select_account"
        }
      }
    });

    if (error) {
      alert("로그인 중에 에러가 발생했습니다.");
      console.error("로그인 에러 => ", error);
      throw error;
    }
  } catch (error) {
    alert("카카오 로그인 에러 발생 => " + error);
    console.error("카카오 로그인 에러 발생 => ", error);
  }
};

// 구글 로그인
export const signInWithGoogle = async () => {
  try {
    const { error } = await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: "http://localhost:3000/home", // 리다이렉션
        queryParams: {
          access_type: "offline", // refresh token
          prompt: "select_account" // 사용자에게 동의를 구하는 prompt 표시
        }
      }
    });

    if (error) {
      alert("로그인 중에 에러가 발생했습니다.");
      console.error("로그인 에러 => ", error);
      throw error;
    }
  } catch (error) {
    alert("구글 로그인 에러 발생 => " + error);
    console.error("구글 로그인 에러 발생 => ", error);
  }
};

2. 소셜 로그인 컴포넌트 생성

"use client";
import React from "react";
import KakaoLogo from "@/assets/icons/logo/Kakao.svg";
import { signInWithKakao } from "@/hooks/useSocialLogin";

const KakaoLogin = () => {
  return (
    <div
      className="flex w-full h-[50px] px-5 items-center bg-kakao rounded-lg cursor-pointer"
      onClick={signInWithKakao}
    >
      <figure>
        <KakaoLogo />
      </figure>
      <nav className="flex w-full justify-center medium-14">
        카카오로 계속하기
      </nav>
    </div>
  );
};

export default KakaoLogin;

3. 로그인 페이지 레이아웃 구현

export default function LoginPageLayout({
  children
}: Readonly<{
  children: React.ReactNode;
}>) {
  return <main className="h-full px-4 py-16 bg-orange">{children}</main>;
}

주요 학습 내용

1. svg를 컴포넌트화 하는 방법

• @svgr/webpack 라이브러리 사용

// next.config.mjs
webpack: (config) => {
  config.module.rules.push({
    test: /\.svg$/,
    use: ["@svgr/webpack"]
  });
  return config;
}

• 원하는 svg 파일을 컴포넌트로 import하여 사용

import KakaoLogo from "@/assets/icons/logo/Kakao.svg";

const KakaoLogin = () => {
  return (
    // 중략
    <KakaoLogo />
  );
};

2. 페이지마다 Layout를 다르게 설정하는 방법 in Next.js

• Route Group을 설정하여 Layout을 구분

Next.js에서 Route group을 설정하는 방법
: 소괄호()로 그룹을 구분함

// 로그인 페이지에 속하는 route group
src/app/(loginLayout)/login/layout.tsx

// 로그인 페이지에 속하지 않는 route group
src/app/(nonLoginLayout)/nonlogin/layout.tsx

• 주의할 점
  : 상위 layout이 존재하는 경우, 중첩 적용되기 때문에 이를 고려해야 한다.

---

Diary

새로운 것을 학습하는 건 언제나 쉽지 않다. 하지만 문제를 해결하기 위해 하나하나 찾아보고, 학습하고, 적용해서 결과물이 해결되는 것을 보는 쾌감은 너무 재밌다.
아직은 할 일이 많지만 차근차근 해보자.