[FE] feat: 로그인 쿠키 테스트 환경 구축 & 구글 로그인 기능 추가

[d0422]

PR 설명

로그인 쿠키 테스트 환경 구축 & 구글 로그인 기능 추가

✅ 완료한 기능 명세

• Vite Proxy Server를 사용한 쿠키 테스트 환경 구축
• 구글 로그인 버튼 기능구현

📸 스크린샷

고민과 해결과정

same-site를 극복하기 위하여...

쿠키의 same-site
우리의 쿠키 설정은 same-site: lax, httpOnly, secure옵션을 사용중이다.
이런 상태에서 개발환경 쿠키테스트를 하기란 쉬운 일이 아니었다.

곰터뷰 팀의 도움을 받아 해결할 수 있었는데,

로컬 -> dev server -> 백엔드 서버

형태로 쿠키를 전달해 dev server(localhost:3000)가 쿠키를 전달하는 형태로 해결했다!

vite의 proxy서버를 활용하여 개발 환경에서 쿠키가 필요한 요청에 대해서 localhost로 요청을 보내주고, 이걸 dev server가 실제 서버로 요청해주어서 쿠키의 same-site속성을 우회해주었다.

  server: {
    proxy: {
      '/codes': { //로컬에 대한 codes요청을
        target: 'https://api.algoitni.site', //여기로 변경시켜라
        changeOrigin: true,
      },
    },
  },

그리고 Login Modal에서 handleClick을 배포환경, 서버환경에 따라 분기해주었다.

export default function LoginModal({ code }: { code: string }) {
  const handleClick = async () => {
    if (MODE === 'development') {
      const token = await getDevCookie();
      document.cookie = `access_token=${token};`;
    }
    localStorage.setItem('code', code);
  };