[FE] occupied status에 따른 페이지 전환 이슈 해결

[Seohyoung]

- 이슈 사항
첫 화면에서 팀 이름 클릭 시 occupied status 체크 후 화면 전환 시 link / redirect / history 중 무엇을 적용할지, 어떻게 적용할 지 검토

- 선택한 솔루션
팀 이름 onClick 시 setID 이후 들어오는 error2 의 true/false 여부에 따라 history 스택에 /defense/${id} 링크를 push한다.

  const [currentID, setID] = useState(null);
  const [occupiedState, loadingOccupiedState, error2] = useFetch(
    'patch',
    'initData',
    currentID
  );
  const history = useHistory();

  const onClick = useCallback(
    async id => {
      await setID(id);
      if (!error2) {
        history.push(`/defense/${id}`);
      }
    },
    [history]
  );

  const Lists = () => {
    return ...
          <TeamName
            onClick={() => {
              onClick(team.id);
            }}
          >
            {team.homeTeam.teamName}
          </TeamName>
             ...
    ));
  };

- 기존 redirect 방식을 선택하지 않은 이유
reactrouter에서 확인할 수 있는 바와 같이, redirect를 사용하는 경우 아래처럼 Route를 사용하는 층위에서 redirect하는 링크를 명시해야 함.
따라서 이 방법을 선택하면 링크를 부모 컴포넌트에서 useState를 선언해 상태값을 전달하는 식으로 진행하는 불편함이 있을 것으로 사료됨.

<Route exact path="/">
  {loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}
</Route>

- reference
React-router: How to manually invoke Link?

상기 변경사항은 FE/fixError 에 푸쉬 완료했습니다.
감사합니다.