Feat: 온보딩 UI

package.json

@@ -17,7 +17,7 @@
     ]
   },
   "dependencies": {
-    "@toss/use-funnel": "^1.4.2",
+    "@use-funnel/next": "^0.0.22",
     "axios": "^1.13.2",
     "next": "16.0.10",
     "react": "19.2.1",

src/app/onboarding/page.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import { useState } from "react";
+
+import OnboardingStep from "@/components/onboarding/OnboardingStep";
+import ProgressDots from "@/components/onboarding/ProgressDots";
+
+import {
+  ONBOARDING_STEPS,
+  type OnboardingStepName,
+} from "@/constants/onboardingSteps";
+
+const OnboardingPage = () => {
+  const router = useRouter();
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+
+  const currentStepName = ONBOARDING_STEPS[
+    currentStepIndex
+  ] as OnboardingStepName;
+  const isLastStep = currentStepIndex === ONBOARDING_STEPS.length - 1;
+
+  const goNext = () => {
+    const nextIndex = currentStepIndex + 1;
+
+    if (nextIndex >= ONBOARDING_STEPS.length) {
+      if (typeof window !== "undefined") {
+        localStorage.setItem("onboardingDone", "true");
+      }
+      router.push("/onboarding/profile");
+      return;
+    }
+
+    setCurrentStepIndex(nextIndex);
+  };
+
+  return (
+    <section className="flex min-h-dvh justify-center">
+      <div className="relative mt-[73px] flex h-full flex-col">
+        <div className="z-10">
+          <ProgressDots
+            total={ONBOARDING_STEPS.length}
+            current={currentStepIndex}
+          />
+        </div>
+
+        <OnboardingStep
+          stepName={currentStepName}
+          isLastStep={isLastStep}
+          onNext={goNext}
+        />
+      </div>
+    </section>
+  );
+};
+
+export default OnboardingPage;

src/app/onboarding/profile/page.tsx

@@ -0,0 +1,6 @@
+import OnboardingProfileClient from "@/components/onboarding/OnboardingProfile";
+
+const OnboardingProfilePage = () => {
+  return <OnboardingProfileClient />;
+};
+export default OnboardingProfilePage;

src/app/page.tsx

@@ -1,3 +1,3 @@
-export default function Home() {
-  return <div>홈화면</div>;
+export default function HomePage() {
+  return <div>홈 화면</div>;
 }

src/app/signup/agree/page.tsx

@@ -9,36 +9,14 @@ import { Checkbox } from "@/components/common/Checkbox";
 import { FullButton } from "@/components/common/FullButton";
 import { PageTitle } from "@/components/common/PageTitle";
 
-type AgreementKey =
-  | "service" // 심톡 이용약관 동의 (필수)
-  | "finance" // 전자금융거래 이용약관 동의 (필수)
-  | "personalReq" // 개인정보 수집 이용 동의 (필수)
-  | "personalOpt1" // 개인정보 수집 이용 동의 (선택)
-  | "personalOpt2" // 개인정보 수집 이용 동의 (선택)
-  | "marketing"; // 마케팅 정보 수신 동의 (선택)
+import { AGREEMENTS, INITIAL_AGREEMENTS } from "@/constants/agreement";
 
-const AGREEMENTS: { key: AgreementKey; label: string }[] = [
-  { key: "service", label: "심톡 이용약관 동의 (필수)" },
-  { key: "finance", label: "전자금융거래 이용약관 동의 (필수)" },
-  { key: "personalReq", label: "개인정보 수집 이용 동의 (필수)" },
-  { key: "personalOpt1", label: "개인정보 수집 이용 동의 (선택)" },
-  { key: "personalOpt2", label: "개인정보 수집 이용 동의 (선택)" },
-  { key: "marketing", label: "마케팅 정보 메일, SNS수신동의 (선택)" },
-];
-
-const initialAgreements: Record<AgreementKey, boolean> = {
-  service: false,
-  finance: false,
-  personalReq: false,
-  personalOpt1: false,
-  personalOpt2: false,
-  marketing: false,
-};
+import type { AgreementKey } from "@/types/agreement.type";
 
 const AgreePage = () => {
   const router = useRouter();
   const [agreements, setAgreements] =
-    useState<Record<AgreementKey, boolean>>(initialAgreements);
+    useState<Record<AgreementKey, boolean>>(INITIAL_AGREEMENTS);
 
   const isConfirmActive =
     agreements.service && agreements.finance && agreements.personalReq;

src/app/signup/password/page.tsx

@@ -134,7 +134,7 @@ const SettingPage = () => {
           <div className="mt-[320px] flex w-full justify-center">
             <FullButton
               isActive={isPasswordConfirmValid}
-              onClick={() => router.push("/login")}
+              onClick={() => router.push("/onboarding")}
             >
               완료
             </FullButton>

src/components/common/AlertModal.tsx → src/components/common/LoadingModal.tsx

@@ -1,25 +1,33 @@
 "use client";
 
-type AlertModalProps = {
+import { ALERT_BACKDROP_CLASS, AlertBackdrop } from "@/constants/alert";
+
+interface LoadingModalProps {
   isOpen: boolean;
   title: string;
-  message: string;
+  message?: string;
   confirmLabel?: string;
   onClose: () => void;
-};
+  backdrop?: AlertBackdrop;
+  isLoading?: boolean;
+}
 
-export const AlertModal = ({
+const LoadingModal = ({
   isOpen,
   title,
   message,
   confirmLabel = "확인",
   onClose,
-}: AlertModalProps) => {
+  backdrop = "default",
+  isLoading = false,
+}: LoadingModalProps) => {
   if (!isOpen) return null;
 
   return (
     <div
-      className="bg-dim-02 fixed inset-0 z-50 flex items-center justify-center"
+      className={`fixed inset-0 z-50 flex items-center justify-center ${
+        ALERT_BACKDROP_CLASS[backdrop]
+      }`}
       onClick={onClose}
     >
       <div
@@ -31,7 +39,15 @@ export const AlertModal = ({
         </div>
 
         <div className="flex items-center justify-center px-[10px] py-[7px]">
-          <p className="text-sub2-r text-neutral-01 text-center">{message}</p>
+          {isLoading ? (
+            <span className="loader" />
+          ) : (
+            message && (
+              <p className="text-sub2-r text-neutral-01 text-center">
+                {message}
+              </p>
+            )
+          )}
         </div>
 
         <div className="flex w-full">
@@ -47,3 +63,5 @@ export const AlertModal = ({
     </div>
   );
 };
+
+export default LoadingModal;

src/components/common/NameInput.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+interface NameInputProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+const PLACEHOLDER = "이름을 입력해주세요";
+
+const INITIAL_WIDTH = 204;
+const NameInput = ({ value, onChange }: NameInputProps) => {
+  const spanRef = useRef<HTMLSpanElement>(null);
+  const [inputWidth, setInputWidth] = useState<number>(INITIAL_WIDTH);
+
+  useEffect(() => {
+    if (!spanRef.current) return;
+
+    const spanWidth = spanRef.current.offsetWidth;
+    setInputWidth(spanWidth + 36);
+  }, [value]);
+
+  return (
+    <div className="flex justify-center">
+      <span ref={spanRef} className="text-d3 invisible absolute whitespace-pre">
+        {value || PLACEHOLDER}
+      </span>
+
+      <input
+        type="text"
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        placeholder={PLACEHOLDER}
+        style={{ width: inputWidth }}
+        className="border-mint-01 text-d3 text-neutral-01 placeholder:text-neutral-07 rounded-2xl border px-4 py-2 text-center transition-[width] duration-150 ease-out outline-none"
+      />
+    </div>
+  );
+};
+
+export default NameInput;

src/components/onboarding/OnboardingProfile.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import { useState } from "react";
+
+import { FullButton } from "@/components/common/FullButton";
+import LoadingModal from "@/components/common/LoadingModal";
+import NameInput from "@/components/common/NameInput";
+import ProfileImagePicker from "@/components/onboarding/ProfileImagePicker";
+import UploadButton from "@/components/onboarding/UploadButton";
+
+import { useProfileImageUpload } from "@/hooks/useProfileImageUpload";
+
+const OnboardingProfileClient = () => {
+  const router = useRouter();
+
+  const [name, setName] = useState("");
+  const [isUploadOpen, setIsUploadOpen] = useState(false);
+
+  const isNameValid = name.trim().length > 0;
+
+  const { profileImage, isLoading, uploadImage, resetImage, cancelUpload } =
+    useProfileImageUpload();
+
+  const handleCreateProfile = async () => {
+    if (!isNameValid) return;
+
+    // 1) 프로필 데이터 저장 (지금은 임시로 localStorage 예시)
+    const profile = {
+      name: name.trim(),
+      imageUrl: profileImage ?? null,
+    };
+    try {
+      // TODO: 실제 API로 교체
+      // await fetch("/api/profile", { method: "POST", body: JSON.stringify(profile) });
+      localStorage.setItem("onboardingProfile", JSON.stringify(profile));
+    } catch (e) {
+      // 에러 처리
+      console.error(e);
+      return;
+    }
+    // 2) 저장이 끝난 뒤에만 페이지 이동
+    router.replace("/login");
+  };
+
+  return (
+    <>
+      <main className="flex min-h-dvh justify-center">
+        <div className="relative mt-[13px] flex h-full w-[440px] flex-col">
+          <section className="mt-[123px] px-4 py-2.5">
+            <p className="text-d2 text-neutral-02 whitespace-pre-line">
+              가족들에게 보여줄{"\n"}내 프로필을 만들어주세요
+            </p>
+          </section>
+          <section className="mt-[86px] flex flex-col items-center">
+            <ProfileImagePicker
+              imageUrl={profileImage}
+              onClick={() => setIsUploadOpen(true)}
+            />
+            <div className="mt-4 w-full px-[118px]">
+              <NameInput value={name} onChange={setName} />
+            </div>
+          </section>
+
+          <section className="absolute right-0 bottom-[42px] left-0 px-4 py-2.5">
+            <FullButton isActive={isNameValid} onClick={handleCreateProfile}>
+              프로필생성하기
+            </FullButton>
+          </section>
+        </div>
+      </main>
+      <UploadButton
+        isOpen={isUploadOpen}
+        onClose={() => setIsUploadOpen(false)}
+        onSelectAlbum={async file => {
+          try {
+            await uploadImage(file);
+            setIsUploadOpen(false);
+          } catch (error) {
+            console.error("이미지 업로드 실패:", error);
+          }
+        }}
+        onSelectDefault={() => {
+          resetImage();
+          setIsUploadOpen(false);
+        }}
+      />
+
+      <LoadingModal
+        isOpen={isLoading}
+        title="로딩중"
+        confirmLabel="취소하기"
+        isLoading
+        backdrop="blur"
+        onClose={cancelUpload}
+      />
+    </>
+  );
+};
+
+export default OnboardingProfileClient;