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 */} + +
+
+ ); }