로그인 권한 확인 모달 컴포넌트, 구글 로그인 성공 시 리다이렉션 경로로 이동하도록 수정

[lgm1007]

작업 사항

1. 로그인 권한 확인용 Auth 모달 추가
2. 좋아요 및 댓글 작성 시 로그인 상태가 아닌 경우 Auth 모달 띄우도록 수정
3. 로그인 페이지에서 next 경로가 있는 경우 구글 로그인 시, 로그인 성공 후 next 경로로 리다이렉션 이동하도록 수정

[gemini-code-assist]

Summary of Changes

Hello @lgm1007, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 사용자 인증 흐름을 개선하고 비로그인 사용자를 위한 경험을 향상시키는 데 중점을 둡니다. 이제 사용자가 좋아요를 누르거나 댓글을 작성하는 등 인증이 필요한 작업을 시도할 때, 로그인 페이지로 즉시 이동시키는 대신 친숙한 모달을 통해 로그인 필요성을 알립니다. 또한, 로그인 성공 시 사용자가 원래 의도했던 페이지로 자동으로 이동하도록 하여 전반적인 사용자 여정을 더욱 원활하게 만듭니다.

Highlights

• 새로운 AuthModal 컴포넌트 추가: 로그인 권한 확인을 위한 AuthModal 컴포넌트가 새로 추가되었습니다.
• 인증 필요 시 모달 사용: 좋아요 및 댓글 작성 시 비로그인 상태일 경우, alert 대신 AuthModal을 띄우도록 변경되었습니다.
• 로그인 후 리다이렉션 경로 개선: 로그인 성공 후 next 쿼리 파라미터로 지정된 경로로 리다이렉션되도록 LoginForm의 동작이 개선되었습니다.

Changelog

• src/app/login/components/LoginForm.tsx
  • useSearchParams 훅을 추가하여 URL에서 next 파라미터를 읽어오도록 했습니다.
  • 이메일/비밀번호 로그인 및 구글 OAuth 로그인 성공 시, next 파라미터에 지정된 경로로 리다이렉션되도록 수정했습니다.
  • 구글 OAuth redirectTo URL에 next 파라미터를 포함하도록 변경했습니다.
• src/components/AuthModal.tsx
  • 새로운 AuthModal 컴포넌트를 추가했습니다. 이 모달은 사용자에게 로그인이 필요함을 알리고, 로그인 페이지로 이동하거나 모달을 닫는 옵션을 제공합니다.
• src/components/list/CommentSection.tsx
  • 로그인 상태 확인 로직을 수정하여, 비로그인 시 alert 대신 AuthModal을 표시하도록 변경했습니다.
  • AuthModal 컴포넌트를 임포트하고 상태를 관리하는 isAuthModalOpen 스테이트를 추가했습니다.
• src/components/list/LikeButton.tsx
  • 로그인 상태 확인 로직을 수정하여, 비로그인 시 alert 대신 AuthModal을 표시하도록 변경했습니다.
  • AuthModal 컴포넌트를 임포트하고 상태를 관리하는 isAuthModalOpen 스테이트를 추가했습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This Pull Request improves user experience by adding a login authorization check modal component and modifying Google login success to redirect to the next path. It also ensures AuthModal is displayed for unauthenticated users attempting actions like liking or commenting, providing a smoother authentication flow. While the changes are generally well-implemented and meet functional requirements, a medium-severity Open Redirect vulnerability was identified in the LoginForm component. This vulnerability arises from the next parameter being used for redirection after email login without proper validation. Other components, including the Google OAuth flow and new modal components, appear to handle data safely.