Feat: 온보딩 UI

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

@@ -0,0 +1,52 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import React from "react";
+
+import OnboardingStep from "../../components/onboarding/OnboardingStep";
+import ProgressDots from "../../components/onboarding/ProgressDots";
+import {
+  ONBOARDING_STEPS,
+  OnboardingStepName,
+} from "../../config/onboardingSteps";
+import { useFunnel } from "../../hooks/useFunnel";
+
+const OnboardingPage = () => {
+  const router = useRouter();
+  const { Funnel, Step, setStep, currentStep } = useFunnel(ONBOARDING_STEPS[0]);
+
+  const currentIndex = ONBOARDING_STEPS.indexOf(
+    currentStep as OnboardingStepName,
+  );
+  const isLast = currentIndex === ONBOARDING_STEPS.length - 1;
+
+  const goNext = () => {
+    const next = ONBOARDING_STEPS[currentIndex + 1];
+
+    if (!next) {
+      localStorage.setItem("onboardingDone", "true");
+      router.push("/onboarding/profile");
+      return;
+    }
+    setStep(next);
+  };
+
+  return (
+    <main className="flex min-h-dvh justify-center">
+      <div className="mt-[13px] flex h-full w-[440px] flex-col">
+        <ProgressDots total={ONBOARDING_STEPS.length} current={currentIndex} />
+
+        <Funnel>
+          {ONBOARDING_STEPS.map(name => (
+            <Step key={name} name={name}>
+              <OnboardingStep stepName={name} isLast={isLast} onNext={goNext} />
+            </Step>
+          ))}
+        </Funnel>
+      </div>
+    </main>
+  );
+};
+
+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,5 @@
-export default function Home() {
-  return <div>홈화면</div>;
+import { redirect } from "next/navigation";
+
+export default function RootPage() {
+  redirect("/onboarding");
 }

src/components/common/AlertModal.tsx

@@ -1,11 +1,26 @@
 "use client";
 
+type AlertBackdrop = "default" | "light" | "blur";
+
 type AlertModalProps = {
   isOpen: boolean;
   title: string;
-  message: string;
+
+  message?: string;
+
   confirmLabel?: string;
   onClose: () => void;
+
+  backdrop?: AlertBackdrop;
+
+  isLoading?: boolean;
+  loadingImageSrc?: string;
+};
+
+const BACKDROP_CLASS: Record<AlertBackdrop, string> = {
+  default: "bg-dim-02",
+  light: "bg-dim-01",
+  blur: "bg-dim-01 backdrop-blur-[7px]",
 };
 
 const AlertModal = ({
@@ -14,13 +29,17 @@ const AlertModal = ({
   message,
   confirmLabel = "확인",
   onClose,
+  backdrop = "default",
+  isLoading = false,
+  loadingImageSrc,
 }: AlertModalProps) => {
   if (!isOpen) return null;
 
   return (
     <div
-      className="bg-dim-02 fixed inset-0 z-50 flex items-center justify-center"
-      onClick={onClose}
+      className={`fixed inset-0 z-50 flex items-center justify-center ${
+        BACKDROP_CLASS[backdrop]
+      }`}
     >
       <div
         className="flex w-[316px] flex-col rounded-2xl bg-white"
@@ -31,7 +50,19 @@ 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 && loadingImageSrc ? (
+            <img
+              src={loadingImageSrc}
+              alt="loading"
+              className="h-[48px] w-[48px]"
+            />
+          ) : (
+            message && (
+              <p className="text-sub2-r text-neutral-01 text-center">
+                {message}
+              </p>
+            )
+          )}
         </div>
 
         <div className="flex w-full">

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,72 @@
+"use client";
+
+import { useState } from "react";
+
+import AlertModal from "@/components/common/AlertModal";
+import FullButton from "@/components/common/FullButton";
+import NameInput from "@/components/common/NameInput";
+import ProfileImagePicker from "@/components/onboarding/ProfileImagePicker";
+import UploadAlert from "@/components/onboarding/UploadAlert";
+
+import { useProfileImageUpload } from "@/hooks/useProfileImageUpload";
+
+const OnboardingProfileClient = () => {
+  const [name, setName] = useState("");
+  const [isUploadOpen, setIsUploadOpen] = useState(false);
+
+  const isNameValid = name.trim().length > 0;
+
+  const { profileImage, isLoading, uploadImage, resetImage } =
+    useProfileImageUpload();
+
+  return (
+    <>
+      <main className="flex min-h-dvh justify-center">
+        <div className="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="mt-[210px] mb-[42px] px-4 py-2.5">
+            <FullButton isActive={isNameValid}>프로필생성하기</FullButton>
+          </section>
+        </div>
+      </main>
+      <UploadAlert
+        isOpen={isUploadOpen}
+        onClose={() => setIsUploadOpen(false)}
+        onSelectAlbum={file => {
+          uploadImage(file);
+          setIsUploadOpen(false);
+        }}
+        onSelectDefault={() => {
+          resetImage();
+          setIsUploadOpen(false);
+        }}
+      />
+
+      <AlertModal
+        isOpen={isLoading}
+        title="로딩중"
+        confirmLabel="취소하기"
+        isLoading
+        loadingImageSrc="/loading.gif"
+        backdrop="blur"
+        onClose={() => {}}
+      />
+    </>
+  );
+};
+
+export default OnboardingProfileClient;

src/components/onboarding/OnboardingStep.tsx

@@ -0,0 +1,48 @@
+import Image from "next/image";
+
+import FullButton from "@/components/common/FullButton";
+
+import type { OnboardingStepName } from "../../config/onboardingSteps";
+import { onboardingContents } from "../../config/onboardingSteps";
+
+interface Props {
+  stepName: OnboardingStepName;
+  isLast: boolean;
+  onNext: () => void;
+}
+
+const OnboardingStep = ({ stepName, isLast, onNext }: Props) => {
+  const { title, background } = onboardingContents[stepName];
+
+  return (
+    <main className="relative flex h-screen flex-col bg-white 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 px-4 pt-[23px] pb-[78px]">
+        <FullButton type="button" onClick={onNext} isActive>
+          {isLast ? "시작하기" : "다음"}
+        </FullButton>
+      </section>
+    </main>
+  );
+};
+
+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]"
+      >
+        <PhotoIcon />
+      </button>
+    </div>
+  );
+};
+
+export default ProfileImagePicker;