Feat/onboarding

[dasosann]

PR Type

Enhancement, Bug fix

---

Description

• 로그인 후 백엔드 리다이렉트 URL 처리 및 쿠키 설정 구현

• 드롭다운 Input 컴포넌트(FormSelect) 신규 추가

• 온보딩 시작 화면에 세 번째 애니메이션 메시지 및 네비게이션 추가

• 로그인 폼 에러 메시지 동적 표시로 개선

---

Diagram Walkthrough

flowchart LR
  A["로그인 요청"] -->|"쿠키 파싱 및 설정"| B["쿠키 저장"]
  A -->|"리다이렉트 URL 추출"| C["페이지 이동"]
  D["FormSelect 컴포넌트"] -->|"옵션/옵션그룹 지원"| E["드롭다운 UI"]
  F["온보딩 시작 화면"] -->|"3단계 애니메이션"| G["프로필 빌더로 이동"]

Loading

File Walkthrough

	Relevant files
Enhancement	loginAction.ts 로그인 후 쿠키 설정 및 리다이렉트 처리                                                                      lib/actions/loginAction.ts 백엔드 응답에서 finalUrl과 setCookie 추출하여 처리 Set-Cookie 헤더를 파싱하여 Next.js 쿠키 스토어에 저장 리다이렉트 URL을 추출하고 상대 경로로 변환 후 리다이렉트 실행 에러 메시지를 동적으로 반환하도록 개선 +58/-1    server-api.ts 리다이렉트 및 쿠키 처리 API 응답 구조 개선                                                              lib/server-api.ts Axios 설정에 maxRedirects: 0 추가로 자동 리다이렉트 비활성화 302 상태 코드를 성공으로 간주하도록 validateStatus 설정 API 응답 타입을 ApiResponse로 정의하여 finalUrl과 setCookie 포함 응답 헤더에서 Location과 Set-Cookie 추출하여 반환 성공 로그 추가로 디버깅 개선 +26/-4    StartOnBoarding.tsx 온보딩 애니메이션 및 라우팅 기능 추가                                                                        app/onboarding/_components/StartOnBoarding.tsx 세 번째 애니메이션 메시지(showThird) 상태 추가 버튼 활성화 타이밍을 세 번째 메시지 애니메이션 완료 후로 변경 버튼 클릭 시 /profile-builder 페이지로 네비게이션 추가 useRouter 훅 추가로 클라이언트 라우팅 구현 +19/-2    FormSelect.tsx FormSelect 드롭다운 컴포넌트 신규 추가                                                              components/ui/FormSelect.tsx 드롭다운 Input 컴포넌트 신규 생성 단일 옵션과 옵션 그룹(optgroup) 모두 지원 타입 가드 함수로 옵션 그룹 구분 처리 에러 상태 스타일링 및 placeholder 색상 처리 포함 Chevron 아이콘으로 드롭다운 시각화 +103/-0
Bug fix	LoginForm.tsx 로그인 폼 에러 메시지 동적 표시                                                                              app/login/_components/LoginForm.tsx 에러 메시지를 하드코딩된 문자열에서 state.message로 변경 백엔드에서 받은 동적 에러 메시지 표시 가능하도록 개선 +1/-1

---

---

✨ Describe tool usage guide:

---

Overview:
The describe tool scans the PR code changes, and generates a description for the PR - title, type, summary, walkthrough and labels. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.

When commenting, to edit configurations related to the describe tool (pr_description section), use the following template:

/describe --pr_description.some_config1=... --pr_description.some_config2=...

With a configuration file, use the following template:

[pr_description]
some_config1=...
some_config2=...

Enabling\disabling automation When you first install the app, the default mode for the describe tool is: pr_commands = ["/describe", ...] meaning the describe tool will run automatically on every PR. Markers are an alternative way to control the generated description, to give maximal control to the user. If you set: pr_commands = ["/describe --pr_description.use_description_markers=true", ...] the tool will replace every marker of the form pr_agent:marker_name in the PR description with the relevant content, where marker_name is one of the following: type: the PR type. summary: the PR summary. walkthrough: the PR walkthrough. diagram: the PR sequence diagram (if enabled). Note that when markers are enabled, if the original PR description does not contain any markers, the tool will not alter the description at all.

Custom labels The default labels of the describe tool are quite generic: [Bug fix, Tests, Enhancement, Documentation, Other]. If you specify custom labels in the repo's labels page or via configuration file, you can get tailored labels for your use cases. Examples for custom labels: Main topic:performance - pr_agent:The main topic of this PR is performance New endpoint - pr_agent:A new endpoint was added in this PR SQL query - pr_agent:A new SQL query was added in this PR Dockerfile changes - pr_agent:The PR contains changes in the Dockerfile ... The list above is eclectic, and aims to give an idea of different possibilities. Define custom labels that are relevant for your repo and use cases. Note that Labels are not mutually exclusive, so you can add multiple label categories. Make sure to provide proper title, and a detailed and well-phrased description for each label, so the tool will know when to suggest it.

Inline File Walkthrough 💎 For enhanced user experience, the describe tool can add file summaries directly to the "Files changed" tab in the PR page. This will enable you to quickly understand the changes in each file, while reviewing the code changes (diffs). To enable inline file summary, set pr_description.inline_file_summary in the configuration file, possible values are: 'table': File changes walkthrough table will be displayed on the top of the "Files changed" tab, in addition to the "Conversation" tab. true: A collapsable file comment with changes title and a changes summary for each file in the PR. false (default): File changes walkthrough will be added only to the "Conversation" tab.

Utilizing extra instructions The describe tool can be configured with extra instructions, to guide the model to a feedback tailored to the needs of your project. Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Notice that the general structure of the description is fixed, and cannot be changed. Extra instructions can change the content or style of each sub-section of the PR description. Examples for extra instructions: [pr_description] extra_instructions="""- The PR title should be in the format: '<PR type>: <title>' - The title should be short and concise (up to 10 words) - ... """ Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.

More PR-Agent commands To invoke the PR-Agent, add a comment using one of the following commands: /review: Request a review of your Pull Request. /describe: Update the PR title and description based on the contents of the PR. /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback. /ask <QUESTION>: Ask a question about the PR. /update_changelog: Update the changelog based on the PR's contents. /help_docs <QUESTION>: Given a path to documentation (either for this repository or for a given one), ask a question. /add_docs 💎: Generate docstring for new components introduced in the PR. /generate_labels 💎: Generate labels for the PR based on the PR's contents. /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component. See the tools guide for more details. To list the possible configuration parameters, add a /config comment.

See the describe usage page for a comprehensive guide on using this tool.

[gemini-code-assist]

Summary of Changes

Hello @dasosann, 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!

This pull request introduces foundational improvements for user onboarding and authentication. It refines the login process to correctly manage server-side redirects and cookies, ensuring a seamless transition post-login. Additionally, it enhances the initial onboarding experience with a guided flow and provides a new, versatile UI component for future form development, laying the groundwork for a more interactive and user-friendly application setup.

Highlights

• Enhanced Login Authentication: The login action (loginAction.ts) has been significantly upgraded to handle server-side redirects and properly set cookies received from the backend, ensuring a more robust and secure authentication flow.
• Streamlined Onboarding Experience: The StartOnBoarding component now features an extended animation sequence and automatically redirects users to the /profile-builder page upon completion, guiding new users through their initial setup more effectively.
• New Reusable UI Component: A new FormSelect component has been introduced, providing a flexible and styled dropdown input that supports both single options and grouped options, ready for use in various forms, including profile creation.
• Improved API Client Configuration: The server-api client has been configured to explicitly handle HTTP 302 redirects without automatically following them and to extract set-cookie headers, which is crucial for managing session state and redirect logic on the server.

Changelog

• app/login/_components/LoginForm.tsx
  • Updated error message display to dynamically show the state.message.
• app/onboarding/_components/StartOnBoarding.tsx
  • Added useRouter hook for navigation.
  • Introduced showThird state and corresponding timeout for an extended animation sequence.
  • Added a third animated message span to the onboarding flow.
  • Implemented an onClick handler on the button to redirect to /profile-builder.
• components/ui/FormSelect.tsx
  • Added a new FormSelect component for creating customizable select dropdowns.
  • Included support for SelectOption and SelectOptionGroup types.
  • Implemented styling for placeholder text, error states, and a custom dropdown arrow icon.
• lib/actions/loginAction.ts
  • Imported redirect from next/navigation.
  • Implemented logic to parse and set set-cookie headers received from the backend.
  • Added conditional redirection based on a finalUrl returned from the API response.
• lib/server-api.ts
  • Configured axios client with maxRedirects: 0 to prevent automatic redirection following.
  • Updated validateStatus to consider HTTP 302 as a successful status.
  • Modified the request function to return finalUrl and setCookie headers in the ApiResponse type.
  • Updated the catch block in the response interceptor to remove the reissueError variable.

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 focuses on improving login form error handling, refining onboarding page animation logic, and enhancing login functionality with Next.js Server Actions and cookie handling. A medium-severity open redirect vulnerability in the loginAction function, stemming from improper handling of the finalUrl, has been identified. It is highly recommended to implement robust validation for redirect URLs to mitigate potential phishing risks. General feedback is also provided to ensure adherence to Next.js 16 and React 19 best practices.

[dasosann]

@gemini-code-assist review

[gemini-code-assist]

Code Review

This pull request introduces improvements such as a new FormSelect component and refactoring of the useVerifyEmail hook. However, several areas require attention. A critical security vulnerability has been identified in the login redirection logic, where URL sanitization can be bypassed, potentially leading to Open Redirect attacks. It is recommended to strengthen URL validation. Further suggestions include refining animation timing by using named constants, strengthening cookie parsing logic to prevent potential bugs, ensuring consistent styling by using theme-defined colors instead of hardcoded hex values, and separating responsibilities of validation functions for improved maintainability and adherence to the Single Responsibility Principle.

[gemini-code-assist]

text-[#B3B3B3]와 같이 하드코딩된 색상 값은 테마와의 일관성을 해치고 유지보수를 어렵게 만듭니다. 스타일 가이드(69번 라인)에 따라 tailwind.config.js에 정의된 테마 색상(예: text-gray-400 또는 text-color-text-caption2)을 사용하는 것을 권장합니다.

Suggested change

	!rest.value && "text-[#B3B3B3]", // placeholder 색상 처리
	!rest.value && "text-gray-400", // placeholder 색상 처리

References

1. 스타일링 시 Tailwind Utility Class 사용을 우선하고, 조건부 스타일링은 clsx나 tailwind-merge (또는 cn 유틸리티) 사용을 권장합니다. 이 경우 하드코딩된 hex 값 대신 테마에 정의된 유틸리티 클래스를 사용하는 것이 좋습니다. ^(link)