로그인 기능 라이브러리화

🔐 일반적인 로그인 처리 방식

보통 로그인 시 발급받은 토큰(accessToken, refreshToken)은 로컬 스토리지(LocalStorage)에 저장됩니다.
하지만 외부 서비스에서 로그인 페이지를 불러와 사용하는 경우,
해당 페이지의 로컬 스토리지에 접근하기 어려워 토큰을 사용할 수 없습니다.

---

🔁 해결 방법: 토큰을 URL 쿼리 파라미터로 전달

외부 서비스에서 로그인 후 토큰을 전달할 수 있도록
accessToken 값을 URL 쿼리 파라미터로 넘기는 방식으로 처리했습니다.

?accessToken={발급받은_토큰값}

---

✅ 실제 적용 코드 예시

const handleClickLogin = async () => {
  if (validateAll('before')) {
    try {
      const loginResult = await fetchEmailLogin({
        email,
        password,
      });

      const { accessToken, refreshToken } = loginResult.data;
      const agreement = await getAgreement(accessToken);
      const queries = createSearchParams();

      // 외부 서비스에서 호출된 경우 (plugin)
      if (getParam('from') === 'plugin') {
        queries.append('accessToken', accessToken);
        const redirect = window.localStorage.getItem('__redirect__');
        location.href = `${redirect || '/'}?${queries.toString()}`;
        return;
      } else {
        // 일반 로그인 흐름
        if (agreement.code === 1) {
          // 로그인 성공 처리
          ...
        } else {
          // 약관 동의 필요
          ...
        }
      }
    } catch (error: any) {
      // 예외 처리
      ...
    }
  }
};

---

📌 사용한 유틸: createSearchParams

createSearchParams는 React Router에서 제공하는 훅으로, 쿼리 스트링을 쉽게 생성하고 페이지 이동 시 사용할 수 있습니다.