Feat/profile builder

[dasosann]

PR Type

Enhancement

---

Description

• 다단계 프로필 빌더 화면 구현 (전공, 성별, MBTI, 연락빈도)

• 관심사 선택 페이지 추가 (최대 10개 선택 가능)

• 프로필 데이터 상태 관리 Context 및 localStorage 연동

• FormSelect 컴포넌트를 커스텀 드롭다운으로 전환

---

Diagram Walkthrough

flowchart LR
  A["프로필 빌더<br/>4단계"] -->|Step1| B["기본정보<br/>전공/학교"]
  A -->|Step2| C["성별 선택"]
  A -->|Step3| D["MBTI 선택"]
  A -->|Step4| E["연락빈도 선택"]
  E -->|다음| F["관심사 선택<br/>최대 10개"]
  F -->|완료| G["ProfileContext<br/>localStorage 저장"]

Loading

File Walkthrough

	Relevant files
Enhancement	20 files options.ts 연도, 대학, 학과, 전공 옵션 생성 함수                                                                    +69/-0    step.ts 단계별 제목 반환 유틸리티 함수                                                                                +14/-0    profileBuilderAction.ts 프로필 데이터 검증 및 변환 서버 액션                                                                        +129/-0  hobbies.ts 6개 카테고리 관심사 데이터 정의                                                                              +104/-0  majors.ts 가톨릭대학교 학과/전공 계층 데이터                                                                            +74/-0    profile.ts 프로필 데이터 타입 및 인터페이스 정의                                                                        +61/-0    globals.css 분홍색 conic 그래디언트 유틸리티 추가                                                                    +19/-0    ScreenHobbySelect.tsx 관심사 선택 화면 구현 (최대 10개)                                                                        +105/-0  page.tsx 관심사 선택 페이지 라우트                                                                                      +5/-0      layout.tsx ProfileProvider 추가 및 레이아웃 통합                                                          +14/-11  ProfileButton.tsx 선택 상태 토글 버튼 컴포넌트                                                                                  +29/-0    ScreenProfileBuilder.tsx 4단계 프로필 빌더 메인 화면 로직                                                                            +161/-0  Step1Basic.tsx 기본정보 입력 (연도, 학교, 학과, 전공)                                                                  +105/-0  Step2Gender.tsx 성별 선택 단계 컴포넌트                                                                                        +46/-0    Step3MBTI.tsx MBTI 4자리 선택 단계 컴포넌트                                                                            +103/-0  Step4ContactFrequency.tsx 연락빈도 선택 단계 컴포넌트                                                                                    +50/-0    page.tsx 프로필 빌더 페이지 라우트                                                                                      +5/-0      FormSelect.tsx 네이티브 select를 커스텀 드롭다운으로 전환                                                              +164/-40 ProgressStepBar.tsx 진행도 표시 바 컴포넌트 신규 추가                                                                            +41/-0    profile-provider.tsx 프로필 상태 관리 Context 및 localStorage 연동                                            +74/-0
Formatting	3 files page.tsx 페이지 형식 통일 (함수형 선언)                                                                              +2/-5      page.tsx 페이지 형식 통일 (함수형 선언)                                                                              +2/-5      page.tsx 함수명 명시화 (HomePage)                                                                              +1/-1
Bug fix	1 files Button.tsx 고정 위치 버튼 중앙 정렬 로직 수정                                                                          +4/-3

---

---

✨ 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 a new multi-step profile builder feature, enabling users to create and update their profiles with details such as birth year, university, major, gender, MBTI, and contact frequency. It establishes a ProfileProvider for client-side profile data management and persistence, and includes several UI component improvements and page refactorings to support this new functionality.

Highlights

• Profile Builder Feature: A new multi-step profile builder UI has been introduced, allowing users to input basic information, gender, MBTI, and contact frequency.
• Profile Context Provider: A ProfileProvider has been added to manage and persist user profile data in localStorage across the application.
• FormSelect Component Enhancements: The FormSelect component was updated to support controlled/uncontrolled states, improve placeholder styling, and replace the lucide-react icon with a custom SVG.
• Layout Integration and Page Refactoring: The ProfileProvider is now integrated into the root layout, and several page components (login, onboarding, home) have been refactored for improved consistency and readability.

Changelog

• app/layout.tsx
  • Replaced ServiceStatusProvider with ProfileProvider in the root layout.
  • Commented out getInitialMaintenanceStatus and ServiceStatusProvider imports and usage.
• app/login/page.tsx
  • Removed unused React import.
  • Refactored the default export from an anonymous arrow function to a named function LoginPage.
• app/onboarding/page.tsx
  • Removed unused React import.
  • Refactored the default export from an anonymous arrow function to a named function OnboardingPage.
• app/page.tsx
  • Refactored the default export from Home to HomePage.
• app/profile-builder/_components/ScreenProfileBuilder.tsx
  • Added a new component for the multi-step profile builder UI.
  • Implemented state management for form steps and selected values.
  • Integrated useProfile hook for profile data management.
  • Included skeleton UI for loading states.
  • Defined logic for generating year, university, department, and major options.
  • Handled form submission with useActionState and navigation between steps.
• app/profile-builder/_components/Step1Basic.tsx
  • Added a component for the first step of the profile builder, handling birth year, university, department, and major selection.
  • Utilized FormSelect for dropdown inputs.
• app/profile-builder/_components/Step2Gender.tsx
  • Added a component for the second step, allowing users to select their gender.
• app/profile-builder/_components/Step3MBTI.tsx
  • Added a component for the third step, enabling users to select their MBTI type.
• app/profile-builder/_components/Step4ContactFrequency.tsx
  • Added a component for the fourth step, allowing users to select their preferred contact frequency.
• app/profile-builder/page.tsx
  • Added a new page component to render the ScreenProfileBuilder.
• components/ui/Button.tsx
  • Modified fixed button positioning to use left: 50%, transform: translateX(-50%), width, and maxWidth for better centering and responsiveness.
• components/ui/FormSelect.tsx
  • Updated to manage internal state for uncontrolled components.
  • Improved placeholder styling for select elements.
  • Changed error border color from border-color-flame-500 to border-color-flame-700.
  • Replaced ChevronDown icon from lucide-react with a custom SVG image.
• components/ui/ProgressStepBar.tsx
  • Added a new component to display progress through multi-step forms.
• lib/actions/profileBuilderAction.ts
  • Added a new server action to handle profile builder form submissions.
  • Implemented basic validation for birth year, department, major, and university.
  • Transformed birth year into a birthDate format.
• lib/constants/majors.ts
  • Added a new file defining majorCategories and universities constants, primarily for '가톨릭대학교' (Catholic University of Korea) and its departments/majors.
• lib/types/profile.ts
  • Added new type definitions for Gender, MBTI, SocialType, ContactFrequency, ProfileData, and ProfileSubmitData to structure user profile information.
• providers/profile-provider.tsx
  • Added a new React context provider (ProfileProvider) to manage and persist ProfileData in localStorage.
  • Included useProfile hook for easy access to profile data and update functions.
• public/global/reverse-triangle.svg
  • Added a new SVG asset for the dropdown arrow icon.

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

안녕하세요. 프로필 빌더 기능 구현 PR에 대한 리뷰입니다. 전반적으로 React 19와 Next.js 16의 최신 기능을 활용하여 Context 기반 상태 관리, 멀티스텝 폼, 서버 액션을 잘 구현하셨습니다. 코드 구조도 좋습니다.

다만, 몇 가지 중요한 수정이 필요합니다. 프로필 빌더 메인 화면에서 진행 상태를 나타내는 ProgressStepBar가 동적으로 업데이트되지 않는 버그가 있습니다. 또한, 가장 중요한 서버 액션에서 gender, mbti 등 여러 폼 필드를 처리하지 않고 있어 데이터가 누락되는 심각한 문제가 있습니다. 이 외에도 코드 스타일 가이드를 준수하고 유지보수성을 높이기 위한 몇 가지 제안 사항을 리뷰 댓글로 남겼습니다. 확인 후 반영 부탁드립니다.

[dasosann]

@gemini-code-assist review

[gemini-code-assist]

Code Review

프로필 빌더 및 관심사 선택 기능 추가에 대한 PR 잘 보았습니다. 전반적으로 다단계 폼과 상태 관리를 위한 구조가 잘 잡혀있습니다. 특히 ProfileProvider를 통해 localStorage와 연동하여 사용자 입력 데이터를 유지하는 부분은 좋은 사용자 경험을 제공할 것입니다.

다만, 몇 가지 개선점을 제안드립니다.

• 아키텍처 일관성: 현재 프로필 빌더는 클라이언트 사이드에서 상태를 관리하고 페이지를 이동시키고 있는데, profileBuilderAction이라는 서버 액션과 폼 제출을 위한 hidden input들이 함께 존재하여 아키텍처가 혼재되어 있습니다. 스타일 가이드에 따라 React 19의 useActionState와 서버 액션을 활용하여 폼 처리를 일관되게 개선하는 것을 권장합니다.
• 코드 스타일: cn 유틸리티를 사용하여 조건부 클래스를 더 깔끔하게 관리할 수 있습니다.
• 컴포넌트 분리 및 접근성: 일부 컴포넌트가 다소 복잡하여 분리가 필요해 보이며, 커스텀 UI 컴포넌트의 웹 접근성을 향상시킬 여지가 있습니다.

자세한 내용은 각 파일에 남긴 주석을 참고해 주세요.

[gemini-code-assist]

커스텀 select 컴포넌트의 웹 접근성(a11y)을 개선할 필요가 있습니다. 스크린 리더 사용자나 키보드만으로 조작하는 사용자를 위해 ARIA 속성을 추가하는 것이 좋습니다.

개선 제안:

1. 트리거 <button>에 aria-haspopup="listbox"와 aria-expanded={isOpen} 속성을 추가합니다.
2. 드롭다운 메뉴 컨테이너(div)에 role="listbox"를 추가하고, 각 옵션 <button>에 role="option"과 aria-selected={currentValue === opt.value}를 추가합니다.
3. 키보드 네비게이션(화살표 키로 옵션 이동, Enter/Space로 선택)을 구현하면 더욱 좋습니다.

이는 웹 표준을 준수하고 모든 사용자에게 동등한 경험을 제공하는 데 중요합니다.

References

1. 웹 접근성(A11y)을 준수해야 합니다. 예를 들어, 이미지에는 alt 속성을, 아이콘 버튼에는 aria-label을 제공하고 키보드 네비게이션이 가능하도록 해야 합니다. ^(link)

[dasosann]

role 은 추가 반영완료