Feature/CDP-159-SelectModuleCard

src/app/(marketing)/page.tsx

@@ -5,6 +5,7 @@ import { Button } from "@/shared/button";
 import { FeatureButton } from "@/shared/FeatureButton";
 import { Icon } from "@/shared/Icon";
 import { Input } from "@/shared/input";
+import { SelectModuleCard } from "@/shared/SelectModuleCard";
 import { SpecialFeatureCard } from "@/shared/SpecialFeatureCard";
 import { InputStatus } from "@/types/input";
 import { useState } from "react";
@@ -101,6 +102,25 @@ export default function Home() {
       </section>
 
       <SignupGroupButton />
+
+      <SelectModuleCard
+        kind="module" // "module" | "design"
+        title="일간 플래너"
+        subtitle="Daily Intelligence"
+        description="하루를 체계적으로 관리하세요"
+        imageSrc="/images/daily-planner.png"
+        onClick={() => console.log("일간 플래너 클릭")}
+      />
+
+      <SelectModuleCard
+        kind="design" // "module" | "design"
+        title="일간 플래너"
+        subtitle="Daily Intelligence"
+        subtitleState="noSelect"
+        description="하루를 체계적으로 관리하세요"
+        imageSrc="/images/daily-planner.png"
+        onClick={() => console.log("일간 플래너 클릭")}
+      />
     </div>
   );
 }

src/lib/variants/card.selectModule.ts

@@ -0,0 +1,54 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const selectModuleCardRoot = cva(
+  [
+    "rounded-[2rem] border bg-[var(--color-white)] shadow-md",
+    "transition-all duration-200",
+    "p-8 h-[35rem]",
+    "cursor-pointer hover:shadow-md focus-visible:outline-none",
+    "focus-visible:ring-2 focus-visible:ring-[var(--color-ring)]",
+    "hover:scale-[1.02] hover:-translate-y-1",
+    "hover:[box-shadow:var(--shadow-hover)]",
+  ].join(" "),
+  {
+    variants: {
+      kind: {
+        module: "w-[28rem]",
+        design: "w-[23rem] p-10",
+      },
+    },
+    defaultVariants: { kind: "module" },
+  },
+);
+
+export const selectModuleCardTitle = cva("text-[var(--color-gray-900)]", {
+  variants: {
+    kind: { module: "t-22-b", design: "t-22-b" },
+  },
+  defaultVariants: { kind: "module" },
+});
+
+export const selectModuleCardSubtitle = cva("t-14-m", {
+  variants: {
+    state: {
+      select: "text-[var(--color-blue-600)]",
+      noSelect: "text-[var(--color-danger-600)]",
+    },
+  },
+  defaultVariants: { state: "select" },
+});
+
+export const selectModuleCardDescription = cva("text-[var(--color-gray-600)]", {
+  variants: {
+    kind: { module: "t-14-m", design: "t-14-m" },
+  },
+  defaultVariants: { kind: "module" },
+});
+
+export const selectModuleCardImageWrap = cva(
+  ["mt-15 w-full overflow-hidden", "aspect-[18/12] grid place-items-center", "relative"].join(" "),
+);
+
+export const selectModuleCardImage = cva("h-full w-full object-contain");
+
+export type SelectModuleCardRootVariants = VariantProps<typeof selectModuleCardRoot>;

src/shared/SelectModuleCard.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import {
+  selectModuleCardDescription,
+  selectModuleCardImage,
+  selectModuleCardImageWrap,
+  selectModuleCardRoot,
+  selectModuleCardSubtitle,
+  selectModuleCardTitle,
+} from "@/lib/variants/card.selectModule";
+import type { SelectModuleCardProps } from "@/types/card";
+import Image from "next/image";
+import * as React from "react";
+
+export const SelectModuleCard = React.forwardRef<HTMLDivElement, SelectModuleCardProps>(
+  (
+    {
+      className,
+      title,
+      subtitle,
+      description,
+      imageSrc,
+      imageAlt,
+      kind = "module",
+      subtitleState = "select",
+      children,
+      ...native
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        role="button"
+        tabIndex={0}
+        className={cn(selectModuleCardRoot({ kind }), className)}
+        {...native}
+      >
+        <div className="space-y-1">
+          <h3 className={selectModuleCardTitle({ kind })}>{title}</h3>
+          {subtitle ? (
+            <p className={selectModuleCardSubtitle({ state: subtitleState })}>{subtitle}</p>
+          ) : null}
+          {description ? (
+            <p className={selectModuleCardDescription({ kind })}>{description}</p>
+          ) : null}
+        </div>
+
+        {children}
+
+        {imageSrc ? (
+          <div className={selectModuleCardImageWrap()}>
+            <Image
+              src={imageSrc}
+              alt={imageAlt ?? ""}
+              fill
+              className={selectModuleCardImage()}
+              sizes="(max-width: 520px) 100vw, 520px"
+              priority={false}
+            />
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+SelectModuleCard.displayName = "SelectModuleCard";

src/shared/SpecialFeatureCard.tsx

@@ -1,14 +1,14 @@
 "use client";
 import { cn } from "@/lib/utils";
 import { specialFeatureCardVariants } from "@/lib/variants/card.specialFeatureCard";
-import type { SpecialFeatureCardProps } from "@/types/special-feature-card";
+import type { SpecialFeatureCardProps } from "@/types/card";
 import * as React from "react";
 
 export const SpecialFeatureCard = React.forwardRef<HTMLDivElement, SpecialFeatureCardProps>(
   (props, ref) => {
     const { className, icon, title, description, children, ...native } = props;
 
-    const classes = specialFeatureCardVariants({});
+    const classes = specialFeatureCardVariants({ size: "lg" });
 
     return (
       <div ref={ref} className={cn(classes, className)} {...native}>

src/styles/globals.css

@@ -74,6 +74,7 @@
   /* === Radius & Shadow === */
   --radius-2xl: 1rem;
   --shadow-soft: 0 6px 16px rgba(0, 0, 0, 0.08);
+  --shadow-hover: 0 4px 24px rgba(0, 0, 0, 0.12);
 }
 
 /* === Tailwind/shadcn 매핑 (Light) ============================

src/types/card.ts

@@ -1,16 +1,33 @@
 import type { HTMLAttributes } from "react";
 
-export type CardPreset = "specialFeature";
-export type CardSize = "sm" | "md" | "lg" | "xl";
-
+// 공통 베이스
 export interface BaseCardProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
 }
 
 /** specialFeature 전용 */
-export type SpecialFeatureCardProps = BaseCardProps & {
-  preset: "specialFeature";
-  size?: CardSize;
-};
+export interface SpecialFeatureCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  icon?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+/** selectModule 전용 */
+import * as React from "react";
+
+export type SelectModuleCardKind = "module" | "design";
+export type SubtitleState = "select" | "noSelect";
+
+export interface SelectModuleCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string; // 한글 제목
+  subtitle?: string; // 영문 서브타이틀
+  description?: string; // 설명
+  imageSrc?: string; // 섬네일 경로
+  imageAlt?: string; // 대체 텍스트
+  kind?: SelectModuleCardKind; // module | design (타이포만 달라짐)
+  subtitleState?: SubtitleState;
+  children?: React.ReactNode;
+}
 
-export type CardProps = SpecialFeatureCardProps;
+export type CardProps = SpecialFeatureCardProps | SelectModuleCardProps;