2024. 7. 24. 가짜 웃음도 나오지 않는 상황..

 

'use client';

import React, { useState, useEffect } from 'react';

import SideButton from '../atoms/SideButton';

import GridToggleButton from '../atoms/GridToggleButton';

import LoginModal from './LoginModal';

import SignupModal from './SignupModal';

import { supabase } from '../../supabase/client';

import { MainHeaderProps } from '@/types/main';

const Header: React.FC<MainHeaderProps> = ({ toggleSidebar, toggleGrid }) => {

  const [isLoginModalOpen, setLoginModalOpen] = useState(false);

  const [isSignupModalOpen, setSignupModalOpen] = useState(false);

  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {

    const checkUser = async () => {

      const {

        data: { user }

      } = await supabase.auth.getUser();

      setIsLoggedIn(!!user);

    };

    checkUser();

  }, []);

  const handleOpenSignupModal = () => {

    setLoginModalOpen(false);

    setSignupModalOpen(true);

  };

  const handleSignupSuccess = () => {

    setSignupModalOpen(false);

    setLoginModalOpen(true);

  };

  const handleLogout = async () => {

    const { error } = await supabase.auth.signOut();

    if (error) {

      console.error('로그아웃 실패:', error);

    } else {

      setIsLoggedIn(false);

      window.location.reload();

    }

  };

  return (

    <header className="flex justify-between items-center p-4 bg-gray-800 text-white">

      <SideButton onClick={toggleSidebar}>Menu</SideButton>

      <div className="flex-grow flex justify-center">

        <h1 className="text-2xl font-bold">Logo</h1>

      </div>

      <GridToggleButton onClick={toggleGrid} />

      <div className="flex gap-4">

        {isLoggedIn ? (

          <button className="px-4 py-2 bg-red-500 rounded hover:bg-red-700" onClick={handleLogout}>

            로그아웃

          </button>

        ) : (

          <>

            <button

              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700"

              onClick={() => setLoginModalOpen(true)}

            >

              로그인

            </button>

            <button

              className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-700"

              onClick={() => setSignupModalOpen(true)}

            >

              회원가입

            </button>

          </>

        )}

      </div>

      {isLoginModalOpen && (

        <LoginModal onClose={() => setLoginModalOpen(false)} onSignupClick={handleOpenSignupModal} />

      )}

      {isSignupModalOpen && (

        <SignupModal onClose={() => setSignupModalOpen(false)} onSignupSuccess={handleSignupSuccess} />

      )}

    </header>

  );

};

export default Header;

 

 

로그인 / 로그아웃 조건부 스타일링 구현

남은 작업 : 소셜 로그인 ( 네이버, 카카오, 구글)

로그인 모달 수정

사이트로그인
소셜로그인

선택지 제공
사이트 로그인 선택 -> 기존 로그인 모달 렌더링
소셜 로그인 선택 -> 소셜 인증 후 로그인 기능 도입