Refactor/home&test 최종 QA 반영

app/components/common/BottomSheet 2.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from "react";
+import { cn } from "../../lib/utils";
+
+type BottomSheetProps = {
+  open: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  height?: number | string;
+  className?: string;
+  contentClassName?: string;
+  overlayClassName?: string;
+};
+
+export default function BottomSheet({
+  open,
+  onClose,
+  children,
+  height,
+  className,
+  contentClassName,
+  overlayClassName,
+}: BottomSheetProps) {
+  if (!open) return null;
+
+  const heightStyle =
+    height === undefined
+      ? undefined
+      : typeof height === "number"
+        ? { height: `${height}px` }
+        : { height };
+
+  return (
+    <div className="fixed inset-0 z-50">
+      <button
+        type="button"
+        aria-label="close"
+        className={cn("absolute inset-0 bg-[#17171833]", overlayClassName)}
+        onClick={onClose}
+      />
+
+      <div
+        className={cn(
+          "fixed left-1/2 bottom-0 w-full max-w-[480px] -translate-x-1/2",
+          "rounded-t-[12px] bg-white flex flex-col animate-slide-up",
+          className,
+        )}
+        style={heightStyle}
+      >
+        <div className={cn("flex-1 flex flex-col", contentClassName)}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

app/routes/campaign-detail/campaign-detail.tsx

@@ -16,7 +16,6 @@ import type {
   CampaignDetailApiResponse,
 } from "../campaign-detail/types";
 
-import informationIconUrl from "../../assets/information-icon.svg?url";
 import CampaignDetailSkeleton from "./components/CampaignDetailSkeleton";
 import { toggleCampaignLike } from "./campaign-like";
 
@@ -406,23 +405,28 @@ export default function CampaignDetailContent({
             description={brandData.description}
           />
 
-          <div className="my-3 flex items-center gap-2 text-title1 text-core-1 font-[16px]">
+          <div className="my-3 flex items-center gap-2 text-core-1">
             <MetaItem
               icon={
-                <img
-                  src={informationIconUrl}
-                  alt=""
-                  className="block h-4 w- select-none"
-                  draggable={false}
-                />
+                <span className="relative block h-[1.125rem] w-4 shrink-0">
+                  <span className="absolute left-0 top-0.5 h-4 w-4 rounded-full border-[0.09375rem] border-core-1" />
+                  <span className="absolute left-1/2 top-[0.22rem] -translate-x-1/2 text-[0.8125rem] font-semibold leading-none text-core-1">
+                    i
+                  </span>
+                </span>
               }
               text={toDdayText(campaign.dday)}
             />
 
-            <span className="px-1 text-core-3">|</span>
-            <span className="text-core-1">{campaign.quota}명</span>
-            <span className="px-1 text-core-3">|</span>
-            <span className="text-core-1">
+            <span className="h-2.5 w-px bg-core-3" />
+
+            <span className="font-semibold leading-5 text-core-1">
+              {campaign.quota}명
+            </span>
+
+            <span className="h-2.5 w-px bg-core-3" />
+
+            <span className="font-semibold leading-5 text-core-1">
               {toKoreanCategory(campaign.category)}
             </span>
           </div>
@@ -555,11 +559,9 @@ function DetailRow({
 
 function MetaItem({ icon, text }: { icon?: React.ReactNode; text: string }) {
   return (
-    <span className="flex items-center gap-1">
-      {icon ? (
-        <span className="flex h-5 w-5 items-center justify-center">{icon}</span>
-      ) : null}
-      <span className="leading-none">{text}</span>
+    <span className="inline-flex items-center gap-2">
+      {icon ? <span className="shrink-0">{icon}</span> : null}
+      <span className="leading-5 font-semibold text-core-1">{text}</span>
     </span>
   );
 }

app/routes/home/components/HeartButton.tsx

@@ -31,7 +31,7 @@ export default function HeartButton({
       <svg width="20" height="20" viewBox="0 0 20 20">
         <path
           d="M16.7663 5.05755C16.3753 4.68695 15.9111 4.39295 15.4002 4.19237C14.8893 3.99179 14.3417 3.88855 13.7887 3.88855C13.2357 3.88855 12.6881 3.99179 12.1772 4.19237C11.6663 4.39295 11.2021 4.68695 10.8112 5.05755L9.9998 5.82634L9.18843 5.05755C8.39874 4.3093 7.32768 3.88894 6.21089 3.88894C5.09409 3.88894 4.02303 4.3093 3.23334 5.05755C2.44365 5.80581 2 6.82066 2 7.87884C2 8.93703 2.44365 9.95188 3.23334 10.7001L9.9998 17.1115L16.7663 10.7001C17.1574 10.3297 17.4677 9.88988 17.6794 9.40579C17.891 8.9217 18 8.40284 18 7.87884C18 7.35485 17.891 6.83599 17.6794 6.3519C17.4677 5.86781 17.1574 5.42799 16.7663 5.05755Z"
-          stroke={pressed ? "var(--color-core-3)" : "var(--color-text-gray4)"}
+          stroke={pressed ? "var(--color-core-3)" : "var(--color-core-3)"}
           fill={pressed ? "var(--color-core-3)" : "transparent"}
           strokeWidth="1.5"
         />

app/routes/matching/test/result/matching-result-content.tsx

@@ -129,64 +129,83 @@ export default function MatchingResultContent() {
 
   return (
     <div className="h-full w-full overflow-hidden bg-[linear-gradient(180deg,#EAEAFF_0%,#EFEFFE_39%,#FAFAFD_100%)]">
-      <div className="mx-auto h-full w-full max-w-[560px]">
-        <div className="h-full w-full flex flex-col">
-          <div className="flex-1 min-h-0 flex flex-col items-center justify-end gap-[clamp(20px,4vh,36px)] px-[clamp(16px,5vw,24px)] pt-[clamp(24px,6vh,56px)]">
-            <div className="w-full flex flex-col items-center gap-[clamp(18px,3.5vh,24px)]">
-              <div className="w-full flex flex-col items-center gap-[clamp(10px,2vh,14px)]">
-                <div className="w-full flex flex-col gap-[clamp(6px,1.2vh,8px)]">
-                  <p className="text-center text-[clamp(13px,3.2vw,14px)] leading-5 font-medium text-text-gray2">
-                    <span className="font-semibold text-core-1">
+      <div className="mx-auto h-full w-full max-w-md">
+        <div className="flex h-full w-full flex-col overflow-hidden">
+          <div
+            className="flex min-h-0 flex-1 flex-col items-center px-4"
+            style={{
+              paddingTop: "clamp(3.5rem, 14dvh, 7rem)",
+              paddingBottom: "clamp(1rem, 2.5dvh, 1.5rem)",
+            }}
+          >
+            <div
+              className="flex w-full flex-1 min-h-0 flex-col items-center"
+              style={{ gap: "clamp(1.25rem, 3dvh, 2rem)" }}
+            >
+              <div
+                className="flex w-full flex-col items-center"
+                style={{ gap: "clamp(0.75rem, 2dvh, 1rem)" }}
+              >
+                <div className="flex w-full flex-col gap-2">
+                  <p className="text-center text-title3 text-text-gray1">
+                    <span className="text-title3 text-core-1">
                       {data.userName}
                     </span>{" "}
                     님의 매칭 결과
                   </p>
-                  <h1 className="text-center text-[clamp(22px,6.2vw,28px)] leading-[1.07] font-extrabold text-[#382FE4]">
+                  <h1 className="text-center text-headline1 bg-[linear-gradient(90deg,#382FE4_0%,#5D5DFF_48%,#3915DA_95%)] bg-clip-text text-transparent font-extrabold">
                     {data.userType}
                   </h1>
                 </div>
 
-                <div className="flex flex-wrap items-center justify-center gap-[clamp(3px,0.8vh,4px)]">
+                <div className="flex flex-wrap items-center justify-center gap-1">
                   {data.tags.map((tag) => (
                     <span
                       key={tag}
-                      className="rounded-full border border-bluegray-2 bg-white/80 px-[clamp(8px,2.2vw,12px)] py-[clamp(3px,0.9vh,4px)] text-[clamp(11px,2.8vw,12px)] leading-4 font-medium text-text-gray2"
+                      className="rounded-full border border-bluegray-2 bg-white/80 px-3 py-1 text-callout1 text-text-gray2"
                     >
                       #{tag}
                     </span>
                   ))}
                 </div>
               </div>
 
-              <div className="relative w-[min(56vw,210px)] aspect-[7/6]">
-                <img
-                  src={userTypeIconSrc}
-                  alt={data.userType}
-                  className="absolute left-0 top-[-12%] h-[112%] w-full select-none object-contain"
-                  draggable={false}
-                />
+              <div className="flex w-full flex-1 min-h-0 items-center justify-center">
+                <div className="relative aspect-[7/6] w-[min(56vw,13.125rem)]">
+                  <img
+                    src={userTypeIconSrc}
+                    alt={data.userType}
+                    className="absolute left-0 top-[-12%] h-[112%] w-full select-none object-contain"
+                    style={{
+                      imageRendering: "auto",
+                      transform: "translateZ(0)",
+                      backfaceVisibility: "hidden",
+                      WebkitFontSmoothing: "antialiased",
+                    }}
+                    draggable={false}
+                  />
+                </div>
               </div>
 
-              {loading ? (
-                <p className="text-[clamp(11px,2.8vw,12px)] leading-4 font-medium text-text-gray2">
-                  불러오는 중…
-                </p>
-              ) : null}
-              {error ? (
-                <p className="text-[clamp(11px,2.8vw,12px)] leading-4 font-medium text-red-500">
-                  {error}
-                </p>
-              ) : null}
-
-              <div className="w-full flex flex-col items-center gap-[clamp(6px,1.3vh,8px)]">
-                <p className="text-center text-[clamp(13px,3.2vw,14px)] leading-[18px] font-semibold text-text-gray2">
+              <div
+                className="flex w-full flex-col items-center"
+                style={{ gap: "clamp(0.5rem, 1.5dvh, 0.75rem)" }}
+              >
+                {loading ? (
+                  <p className="text-callout1 text-text-gray2">불러오는 중…</p>
+                ) : null}
+                {error ? (
+                  <p className="text-callout1 text-red-500">{error}</p>
+                ) : null}
+
+                <p className="text-center text-title3 text-text-gray2">
                   나와 어울리는 TOP3 브랜드
                 </p>
 
-                <div className="flex items-start justify-center gap-[clamp(8px,2.2vw,12px)]">
+                <div className="flex items-start justify-center gap-3">
                   {data.brands.map((b) => (
-                    <div key={b.brandId} className="w-[clamp(64px,18vw,72px)]">
-                      <div className="h-[clamp(64px,18vw,72px)] w-full rounded-[5px] bg-bluegray-2 p-[1px]">
+                    <div key={b.brandId} className="w-[min(22vw,5rem)]">
+                      <div className="aspect-square w-full rounded-[5px] bg-bluegray-2 p-[1px]">
                         <div className="h-full w-full overflow-hidden rounded-[4px] bg-white">
                           {b.logoUrl ? (
                             <img
@@ -196,40 +215,40 @@ export default function MatchingResultContent() {
                               draggable={false}
                             />
                           ) : (
-                            <div className="flex h-full w-full items-center justify-center px-1 text-center text-[clamp(9px,2.2vw,10px)] font-semibold text-text-black">
+                            <div className="flex h-full w-full items-center justify-center px-1 text-center text-title7 text-text-gray2">
                               {short5(b.brandName)}
                             </div>
                           )}
                         </div>
                       </div>
 
-                      <div className="mt-[clamp(4px,1vh,6px)] flex items-center justify-between">
-                        <span className="min-w-0 truncate pr-1 text-[clamp(9px,2.2vw,10px)] leading-3 font-semibold text-text-gray2">
+                      <div className="mt-1 flex items-center justify-between">
+                        <span className="min-w-0 truncate pr-1 text-callout2 text-text-gray1">
                           {short5(b.brandName)}
                         </span>
-                        <span className="shrink-0 text-[clamp(9px,2.2vw,10px)] leading-3 font-semibold text-core-1">
+                        <span className="shrink-0 text-callout2 text-core-1">
                           {b.matchingRatio}%
                         </span>
                       </div>
                     </div>
                   ))}
                 </div>
 
-                <div className="w-full px-[clamp(16px,5.3vw,20px)] pt-[clamp(20px,3.7vh,30px)] pb-[clamp(10px,1.6vh,10px)]">
+                <div className="w-full px-4 pt-6 pb-2">
                   <Button
                     variant="primary"
                     size="lg"
                     fullWidth
                     withLogo
                     onClick={onStart}
                     disabled={loading}
-                    className="h-[clamp(44px,6vh,44px)] rounded-[12px]"
+                    className="h-[44px] rounded-[12px]"
                   >
                     RealMatch 시작하기
                   </Button>
                 </div>
 
-                <div className="h-[clamp(28px,5vh,36px)]" />
+                <div style={{ height: "clamp(1rem, 2.5dvh, 2rem)" }} />
               </div>
             </div>
           </div>

app/routes/matching/test/step2/step2-content.tsx

@@ -257,7 +257,7 @@ export default function MatchingTestStep2Content({
             />
             <FormField
               label="하의 사이즈 (in)"
-              value={bottomValue}
+              value={bottomValue ? `${bottomValue} in` : ""}
               placeholder="입력하기"
               onClick={() => {
                 setBottomInput(bottomValue);