[#82] feat: login page 구현

[halionaz]

❗ 연관 이슈

• 로그인 화면 만들기 #82

📌 내용

• 짜잔 로그인창을 만들었음
  • 애플 로그인은 구현이 안되어있기도 하고 디자인 조건이 매우매우 까다로워서 일단은 안 만들고 남겨뒀어요
• 로그인이 필요한 페이지에 들어가면 로그인 화면으로 보내주게 되어있음 (AuthGuard 라우팅 이용해서)

☑️ 체크 사항 & 논의 사항

• 로그인 안되어있는 상태일 때

  • 게시글 작성하려고 하거나, Pick 페이지 접속 시 로그인 창으로 잘 보내주는지

• 로그인 되어있는 상태일 때

  • 게시글 작성과 Pick 페이지 접속이 잘 되는지
  • /login 경로로 접속이 안되는지 ! (중요)

• 여전히 카카오 / 구글 리다이렉션 링크가 배포나가있는 url로 되어있어서 로그인 후엔 다시 localhost로 돌아오셔야 합니다

🤔 아직 해야될거 (후속 PR 올릴게연)

• 로그인 창에서 뒤로가기 버튼 지원
• 로그인 한담에 원래 하던 일로 돌아가는 기능

[Copilot]

Pull Request Overview

This PR implements the login page with OAuth flows and adds an authentication guard for protected routes.

• Introduces a login page styled with styled-system and OAuth links for Google and Kakao
• Updates routing to include /login and wraps protected pages under AuthGuard
• Adds useGetIsLogin hook, AuthGuard component, and SVG logo assets

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
vite.config.ts	Removed trailing slash from base path
src/pages/routes.tsx	Added /login route and wrapped protected routes with AuthGuard
src/pages/LoginPage/style.css.ts	Defined styled-system CSS tokens and variants for login UI
src/pages/LoginPage/index.tsx	Login page logic with auth status check and navigation
src/libs/assets/GoogleLogo.tsx	Added Google login SVG component
src/libs/assets/KakaoLogo.tsx	Added Kakao login SVG component
src/common/hooks/apis/useGetIsLogin.ts	Set staleTime: 0 to always revalidate login status
src/common/components/AuthGuard/index.tsx	Added AuthGuard to redirect unauthenticated users

Comments suppressed due to low confidence (3)

src/pages/routes.tsx:6

• [nitpick] The import name 'PostPage' does not match the file name 'PostPages'; rename one for consistency (e.g., import PostPages or rename the file).

import PostPage from './PostPages';

src/common/components/AuthGuard/index.tsx:1

• AuthGuard's redirect and outlet-rendering logic is not covered by any tests; consider adding unit or integration tests to verify both allowed and blocked access flows.

import useGetIsLogin from '@/common/hooks/apis/useGetIsLogin';

src/pages/LoginPage/index.tsx:1

• LoginPage's loading state and redirect behavior lack test coverage; add tests to confirm the UI while loading and the navigate logic when already logged in.

import { useEffect } from 'react';

[Copilot]

[nitpick] Using navigate(-1) can lead to unexpected navigation loops or unclear fallback targets; consider capturing the original location in state and redirecting there explicitly.

Suggested change

	useEffect(() => {
	// TODO: 원래 있던 페이지로
	if (isLogin) {
	navigate(-1);
	useEffect(() => {
	// Store the original location when navigating to the login page
	const originalLocation = window.location.pathname;
	sessionStorage.setItem('originalLocation', originalLocation);
	}, []);
	useEffect(() => {
	// Redirect to the original location after login
	if (isLogin) {
	const originalLocation = sessionStorage.getItem('originalLocation') || '/';
	navigate(originalLocation);

[halionaz]

넵

[jw0202058]

좋네요