하이어+플러스! 직원용 빌드 방법은 다음과 같습니다(UI - Home/Navbar).

개요: 호출된 모든 함수는 authSlice 리듀서에서 옵니다.

홈 경로 페이지

인사이드routes > home > home-page.tsxOutlet은/app 경로 내에 중첩된 모든 항목을 동적으로 렌더링합니다. Navigation 구성 요소는 모든 페이지에 있습니다.

import { Outlet } from 'react-router';
import Navigation from '../../components/navigation/navigation.component';

const HomePage = () => {
    return (
        <div>
            <Navigation />
            <Outlet />
        </div>
    );
};

export default HomePage;

탐색 구성 요소

인사이드components > navigation > navigation.component.tsx

수입품

이전에 만든 후크에서 useAppSelector 및 useAppDispatch 가져오기. Canva를 사용하여 이 프로젝트의 로고를 만들고 여기에서 가져왔습니다. Link 및 useNavigate - diff 페이지로 리디렉션합니다.

import { useAppSelector, useAppDispatch } from '../../app/hooks';
import { Link, useNavigate } from 'react-router-dom';
import { signoutUser } from '../../app/features/auth/authSlice';
import logo from '../../assets/plus.svg';

기능

사용자가 로그인했는지 여부를 확인해야 하므로 IsSignedIn 이 필요합니다. 그렇다면 사용자 이름을 표시하므로 인증 상태의 둘 다 필요합니다currentUser.
logout - 사용자가 로그아웃한 다음 로그인 구성 요소로 리디렉션됨

const Navigation = () => {
    const dispatch = useAppDispatch();
    const navigate = useNavigate();
    const { isSignedIn, currentUser } = useAppSelector((state) => state.auth);

    const logout = () => {
        try {
            dispatch(signoutUser())
                .unwrap()
                .then(() => {
                    navigate('auth/employees/');
                });
        } catch (error) {
            console.log('from logout', error);
        }
    };
    return ({/* removed for simplicity */});
};
export default Navigation;

UI

const Navigation = () => {
    {/* removed for simplicity */}
    return (
        <header className="logo sticky top-0 z-10 border-b-2 border-gray-700 px-10">
            <div className="container mx-auto flex flex-wrap flex-col md:flex-row items-center">
                <a href="https://hire-plus-v1.vercel.app/" className="mr-2">
                    <img src={logo} alt="logo" style={{ height: '75px' }} />
                </a>
                <Link
                    to="/app"
                    className="flex title-font font-bold items-center mb-4 md:mb-0 text-md"
                >
                    {isSignedIn && currentUser.displayName ? (
                        <span> {currentUser.displayName}</span>
                    ) : null}
                </Link>

                {isSignedIn ? (
                    <>
                        <nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
                            <Link to="/app" className="mr-5 hover:text-gray-500">
                                Jobs
                            </Link>
                            <Link
                                to={`user/profile/${currentUser.uid}`}
                                className="mr-5 hover:text-gray-500"
                            >
                                Profile
                            </Link>
                        </nav>
                        <button
                            onClick={logout}
                            className="bg-indigo-700 inline-flex items-center border-0 py-1 px-3 focus:outline-none rounded text-base mt-4 md:mt-0 text-white"
                        >
                            Logout
                        </button>
                    </>
                ) : (
                    <nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
                        <Link to="/app" className="mr-5 hover:text-gray-500">
                            JOBS
                        </Link>
                        <Link to="auth/employees" className="mr-5 hover:text-gray-500">
                            SIGN IN
                        </Link>
                        <Link
                            to="auth/employees/sign-up"
                            className="mr-5 hover:text-gray-500"
                        >
                            SIGN UP
                        </Link>
                    </nav>
                )}
            </div>
        </header>
    );
};
export default Navigation;

스크린샷

로그인하지 않음


로그인