[feat/CK-136] 로그인 유지와 UI 버그를 해결한다

[NaveOWO]

📌 작업 이슈 번호

CK-136

✨ 작업 내용

• 로그인하면 navbar에 안나타남 → provider 안감싸져있음
• 로드맵 리스트에 item사이즈가 다 다름 → 제목 줄바꿈 처리 안해줌
• 로드맵 리스트에 item홀수일 때 가운데로 옴
• 로드맵 리스트에 카테고리 눌렀을 때 배경이 카테고리 수에 따라 줄어듦 (min-height 필요)
• 골룸 리스트에 골룸아이템이 적을 때 배경이 줄어듦 (min-height 필요)

💬 리뷰어에게 남길 멘트

유저의 정보를 전역적으로 저장하는 로직을 수정했습니다. 기존의 로직은 페이지가 새로고침 되면서 App이 다시 실행되면
context도 새로고침 되면서 화면 전역적으로 유저의 정보를 표시를 안해주고, 로그인이 풀린것 것 처럼 보이는 오류가 있었어요.
그래서 useIdentifyUser라는 커스텀훅을 통해 훅이 실행될 때마다 쿠키의 accessToken을 확인하고 유저의 정보를 가져오는 api를 호출하도록 했어요.

import { getUserInfo } from '@/apis/user';
import { UserInfoResponse } from '@/myTypes/user/remote';
import { getCookie } from '@/utils/_common/cookies';
import { useEffect, useState } from 'react';

export const defaultUserInfo: UserInfoResponse = {
  id: null,
  nickname: '',
  profileImageUrl: '',
  gender: null,
  identifier: '',
  phoneNumber: '',
  birthday: '',
};

export const useIdentifyUser = () => {
  const [userInfo, setUserInfo] = useState(defaultUserInfo);

  useEffect(() => {
    const accessToken = getCookie('access_token');
    if (!accessToken) return;

    getUserInfo().then((response) => setUserInfo(response.data));
  }, []);

  return {
    userInfo,
    setUserInfo,
  };
};

이 훅을 userProvider 내에서 실행하면 유저의 정보가 accessToken이 있는 이상 전역적으로 공유됩니당

🚀 요구사항 분석

[sh981013s]

월요일부터 달리시는군요! 덕분에 자극을 받네요! 👍

너무 고생하셨고 코멘트 확인 부탁드려요!

[sh981013s]

너무너무 좋아요! 다만 걸리는 부분들만 사알짝 짚어볼게요!

useEffect 내에서 비동기 작업을 수행할 때는 작업이 완료되기 전에 컴포넌트가 언마운트될 수 있음을 주의해야 할 것 같아요! 컴포넌트가 언마운트되고 상태를 설정하려고 시도하면 메모리 누수를 일으킬 수 있으니까요. useEffect의 clean-up 함수에서 비동기 작업을 취소하거나, 상태 업데이트를 시도하기 전에 컴포넌트가 마운트 상태인지 확인해야 하는 건 어떨까요??

[NaveOWO]

완전 하나 배워가요... 수정사항 확인해주세요!

[sh981013s]

확인했어요!! 너무너무 좋습니다!!

[sh981013s]

아예 구현부와 사용처를 없애도 좋을 것 같군요..!

[NaveOWO]

굿굿 지우겠습니다

[sh981013s]

🙃🙃🙃🙃🙃

[sh981013s]

위에서 어푸르부를 눌렀어서.. 😅 코멘트 확인 부탁드려요!

[jw-r]

네이브 주말에 버그 고치느라 너무 고생하셨어요😭

너무 좋습니다!
바로 approve 할게요🤩

[sh981013s]

vㅔ리베리 굳입니다!!!! 고생하셨어요~

[sh981013s]

호오우 AbortController 를 사용하셨군요..! 너무 좋습니다! 👍👍👍