[main project day 19] main project

회원탈퇴

갑자기 잘 되다가 401 에러가 떴다.

헤더에 액세스 토큰 담아서 성공

import { useNavigate } from 'react-router-dom';
import axios, { AxiosError } from 'axios';
import useDecryptToken from '../../../common/utils/customHooks/useDecryptToken';
import KakaoLogin from '../components/KakaoLogin';
import { LoginPageContainer } from '../style';
import { ACCESS_TOKEN } from '../constants';

function LoginPage() {
  const navigate = useNavigate();
  const decrypt = useDecryptToken();
  const encryptedAccessToken = localStorage.getItem(ACCESS_TOKEN);
  if (!encryptedAccessToken) {
    navigate('/login');
    return null;
  }
  const accessToken = decrypt(encryptedAccessToken);
  const handleWithdrawal = async () => {
    try {
      await axios.delete(process.env.REACT_APP_API_URL + '/api/members', {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      });
      localStorage.removeItem(ACCESS_TOKEN);
      navigate('/');
    } catch (error: AxiosError | any) {
      if (error.response.status === 401) {
        alert('로그인이 만료되었습니다. 다시 로그인해주세요');
      }
      navigate('/login');
    }
  };
  return (
    <LoginPageContainer>
      <KakaoLogin />
      <button onClick={handleWithdrawal}>회원탈퇴 임시 버튼</button>
    </LoginPageContainer>
  );
}
export default LoginPage;

PrivateRoutes 조건 분기 버그

import { Navigate, Outlet } from 'react-router-dom';
import { UseQueryResult } from 'react-query';
import useGetMe from './common/utils/customHooks/useGetMe';
import { IUserInfo } from './common/model/IUserInfo';

async function PrivateRoutes() {
  // TODO: 로그인 여부를 getMe에서 가져오기
  const { data: data }: UseQueryResult<IUserInfo | null> = await useGetMe();
  console.log('유저 정보', data);
  // TODO: 로그인 여부에 따라서 라우팅 처리
  return data ? <Outlet /> : <Navigate to="/login" />;
}
export default PrivateRoutes;

처음에 async await를 안썼더니

로그인을 해도 유저 정보가 없다고 출력된다.

그래서 async await를 사용해봤는데

이런 에러가 뜬다.

함수형 컴포넌트는 비동기로 관리되면 안되는거구나..! 처음 알았다. ㅋㅋㅋㅋ

그래서 새로운 시도를 해봤다.
useEffect로 순서 제어 시도!

import { Navigate, Outlet } from 'react-router-dom';
import { UseQueryResult } from 'react-query';
import useGetMe from './common/utils/customHooks/useGetMe';
import { IUserInfo } from './common/model/IUserInfo';
import { useEffect } from 'react';

function PrivateRoutes() {
  // TODO: 로그인 여부를 getMe에서 가져오기
  const {
    data: data,
    refetch: fetchUserData,
  }: UseQueryResult<IUserInfo | null> = useGetMe();

  useEffect(() => {
    fetchUserData();
  }, [data]);

  // TODO: 로그인 여부에 따라서 라우팅 처리
  return data ? <Outlet /> : <Navigate to="/login" />;
}
export default PrivateRoutes;

여전히 로그인이 되어도 /booking/0에 접속이 안된다.
오늘 이 문제는 끝짱을 봐야한다.
의존성 배열에 fetchUserData를 넣어봐도 안되네

useQuery의 isLoading 속성을 사용하여 해결했다.

import { Navigate, Outlet } from 'react-router-dom';
import { UseQueryResult } from 'react-query';
import useGetMe from './common/utils/customHooks/useGetMe';
import { IUserInfo } from './common/model/IUserInfo';
import Loading from './common/components/Loading';

function PrivateRoutes() {
  const { data, isLoading }: UseQueryResult<IUserInfo | null> = useGetMe();

  if (isLoading) {
    return <Loading />;
  }

  if (!data) {
    // 로그인되지 않은 상태라면 로그인 페이지로 리디렉션
    return <Navigate to="/login" />;
  }

  // 로그인된 상태라면 자식 라우트를 렌더링
  return <Outlet />;
}
export default PrivateRoutes;

얼마만에 보는 달력이냐 ㅠㅠㅠ
해결 완료!!!

예약 시작 날짜와 마감 날짜 둘 다 이미 지정되었을 때 유저가 시작 날짜를 앞으로 당겨서 클릭할 경우 로직 추가

          onClick={() => {
            if (
              !reservationDatesClickedByUser.startDate ||
              // startDate과 endDate 둘 다 있는데 유저가 원래 startDate보다 이전 날짜를 클릭했을 때
              (reservationDatesClickedByUser.startDate &&
                reservationDatesClickedByUser.endDate &&
                new Date(
                  reservationDatesClickedByUser.startDate.year,
                  reservationDatesClickedByUser.startDate.month - 1,
                  reservationDatesClickedByUser.startDate.date,
                ).getTime() > new Date(year, month - 1, date).getTime())
            ) {
              dispatch(
                setStartDate({
                  ...reservationDatesClickedByUser,
                  allReservations,
                  startDate: { ...calendar, date },
                }),
              );
            } else {
              dispatch(
                setEndDate({
                  ...reservationDatesClickedByUser,
                  allReservations,
                  endDate: { ...calendar, date },
                }),
              );
            }
          }}
        >
          {date ? date : null}

getTime() 메서드를 사용해서 new Date 객체로 선언된 날짜를 1970년 1월 1일 자정부터 경과한 밀리초로 나타내는 숫자로 변환하여 비교하는 작업을 할 수 있다.

이 때 내가 추가한 조건은 아래와 같다.
시작 날짜와 마감 날짜가 이미 둘다 지정이 되었는데, 유저가 이미 지정된 시작 날짜보다 앞의 날짜를 클릭할 경우!
이 때 시작 날짜를 앞의 날짜로 변경하는 것이다.