[FE] 랜딩 페이지

frontend/src/features/landing/components/LandingInfo.tsx

@@ -0,0 +1,34 @@
+import { ComponentPropsWithoutRef } from "react";
+
+import landingEpisode from "@/assets/img/img_landing_episode.png";
+import landingMain from "@/assets/img/img_landing_main.png";
+import landingMindmap from "@/assets/img/img_landing_mindmap.png";
+import landingSelfTest from "@/assets/img/img_landing_selftest.png";
+import { exhaustiveCheck } from "@/utils/exhaustive_check";
+
+type LandingInfoType = "episode" | "main" | "mindmap" | "self_test";
+type Props = ComponentPropsWithoutRef<"img"> & {
+    name: LandingInfoType;
+};
+
+const LandingInfo = ({ name, ...rest }: Props) => {
+    return <img src={getLandingInfo(name)} {...rest} />;
+};
+
+export default LandingInfo;
+
+const getLandingInfo = (type: LandingInfoType) => {
+    switch (type) {
+        case "episode":
+            return landingEpisode;
+        case "main":
+            return landingMain;
+        case "mindmap":
+            return landingMindmap;
+        case "self_test":
+            return landingSelfTest;
+
+        default:
+            exhaustiveCheck(`${type}의 landing info 는 올바르지 않습니다.`);
+    }
+};

frontend/src/features/landing/pages/LandingPage.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { Link } from "react-router";
 
 import { useAuth } from "@/features/auth/hooks/useAuth";
+import LandingInfo from "@/features/landing/components/LandingInfo";
 import Button from "@/shared/components/button/Button";
 import CallToActionButton from "@/shared/components/call_to_action_button/CallToActionButton";
 import GlobalNavigationBar from "@/shared/components/global_navigation_bar/GlobalNavigationBar";
@@ -94,12 +95,10 @@ const LandingPage = () => {
                     return prev.intersectionRatio >= cur.intersectionRatio ? prev : cur;
                 });
 
-                const key = (best.target as HTMLElement).dataset.section as FocusKey | undefined;
-                if (!key) {
-                    return;
+                const key = (best.target as HTMLElement).dataset.section;
+                if (key === "mindmap" || key === "self_diagnosis" || key === "episode_archive") {
+                    setFocused((prev) => (prev === key ? prev : key));
                 }
-
-                setFocused((prev) => (prev === key ? prev : key));
             },
             {
                 root,
@@ -189,11 +188,11 @@ const LandingPage = () => {
 
                     <div className="mt-10 w-full">
                         <div className="mx-auto w-full max-w-5xl">
-                            {/* <LandingInfo
+                            <LandingInfo
                                 name="main"
                                 alt="EPISODE 메인 화면"
                                 className="w-full h-auto rounded-2xl shadow-[0_20px_60px_rgba(0,0,0,0.12)] border border-gray-100 bg-white"
-                            /> */}
+                            />
                         </div>
                     </div>
                 </div>
@@ -211,11 +210,11 @@ const LandingPage = () => {
                 <div className="mx-auto w-full max-w-5xl px-6">
                     <div className="bg-white rounded-2xl border border-gray-100 shadow-[0_10px_40px_rgba(0,0,0,0.08)] p-8 md:p-10 relative">
                         <div className="flex flex-col md:flex-row items-center gap-10">
-                            {/* <LandingInfo
+                            <LandingInfo
                                 name="mindmap"
                                 alt="마인드맵 기능"
                                 className="w-full md:w-115 h-auto rounded-xl border border-gray-100"
-                            /> */}
+                            />
 
                             <div className="flex-1 w-full">
                                 <h2 className="typo-title-28-bold text-text-main1">마인드맵</h2>
@@ -296,12 +295,12 @@ const LandingPage = () => {
                                     </Link>
                                 </div>
                             </div>
-                            {/* 
+
                             <LandingInfo
                                 name="self_test"
                                 alt="기술문제 셀프진단 기능"
                                 className="w-full md:w-115 h-auto rounded-xl border border-gray-100 order-1 md:order-2"
-                            /> */}
+                            />
                         </div>
                     </div>
                 </div>
@@ -319,11 +318,11 @@ const LandingPage = () => {
                 <div className="mx-auto w-full max-w-5xl px-6">
                     <div className="bg-white rounded-2xl border border-gray-100 shadow-[0_10px_40px_rgba(0,0,0,0.08)] p-8 md:p-10 relative">
                         <div className="flex flex-col md:flex-row items-center gap-10">
-                            {/* <LandingInfo
+                            <LandingInfo
                                 name="episode"
                                 alt="에피소드 보관함 기능"
                                 className="w-full md:w-115 h-auto rounded-xl border border-gray-100"
-                            /> */}
+                            />
 
                             <div className="flex-1 w-full">
                                 <h2 className="typo-title-28-bold text-text-main1">에피소드 보관함</h2>