Feature(onboarding): story 변경사항 반영 (#113)

* feat: 스토리 변경+헤더 프롭스 변경

* feat: 디테일 반영

* chore: 프리티어 적용

Author: jjangminii

apps/client/src/assets/onBoarding/storyStep1.svg

@@ -20,7 +20,7 @@ const OnBoarding = () => {
 
   return (
     <div>
-      <Header />
+      <Header bg="bg-transparent" />
 
       <Funnel>
         <Step name={STEP.STORY}>

apps/client/src/assets/onBoarding/storyStep2.svg

@@ -68,7 +68,7 @@ const OnBoardingTimePicker = ({
         </div>
       </WheelPickerWrapper>
 
-      <div className="flex w-full justify-between">
+      <div className="flex w-full justify-between gap-[1.8rem]">
         <CommonBtn
           size="medium"
           type="gray"

apps/client/src/assets/onBoarding/storyStep3.svg

@@ -39,15 +39,15 @@ const StoryStep = ({ setStep }: StoryStepProps) => {
   };
 
   return (
-    <div className="flex h-dvh w-full flex-col justify-center px-[12rem]">
+    <div className="flex h-dvh w-full flex-col justify-center bg-[#fffdf8] px-[12rem]">
       <div className="flex flex-col items-center">
         <Carousel
           currentStep={currentStep}
           handleCurrentStep={handleCurrentStep}
           images={images}
           total={total}
         />
-        <p className="sub3-sb whitespace-pre-line pt-[7.3rem] text-center">
+        <p className="sub3-sb whitespace-pre-line pt-[7.5rem] text-center">
           {STORY_CONTENT[currentStep].content}
         </p>
       </div>

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

@@ -12,6 +12,6 @@ export const STORY_CONTENT = [
   {
     title: 'story3',
     content:
-      '다람쥐 치삐는 정보를 어떻게 활용해야 할지 몰라 매일 도토리를 먹지 못하고 있어요.\n정보를 활용하고 도토리를 모아 치삐를 도와주세요!',
+      '시골에서 온 다람쥐 치삐는 정보를 어떻게 활용해야 할지 몰라 매일 도토리를 먹지 못하고 있어요.\n정보를 활용하고 도토리를 모아 치삐를 도와주세요!',
   },
 ];

apps/client/src/pages/onBoarding/components/OnboardingTimePicker.tsx

@@ -1,8 +1,14 @@
 import logo from '@assets/brand/logo.svg';
 
-const Header = () => {
+interface HeaderProps {
+  bg?: string;
+}
+
+const Header = ({ bg = 'bg-background' }: HeaderProps) => {
   return (
-    <header className="bg-background fixed left-1/2 top-0 z-50 flex h-[7.4rem] w-[1440px] -translate-x-1/2 items-center px-[6rem] pb-[1.7rem] pt-[2.5rem]">
+    <header
+      className={`fixed left-1/2 top-0 z-50 flex h-[7.4rem] w-[1440px] -translate-x-1/2 items-center px-[6rem] pb-[1.7rem] pt-[2.5rem] ${bg}`}
+    >
       <img src={logo} className="h-[3.2rem] w-[12.4rem]" alt="로고" />
     </header>
   );

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

@@ -1,3 +1,14 @@
 // 이 파일은 자동 생성 파일입니다. (직접 수정 금지)
-export const iconNames = ["close-button","default_order","down_icon","ic_arrow_down","ic_arrow_right","ic_error","main_logo","plus_icon","popup_logo","white_order"] as const;
-export type IconName = typeof iconNames[number];
+export const iconNames = [
+  'close-button',
+  'default_order',
+  'down_icon',
+  'ic_arrow_down',
+  'ic_arrow_right',
+  'ic_error',
+  'main_logo',
+  'plus_icon',
+  'popup_logo',
+  'white_order',
+] as const;
+export type IconName = (typeof iconNames)[number];