From 8d6de185b2ff5527239f727706dcf4f38bd4f2f3 Mon Sep 17 00:00:00 2001
From: Lee Hye Won <thankyou@sookmyung.ac.kr>
Date: Wed, 8 Jul 2026 04:27:48 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat(web):=20OnboardingSelectCard=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(#1?=
 =?UTF-8?q?08)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- sm/lg 사이즈 props로 레이아웃을 제어했습니다
- selected 상태에 따라 배경·보더·텍스트 색상을 변경했습니다
- 라디오 아이콘을 별도 컴포넌트 없이 직접 구현했습니다
---
 .../_components/OnboardingSelectCard.tsx      | 90 +++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 apps/timo-web/app/[locale]/onboarding/_components/OnboardingSelectCard.tsx

diff --git a/apps/timo-web/app/[locale]/onboarding/_components/OnboardingSelectCard.tsx b/apps/timo-web/app/[locale]/onboarding/_components/OnboardingSelectCard.tsx
new file mode 100644
index 00000000..b8ace707
--- /dev/null
+++ b/apps/timo-web/app/[locale]/onboarding/_components/OnboardingSelectCard.tsx
@@ -0,0 +1,90 @@
+import { cn } from "@repo/timo-design-system/utils";
+
+export interface OnboardingSelectCardProps {
+  size: "sm" | "lg";
+  selected: boolean;
+  label: string;
+  sublabel: string;
+  onClick?: () => void;
+}
+
+export const OnboardingSelectCard = ({
+  size,
+  selected,
+  label,
+  sublabel,
+  onClick,
+}: OnboardingSelectCardProps) => {
+  const radioIcon = (
+    <div
+      className={cn(
+        "size-[18px] shrink-0 rounded-full bg-white",
+        selected
+          ? "border-timo-blue-300 border-[5px]"
+          : "border-timo-gray-500 border-2",
+      )}
+    />
+  );
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "flex rounded-[4px] border px-4 py-2 text-left",
+        selected
+          ? "border-timo-blue-300 bg-timo-blue-50"
+          : "border-timo-gray-500 bg-white",
+        size === "sm"
+          ? "w-[150px]"
+          : "w-[304px] flex-row items-center justify-between",
+      )}
+    >
+      {size === "sm" ? (
+        <div className="flex w-full flex-col items-end gap-1">
+          <div className="flex w-full flex-col">
+            <span
+              className={cn(
+                "typo-headline-b-16",
+                selected ? "text-timo-blue-300" : "text-timo-gray-900",
+              )}
+            >
+              {label}
+            </span>
+            <span
+              className={cn(
+                "typo-body-m-12",
+                selected ? "text-timo-blue-300" : "text-timo-gray-700",
+              )}
+            >
+              {sublabel}
+            </span>
+          </div>
+          {radioIcon}
+        </div>
+      ) : (
+        <>
+          <div className="flex flex-col">
+            <span
+              className={cn(
+                "typo-headline-b-16",
+                selected ? "text-timo-blue-300" : "text-timo-gray-900",
+              )}
+            >
+              {label}
+            </span>
+            <span
+              className={cn(
+                "typo-body-m-12",
+                selected ? "text-timo-blue-300" : "text-timo-gray-700",
+              )}
+            >
+              {sublabel}
+            </span>
+          </div>
+          {radioIcon}
+        </>
+      )}
+    </button>
+  );
+};

From 4dec1368230fb9eb67cedb48a007e6446301664b Mon Sep 17 00:00:00 2001
From: Lee Hye Won <thankyou@sookmyung.ac.kr>
Date: Thu, 9 Jul 2026 01:44:17 +0900
Subject: [PATCH 2/2] =?UTF-8?q?style(web):=20OnboardingSelectCard=20?=
 =?UTF-8?q?=EC=9E=84=EC=9D=98=20=ED=81=AC=EA=B8=B0=EA=B0=92=20Tailwind=20?=
 =?UTF-8?q?=ED=81=B4=EB=9E=98=EC=8A=A4=EB=A1=9C=20=EA=B5=90=EC=B2=B4=20(#1?=
 =?UTF-8?q?08)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- size-[18px]을 size-4.5로 교체했습니다
- w-[150px]을 w-37.5로 교체했습니다
- w-[304px]을 w-76으로 교체했습니다
---
 .../onboarding/_components/OnboardingSelectCard.tsx         | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/timo-web/app/[locale]/onboarding/_components/OnboardingSelectCard.tsx b/apps/timo-web/app/[locale]/onboarding/_components/OnboardingSelectCard.tsx
index b8ace707..3f7c0a99 100644
--- a/apps/timo-web/app/[locale]/onboarding/_components/OnboardingSelectCard.tsx
+++ b/apps/timo-web/app/[locale]/onboarding/_components/OnboardingSelectCard.tsx
@@ -18,7 +18,7 @@ export const OnboardingSelectCard = ({
   const radioIcon = (
     <div
       className={cn(
-        "size-[18px] shrink-0 rounded-full bg-white",
+        "size-4.5 shrink-0 rounded-full bg-white",
         selected
           ? "border-timo-blue-300 border-[5px]"
           : "border-timo-gray-500 border-2",
@@ -35,9 +35,7 @@ export const OnboardingSelectCard = ({
         selected
           ? "border-timo-blue-300 bg-timo-blue-50"
           : "border-timo-gray-500 bg-white",
-        size === "sm"
-          ? "w-[150px]"
-          : "w-[304px] flex-row items-center justify-between",
+        size === "sm" ? "w-37.5" : "w-76 flex-row items-center justify-between",
       )}
     >
       {size === "sm" ? (