Feat(client): 온보딩 페이지 레이아웃

apps/client/package.json

@@ -13,6 +13,7 @@
     "@tanstack/react-query": "^5.85.3",
     "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
+    "framer-motion": "^12.23.12",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router-dom": "^7.8.2"

apps/client/src/constants/alarms.ts

@@ -0,0 +1,15 @@
+import avatar1 from '@assets/onBoarding/icons/chippi_morning.svg';
+import avatar2 from '@assets/onBoarding/icons/chippi_night.svg';
+import avatar3 from '@assets/onBoarding/icons/chippi_bell.svg';
+
+export interface AlarmType {
+  img: string;
+  title: string;
+  time: string;
+}
+
+export const AlarmsType: AlarmType[] = [
+  { img: avatar1, title: '아침형 치삐', time: '오전 9시' },
+  { img: avatar2, title: '저녁형 치삐', time: '오후 8시' },
+  { img: avatar3, title: '사용자 설정', time: '' },
+];

apps/client/src/constants/stories.tsx

@@ -0,0 +1,44 @@
+import story1 from '@assets/onBoarding/story/story1.svg';
+import story2 from '@assets/onBoarding/story/story2.svg';
+import story3 from '@assets/onBoarding/story/story3.svg';
+
+export interface Story {
+  img: string;
+  text: React.ReactNode;
+  progress: number;
+}
+
+export const stories: Story[] = [
+  {
+    img: story1,
+    text: (
+      <>
+        깊고 신비한 숲에는 지식 나무가 있어요. <br />
+        지식 나무는 사람들의 잊힌 기록을 도토리 씨앗으로 바꾼답니다.
+      </>
+    ),
+    progress: 30,
+  },
+  {
+    img: story2,
+    text: (
+      <>
+        당신이 정보를 읽고 활용하는 것을 양분삼아, <br />
+        지식 나무에는 맛있는 도토리 열매가 열려요.
+      </>
+    ),
+    progress: 60,
+  },
+  {
+    img: story3,
+    text: (
+      <>
+        다람쥐 치삐는 정보를 활용하지 못해 아직 도토리 만개 숲에 도착하지 못하고
+        있어요.
+        <br />
+        도토리를 모아 치삐가 숲에 닿을 수 있도록 도와주세요!
+      </>
+    ),
+    progress: 100,
+  }
+];

apps/client/src/pages/onBoarding/OnBoarding.tsx

@@ -1,5 +1,16 @@
+import onBoardingBg from '@assets/onBoarding/background/onBoardingBg.svg';
+import Header from './components/header/Header';
+import MainCard from './components/funnel/MainCard';
 const OnBoarding = () => {
-  return <div>OnBoarding</div>;
+  return (
+    <div
+      className={`relative flex h-screen w-screen items-center justify-center bg-cover bg-center bg-no-repeat`}
+      style={{ backgroundImage: `url(${onBoardingBg})` }}
+    >
+      <Header />
+      <MainCard />
+    </div>
+  );
 };
 
 export default OnBoarding;

apps/client/src/pages/onBoarding/components/funnel/AlarmBox.tsx

@@ -0,0 +1,78 @@
+import { cva } from 'class-variance-authority';
+import TimePicker from '../timePicker/TimePicker';
+import { AlarmsType } from '@constants/alarms';
+import { useState } from 'react';
+interface AlarmBoxProps {
+  select: 1 | 2 | 3;
+  isDisabled: boolean;
+  onClick?: () => void;
+}
+
+const boxStyle = cva(
+  'flex h-[22.4rem] w-[18rem] flex-col items-center rounded-[1.2rem] px-[3.9rem] pb-[2.6rem] pt-[3.6rem] cursor-pointer transition',
+  {
+    variants: {
+      disabled: {
+        true: 'border-main400 bg-main100 border',
+        false: 'bg-white border border-transparent hover:border-main300',
+      },
+    },
+    defaultVariants: { disabled: false },
+  }
+);
+
+const AlarmBox = ({ select, isDisabled, onClick }: AlarmBoxProps) => {
+  const [showPicker, setShowPicker] = useState(false);
+  const getTimePicker = ({ hour, minute, meridiem }: { hour: string; minute: string; meridiem: string }) => {
+        const formatted = `${meridiem} ${hour}:${minute}`;
+        AlarmsType[2].time = formatted;
+        setShowPicker(false);
+        // 이거 나중에 api 연결때 쓸려고 표시한거.. 그떄 지우겠듬여 console.log('저장된 사용자 알람:', AlarmsType[2].time);
+  }
+  return (
+    <div
+      className={boxStyle({ disabled: isDisabled })}
+      onClick={() => {
+        if (select === 3 && isDisabled) {
+          setShowPicker(true);
+        }
+        onClick?.();
+      }}
+    >
+      <img src={AlarmsType[select - 1].img} alt="chippi" />
+      <p
+        className={`sub3-sb ${
+          isDisabled ? 'text-main500' : 'text-font-black-1'
+        }`}
+      >
+        {AlarmsType[select - 1].title}
+      </p>
+
+      {select <= 2 && (
+        <p className="caption2-m text-font-gray-3">
+          {AlarmsType[select - 1].time}
+        </p>
+      )}
+
+      {select === 3 && isDisabled && (
+        <>
+          {AlarmsType[2].time && (
+            <p className="caption2-m text-font-gray-3">{AlarmsType[2].time}</p>
+          )}
+
+          {showPicker && (
+            <TimePicker
+              onSave={getTimePicker}
+              onCancel={() => {
+                AlarmsType[2].time = '';
+              }}
+              onClick={(e) => e.stopPropagation()}
+            />
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default AlarmBox;

apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx

@@ -0,0 +1,137 @@
+import { Progress, Button } from '@pinback/design-system/ui';
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import StoryStep from './step/StoryStep';
+import AlarmStep from './step/AlarmStep';
+import MacStep from './step/MacStep';
+import FinalStep from './step/FinalStep';
+import { cva } from 'class-variance-authority';
+const stepProgress = [{ progress: 30 }, { progress: 60 }, { progress: 100 }];
+
+const variants = {
+  slideIn: (direction: number) => ({
+    x: direction > 0 ? 200 : -200,
+    opacity: 0,
+  }),
+  slideCenter: { x: 0, opacity: 1 },
+  slideOut: (direction: number) => ({
+    x: direction > 0 ? -200 : 200,
+    opacity: 0,
+  }),
+};
+const CardStyle = cva(
+  'bg-white-bg flex h-[54.8rem] w-[63.2rem] flex-col items-center justify-between rounded-[2.4rem] pt-[3.2rem]',
+  {
+    variants: {
+      overflow: {
+        true: 'overflow-visible',
+        false: 'overflow-hidden',
+      },
+    },
+    defaultVariants: { overflow: false },
+  }
+);
+const MainCard = () => {
+  const [step, setStep] = useState(0);
+  const [direction, setDirection] = useState(0);
+  const [alarmSelected, setAlarmSelected] = useState<1 | 2 | 3>(1);
+  const [isMac, setIsMac] = useState(false);
+
+  useEffect(() => {
+    const ua = navigator.userAgent.toLowerCase();
+    if (ua.includes('mac os') || ua.includes('iphone') || ua.includes('ipad')) {
+      setIsMac(true);
+    }
+  }, []);
+ const renderStep = () => {
+    switch (step) {
+      case 0:
+      case 1:
+      case 2:
+        return <StoryStep step={step as 0 | 1 | 2} />;
+      case 3:
+        return <AlarmStep selected={alarmSelected} setSelected={setAlarmSelected} />;
+      case 4:
+        if (isMac) return <MacStep />;
+        return <FinalStep />;
+      case 5:
+        if (isMac) return <FinalStep />;
+        return null;
+      default:
+        return <FinalStep />;
+    }
+  };
+
+  const nextStep = () => {
+    if (step === 3) {
+      // 이거 이후에 api 붙일 자리 표시임! console.log('선택된 알람:', AlarmsType[alarmSelected - 1].time);
+    }
+    if (step < 5) {
+      setDirection(1);
+      setStep((prev) => prev + 1);
+    } else if (step === 5) {
+      window.location.href = '/';
+    }
+  };
+
+  const prevStep = () => {
+    if (step > 0) {
+      setDirection(-1);
+      setStep((prev) => prev - 1);
+    }
+  };
+
+  return (
+    <div className={CardStyle({ overflow: step === 3 && alarmSelected === 3 })}>
+      {step < 3 && (
+        <Progress
+          value={stepProgress[step].progress}
+          variant="profile"
+          className="w-[15.6rem]"
+        />
+      )}
+
+      <div className="relative flex h-full w-full items-center justify-center">
+        <AnimatePresence custom={direction} mode="wait">
+          <motion.div
+            key={step}
+            custom={direction}
+            variants={variants}
+            initial="slideIn"
+            animate="slideCenter"
+            exit="slideOut"
+            transition={{ duration: 0.4 }}
+            className="flex h-full flex-col items-center"
+          >
+            {renderStep()}
+          </motion.div>
+        </AnimatePresence>
+      </div>
+
+      <div className="mb-[4.8rem] mt-[1.2rem] flex w-full justify-between px-[3.2rem]">
+        {step < 4 && (
+          <Button
+            variant="primary"
+            size="medium"
+            isDisabled={step === 0}
+            className="w-[4.8rem]"
+            onClick={prevStep}
+          >
+            이전
+          </Button>
+        )}
+        <Button
+          variant="primary"
+          size="medium"
+          isDisabled={step === 6}
+          className="ml-auto w-[4.8rem]"
+          onClick={nextStep}
+        >
+          다음
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default MainCard;

apps/client/src/pages/onBoarding/components/funnel/step/AlarmStep.tsx

@@ -0,0 +1,32 @@
+import dotori from '@assets/onBoarding/icons/dotori.svg';
+import AlarmBox from '../AlarmBox';
+interface AlarmStepProps {
+  selected: 1 | 2 | 3;
+  setSelected: (n: 1 | 2 | 3) => void;
+}
+const AlarmStep = ({ selected, setSelected }: AlarmStepProps) => {
+  return (
+    <div className="flex flex-col items-center justify-between">
+      <img src={dotori} className="mb-[1.2rem]" alt="dotori" />
+      <p className="head2 text-font-black-1">
+        도토리 찾으러 갈 시간을 정해볼까요?
+      </p>
+      <p className="body2-m text-font-gray-3 mb-[4.3rem] mt-[0.8rem] text-center">
+        매일 지정한 시간에 저장한 북마크를 리마인드해드려요
+      </p>
+
+      <div className="mb-[2rem] flex w-full items-center justify-center gap-[1.4rem]">
+        {([1, 2, 3] as const).map((n) => (
+          <AlarmBox
+            key={n}
+            select={n}
+            isDisabled={selected === n}
+            onClick={() => setSelected(n)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default AlarmStep;

apps/client/src/pages/onBoarding/components/funnel/step/FinalStep.tsx

@@ -0,0 +1,12 @@
+import dotori from '@assets/onBoarding/icons/dotori.svg';
+const FinalStep = () => {
+  return (
+    <div className="flex h-full flex-col items-center">
+      <img src={dotori} className="mb-[1.2rem]" alt="dotori" />
+      <p className="head2 text-font-black-1">
+        도토리 찾으러 갈 시간을 정해볼까요?
+      </p>
+    </div>
+  );
+};
+export default FinalStep;

apps/client/src/pages/onBoarding/components/funnel/step/MacStep.tsx

@@ -0,0 +1,17 @@
+import MacNotice from '@assets/onBoarding/story/macNotice.svg';
+import dotori from '@assets/onBoarding/icons/dotori.svg';
+const MacStep = () => {
+  return (
+    <div className="flex h-full flex-col items-center">
+      <img src={dotori} className="mb-[1.2rem]" alt="dotori" />
+      <p className="head2 text-font-black-1">
+        도토리 찾으러 갈 시간을 정해볼까요?
+      </p>
+      <p className="body2-m text-font-gray-3 mb-[4.3rem] mt-[0.8rem] text-center">
+        Mac 사용자는 추가 알림 설정을 진행해 주세요.
+      </p>
+      <img src={MacNotice} className="absolute -bottom-[10.4rem]" alt="mac" />
+    </div>
+  );
+};
+export default MacStep;

apps/client/src/pages/onBoarding/components/funnel/step/StoryStep.tsx

@@ -0,0 +1,22 @@
+import { stories } from '@constants/stories';
+
+interface StoryStepProps {
+  step: 0 | 1 | 2;
+}
+
+const StoryStep = ({ step }: StoryStepProps) => {
+  const story = stories[step];
+
+  return (
+    <div className="flex flex-col items-center">
+      <img
+        src={story.img}
+        className="mb-[1.6rem] mt-[2.4rem] w-[31.2rem]"
+        alt="onboarding"
+      />
+      <p className="sub4-sb text-center text-black">{story.text}</p>
+    </div>
+  );
+};
+
+export default StoryStep;