하이어+플러스! 직원용 구축 방법은 다음과 같습니다(UI - 경로).

App.tsx

수입품

가져온 파일의 절반은 구성 요소 및 경로 페이지에서 가져온 것입니다. setSignedIn는 현재 로그인한 사용자가 있는 경우 로그인 상태를 설정하는 데 사용됩니다. onAuthStateChangedListener는 사용자가 로그인하거나 로그아웃할 때 리스너가 됩니다.

import { useEffect } from 'react';
import { Routes, Route } from 'react-router-dom';
import { useAppDispatch } from './app/hooks';
import Launch from './routes/launch/launch-page';
import { setSignedIn } from './app/features/auth/authSlice';
import { onAuthStateChangedListener } from './utils/firebase/firebase.utils';
import SignIn from './components/sign-in/sign-in.component';
import Signup from './components/sign-up/sign-up.component';
import NoMatch from './routes/noMatch/NoMatch';
import ProfilePage from './routes/profile/profile-page';
import JobsPage from './routes/job/job-page';
import PrivateRoute from './components/privateRoute/private-route.component';
import AuthPage from './routes/auth/auth-page';
import HomePage from './routes/home/home-page';
import CompanyPage from './routes/company/CompanyPage';
import JobDetail from './routes/job/job-detail';

앱()

useEffect : 앱이 마운트되면 onAuthStateChangedListener를 사용하여 사용자를 확인합니다. 사용자가 로그인한 경우 setSignedIn가 현재 사용자를 상태로 디스패치하고 설정합니다. 그렇지 않은 경우 현재 사용자는 아무 것도 설정되지 않습니다.

function App() {
    const dispatch = useAppDispatch();
    useEffect(() => {
        const unsubscribe = onAuthStateChangedListener(async (user) => {
            if (user) {
                const { displayName, uid } = user;
                dispatch(
                    setSignedIn({ signedIn: true, currentUser: { uid, displayName } })
                );
            } else {
                dispatch(setSignedIn({ signedIn: false, currentUser: {} }));
            }
        });
        // runs when the component unmounts
        return unsubscribe;
    }, [dispatch]);

    return ( // removed for simplicity );
}

export default App;

렌더링 경로

-- /
-- /app
    -- /auth/employees
         -- /
         -- /sign-up
    -- /user/profile/:id
    -- /company/:id
    -- /job/:id
-- * 

/ - 경로가 시작 페이지를 렌더링합니다.
/app - 다른 모든 경로가 중첩되어 있습니다. 기본적으로 작업 페이지를 표시합니다.
/auth/employees - 내부에 중첩된 두 개의 경로가 있습니다. 기본적으로 로그인 페이지가 표시되고 navbar 링크가 가입 페이지로 연결됩니다.
/user/profile/:id - 프로필을 업데이트하기 위한 편집 페이지가 표시됩니다. 비공개 보기이므로 로그인하지 않으면 볼 수 없습니다.
/company/:id - 회사 페이지를 표시합니다.
/job/:id - 작업 세부 정보 페이지를 표시합니다.
* - 위에서 설명한 경로와 일치하는 경로가 없는 경우 포괄적인 페이지를 표시합니다.

function App() {
// removed for simplicity

    return (
        <>
            <Routes>
                <Route path="/" element={<Launch />} />
                <Route path="/app" element={<HomePage />}>
                    <Route index element={<JobsPage />} />
                    <Route path="auth/employees" element={<AuthPage />}>
                        <Route index element={<SignIn />} />
                        <Route path="sign-up" element={<Signup />} />
                        ...
                    </Route>
                    <Route
                        path="user/profile/:id"
                        element={
                            <PrivateRoute>
                                <ProfilePage />
                            </PrivateRoute>
                        }
                    />
                    <Route path="company/:id" element={<CompanyPage />} />
                    <Route path="job/:id" element={<JobDetail />} />
                </Route>
                <Route path="*" element={<NoMatch />} />
            </Routes>
        </>
    );
}

export default App;

경로 폴더 구조

이것이 어떻게 구성되어 있는지에 대한 간략한 요약. redux 섹션에 있는 것과 유사하게 기능별로 정리했습니다. 관련 기능이 없는 부분은 launch , noMatch 및 home 입니다.

구성 요소 폴더 구조

프로젝트의 경로 부분은 여기까지입니다. 계속 지켜봐 주세요!