Merge pull request #147 from mosu-dev/feat#146

Feature#146 Apply 페이지에 STEP Navigation 컴포넌트 구현

Author: eunwoo-levi

mosu-admin/src/App.tsx

@@ -1,5 +1,4 @@
 import { RouterProvider } from "react-router";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { router } from "@/routes";
 import ErrorBoundary from "@/common/ui/ErrorBoundary";
 import { QueryProvider } from "@/common/lib/queryProvider";

mosu-app/src/features/apply/ui/ApplyStepNavigator.tsx

@@ -0,0 +1,72 @@
+import { ChevronRight } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+
+const applySteps = ["apply-step1", "apply-step2", "apply-payment"] as const;
+
+export const ApplyStepNavigator = ({ step }: { step: string }) => {
+    const stepIndex = applySteps.indexOf(step as (typeof applySteps)[number]) + 1;
+
+    return (
+        <nav>
+            <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>
+        </nav>
+    );
+};
+
+const ApplyStepNavigatorItem = ({
+    index,
+    label,
+    active,
+}: {
+    index: number;
+    label: string;
+    active: boolean;
+}) => {
+    return (
+        <li className="flex items-center gap-2">
+            <div
+                className={cn(
+                    "flex h-6 w-6 items-center justify-center rounded-full text-xs",
+                    active
+                        ? "bg-[#0080FF] text-white"
+                        : "bg-[#F5F5F5] text-[#909090]",
+                )}
+            >
+                {index}
+            </div>
+            <span className={cn(active ? "text-[#0080FF]" : "text-[#909090]")}>
+                {label}
+            </span>
+        </li>
+    );
+};
+
+const ApplyStepNavigatorDecorator = ({ active }: { active: boolean }) => {
+    return (
+        <ChevronRight
+            size={16}
+            className={cn(active ? "text-[#0080FF]" : "text-[#909090]")}
+        />
+    );
+};

mosu-app/src/pages/apply/index.tsx

@@ -1,5 +1,6 @@
 import { applySteps } from "@/features/apply/constants/steps";
 import { ApplyContextProvider } from "@/features/apply/contexts/ApplyContext";
+import { ApplyStepNavigator } from "@/features/apply/ui/ApplyStepNavigator";
 
 import { ApplyPayment } from "@/widgets/apply/ApplyPayment";
 import { ApplyPaymentFail } from "@/widgets/apply/ApplyPaymentFail";
@@ -13,8 +14,16 @@ export default function ApplyPage() {
     const { Funnel, Step, useStep } = useFunnel(applySteps);
     const { step, setStep } = useStep();
 
+    const shouldShowNavigator = applySteps.slice(0, -2).includes(step as (typeof applySteps)[number]);
+
     return (
         <div>
+            {shouldShowNavigator && (
+                <header className="mb-18">
+                    <h1 className="my-20 text-center text-[2.5rem] font-bold">모의수능 신청</h1>
+                    <ApplyStepNavigator step={step} />
+                </header>
+            )}
             <Funnel>
                 <Step name="apply-step1">
                     <ApplyStep1 useStep={{ step: step as (typeof applySteps)[number], setStep }} />
@@ -23,7 +32,7 @@ export default function ApplyPage() {
                     <ApplyStep2 useStep={{ step: step as (typeof applySteps)[number], setStep }} />
                 </Step>
                 <Step name="apply-payment">
-                    <ApplyPayment />
+                    <ApplyPayment useStep={{ step: step as (typeof applySteps)[number], setStep }} />
                 </Step>
                 <Step name="apply-payment-success">
                     <ApplyPaymentSuccess />

mosu-app/src/pages/auth/kakao/callback.tsx

@@ -1,6 +1,8 @@
 import { useKakaoAuth } from "@/features/auth-signin/hooks/useKakaoAuth";
+import { useRouter } from "next/router";
 
 export default function KakaoCallbackPage() {
+    const router = useRouter();
     const { error, isLoading } = useKakaoAuth({
         redirectTo: "/",
     });
@@ -16,7 +18,7 @@ export default function KakaoCallbackPage() {
                     잠시 후 다시 시도해주세요.
                 </p>
                 <button
-                    onClick={() => window.location.href = "/auth/member/signin"}
+                    onClick={() => router.push("/auth/member/signin")}
                     className="mt-5 px-5 py-2 bg-blue-500 text-white border-none rounded cursor-pointer hover:bg-blue-600 transition-colors"
                 >
                     로그인 페이지로 이동

mosu-app/src/widgets/apply/ApplyPayment.tsx

@@ -21,10 +21,6 @@ export const ApplyPayment = ({
 
     return (
         <div>
-            <header>
-                <h1 className="my-20 text-center text-[2.5rem] font-bold">모의수능 신청</h1>
-            </header>
-
             <PaymentConfirmCard
                 location="대치"
                 date="2025-11-03"

mosu-app/src/widgets/apply/ApplyStep1.tsx

@@ -32,10 +32,6 @@ export const ApplyStep1 = ({
 
     return (
         <div>
-            <header>
-                <h1 className="my-20 text-center text-[2.5rem] font-bold">모의수능 신청</h1>
-            </header>
-
             <InfoCard title="응시료 안내" content={EXAM_FEE_INFO} />
 
             <section>
@@ -85,8 +81,8 @@ export const ApplyStep1 = ({
                                     placeholder="고사장"
                                     options={
                                         EXAM_SCHOOL_NAME[
-                                            state.schools[index]
-                                                .area as keyof typeof EXAM_SCHOOL_NAME
+                                        state.schools[index]
+                                            .area as keyof typeof EXAM_SCHOOL_NAME
                                         ]
                                     }
                                     onValueChange={(value) => {

mosu-app/src/widgets/apply/ApplyStep2.tsx

@@ -26,10 +26,6 @@ export const ApplyStep2 = ({
 }) => {
     return (
         <div>
-            <header>
-                <h1 className="my-20 text-center text-[2.5rem] font-bold">모의수능 신청</h1>
-            </header>
-
             <div className="flex justify-between gap-4">
                 <ProfileImageFileUpload />
                 <div className="flex flex-1 flex-col justify-between">