Merge pull request #119 from softeerbootcamp4th/feat/#108-casper-header

[Feat] 캐스퍼 페이지 헤더 반영
softeerbootcamp4th · Aug 8, 2024 · 624c85d · 624c85d
2 parents fb6d47d + 1aa2edd
commit 624c85d
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 31 deletions.
diff --git a/client/src/constants/PageSections/sections.ts b/client/src/constants/PageSections/sections.ts
@@ -32,3 +32,11 @@ export const RUSH_SECTIONS = {
     CASPER_CHARGE: "CASPER_CHARGE",
     CASPER_SMART_KEY: "CASPER_SMART_KEY",
 } as const;
+
+export const CASPER_CUSTOM_SECTIONS = {
+    CUSTOM: "CUSTOM",
+} as const;
+
+export const CASPER_SHOWCASE_SECTIONS = {
+    SHOWCASE: "SHOWCASE",
+} as const;
diff --git a/client/src/pages/CasperCustom/index.tsx b/client/src/pages/CasperCustom/index.tsx
@@ -5,6 +5,7 @@ import {
     CUSTOM_STEP_OPTION,
     CUSTOM_STEP_OPTION_ARRAY,
 } from "@/constants/CasperCustom/customStep";
+import { CASPER_CUSTOM_SECTIONS } from "@/constants/PageSections/sections";
 import { DISSOLVE } from "@/constants/animation";
 import { CasperCustomProvider } from "@/contexts/casperCustomContext";
 import {
@@ -13,10 +14,16 @@ import {
     CasperCustomForm,
     CasperCustomProcess,
 } from "@/features/CasperCustom";
+import useHeaderStyleObserver from "@/hooks/useHeaderStyleObserver";
+import { SCROLL_MOTION } from "../../constants/animation";
 
 const INITIAL_STEP = 0;
 
 export default function CasperCustom() {
+    const containerRef = useHeaderStyleObserver({
+        darkSections: [CASPER_CUSTOM_SECTIONS.CUSTOM],
+    });
+
     const [selectedStepIdx, setSelectedStepIdx] = useState(INITIAL_STEP);
     const selectedStep = CUSTOM_STEP_OPTION_ARRAY[selectedStepIdx];
 
@@ -43,22 +50,27 @@ export default function CasperCustom() {
 
     return (
         <CasperCustomProvider>
-            <div className="bg-n-black w-screen h-screen overflow-hidden flex flex-col justify-center items-center">
-                {CUSTOM_STEP_HEADLINE[selectedStep] && (
-                    <motion.div
-                        key={CUSTOM_STEP_HEADLINE[selectedStep]?.title}
-                        className="flex flex-col items-center gap-300"
-                        {...DISSOLVE}
-                    >
-                        <h3 className="text-n-white h-heading-3-bold">
-                            {CUSTOM_STEP_HEADLINE[selectedStep]?.title}
-                        </h3>
-                        <h3 className="text-n-neutral-500 h-heading-4-regular text-center">
-                            {CUSTOM_STEP_HEADLINE[selectedStep]?.description}
-                        </h3>
-                    </motion.div>
-                )}
-                {renderCustomStep()}
+            <div ref={containerRef}>
+                <section
+                    id={CASPER_CUSTOM_SECTIONS.CUSTOM}
+                    className="bg-n-black w-screen h-screen overflow-hidden flex flex-col justify-center items-center"
+                >
+                    {CUSTOM_STEP_HEADLINE[selectedStep] && (
+                        <motion.div
+                            key={CUSTOM_STEP_HEADLINE[selectedStep]?.title}
+                            className="flex flex-col items-center gap-300"
+                            {...SCROLL_MOTION(DISSOLVE)}
+                        >
+                            <h3 className="text-n-white h-heading-3-bold">
+                                {CUSTOM_STEP_HEADLINE[selectedStep]?.title}
+                            </h3>
+                            <h3 className="text-n-neutral-500 h-heading-4-regular text-center">
+                                {CUSTOM_STEP_HEADLINE[selectedStep]?.description}
+                            </h3>
+                        </motion.div>
+                    )}
+                    {renderCustomStep()}
+                </section>
             </div>
         </CasperCustomProvider>
     );

diff --git a/client/src/pages/CasperShowCase/index.tsx b/client/src/pages/CasperShowCase/index.tsx
@@ -2,8 +2,10 @@ import { motion } from "framer-motion";
 import { useLoaderData } from "react-router-dom";
 import CTAButton from "@/components/CTAButton";
 import { CUSTOM_OPTION } from "@/constants/CasperCustom/casper";
-import { ASCEND, DISSOLVE } from "@/constants/animation";
+import { CASPER_SHOWCASE_SECTIONS } from "@/constants/PageSections/sections";
+import { ASCEND, DISSOLVE, SCROLL_MOTION } from "@/constants/animation";
 import { CasperCards } from "@/features/CasperShowCase";
+import useHeaderStyleObserver from "@/hooks/useHeaderStyleObserver";
 import { GetCasperListResponse } from "@/types/lotteryApi";
 
 function getCardListData(cardList: GetCasperListResponse) {
@@ -24,6 +26,10 @@ function getCardListData(cardList: GetCasperListResponse) {
 }
 
 export default function CasperShowCase() {
+    const containerRef = useHeaderStyleObserver({
+        darkSections: [CASPER_SHOWCASE_SECTIONS.SHOWCASE],
+    });
+
     const data = useLoaderData() as GetCasperListResponse;
     const cardListData = getCardListData(data);
 
@@ -32,22 +38,27 @@ export default function CasperShowCase() {
     };
 
     return (
-        <div className="flex flex-col justify-center items-center gap-800 w-full h-screen bg-n-neutral-950 overflow-hidden pt-1000">
-            <motion.div
-                className="flex flex-col justify-center items-center gap-800 w-full"
-                {...DISSOLVE}
+        <div ref={containerRef}>
+            <section
+                id={CASPER_SHOWCASE_SECTIONS.SHOWCASE}
+                className="flex flex-col justify-center items-center gap-800 w-full h-screen bg-n-neutral-950 overflow-hidden pt-1000"
             >
-                <p className="h-body-1-regular text-n-white">
-                    카드 위에 커서를 올리면 기대평을 볼 수 있어요
-                </p>
+                <motion.div
+                    className="flex flex-col justify-center items-center gap-800 w-full"
+                    {...SCROLL_MOTION(DISSOLVE)}
+                >
+                    <p className="h-body-1-regular text-n-white">
+                        카드 위에 커서를 올리면 기대평을 볼 수 있어요
+                    </p>
 
-                <CasperCards cardList={cardListData} />
-            </motion.div>
+                    <CasperCards cardList={cardListData} />
+                </motion.div>
 
-            <motion.div className="flex gap-500" {...ASCEND}>
-                <CTAButton label="이벤트 링크 공유" onClick={handleClickShare} />
-                <CTAButton label="메인으로 돌아가기" url="/" color="white" />
-            </motion.div>
+                <motion.div className="flex gap-500" {...SCROLL_MOTION(ASCEND)}>
+                    <CTAButton label="이벤트 링크 공유" onClick={handleClickShare} />
+                    <CTAButton label="메인으로 돌아가기" url="/" color="white" />
+                </motion.div>
+            </section>
         </div>
     );
 }
diff --git a/client/src/types/sections.ts b/client/src/types/sections.ts
@@ -1,4 +1,6 @@
 import {
+    CASPER_CUSTOM_SECTIONS,
+    CASPER_SHOWCASE_SECTIONS,
     LOTTERY_SECTIONS,
     MAIN_SECTIONS,
     RUSH_SECTIONS,
@@ -7,8 +9,15 @@ import {
 type MainSectionKey = keyof typeof MAIN_SECTIONS;
 type LotterySectionKey = keyof typeof LOTTERY_SECTIONS;
 type RushSectionKey = keyof typeof RUSH_SECTIONS;
+type CasperCustomSectionKey = keyof typeof CASPER_CUSTOM_SECTIONS;
+type CasperShowcaseSectionKey = keyof typeof CASPER_SHOWCASE_SECTIONS;
 
-export type SectionKey = MainSectionKey | LotterySectionKey | RushSectionKey;
+export type SectionKey =
+    | MainSectionKey
+    | LotterySectionKey
+    | RushSectionKey
+    | CasperCustomSectionKey
+    | CasperShowcaseSectionKey;
 
 export interface SectionKeyProps {
     id: SectionKey;