Feature/CDP-182-SpecialFeature

src/app/(marketing)/page.tsx

@@ -1,6 +1,7 @@
 import { LandingFeaturesSection2 } from "@/components/landing/LandingFeatureSection2";
 import { LandingFeaturesSection1 } from "@/components/landing/LandingFeaturesSection1";
 import { LandingHeroSection } from "@/components/landing/LandingHeroSection";
+import { LandingSpecialFeaturesSection } from "@/components/landing/LandingSpecialFeaturesSection";
 
 export const revalidate = 21600;
 
@@ -10,6 +11,7 @@ export default function Home() {
       <LandingHeroSection />
       <LandingFeaturesSection1 />
       <LandingFeaturesSection2 />
+      <LandingSpecialFeaturesSection />
     </>
   );
 }

src/components/landing/LandingFooter.tsx

@@ -1,27 +1,15 @@
+import { PRODUCTLINKS, SUPPORTLINKS } from "@/lib/constants";
 import { cn } from "@/lib/utils";
-import { FooterLink } from "@/types/landing";
 import Image from "next/image";
 import Link from "next/link";
 import { LandingCopyright } from "./LandingCopyright";
 import { LandingFooterColumn } from "./LandingFooterColumn";
 
 export function LandingFooter() {
-  const productLinks: FooterLink[] = [
-    { label: "기능 소개", href: "/features" },
-    { label: "요금제", href: "/pricing" },
-    { label: "업데이트", href: "/changelog" },
-  ];
-
-  const supportLinks: FooterLink[] = [
-    { label: "FAQ", href: "/faq" },
-    { label: "문의하기", href: "/support" },
-    { label: "개인정보처리방침", href: "/privacy" },
-  ];
-
   return (
     <footer
       role="contentinfo"
-      className="border-t border-[var(--color-gray-100)] bg-[var(--color-gray-50)] text-[var(--color-gray-600)]"
+      className="border-t border-[var(--color-gray-100)] bg-[var(--color-gray-50)] text-[var(--color-gray-600)] mt-30"
     >
       <div
         className={cn(
@@ -42,7 +30,7 @@ export function LandingFooter() {
               "md:row-auto md:justify-self-start",
             )}
           >
-            <LandingFooterColumn title="제품" links={productLinks} />
+            <LandingFooterColumn title="제품" links={PRODUCTLINKS} />
           </div>
 
           {/* 로고 블록*/}
@@ -78,7 +66,7 @@ export function LandingFooter() {
               "md:row-auto md:justify-self-end",
             )}
           >
-            <LandingFooterColumn title="지원" links={supportLinks} />
+            <LandingFooterColumn title="지원" links={SUPPORTLINKS} />
           </div>
         </div>
 

src/components/landing/LandingMainSection.tsx

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

src/components/landing/LandingSpecialFeatureGrid.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { SPECIAL_FEATURES } from "@/lib/constants";
+import { cn } from "@/lib/utils";
+import { Icon } from "@/shared/Icon";
+import { SpecialFeatureCard } from "@/shared/SpecialFeatureCard";
+import type { LandingSpecialFeatureGridProps } from "@/types/landing";
+
+export function LandingSpecialFeatureGrid({ className }: LandingSpecialFeatureGridProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center gap-10",
+        "md:flex md:flex-row md:justify-center md:gap-8",
+        className,
+      )}
+    >
+      {SPECIAL_FEATURES.map((feature) => (
+        <SpecialFeatureCard
+          key={feature.title}
+          icon={<Icon name={feature.iconName} size={28} />}
+          title={feature.title}
+          description={feature.description}
+        />
+      ))}
+    </div>
+  );
+}

src/components/landing/LandingSpecialFeaturesSection.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { LandingSpecialFeatureGrid } from "@/components/landing/LandingSpecialFeatureGrid";
+import { cn } from "@/lib/utils";
+import type { LandingSpecialFeaturesSectionProps } from "@/types/landing";
+
+export function LandingSpecialFeaturesSection({ className }: LandingSpecialFeaturesSectionProps) {
+  return (
+    <section
+      id="landing-special-features"
+      aria-labelledby="landing-special-features-title"
+      className={cn("bg-[var(--color-gray-50)] py-24 md:py-32", className)}
+    >
+      <div className="container space-y-12 md:space-y-16">
+        {/* 섹션 인트로: 제목 + 부제 */}
+        <header className="space-y-4 text-center">
+          <h2
+            id="landing-special-features-title"
+            className="t-30-b md:t-40-b text-[var(--color-gray-900)]"
+          >
+            PlanMate의 특별한 기능들
+          </h2>
+          <p className="t-14-m md:t-16-m text-[var(--color-gray-600)]">
+            당신의 생산성을 높이는 스마트한 도구들
+          </p>
+        </header>
+
+        {/* 하단 카드 그리드 */}
+        <LandingSpecialFeatureGrid />
+      </div>
+    </section>
+  );
+}

src/lib/constants.ts

@@ -1,4 +1,4 @@
-import { FeatureItem } from "@/types/landing";
+import { FeatureItem, FooterLink, SpecialFeatureItem } from "@/types/landing";
 
 /* -------------------------------------------------
    📦 프로젝트 공통 상수 (Global Constants)
@@ -56,6 +56,23 @@ export const SIGNUP_BTNS = [
 
 export type SignupButtonKey = (typeof SIGNUP_BTNS)[number]["key"];
 
+/* -------------------------------------------------
+   🧩 Layout - Footer
+   - LandingFooter에서 사용
+   ------------------------------------------------- */
+
+export const PRODUCTLINKS: FooterLink[] = [
+  { label: "기능 소개", href: "/features" },
+  { label: "요금제", href: "/pricing" },
+  { label: "업데이트", href: "/changelog" },
+];
+
+export const SUPPORTLINKS: FooterLink[] = [
+  { label: "FAQ", href: "/faq" },
+  { label: "문의하기", href: "/support" },
+  { label: "개인정보처리방침", href: "/privacy" },
+];
+
 /* -------------------------------------------------
    🧩 랜딩 페이지 — 기능 소개 섹션 1
    - LandingFeatureGrid / LandingFeaturesSection1에서 사용
@@ -100,3 +117,26 @@ export const FEATURES: FeatureItem[] = [
     previewImageSrc: "/images/feature-memo.png",
   },
 ];
+
+/* -------------------------------------------------
+   🧩 랜딩 페이지 — 특별한 기능 소개 섹션
+   - LandingSpecialFeatureGrid 사용
+   ------------------------------------------------- */
+
+export const SPECIAL_FEATURES: SpecialFeatureItem[] = [
+  {
+    title: "스마트 스케줄링",
+    description: "AI가 추천하는 최적의 일정 배치로 효율성을 극대화하세요.",
+    iconName: "calendar",
+  },
+  {
+    title: "팀 협업",
+    description: "팀원들과 실시간으로 일정을 공유하고 함께 작업하세요.",
+    iconName: "users",
+  },
+  {
+    title: "스마트 알림",
+    description: "중요한 일정을 놓치지 않도록 맞춤형 알림을 받아보세요.",
+    iconName: "bellRing",
+  },
+];

src/lib/variants/card.specialFeatureCard.ts

@@ -20,7 +20,7 @@ export const specialFeatureCardVariants = cva(
       size: {
         sm: "w-[30rem] h-[20rem] p-5 gap-4",
         md: "w-[35rem] h-[22rem] p-6 gap-4",
-        lg: "w-[40rem] h-[25rem] p-7 gap-5",
+        lg: "max-w-[40rem] h-[25rem] p-7 gap-5",
         xl: "w-[45rem] h-[28rem] p-8 gap-6",
       },
     },

src/types/landing.ts

@@ -74,3 +74,22 @@ export type LandingFeaturesSection2Props = WithClassName;
 export type LandingLayoutPreviewProps = WithClassName;
 
 export type LandingFeatureTextProps = WithClassName;
+
+/* -------------------------------------------------
+   특별한 기능 섹션
+   ------------------------------------------------- */
+export type LandingSpecialFeaturesSectionProps = WithClassName;
+
+export type LandingSpecialFeatureGridProps = WithClassName;
+
+/* -------------------------------------------------
+   특별한 기능 섹션 — Feature 리스트
+   ------------------------------------------------- */
+
+export type SpecialFeatureIconName = "calendar" | "users" | "bellRing";
+
+export interface SpecialFeatureItem {
+  title: string;
+  description: string;
+  iconName: SpecialFeatureIconName;
+}