From ab54c5404d4739aadefc53e1165b2b7dd441c30a Mon Sep 17 00:00:00 2001 From: yoonyoungyang Date: Sun, 1 Feb 2026 03:03:56 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EB=A7=A4=EC=B9=AD=20=EC=99=84=EB=A3=8C?= =?UTF-8?q?=20=ED=9B=84=20=ED=99=88=20=EB=B6=84=EA=B8=B0=20=EB=B0=8F=20?= =?UTF-8?q?=EA=B2=B0=EA=B3=BC=20=EC=A0=80=EC=9E=A5=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/routes/home/types.ts | 10 +- .../test/result/matching-result-content.tsx | 190 +++++++++++------- 2 files changed, 118 insertions(+), 82 deletions(-) diff --git a/app/routes/home/types.ts b/app/routes/home/types.ts index f560aca..1a7de6d 100644 --- a/app/routes/home/types.ts +++ b/app/routes/home/types.ts @@ -12,11 +12,11 @@ export interface BrandItem { id: string; name: string; logoUrl?: string; - matchRate: number; // 0~100 + matchRate: number; isLiked?: boolean; subText?: string; badgeText?: string; - + domain: string; } export interface CampaignItem { @@ -25,12 +25,12 @@ export interface CampaignItem { logoUrl?: string; // 카드 상단 배지용 - startAt?: string; // top 캠페인에서는 날짜 배지로 쓸 수 있음(예: 7/10) + startAt?: string; // top 캠페인에서는 날짜 배지로 쓸 수 있음(예: 7/10) ddayLabel?: string; // D-3, D-DAY 등 // 카드 아래 오른쪽 텍스트 - matchRate?: number; // top 캠페인: 98% - progressText?: string; // 인기 캠페인: 7/10, 1/5 등 + matchRate?: number; // top 캠페인: 98% + progressText?: string; // 인기 캠페인: 7/10, 1/5 등 // 카드 아래 텍스트 descText?: string; diff --git a/app/routes/matching/test/result/matching-result-content.tsx b/app/routes/matching/test/result/matching-result-content.tsx index 85e16fd..e4672cf 100644 --- a/app/routes/matching/test/result/matching-result-content.tsx +++ b/app/routes/matching/test/result/matching-result-content.tsx @@ -1,83 +1,119 @@ -import { useSearchParams } from "react-router"; +import { useMemo } from "react"; +import { useNavigate, useSearchParams } from "react-router-dom"; +import { useMatchResultStore } from "../../../../stores/matching-result"; // ✅ 실제 상대경로로 조정 import MatchResultHeader from "../../../../components/common/RealmatchHeader"; -import MainIcon from "../../../../assets/MainIcon.svg" +import MainIcon from "../../../../assets/MainIcon.svg"; import Button from "../../../../components/common/Button"; export default function MatchingResultContent() { - const [searchParams] = useSearchParams(); - - const resultData = { - userName: searchParams.get("userName") ?? "OO", - beautyTraits: searchParams.get("fitTraits") ?? "00 핏 특성들", - styleTraits: searchParams.get("styleTraits") ?? "00 패션 특성들", - contentTraits: searchParams.get("moodTraits") ?? "00 콘텐츠 특성들", - recommendedBrand: searchParams.get("recommendedBrand") ?? "00한 브랜드와", - }; - - return ( -
- - -
-
-

매칭 결과

-

- {resultData.userName} - 한 크리에이터

- -

- {resultData.userName}님의 특성 -

- -
-

- {resultData.beautyTraits} -

-

- {resultData.styleTraits} -

-

- {resultData.contentTraits} -

-
- -
-

- {resultData.userName}님과 어울리는 브랜드 -

- -

- {resultData.recommendedBrand} -

- -

- 잘 어울릴 것으로 보여요 -

-
- -
- 메인 아이콘 -
- -
-
- -
- -
+ const navigate = useNavigate(); + const [searchParams] = useSearchParams(); + const setResult = useMatchResultStore((s) => s.setResult); + + const resultData = useMemo(() => { + const userName = searchParams.get("userName") ?? "OO"; + const beauty = searchParams.get("fitTraits") ?? "00 핏 특성들"; + const style = searchParams.get("styleTraits") ?? "00 패션 특성들"; + const content = searchParams.get("moodTraits") ?? "00 콘텐츠 특성들"; + const recommendedBrand = + searchParams.get("recommendedBrand") ?? "00한 브랜드와"; + + return { userName, beauty, style, content, recommendedBrand }; + }, [searchParams]); + + const onStart = () => { + setResult({ + completed: true, + updatedAt: Date.now(), + summary: { + userName: resultData.userName, + traits: { + beauty: resultData.beauty, + style: resultData.style, + content: resultData.content, + }, + recommendedBrand: resultData.recommendedBrand, + }, + }); + + navigate("/"); + }; + + return ( +
+ + +
+
+

매칭 결과

+ +

+ {resultData.userName}한 크리에이터{" "} +

+ +

+ {resultData.userName}님의 특성 +

+ +
+

+ {resultData.beauty} +

+

+ {resultData.style} +

+

+ {resultData.content} +

- ); + +
+

+ {resultData.userName}님과 어울리는 브랜드 +

+ +

+ {resultData.recommendedBrand} +

+ +

+ 잘 어울릴 것으로 보여요 +

+
+ +
+ 메인 아이콘 +
+ +
+
+ +
+ {/* ✅ to="/" 대신 onClick */} + +
+
+ ); }