Hire +Plus 자체 문서화: V1 (4)

내가 다루는 것

프로젝트 업데이트

탐색 구성 요소

로그인 구성 요소

가입 구성 요소

인증 페이지

업데이트: 라우팅을 App.tsx 파일로 옮겼습니다. 이제 index.tsx 파일은 앱을 렌더링하고 있습니다.

현재App.tsx 파일

import { Routes, Route } from 'react-router-dom';
import Launch from './components/launch/launch.component';
import Navigation from './components/navigation/navigation.component';
import AuthPage from './routes/auth/auth-page';

function App() {
    return (
        <>
            <Navigation />
            <Routes>
                <Route path="/" element={<Launch />} />
                <Route path="auth/:userSelect" element={<AuthPage />} />
            </Routes>
        </>
    );
}

export default App;

launch 페이지는 "/" 경로에 있고 인증 페이지는 동적입니다(따라서 "/*" ). 결국 사용자가 "/auth/employers" 페이지에서 선택하는 항목에 따라 "/auth/employees" 또는 launch가 됩니다.

항해

시작 페이지로 다시 리디렉션되는 로고만 포함된 탐색 구성 요소를 추가했습니다.

import React from 'react';
import { Link } from 'react-router-dom';

const Navigation: React.FunctionComponent = () => {
    return (
        <header className="logo h-16 sticky top-0 z-10">
            <Link to="/">
                Hire <span style={{ color: '#f7578c' }}>+Plus</span>
            </Link>
        </header>
    );
};
export default Navigation;

로그인 구성 요소

스타일 구성 요소 사용을 제거하고 순풍 스타일을 추가했습니다.
(로그인 구성 요소는 source code 참조)

TypeScript에서 Google 아이콘을 렌더링하는 데 몇 가지 문제가 있었습니다. 타이프스크립트로 구성해야 했습니다.

루트 디렉터리에 파일을 추가했습니다index.d.ts. 그런 다음 이것을 추가했습니다.

declare module '*.png';
declare module '*.jpg';

내부tsconfig.json 포함 배열에 파일을 추가했습니다.

"include": ["src", "index.d.ts"]

내 이미지/아이콘에 대한 자산 폴더를 추가했습니다.

회원가입

typescript를 사용하여 가입 페이지의 폴더와 구성 요소를 만들었습니다.
(가입 구성 요소는 source code 참조)

인증 페이지

auth 페이지는 sign-in 및 sign-up 구성 요소를 나란히 렌더링합니다. 사용자가 선택한 항목(고용주 또는 직원)에 따라 그에 따라 양식 제출을 처리하겠습니다. (이 경우 여기에 표시되는 userSelect 매개변수).

import SignIn from '../../components/sign-in/sign-in.component';
import { useParams } from 'react-router-dom';
import Signup from '../../components/sign-up/sign-up.component';

const AuthPage: React.FunctionComponent = () => {
    const { userSelect } = useParams();
    console.log(userSelect);
    return (
        <section className="text-gray-600 body-font">
            <div className="container flex flex-wrap px-5 py-10 mx-auto items-center justify-center">
                <div className="md:w-1/2 md:pr-5 md:py-8 md:border-r md:border-b-0 mb-10 md:mb-0 pb-10 border-b border-gray-200">
                    <SignIn />
                </div>
                <div className="flex flex-col md:w-1/2">
                    <Signup />
                </div>
            </div>
        </section>
    );
};

export default AuthPage;

마지막으로 현재 해당 페이지launch의 모습입니다.


auth 페이지는 다음과 같습니다.



지금은 여기까지입니다. 이러한 구성 요소의 테스트 부분을 계속 지켜봐 주시기 바랍니다!