2024. 04. 25(목) Today I Learned

What I Did Today

1. 최종 프로젝트

• 로그인 유무에 따른 조건부 렌더링 구현
• 로그아웃 구현

---

최종 프로젝트 일지

주요 구현 내용

1. 로그아웃 기능 구현

• Supabase에서 제공하는 로그아웃 기능을 활용

export const signOutCurrentAccount = async () => {
  try {
    const { error } = await supabase.auth.signOut();

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

2. 로그인 유무에 따른 조건부 렌더링 구현

• 세션 정보를 사용하여 로그인 유무를 판단
  • Supabase에서 제공하는 onAuthStateChange 메서드 활용

// types/index.ts
import { Session } from "@supabase/supabase-js";

// 세션 정보
export interface SessionState {
  session: Session | null;
}

export interface SessionAction {
  setSession: (session: Session | null) => void;
}

// authStore.ts
import { SessionAction, SessionState } from "@/types";
import { Session } from "@supabase/supabase-js";
import { create } from "zustand";

const useAuthStore = create<SessionState & SessionAction>()((set) => ({
  session: null,
  setSession: (session: Session | null) => set({ session })
}));

export default useAuthStore;

// providers.tsx
"use client";

import React, { createContext, useEffect } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { supabase } from "@/api/supabase";
import { Session } from "@supabase/supabase-js";
import useAuthStore from "@/shared/zustand/authStore";

export default function Providers({
  children
}: React.PropsWithChildren<NonNullable<unknown>>) {
  const queryClient = new QueryClient();
  const SessionContext = createContext<Session | null>(null);
  const { session, setSession } = useAuthStore();

  useEffect(() => {
    const {
      data: { subscription }
    } = supabase.auth.onAuthStateChange((event, session) => {
      if (event === "SIGNED_OUT") {
        setSession(null);
      } else if (session) {
        setSession(session);
      }
    });

    return () => {
      subscription.unsubscribe();
    };
  }, [setSession]);

  return (
    <QueryClientProvider client={queryClient}>
      <SessionContext.Provider value={session}>
        {children}
      </SessionContext.Provider>
    </QueryClientProvider>
  );
}

---

Diary

1. 최종 프로젝트

• 드디어 제대로 된 로그인/로그아웃 기능을 구현한 것 같다.
• 생각보다 고민하고 실현하는 데 오래 걸렸다. 분발하자.

2. 마음가짐

• 끝이 보인다는 생각에 점점 게을려져 가는 것 같다.
• 정신차리자.