[4주차 심화 과제] 로그인/회원가입/마이페이지

[ExceptAnyone]

✨ 구현 기능 명세

🌠 심화 과제

[ 로그인 페이지 ]

1. 토스트
   • createPortal을 이용합니다.
   • 로그인 실패시 response의 message를 동적으로 받아 토스트를 띄웁니다.

[ 회원가입 페이지 ]

1. 비밀번호 확인

   • 회원가입 버튼 활성화를 위해서는 비밀번호와 비밀번호 확인 일치 조건까지 만족해야 합니다.

2. 중복체크

   • 중복체크 후 ID 값을 변경하면 중복체크가 되지 않은 상태(색은 검정색)로 돌아갑니다.

💎 PR Point

• 합세에서 배운 axios 인스턴스 적용하였습니다.

import axios from "axios";

const api = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL,
});

export default api;

라우터 처리를 조금은 색다르게(?) 해보았습니다. STATIC과 DYNAMIC으로 나누어 관리하였습니다.

const STATIC = {
  HOME: "/",
  LOGIN: "/login",
  SIGNUP: "/signup",
};

const DYNAMIC = {
  MYPAGE: "/mypage/:userId",
};

export const PATH = {
  ...STATIC,
  ...DYNAMIC,
} as const;

import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { PATH } from "./routes";
import LoginPage from "../pages/login/LoginPage";
import SignupPage from "../pages/signup/SignupPage";
import Mypage from "../pages/mypage/Mypage";
import React from "react";

export const router = createBrowserRouter([
  {
    path: PATH.LOGIN,
    element: <LoginPage />,
  },
  {
    path: PATH.SIGNUP,
    element: <SignupPage />,
  },
  {
    path: PATH.MYPAGE,
    element: <Mypage />,
  },
]);

const Router = () => (
  <>
    <RouterProvider router={router} />
  </>
);

export default Router;

🥺 소요 시간, 어려웠던 점

• 3h
• .env를 잘못썼어서 404가 계속 떴었음... 언쨩의 도움을 받았습니다 ㅎㅎ
• 라우터 처리 과정에서, HOME에 을 계속 호출하여 기존 APP 컴포넌트가 렌더링 되는데 있어 오류를 잡는데 꽤 오래 걸렸습니다. 이는 가형이의 도움을 받았습니다 :)

🌈 구현 결과물

2023-12-15.11.51.30.mov

2023-12-15.11.50.57.mov