feat: matching 페이지 디자인

app/extra-info/_components/StartExtraInfo.tsx

@@ -14,8 +14,8 @@ const StartExtraInfo = () => {
 
   useEffect(() => {
     const t1 = setTimeout(() => setShowFirst(true), 100);
-    const t2 = setTimeout(() => setShowSecond(true), 2100);
-    const t3 = setTimeout(() => setShowThird(true), 4100);
+    const t2 = setTimeout(() => setShowSecond(true), 1100);
+    const t3 = setTimeout(() => setShowThird(true), 2100);
     return () => {
       clearTimeout(t1);
       clearTimeout(t2);

app/layout.tsx

@@ -67,7 +67,7 @@ export default async function RootLayout({
           {/* <ServiceStatusProvider
             initialMaintenanceMode={initialMaintenanceMode}
           > */}
-          <div className="bg-background-app-base relative min-h-dvh w-full overflow-x-hidden text-black md:max-w-[430px] md:shadow-lg">
+          <div className="bg-background-app-base relative isolate min-h-dvh w-full overflow-x-hidden text-black md:max-w-[430px] md:shadow-lg">
             <Blur />
             <FcmInitializer />
             {children}

app/matching/_components/ImportantBottomSheet.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import React from "react";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
+import { ImportantOption } from "@/lib/types/matching";
+
+interface ImportantBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelect: (option: ImportantOption) => void;
+  selectedOption?: ImportantOption | null;
+}
+
+export default function ImportantBottomSheet({
+  isOpen,
+  onClose,
+  onSelect,
+  selectedOption,
+}: ImportantBottomSheetProps) {
+  const options: { label: string; value: ImportantOption }[] = [
+    { label: "MBTI", value: "MBTI" },
+    { label: "나이", value: "AGE" },
+    { label: "관심사", value: "HOBBY" },
+    { label: "연락빈도", value: "CONTACT" },
+  ];
+
+  return (
+    <Drawer open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DrawerContent className="pb-10">
+        <DrawerHeader className="text-left">
+          <DrawerTitle className="typo-20-700 text-color-text-black">
+            가장 중요한 옵션 선택
+          </DrawerTitle>
+          <p className="typo-14-500 text-color-text-caption3 mt-1">
+            AI가 어떤 조건을 최우선으로 고려하면 좋을까요?
+          </p>
+        </DrawerHeader>
+        <div className="mt-2 flex flex-col px-4">
+          {options.map((option) => (
+            <button
+              key={option.value}
+              className={`border-color-gray-100 flex w-full items-center justify-between border-b py-4 transition-colors last:border-none ${
+                selectedOption === option.value
+                  ? "text-color-main-700 font-bold"
+                  : "text-color-text-black"
+              }`}
+              onClick={() => {
+                onSelect(option.value);
+                onClose();
+              }}
+            >
+              <span className="typo-16-600">{option.label}</span>
+              {selectedOption === option.value && (
+                <div className="bg-color-main-700 h-2 w-2 rounded-full" />
+              )}
+            </button>
+          ))}
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}

app/matching/_components/MatchingAgeSection.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import React from "react";
+import ProfileButton from "../../profile-builder/_components/ProfileButton";
+interface MatchingAgeSectionProps {
+  onAgeGroupSelect: (ageGroup: string) => void;
+  defaultValue?: string;
+}
+
+export default function MatchingAgeSection({
+  onAgeGroupSelect,
+  defaultValue = "",
+}: MatchingAgeSectionProps) {
+  const [selected, setSelected] = React.useState(defaultValue);
+  const ageGroups = ["연하", "동갑", "연상"];
+
+  const handleSelect = (group: string) => {
+    setSelected(group);
+    onAgeGroupSelect(group);
+  };
+
+  return (
+    <div className="border-color-gray-100 flex flex-col gap-4 border-b pb-5">
+      <div className="flex items-center justify-between">
+        <div className="flex flex-col gap-1">
+          <h2 className="typo-20-700 text-color-text-black">나이</h2>
+          <p className="typo-14-500 text-color-text-caption3">
+            상대의 나이를 골라주세요.
+          </p>
+        </div>
+      </div>
+      <div className="flex gap-1.5">
+        {ageGroups.map((group) => (
+          <ProfileButton
+            key={group}
+            selected={selected === group}
+            onClick={() => handleSelect(group)}
+          >
+            {group}
+          </ProfileButton>
+        ))}
+      </div>
+    </div>
+  );
+}

app/matching/_components/MatchingFrequencySection.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import React from "react";
+import ProfileButton from "../../profile-builder/_components/ProfileButton";
+
+interface MatchingFrequencySectionProps {
+  onFrequencySelect: (frequency: string) => void;
+  defaultValue?: string;
+}
+
+export default function MatchingFrequencySection({
+  onFrequencySelect,
+  defaultValue = "",
+}: MatchingFrequencySectionProps) {
+  const [selected, setSelected] = React.useState(defaultValue);
+  const options = ["자주", "보통", "적음"];
+
+  const handleSelect = (frequency: string) => {
+    setSelected(frequency);
+    onFrequencySelect(frequency);
+  };
+
+  return (
+    <div className="border-color-gray-100 flex flex-col gap-4 border-b pb-5">
+      <div className="flex items-center justify-between">
+        <div className="flex flex-col gap-1">
+          <h2 className="typo-20-700 text-color-text-black">연락빈도</h2>
+          <p className="typo-14-500 text-color-text-caption3">
+            상대방의 연락빈도를 골라주세요.
+          </p>
+        </div>
+      </div>
+      <div className="flex gap-1.5">
+        {options.map((option) => (
+          <ProfileButton
+            key={option}
+            selected={selected === option}
+            onClick={() => handleSelect(option)}
+          >
+            {option}
+          </ProfileButton>
+        ))}
+      </div>
+    </div>
+  );
+}

app/matching/_components/MatchingHobbyBottomSheet.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import React from "react";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
+import { HOBBIES, HobbyCategory } from "@/lib/constants/hobbies";
+
+interface MatchingHobbyBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelect: (category: HobbyCategory) => void;
+  selectedCategory?: string;
+}
+
+export default function MatchingHobbyBottomSheet({
+  isOpen,
+  onClose,
+  onSelect,
+  selectedCategory,
+}: MatchingHobbyBottomSheetProps) {
+  const categories = Object.keys(HOBBIES) as HobbyCategory[];
+
+  return (
+    <Drawer open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DrawerContent className="pb-10">
+        <DrawerHeader className="text-left">
+          <DrawerTitle className="typo-20-700 text-color-text-black">
+            관심사 카테고리 선택
+          </DrawerTitle>
+          <p className="typo-14-500 text-color-text-caption3 mt-1">
+            어떤 분야의 관심사를 가진 분을 찾으시나요?
+          </p>
+        </DrawerHeader>
+        <div className="mt-2 flex flex-col px-4">
+          {categories.map((category) => (
+            <button
+              key={category}
+              className={`border-color-gray-100 flex w-full items-center justify-between border-b py-4 transition-colors last:border-none ${
+                selectedCategory === category
+                  ? "text-color-main-700 font-bold"
+                  : "text-color-text-black"
+              }`}
+              onClick={() => {
+                onSelect(category);
+                onClose();
+              }}
+            >
+              <span className="typo-16-600">{category}</span>
+              {selectedCategory === category && (
+                <div className="bg-color-main-700 h-2 w-2 rounded-full" />
+              )}
+            </button>
+          ))}
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}

app/matching/_components/MatchingHobbySection.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import React from "react";
+import { ChevronRight } from "lucide-react";
+
+interface MatchingHobbySectionProps {
+  onHobbyClick?: () => void;
+  selectedHobbies?: string[];
+}
+
+export default function MatchingHobbySection({
+  onHobbyClick,
+  selectedHobbies = [],
+}: MatchingHobbySectionProps) {
+  return (
+    <div className="border-color-gray-100 flex w-full flex-col gap-4 border-b pb-5">
+      <div className="flex w-full items-center justify-between">
+        <button
+          className="flex flex-1 items-center justify-between text-left"
+          onClick={onHobbyClick}
+        >
+          <div className="flex flex-col gap-1">
+            <h2 className="typo-20-700 text-color-text-black">관심사</h2>
+            <p className="typo-14-500 text-color-text-caption3">
+              상대방이 가졌음 하는 관심사를 골라주세요.
+            </p>
+          </div>
+          <ChevronRight className="text-color-text-caption3 h-5 w-5" />
+        </button>
+      </div>
+
+      {/* 선택된 관심사들이 있다면 여기에 표시 (추후 구현 가능) */}
+      {selectedHobbies.length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {selectedHobbies.map((hobby) => (
+            <span
+              key={hobby}
+              className="typo-14-500 bg-color-gray-50 text-color-gray-800 rounded-full px-3 py-1"
+            >
+              {hobby}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

app/matching/_components/MatchingImportantOptionSection.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import Image from "next/image";
+import React from "react";
+
+interface MatchingImportantOptionSectionProps {
+  onClick?: () => void;
+}
+
+export default function MatchingImportantOptionSection({
+  onClick,
+}: MatchingImportantOptionSectionProps) {
+  return (
+    <button
+      className="border-color-gray-100 flex w-full items-center justify-between border-b pb-5 text-left"
+      onClick={onClick}
+    >
+      <div className="flex flex-col gap-1">
+        <div className="flex items-end gap-1">
+          <h2 className="typo-20-700 text-color-text-black">
+            중요한 옵션 선택하기
+          </h2>
+          <span className="typo-10-600 text-color-flame-700 mb-[3px] leading-[12px]">
+            추천
+          </span>
+        </div>
+        <p className="typo-14-500 text-color-text-caption3">
+          AI에게 가장 중요한 옵션을 알려주세요!
+        </p>
+      </div>
+      {/* 가격 뱃지 */}
+      <div className="border-color-gray-100 flex h-9 w-[86px] items-center justify-center gap-[5px] rounded-[36px] border bg-white px-2">
+        <Image
+          src="/main/elec-bulb.png"
+          alt="bulb"
+          width={20}
+          height={20}
+          className="shrink-0"
+        />
+        <span className="typo-16-700 text-color-text-black leading-[19px]">
+          1
+        </span>
+      </div>
+    </button>
+  );
+}