[main project day 17] main project

기예약된 날짜의 style 적용하기

충격적인 사실을 알게 되었다.
new Date()을 사용하면 날짜끼리 대소비교가 가능하단다.
나 지금까지 뭐한거지? ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
열심히 case 별로 나눠서 작성했는데
이런 나를 위해 이미 자바스크립트에는 준비된 메서드가 있었던 것이었다.
그래도.. 좋은 경험이었다.. 열심히 디버깅도 해보고...
isWithinReservationPeriods라는 함수를 만들고 styled-components 내부에서는 조건 분기만 하는 구조이다.

여튼 이제 기예약 날짜 mock data도 store에 만들어놓았으니 달력에 적용을 해보자.

const isWithinReservationPeriods = (
  dateInfo: { year: number; month: number; date: number },
  reservationData: StartEndDateProps[],
) => {
  const currentDate = new Date(
    dateInfo.year,
    dateInfo.month - 1,
    dateInfo.date,
  );
  for (const reservation of reservationData) {
    const { startDate, endDate } = reservation;
    const start = new Date(startDate.year, startDate.month - 1, startDate.day);
    const end = new Date(endDate.year, endDate.month - 1, endDate.day);
    if (currentDate >= start && currentDate <= end) {
      return true;
    }
  }
  return false;
};

export const EachDate = styled.th<EachDatesProps>`
  font-size: 20px;
  font-weight: 400;
  height: 20px;
  padding: 11px;
  border-radius: 10px;
  ${(props) => {
    // 기예약된 날짜
    const dateInfo = {
      year: props.current.year,
      month: props.current.month,
      date: Number(props.children),
    };

    if (isWithinReservationPeriods(dateInfo, props.reservationData)) {
      return css`
        color: ${colorPalette.lightColor};
        background-color: ${colorPalette.grayColor};
        cursor: 'not-allowed';
      `;
    }
    .
    .
    (중략)

헐....세상에... 뜬다!!!!!
기예약된 날짜가 뜬다!!!!!!!!!

근데 오늘도 역시 많은 챌린지들이 기다리고 있다.

나를 기다리고 있는 챌린지들

1. 예약하려고 날짜를 클릭하면 배경이 사라진다.
   
   읭?
2. 오른쪽 버튼을 클릭했을 때 다음 달 데이터 한 달만 받아오기로 했는데(위의 그림에서는 9월만 받아옴) 오른쪽 버튼을 눌렀더니 8월의 데이터가 표시가 안되고 있다.
   
3. 예약 희망 날짜를 클릭할 때 기 예약 날짜가 중간에 껴 있으면 예약이 안되도록 해야 한다.

회원탈퇴

아직 금희님이 마이페이지 작업 중이셔서 로그인 페이지에 임시로 회원탈퇴 버튼을 넣었다.

import axios from 'axios';
import KakaoLogin from '../components/KakaoLogin';
import { LoginPageContainer } from '../style';

function LoginPage() {
  const handleWithdrawal = () => {
    try {
      console.log('회원탈퇴');
      const response = axios.delete(
        process.env.REACT_APP_API_URL + '/api/members',
      );
      console.log(response);
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <LoginPageContainer>
      <KakaoLogin />
      <button onClick={handleWithdrawal}>회원탈퇴 임시 버튼</button>
    </LoginPageContainer>
  );
}
export default LoginPage;

그런데 상태코드 401이 뜨네?
이상한게 한 가지 더 있다.

getMe 응답이 없다....?
유저 정보가 지금 없네?
의심 가는 부분: access token이 만료되어서 권한이 안생기는걸까?
로그아웃하고 로그인을 하면 어차피 access token은 새로 발급받아야 하는 거잖아?

    const accessToken: string = decryptToken(encryptedAccessToken);
    console.log('2. 복호화된 accessToken:', accessToken);

    try {
      const { data } = await axios.get(
        `${process.env.REACT_APP_API_URL}/api/members`,
        {
          headers: { Authorization: 'Bearer ' + accessToken },
        },
      );

      console.log('3. getMe response:', data);

      // 유저 정보 store에 저장
      dispatch(createUserInfo(data));
    } catch (error) {
      console.log('error가 난거니? 뭠미?', error);
    }

응답이 유저정보에 대한 응답이 왔으면 찍혀야 하는데 없어...

     console.log('3. getMe response:', typeof data);
// string
     console.log('3. getMe response:', data === '');
// true

응답이 "" 이거라고...? 어째서?

엥 근데 오늘 아침 회의 끝나고 팀원분들과 머지하고 pull 땡겨오니까 갑자기 또 유저 정보가 잘 들어오네?
아무래도 비동기 이슈를 점검해봐야겠다. test 코드도 필수!!!

회원 탈퇴를 구현했는데 엔드포인트 members 뒤에 /를 빼먹었더니 401 오류가 났다.

  const handleWithdrawal = () => {
    try {
      console.log('회원탈퇴');
      const response = axios.delete(
        process.env.REACT_APP_API_URL + '/api/members/',
      );
      console.log(response);
    } catch (error) {
      console.log(error);
    }
  };

마이페이지에서 store에 있는 유저 정보를 불러와야 하는데 undefined

store에서 userData를 불러오면 불러와질 때도 있고 안 불러와질 때도 있었다.
redux-persist를 사용해봐도 소용이 없었다.
useGetMe에 return data가 빠져있어서 한참을 헤맸었다.
이제 return data 추가하고 가능!해졌다.