Feature/CDP-174-LandingFeature1

src/app/(marketing)/page.tsx

@@ -1,3 +1,4 @@
+import { LandingFeaturesSection1 } from "@/components/landing/LandingFeaturesSection1";
 import { LandingHeroSection } from "@/components/landing/LandingHeroSection";
 
 export const revalidate = 21600;
@@ -6,6 +7,7 @@ export default function Home() {
   return (
     <>
       <LandingHeroSection />
+      <LandingFeaturesSection1 />
     </>
   );
 }

src/components/landing/LandingFeatureGrid.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { FEATURES } from "@/lib/constants";
+import { cn } from "@/lib/utils";
+import { FeatureButton } from "@/shared/FeatureButton";
+import { Icon } from "@/shared/Icon";
+import { useFeaturePreviewStore } from "@/stores/featurePreviewStore";
+import type { LandingFeatureGridProps } from "@/types/landing";
+
+export function LandingFeatureGrid({ className }: LandingFeatureGridProps) {
+  const setActiveFeature = useFeaturePreviewStore((state) => state.setActiveFeature);
+
+  return (
+    <div className={cn("grid grid-cols-1 gap-3", "md:grid-cols-2 md:gap-8", className)}>
+      {FEATURES.map((feature) => (
+        <FeatureButton
+          key={feature.title}
+          icon={<Icon name={feature.iconName} size={19} />}
+          title={feature.title}
+          description={feature.description}
+          onMouseEnter={() => setActiveFeature(feature)}
+          onFocus={() => setActiveFeature(feature)}
+        />
+      ))}
+    </div>
+  );
+}

src/components/landing/LandingFeaturesSection1.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { LandingFeatureGrid } from "@/components/landing/LandingFeatureGrid";
+import { cn } from "@/lib/utils";
+import { useFeaturePreviewStore } from "@/stores/featurePreviewStore";
+import type { LandingFeaturesSection1Props } from "@/types/landing";
+import Image from "next/image";
+
+export function LandingFeaturesSection1({ className }: LandingFeaturesSection1Props) {
+  const activeFeature = useFeaturePreviewStore((state) => state.activeFeature);
+
+  return (
+    <section
+      id="landing-features1"
+      aria-labelledby="landing-features1-title"
+      className={cn(
+        "grid gap-18",
+        "md:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)] md:items-center",
+        className,
+      )}
+    >
+      {/* Left: 제목 + 기능 리스트 */}
+      <div className="space-y-8">
+        <header className="space-y-6">
+          <h2
+            id="landing-features1-title"
+            className="t-30-b md:t-40-b text-[var(--color-gray-900)]"
+          >
+            필요한 기능만 골라 쓰는
+            <br />
+            데일리 플래너
+          </h2>
+          <p className="t-12-m md:t-16-m text-[var(--color-gray-600)]">
+            나에게 필요한 모듈만 선택해 나만의 플래너를 만들 수 있습니다.
+          </p>
+        </header>
+
+        <LandingFeatureGrid />
+      </div>
+
+      {/* Right: 화면 미리보기 카드 */}
+      <div className="relative">
+        <div className="relative mx-auto max-w-full rounded-[32px] bg-[var(--color-gray-50)]">
+          <div className="relative aspect-[16/10] w-full overflow-hidden rounded-3xl bg-[var(--color-white)] shadow-[0_18px_60px_rgba(0,0,0,0.12)]">
+            <Image
+              src={activeFeature.previewImageSrc}
+              alt={`${activeFeature.title} 플래너 화면 미리보기`}
+              fill
+              className="object-cover"
+              sizes="(min-width: 1024px) 480px, 100vw"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/landing/LandingHeroCtas.tsx

@@ -5,9 +5,7 @@ import Link from "next/link";
 
 export function LandingHeroCtas() {
   return (
-    <div
-      className={cn("flex flex-col gap-12 mt-20", "md:flex-row md:items-center md:gap-8 md:mt-10")}
-    >
+    <div className={cn("flex items-center flex-col gap-8 mt-10", "md:flex-row md:gap-12 md:mt-20")}>
       <Link href="/login">
         <Button preset="hero" pill>
           <span className="inline-flex items-center gap-4">

src/components/landing/LandingMainSection.tsx

@@ -5,7 +5,12 @@ export function LandingMainSection({ children, className }: LandingMainSectionPr
   return (
     <main
       id="landing-main"
-      className={cn("mx-auto w-full max-w-[128rem] px-6 mt-70", "space-y-[10rem]", className)}
+      className={cn(
+        "mx-auto w-full max-w-[128rem] px-6 mt-30",
+        "space-y-[35rem]",
+        "md:mt-45 lg:mt-70",
+        className,
+      )}
     >
       {children}
     </main>

src/lib/constants.ts

@@ -1,3 +1,5 @@
+import { FeatureItem } from "@/types/landing";
+
 /* -------------------------------------------------
    📦 프로젝트 공통 상수 (Global Constants)
    - SEO / OG / 사이트 메타 정보
@@ -30,12 +32,13 @@ export const LOCALE = "ko_KR";
    - SignupGroupButton에서 사용
    - bg: cva variant key와 1:1 매핑
    ------------------------------------------------- */
+
 export const SIGNUP_BTNS = [
   {
     key: "email",
     bg: "basic" as const,
     label: "일반 회원가입",
-    icon: { kind: "lucide" as const, name: "user-plus2" as const, size: 28 }, // 28px ≈ w-7 h-7
+    icon: { kind: "lucide" as const, name: "user-plus2" as const, size: 28 }, // 28px ≒ w-7 h-7
   },
   {
     key: "google",
@@ -52,3 +55,48 @@ export const SIGNUP_BTNS = [
 ] as const;
 
 export type SignupButtonKey = (typeof SIGNUP_BTNS)[number]["key"];
+
+/* -------------------------------------------------
+   🧩 랜딩 페이지 — 기능 소개 섹션 1
+   - LandingFeatureGrid / LandingFeaturesSection1에서 사용
+   - “일간 / 주간 / 월간 / To-Do / 습관 / 메모” 6개 모듈 메타데이터
+   ------------------------------------------------- */
+
+export const FEATURES: FeatureItem[] = [
+  {
+    title: "일간",
+    description: "오늘의 일정과 할 일을 한눈에",
+    iconName: "calendar",
+    previewImageSrc: "/images/feature-daily.png",
+  },
+  {
+    title: "주간",
+    description: "일주일 단위로 계획을 세우고 관리",
+    iconName: "calendarDays",
+    previewImageSrc: "/images/feature-weekly.png",
+  },
+  {
+    title: "월간",
+    description: "한 달 전체 일정을 조망하고 계획",
+    iconName: "calendarRange",
+    previewImageSrc: "/images/feature-monthly.png",
+  },
+  {
+    title: "To-Do",
+    description: "해야 할 일을 체계적으로 정리",
+    iconName: "checkSquare",
+    previewImageSrc: "/images/feature-todo.png",
+  },
+  {
+    title: "습관",
+    description: "좋은 습관을 만들고 지속적으로 추적",
+    iconName: "rotateCcw",
+    previewImageSrc: "/images/feature-habit.png",
+  },
+  {
+    title: "메모",
+    description: "중요한 생각과 아이디어를 기록",
+    iconName: "stickyNote",
+    previewImageSrc: "/images/feature-memo.png",
+  },
+];

src/stores/featurePreviewStore.ts

@@ -0,0 +1,15 @@
+"use client";
+
+import { FEATURES } from "@/lib/constants";
+import type { FeatureItem } from "@/types/landing";
+import { create } from "zustand";
+
+type FeaturePreviewState = {
+  activeFeature: FeatureItem;
+  setActiveFeature: (feature: FeatureItem) => void;
+};
+
+export const useFeaturePreviewStore = create<FeaturePreviewState>((set) => ({
+  activeFeature: FEATURES[0], // 기본: "일간"
+  setActiveFeature: (feature) => set({ activeFeature: feature }),
+}));

src/types/landing.ts

@@ -1,8 +1,31 @@
-export type LandingWrapperProps = {
-  children: React.ReactNode;
+import type { ReactNode } from "react";
+
+/* -------------------------------------------------
+   공통 베이스 타입
+   ------------------------------------------------- */
+
+type WithChildren = {
+  children: ReactNode;
+};
+
+type WithClassName = {
   className?: string;
 };
 
+type WithChildrenAndClassName = WithChildren & WithClassName;
+
+/* -------------------------------------------------
+   레이아웃 / 래퍼
+   ------------------------------------------------- */
+
+export type LandingWrapperProps = WithChildrenAndClassName;
+
+export type LandingMainSectionProps = WithChildrenAndClassName;
+
+/* -------------------------------------------------
+   Footer
+   ------------------------------------------------- */
+
 export type FooterLink = {
   label: string;
   href: string;
@@ -13,11 +36,31 @@ export type LandingFooterColumnProps = {
   links: FooterLink[];
 };
 
-export type LandingMainSectionProps = {
-  children: React.ReactNode;
-  className?: string;
-};
+/* -------------------------------------------------
+   Hero / Features 섹션
+   ------------------------------------------------- */
 
-export type LandingHeroSectionProps = {
-  className?: string;
-};
+export type LandingHeroSectionProps = WithClassName;
+
+export type LandingFeaturesSection1Props = WithClassName;
+
+export type LandingFeatureGridProps = WithClassName;
+
+/* -------------------------------------------------
+   기능 소개 섹션 1 — Feature 리스트
+   ------------------------------------------------- */
+
+export type FeatureIconName =
+  | "calendar"
+  | "calendarDays"
+  | "calendarRange"
+  | "checkSquare"
+  | "rotateCcw"
+  | "stickyNote";
+
+export interface FeatureItem {
+  title: string;
+  description: string;
+  iconName: FeatureIconName;
+  previewImageSrc: string;
+}