로그아웃 통신 기만...

2023년 6월 23일 · 약 2분

Cook-Book 많이 만듭니다

오늘은 사용자들에게 로그아웃 통신을 한다고 기만하는 기능을 만들었습니다. 이유는 사실 토큰을 비우는데 그냥 1 ~ 2초 기다리게 만들었습니다.

setting page

로그아웃을 하기 위해서는 setting page에서 처리하도록 만들었습니다.

import { Button, PageHeading } from '../../Components';
import { useLogin } from '../../hooks';
import { useNavigate } from 'react-router-dom';
import { ROUTE_PATHS } from '../../constant/config';
import { SettingContainer, SettingWrapper } from './Setting.style';
import { useEffect, useState } from 'react';

function Setting() {
  const { emptyTokens } = useLogin();
  const navigate = useNavigate();
  const [isLoading, setIsLoading] = useState(false);

  let timer: NodeJS.Timeout | null = null;

  const handelSignOut = () => {
    setIsLoading(true);
    const randomDelay = Math.floor(Math.random() * 2 + 1) * 1000;

    timer = setTimeout(() => {
      setIsLoading(false);
      emptyTokens();
      navigate(ROUTE_PATHS.SIGN_IN);
    }, randomDelay);
  };

  useEffect(() => {
    return () => {
      if (timer) clearTimeout(timer);
    };
  }, []);

  return (
    <SettingContainer>
      <SettingWrapper>
        <PageHeading>Setting</PageHeading>
        <Button onClick={handelSignOut} isLoading={isLoading}>
          Sign out
        </Button>
      </SettingWrapper>
    </SettingContainer>
  );
}

export default Setting;

로그아웃 할 때 사실은 통신을 안 하는데 통신하는 흉내를 냈습니다. 이유 이것도 통신이 필요하다는 환상을 주기위해서 넣은 기능입니다.

setTimeout 설정하는 것 말고 특별한 이슈는 없었습니다. 그냥 더럽다는 것 말고 없습니다.

setting page​

setting page