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/login/page.tsx

@@ -2,8 +2,6 @@
 
 import { useRouter } from "next/navigation";
 
-import KakaoIcon from "@/assets/kakao.svg";
-
 const AuthStartPage = () => {
   const router = useRouter();
 

src/app/page.tsx

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

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,35 @@
 "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;
+  loadingImageSrc?: string;
+}
 
-const AlertModal = ({
+const LoadingModal = ({
   isOpen,
   title,
   message,
   confirmLabel = "확인",
   onClose,
-}: AlertModalProps) => {
+  backdrop = "default",
+  isLoading = false,
+  loadingImageSrc,
+}: 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 +41,15 @@ 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">
@@ -48,4 +66,4 @@ const AlertModal = ({
   );
 };
 
-export default AlertModal;
+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,82 @@
+"use client";
+
+import { useRouter } from "next/router";
+
+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 } =
+    useProfileImageUpload();
+
+  const handleCreateProfile = () => {
+    if (!isNameValid) return;
+    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={file => {
+          uploadImage(file);
+          setIsUploadOpen(false);
+        }}
+        onSelectDefault={() => {
+          resetImage();
+          setIsUploadOpen(false);
+        }}
+      />
+
+      <LoadingModal
+        isOpen={isLoading}
+        title="로딩중"
+        confirmLabel="취소하기"
+        isLoading
+        backdrop="blur"
+        onClose={() => {}}
+      />
+    </>
+  );
+};
+
+export default OnboardingProfileClient;

src/components/onboarding/OnboardingStep.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Image from "next/image";
+
+import FullButton from "@/components/common/FullButton";
+
+import type { OnboardingStepName } from "@/constants/onboardingSteps";
+import { ONBOARDING_CONTENTS } from "@/constants/onboardingSteps";
+
+interface Props {
+  stepName: OnboardingStepName;
+  isLastStep: boolean;
+  onNext: () => void;
+}
+
+const OnboardingStep = ({ stepName, isLastStep, onNext }: Props) => {
+  const { title, background } = ONBOARDING_CONTENTS[stepName];
+
+  return (
+    <div className="flex min-h-dvh justify-center bg-white">
+      <div className="relative mt-[13px] flex h-full w-[440px] flex-col pt-[558px]">
+        {background.type === "image" && (
+          <Image
+            src={background.src}
+            alt=""
+            fill
+            priority
+            className="pointer-events-none -translate-y-[110px] object-cover object-top"
+          />
+        )}
+
+        {background.type === "class" && (
+          <div
+            className={`pointer-events-none absolute -translate-y-[110px] ${background.className}`}
+            aria-hidden
+          />
+        )}
+
+        <section className="relative z-10 px-4 py-2.5">
+          <p className="text-d2 text-neutral-02 whitespace-pre-line">{title}</p>
+        </section>
+
+        <section className="relative z-10 mt-[33px] px-4">
+          <FullButton type="button" onClick={onNext} isActive>
+            {isLastStep ? "시작하기" : "다음"}
+          </FullButton>
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default OnboardingStep;

src/components/onboarding/ProfileImagePicker.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import ProfileIcon from "@/assets/onboarding_profile.svg";
+import PhotoIcon from "@/assets/photo.svg";
+
+type ProfileImagePickerProps = {
+  imageUrl: string | null;
+  onClick: () => void;
+};
+
+const ProfileImagePicker = ({ imageUrl, onClick }: ProfileImagePickerProps) => {
+  return (
+    <div
+      className="relative flex h-[160px] w-[160px] cursor-pointer items-center justify-center"
+      onClick={onClick}
+    >
+      {imageUrl ? (
+        <img
+          src={imageUrl}
+          alt="프로필 이미지"
+          className="h-full w-full rounded-[36px] object-cover"
+        />
+      ) : (
+        <ProfileIcon />
+      )}
+
+      <button
+        type="button"
+        className="absolute right-[16px] bottom-[16px] h-[32px] w-[32px] cursor-pointer"
+      >
+        <PhotoIcon />
+      </button>
+    </div>
+  );
+};
+
+export default ProfileImagePicker;