Feature#146 Apply 페이지에 STEP Navigation 컴포넌트 구현#147
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @eunwoo-levi, I'm Gemini Code Assist1! 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 significantly enhances the user experience on the application pages by introducing a visual step navigation component. This component guides users through the multi-step application process, improving clarity and reducing potential abandonment by making the current progress and remaining steps transparent.
Highlights
- New Step Navigation Component: I've implemented the
ApplyStepNavigatorcomponent, which visually guides users through the 3-step application process (Application Info, Personal Info, Payment). It clearly distinguishes between current and completed stages using distinct styling and chevron separators, enhancing user understanding of their progress. - Centralized Layout Management: The main
ApplyPagenow centrally manages the application's primary header and the new step navigator. This refactoring involved removing redundant header elements from individual step components (ApplyPayment,ApplyStep1,ApplyStep2), leading to a more consistent and maintainable layout. - Conditional Navigator Display: The step navigator is now conditionally rendered. It appears only during the initial application steps (
apply-step1,apply-step2) and is hidden on the payment, success, or failure pages, aligning with the specified user experience requirements. - Improved Navigation Logic: On the Kakao authentication callback page, I've updated the navigation logic to use Next.js's
useRouterfor programmatic redirection. This replaces directwindow.location.hrefassignments, offering better integration with the Next.js routing system and more control over navigation. - Development Tooling Cleanup: I've removed the
ReactQueryDevtoolsimport from themosu-adminapplication's main entry point (App.tsx). This is a minor cleanup to streamline the development environment for the admin panel.
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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| 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 issue 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 is currently in preview and 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 to provide feedback.
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
-
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. ↩
📝 추가 및 변경된 파일총 7개 파일 변경 |
✅ Mosu Admin 빌드가 성공적으로 완료되었습니다!📋 빌드 결과
🚀 다음 단계코드 리뷰 후 머지하면 프로덕션에 배포됩니다. |
There was a problem hiding this comment.
Code Review
The pull request introduces a step navigator for the application process. The code is well-structured, centralizing the header logic and cleaning up individual step components. Consider eliminating duplicated constants, making the navigator component more data-driven, replacing hardcoded colors with theme variables, and strengthening the logic for conditionally displaying the navigator.
|
|
||
| import { cn } from "@/shared/lib/utils"; | ||
|
|
||
| const applySteps = ["apply-step1", "apply-step2", "apply-payment"] as const; |
There was a problem hiding this comment.
The applySteps constant is defined locally here, but a more complete version already exists in src/features/apply/constants/steps.ts. This duplication can lead to maintenance problems. To ensure a single source of truth, import the steps from the central constants file.
| <ul className="flex h-[48px] w-full items-center justify-between text-sm font-semibold"> | ||
| <ApplyStepNavigatorItem | ||
| index={1} | ||
| label="응시 정보" | ||
| active={stepIndex >= 1} | ||
| /> | ||
|
|
||
| <ApplyStepNavigatorDecorator active={stepIndex >= 2} /> | ||
| <ApplyStepNavigatorItem | ||
| index={2} | ||
| label="개인 정보" | ||
| active={stepIndex >= 2} | ||
| /> | ||
|
|
||
| <ApplyStepNavigatorDecorator active={stepIndex >= 3} /> | ||
| <ApplyStepNavigatorItem | ||
| index={3} | ||
| label="결제" | ||
| active={stepIndex >= 3} | ||
| /> | ||
| </ul> |
There was a problem hiding this comment.
The JSX for rendering the steps is repetitive. Consider a data-driven approach to improve maintainability. Define an array of step configurations and map over it to render the ApplyStepNavigatorItem and ApplyStepNavigatorDecorator components.
const stepConfigs = [
{ index: 1, label: "응시 정보" },
{ index: 2, label: "개인 정보" },
{ index: 3, label: "결제" },
];
return (
<nav>
<ul className="flex h-[48px] w-full items-center justify-between text-sm font-semibold">
{stepConfigs.map((config, i) => (
<React.Fragment key={config.index}>
<ApplyStepNavigatorItem
index={config.index}
label={config.label}
active={stepIndex >= config.index}
/>
{i < stepConfigs.length - 1 && (
<ApplyStepNavigatorDecorator active={stepIndex >= config.index + 1} />
)}
</React.Fragment>
))}
</ul>
</nav>
);| active | ||
| ? "bg-[#0080FF] text-white" | ||
| : "bg-[#F5F5F5] text-[#909090]", | ||
| )} |
There was a problem hiding this comment.
Hardcoded hex color values are used in this component. Define these colors in your Tailwind CSS theme configuration and reference them by their semantic names for better maintainability and visual consistency.
| const { Funnel, Step, useStep } = useFunnel(applySteps); | ||
| const { step, setStep } = useStep(); | ||
|
|
||
| const shouldShowNavigator = applySteps.slice(0, -2).includes(step as (typeof applySteps)[number]); |
There was a problem hiding this comment.
Using slice(0, -2) to determine which steps should show the navigator is brittle. Explicitly define the steps where the navigator should be hidden for a more robust approach.
const shouldShowNavigator = !["apply-payment-success", "apply-payment-fail"].includes(step as (typeof applySteps)[number]);
📚 Storybook이 Chromatic에 배포되었습니다!
|
2 participants
✅ Linked Issue
🔍 What I did
ApplyStepNavigator컴포넌트 구현-2. Apply 페이지 레이아웃 통합
각 Step 컴포넌트에서 중복된 헤더 제거
메인 페이지에서 헤더와 네비게이터 통합 관리
결제 완료/실패 페이지에서는 네비게이터 숨김 처리
💡 Why I did it
사용자 경험 개선: 현재 어느 단계에 있는지, 앞으로 몇 단계가 남았는지 명확하게 알 수 있어 사용자의 불안감을 줄이고 완주율을 높일 수 있습니다.
진행률 시각화: 다단계 폼에서 가장 중요한 것은 사용자가 전체 과정을 파악하고 현재 위치를 인지하는 것입니다. 이를 통해 중도 이탈률을 줄일 수 있습니다.
스크린샷
추가 내용
이전 PR에서 반영되지 않은 피드백 반영하였습니다.
commit: 747f299