🔨 fix: 릴리즈 배포 후 버그 해결 및 필요한 기능 추가

[rkdcodus]

✅ 체크리스트

<해결된 버그>

• 댓글 긴 단어 깨짐 해결
• (모바일) 아래 스크롤 시 토스트 컴포넌트가 살짝 보이던 버그 해결
• 수정페이지 이미지 파일 이름 및 용량 표기

<추가된 기능>

• 댓글의 '댓글 달기' 버튼 추가
• 헤더 목록바 '리워드 내역' 페이지 이동 버튼 추가
• '이용약관', '개인정보 처리방침' 노션 페이지 이동
• 설정페이지의 '서비스 준비 중' 모달 구현
• 모든 로그인 버튼은 로그인 모달 띄우기
• 에러 페이지 구현
• 로그인 만료 모달 구현
• 토스트/스낵바 UI 변경

📝 작업 상세 내용

1️⃣ '이용약관', '개인정보 처리방침' 내용 표기

Footer에 이용약관 및 개인정보 처리방침에 관한 내용을 확인할 수 있습니다.
또한 로그인 모달의 서비스 이용약관 문구를 통해서도 이용약관 내용을 확인할 수 있습니다.
텍스트를 클릭하면 새로운 탭이 열리면서 노션 페이지로 이동합니다.

// Footer 컴포넌트 

const Footer = () => {
  const moving = (url: string) => {
    window.open(url, '_blank', 'noopener, noreferrer');
  };

  return (
      ...
          <S.ButtonContainer>
            <S.FooterButton onClick={() => moving(FOOTER.terms_of_use_url)}>
              이용약관
            </S.FooterButton>
            <S.FooterButton onClick={() => moving(FOOTER.privacy_policy_url)}>
              개인정보 처리방침
            </S.FooterButton>
          </S.ButtonContainer>
      ...
  );
};

// 로그인 모달 창 
  <S.TermText>
    로그인 시,{' '}
    <S.TermAnchor
      href={FOOTER.terms_of_use_url}
      target="_blank"
      rel="noopener noreferrer"
    >
      서비스 이용약관
    </S.TermAnchor>
    에 동의하는 것으로 간주됩니다.
  </S.TermText>

target="_blank" 속성을 주면 새로운 탭으로 열리게 됩니다.
이 속성을 사용할 땐 rel="noopener noreferrer"을 함께 써주는 것이 좋습니다. target="_blank"로 발생할 수 있는 보안 문제와 성능 문제를 해결할 수 있습니다.
관련된 자세한 내용은 블로그 참고해주세요!

2️⃣ 에러페이지 구현

현재 api 에서 에러가 발생하면 에러페이지로 이동하도록 구현되어있습니다.
하지만 전부 페이지로 에러메시지를 보여주는 것은 좋은 방향이 아닙니다. 에러 코드별로 페이지/토스트를 구별하여 에러메시지를 나타내는 것이 더 좋은 방법이지만 이 방법은 구현 중에 있습니다! 구현하려면 시간이 필요할 것 같아 일단 버전 배포는 페이지로만 보여주는 걸로 결정했습니다.

구현 방법

export const useError = () => {
  const navigate = useNavigate();

  const renderErrorPage = (error: AxiosError<ApiErrorResponse>) => {
    const message = error.response?.data.description;
    navigate('/errorpage', { state: message });
  };

  return { renderErrorPage };
};

useError 훅을 생성했습니다. 에러가 발생하면 해당 에러메시지를 보여주는 페이지로 이동합니다.

// useMutation 이라면 
onError: (error: AxiosError<ApiErrorResponse>) => {
      console.error(error);
      renderErrorPage(error);
},

// useQuery라면 
  if (isError) {
    console.error(error);
    renderErrorPage(error);
  }

이런 식으로 Tanstack query에서 에러가 발생하면 useError의 renderErrorPage 함수를 호출하여 페이지로 이동합니다.
하지만 에러는 전역인 QueryClient에서 처리하는 것을 권장하고 있어 구현 중인 작업에서 QueryClinet를 사용하는 것으로 변경될 예정입니다.

3️⃣ 로그인 만료 모달

로그인 후 만료되는 시간이 10분이라고 생각하고 있었는데 직접 테스트해보니 30분인 것으로 확인했습니다!

작업 전 로그인 만료(자동 로그아웃)와 수동 로그아웃의 과정을 정리해보면 아래와 같습니다.

로그인 만료 (자동 로그아웃)

1. 로그인 후 30분이 지나면 엑세스 토큰이 만료
2. 새로고침/페이지 이동이 이루어지면 memberId를 가지고 올 수 없어 401 에러 발생
3. API interceptor가 401 에러를 감지하여 로컬스토리지의 accessToken 삭제
4. 소개페이지로 이동

로그아웃

1. 헤더의 로그아웃 버튼 클릭
2. 로컬스토리지의 accessToken 삭제되며 소개페이지로 이동
3. 헤더의 프로필이 memberId를 가지고 올 수 없어 401에러 발생 -> 로그인 버튼으로 전환
4. API interceptor가 401 감지

구현하기 (로컬스토리지 이용)

헤더에서는 항상 useUser 훅을 통한 memberId가 필요합니다. 헤더의 memberId가 null이면 로그아웃 상태로 판단합니다.
30분이 지나 엑세스 토큰이 만료되면 새로고침이나 페이지 이동이 없이도 memberId가 null임을 감지하기 위해 useUser의 memberId를 5초마다 fetch하도록 했습니다.

const { data, isSuccess, isError, error } = useQuery<
    number,
    AxiosError<ApiErrorResponse>,
    number,
    string[]
  >({
    queryKey: ['memberId'],
    queryFn: fetchAxios,
    enabled: !!isAuthenticated,
    retry: 1,
    refetchInterval: 5000,
    refetchIntervalInBackground: true,
  });

해당 API는 isAuthenticated가 true일 경우에만, 즉 로그인되어있을 경우에만 5초마다 fetch를 실행합니다.
만료되었을 경우 바로 모달을 띄워주기 위해 재시도는 1번만 하도록 설정해주었습니다. (기본값은 3)
refetchIntervalInBackground를 true로 주어 브라우저가 포커스되어있지 않아도 fetch를 실행합니다.

const Header = () => {
  const { memberId, isError } = useUser();
  const { modal, loginModal } = useModal();
 ...

  useEffect(() => {
    const manualLogout = localStorage.getItem('manualLogout');
    if (isError && manualLogout === null) {
      const setting = {
        title: MODAL.login_expiration.title,
        content: MODAL.login_expiration.content,
      };

      const button1 = {
        active: true,
        text: MODAL.confirm,
        color: semantic.light.accent.solid.hero,
        interaction: INTERACTION.accent.subtle(),
      };

      modal(setting, button1);
    }
  }, [isError]);
...

또한, 로그인 만료(자동 로그아웃)과 수동 로그아웃이 되면 모두 401에러가 발생하고 있어 API interceptor가 관여합니다.
로그인 만료와 수동 로그아웃을 구분하기 위해 수동 로그아웃을 시킬 시 로컬스토리지에 manualLogout: true 상태를 저장하였습니다.
로그인을 하면 로컬스토리지에서 manualLogout을 삭제합니다.
따라서 401 에러가 발생했을 때 manualLogout이 null이라면 로그인 만료로 판단하여 모달을 띄워주고
401 에러가 발생했을 때 manualLogout이 null이 아니라면 수동 로그아웃으로 판단하여 모달을 띄우지 않도록 했습니다.

4️⃣ 수정페이지 이미지 파일 이름 및 용량 표기

변경된 이미지 state입니다.

  // 이미지 state
  const [image, setImage] = useState<ImageInfo>({
    imageId: 0,
    imageURL: '',
    imageName: '',
    imageSize: 0,
    imageType: '',
  });

백에서 상세페이지 및 수정페이지에서 저장된 이미지 데이터를 받아올 때 iamgeId, imageURL, imageName, imageSize가 오는 걸로 변경되었습니다. (image api post 할 때는 그대로 이미지 파일 객체만 보내줌)
base64 형식의 이미지를 file 객체로 바꾸는 과정에서 임시로 지정했던 파일 이름(image.jpg)과 파일 타입(image/jpeg)을 원본 파일 이름과 타입으로 변경하였습니다.

🚨 버그 발생 이유 (선택 사항)

🔎 후속 작업 (선택 사항)

🤔 질문 사항 (선택 사항)

📚 참고 자료 (선택 사항)

추가적인 참고 사항이나 관련된 문서, 링크 등을 제공해주세요.

📸 스크린샷 (선택 사항)

✅ 셀프 체크리스트

• 브랜치 확인하기
• 불필요한 코드가 들어가지 않았는지 재확인하기
• issue 닫기
• reiewers, assignees, Lables 등록 확인하기

이슈 번호:

[ccconac]

확인했습니다! 너무 수고하셨어요 채연 님 🔥

[KKYHH]

확인했습니다 채연 님!🫡 늦어져서 죄송합니다 🙇