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

apps/client/package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "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/layout/Layout.tsx

@@ -1,16 +1,10 @@
 import { Outlet } from 'react-router-dom';
-import OptionsMenuButton from '@shared/components/optionsMenuButton/OptionsMenuButton';
 
 const Layout = () => {
   return (
     <>
       {/* TODO: 필요시 레이아웃 추가 */}
       {/* TODO: 사이드바 추가 */}
-      <OptionsMenuButton
-        onEdit={function (): void {}}
-        onDelete={function (): void {}}
-      ></OptionsMenuButton>
-
       <Outlet />
     </>
   );

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,51 @@
+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';
+import { cva } from 'class-variance-authority';
+
+interface AlarmBoxProps {
+  select: 1 | 2 | 3;
+  isDisabled: boolean;
+  onClick?: () => void;
+}
+
+const AlarmsType = [
+  { img: avatar1, title: '아침형 치삐', time: '오전 9시' },
+  { img: avatar2, title: '저녁형 치삐', time: '오후 8시' },
+  { img: avatar3, title: '사용자 설정' },
+];
+
+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) => {
+  return (
+    <div className={boxStyle({ disabled: isDisabled })} onClick={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>
+      )}
+    </div>
+  );
+};
+
+export default AlarmBox;

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

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import dotori from '../../../../assets/onBoarding/icons/dotori.svg';
+import AlarmBox from './AlarmBox';
+
+const AlarmStep = () => {
+  const [selected, setSelected] = useState<1 | 2 | 3>(1); // 기본값은 1번 선택
+
+  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].map((n) => (
+          <AlarmBox
+            key={n}
+            select={n as 1 | 2 | 3}
+            isDisabled={selected === n}
+            onClick={() => setSelected(n as 1 | 2 | 3)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default AlarmStep;

apps/client/src/pages/onBoarding/components/funnel/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/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-[104px]" alt="mac" />
+    </div>
+  );
+};
+export default MacStep;

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

@@ -0,0 +1,111 @@
+import { Progress, Button } from '@pinback/design-system/ui';
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import StoryStep from './StoryStep';
+import AlarmStep from './AlarmStep';
+import MacStep from './MacStep';
+import FinalStep from './FinalStep';
+const stepProgress = [{ progress: 30 }, { progress: 60 }, { progress: 100 }];
+
+const variants = {
+  enter: (direction: number) => ({
+    x: direction > 0 ? 200 : -200,
+    opacity: 0,
+  }),
+  center: { x: 0, opacity: 1 },
+  exit: (direction: number) => ({
+    x: direction > 0 ? -200 : 200,
+    opacity: 0,
+  }),
+};
+
+const MainCard = () => {
+  const [step, setStep] = useState(0);
+  const [direction, setDirection] = useState(0);
+  const renderStep = () => {
+    switch (step) {
+      case 0:
+      case 1:
+      case 2:
+        return <StoryStep step={step as 0 | 1 | 2} />;
+      case 3:
+        return <AlarmStep />;
+      case 4:
+        return <MacStep />;
+      case 5:
+        return <FinalStep />;
+      default:
+        return <FinalStep />;
+    }
+  };
+  const nextStep = () => {
+    if (step < 5) {
+      setDirection(1);
+      setStep((prev) => prev + 1);
+    }
+    if (step === 5) {
+      window.location.href = '/';
+    }
+  };
+
+  const prevStep = () => {
+    if (step > 0) {
+      setDirection(-1);
+      setStep((prev) => prev - 1);
+    }
+  };
+
+  return (
+    <div className="bg-white-bg flex h-[54.8rem] w-[63.2rem] flex-col items-center justify-between overflow-hidden rounded-[2.4rem] pt-[3.2rem]">
+      {step < 3 && (
+        <Progress
+          value={stepProgress[step].progress}
+          variant="profile"
+          className="w-[30%]"
+        />
+      )}
+
+      <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="enter"
+            animate="center"
+            exit="exit"
+            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/StoryStep.tsx

@@ -0,0 +1,55 @@
+import story1 from '../../../../assets/onBoarding/story/story1.svg';
+import story2 from '../../../../assets/onBoarding/story/story2.svg';
+import story3 from '../../../../assets/onBoarding/story/story3.svg';
+interface StoryStepProps {
+  step: 0 | 1 | 2;
+}
+const steps = [
+  {
+    img: story1,
+    text: (
+      <>
+        깊고 신비한 숲에는 지식 나무가 있어요. <br />
+        지식 나무는 사람들의 잊힌 기록을 도토리 씨앗으로 바꾼답니다.
+      </>
+    ),
+    progress: 30,
+  },
+  {
+    img: story2,
+    text: (
+      <>
+        당신이 정보를 읽고 활용하는 것을 양분삼아, <br />
+        지식 나무에는 맛있는 도토리 열매가 열려요.
+      </>
+    ),
+    progress: 60,
+  },
+  {
+    img: story3,
+    text: (
+      <>
+        다람쥐 치삐는 정보를 활용하지 못해 아직 도토리 만개 숲에 도착하지 못하고
+        있어요.
+        <br />
+        도토리를 모아 치삐가 숲에 닿을 수 있도록 도와주세요!
+      </>
+    ),
+    progress: 100,
+  },
+];
+
+const StoryStep = ({ step }: StoryStepProps) => {
+  return (
+    <div className="flex flex-col items-center">
+      <img
+        src={steps[step].img}
+        className="mb-[1.6rem] mt-[2.4rem] w-[31.2rem]"
+        alt="onboarding"
+      />
+      <p className="sub4-sb text-center text-black">{steps[step].text}</p>
+    </div>
+  );
+};
+
+export default StoryStep;

apps/client/src/pages/onBoarding/components/header/Header.tsx

@@ -0,0 +1,13 @@
+import HeaderLogo from '../../../../assets/onBoarding/icons/header_logo.svg';
+const Header = () => {
+  return (
+    <div
+      className="z-5 absolute top-0 flex w-full justify-items-start px-[8rem] py-[2.5rem]"
+      onClick={() => window.location.reload()}
+    >
+      <img src={HeaderLogo} alt="header logo" />
+    </div>
+  );
+};
+
+export default Header;

packages/design-system/src/components/index.ts

@@ -4,7 +4,7 @@ export { default as Card } from './card/Card';
 export { default as Chip } from './chip/Chip';
 export { default as Input } from './input/Input';
 export { default as Level } from './level/Level';
-export { Progress } from './progress/Progress';
+export { default as Progress } from './progress/Progress';
 export { Switch } from './switch/Switch';
 export { Textarea } from './textarea/Textarea';
 export { default as AutoDismissToast } from './toast/hooks/uesFadeOut';

packages/design-system/src/components/progress/Progress.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useState } from 'react';
 import { within, userEvent, expect } from '@storybook/test';
-import { Progress } from './Progress';
+import Progress from './Progress';
 
 const meta: Meta<typeof Progress> = {
   title: 'Components/Progress',

packages/design-system/src/components/progress/Progress.tsx

@@ -35,12 +35,7 @@ export interface ProgressProps
   value: number;
 }
 
-export function Progress({
-  className,
-  variant,
-  value,
-  ...props
-}: ProgressProps) {
+function Progress({ className, variant, value, ...props }: ProgressProps) {
   const progressPercent = Math.max(0, Math.min(100, value));
 
   return (
@@ -59,3 +54,4 @@ export function Progress({
     </ProgressPrimitive.Root>
   );
 }
+export default Progress;

packages/design-system/src/icons/iconNames.ts

@@ -16,5 +16,6 @@ export const iconNames = [
   'tooltip_3',
   'tooltip_4',
   'tooltip_5',
+  'main_header_logo',
 ] as const;
 export type IconName = (typeof iconNames)[number];