토큰 사용 이유

HTTP의 특성 - 한 번 요청-응답 사이클이 완료되면 연결을 종료(stateless 특성)
따라서 한 번 로그인을 했더라도 로그인이 필요한 공간에서 다시 로그인을 해야함

Token을 활용하면
로그인을 완료하면 token 전달 받음 -> 로그인 필요한 페이지 접속할 때마다 서버에 token보내 로그인했다는 걸 알려주어 다시 로그인 할 필요없음

로그인이 완료되면 localStorage에 토큰 저장

useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const token = urlParams.get("token");
    if (token) {
      localStorage.setItem("token", token);
      navigate("/");
    }
  }, []);

배포한 페이지로 연결되어 있어서 로컬에선 계속 시도해도 로그인이 안됐던것이였다..
배포한 페이지에서 시도하니.. 성공..ㅠ

이제 pick에 연결

export const togglePick = async (id, token) => {
  try {
    const { data } = await apiRoot.post(
      `/api/pick/${id}`,
      { id },
      {
        headers: {
          Authorization: `Bearer ${token}`,
        },
        withCredentials: true,
      }
    );
    return data;
  } catch (error) {
    throw error;
  }
};

const handlerPick = (id) => {
    const token = localStorage.getItem("token");
    if (!token) {
      console.error("No token found");
      return;
    }

    togglePick(id, token)
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.error(error);
      });
  };

https://boardpick-server.store/api/pick/undefined 400 (Bad Request)
보드게임 id값을 가져오지 못함

onClick={(e) => {
            e.stopPropagation();
            handlerPick(id);
          }}

onClick에 id인자를 넣지 않아서 그런거이였다~

해결..!!