feature:Logout 기능 만들기!

[wyswhsl21]

작업 내용 리스트

• 로그아웃 기능 만들기

1. 로그아웃 버튼을 누르면 로그아웃 모달창이 뜬다
2. 돌아가기 누르면 아무런 결과 없음
3. 네를 누르게 되면 backend 에다가 해당 유저 토큰 값 보내줘야함 (어떤 사용자인지 확인 필요!)
4. localstorage.clear()로 비우고 landing 페이지로 이동
5. 로그인을 제외한 모든 컴포넌트에서 동작해야한다.

이미지

wireFrame

트러블 슈팅

1. 로그인 페이지를 제외한 모든 컴포넌트에서 동작하게끔 만들어야 하기 때문에 Aside 컴포넌트 하위 컴포넌트에다가 Modal 컴포넌트를 import 시킴.

Logout Modal

export const Logout = ({ islogout, setIslogout }: any) => {
 const logoutHandler = () => {
   localStorage.clear();
   setIslogout(!islogout);
   const navigate = useNavigate();
   navigate('/landing');
 };
 return (
   <LogoutModal>
     <LogoutSpan>정말 로그아웃 하시겠습니까?</LogoutSpan>
     <div>
       <button onClick={setIslogout(!islogout)}>돌아가기</button>
       <button onClick={logoutHandler}>네</button>
     </div>
   </LogoutModal>
 );
};

 <Routes>
        <Route path="/" element={<LandingPage />} />
        <Route path="/signup" element={<SignupPage />} />
        <Route path="/confirm" element={<ConfirmPage />} />
        <Route path="/enter" element={<EnterInfoPage />} />
        <Route element={<Layout />}>
          <Route element={<Aside islogout={islogout} setIslogout={setIslogout} />}>
            {islogout ? (
              <Route element={<Logout islogout={islogout} setIslogout={setIslogout} />}>
                <Route path="/dashboard" element={<Dashboard />} />
                <Route path="/addasset" element={<AddAsset />} />
                <Route path="/modifyasset" element={<ModifyAsset />} />
                <Route path="/fix" element={<FixPage />} />
              </Route>
            ) : (
              <Route>
                <Route path="/dashboard" element={<Dashboard />} />
                <Route path="/addasset" element={<AddAsset />} />
                <Route path="/modifyasset" element={<ModifyAsset />} />
                <Route path="/fix" element={<FixPage />} />
              </Route>
            )}
          </Route>
        </Route>
      </Routes>

해당 구현 방식의 문제😒

ismodal 과 setIsModal 을 prop으로 넘겨줘서 관리 하다보니 초기값이 false 이기 때문에 다른 컴포넌트에서 로그아웃 버튼을 눌러도 true 로 바뀌고 다시 false 로 바뀜.'

• [x]