Skip to content

fix: 매칭 완료 후 홈 분기 및 결과 저장 로직 수정 #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
seyun31 merged 1 commit into from
Feb 2, 2026
Merged

fix: 매칭 완료 후 홈 분기 및 결과 저장 로직 수정 #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions app/routes/home/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand Down
190 changes: 113 additions & 77 deletions app/routes/matching/test/result/matching-result-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="min-h-screen bg-linear-to-b from-[#F6F7FF] to-white">
<MatchResultHeader />

<main className="flex w-full flex-col items-center px-6 text-center">
<div className="mt-[84px] mb-[24px]" />
<p className="text-[14px] font-medium text-[#404252]">매칭 결과</p>
<h1 className="
text-[24px]
font-extrabold
tracking-[-0.02em]
bg-[radial-gradient(circle_at_top,#5D5DFF_0%,#382FE4_45%,#3915DA_100%)]
bg-clip-text
text-transparent">
<span className="mr-1">{resultData.userName}</span>
한 크리에이터 </h1>

<p className="mt-[30px] text-[12px] font-medium text-[#5B5D6B]">
{resultData.userName}님의 특성
</p>

<div className="mt-3 space-y-2">
<p className="text-[14px] font-semibold text-[#5B63FF]">
{resultData.beautyTraits}
</p>
<p className="text-[14px] font-semibold text-[#5B63FF]">
{resultData.styleTraits}
</p>
<p className="text-[14px] font-semibold text-[#5B63FF]">
{resultData.contentTraits}
</p>
</div>

<div className="mt-8 space-y-[8px]">
<p className="text-[12px] font-medium text-[#8C91A7]">
{resultData.userName}님과 어울리는 브랜드
</p>

<p className="mt-2 text-[16px] font-bold text-[#5B63FF]">
{resultData.recommendedBrand}
</p>

<p className="mt-2 text-[16px] font-medium text-[#8C91A7]">
잘 어울릴 것으로 보여요
</p>
</div>

<div className="mt-16 flex items-center justify-center">
<img
src={MainIcon}
alt="메인 아이콘"
className="h-auto w-[170px] select-none"
draggable={false}
/>
</div>

<div className="h-10" />
</main>

<div className="sticky bottom-0 w-full bg-white/70 px-6 pb-8 pt-4 backdrop-blur">
<Button variant="primary" size="lg" fullWidth withLogo to="/">
RealMatch 시작하기
</Button>
</div>
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 (
<div className="min-h-screen bg-linear-to-b from-[#F6F7FF] to-white">
<MatchResultHeader />

<main className="flex w-full flex-col items-center px-6 text-center">
<div className="mt-[84px] mb-[24px]" />
<p className="text-[14px] font-medium text-[#404252]">매칭 결과</p>

<h1
className="
text-[24px]
font-extrabold
tracking-[-0.02em]
bg-[radial-gradient(circle_at_top,#5D5DFF_0%,#382FE4_45%,#3915DA_100%)]
bg-clip-text
text-transparent"
>
<span className="mr-1">{resultData.userName}</span>한 크리에이터{" "}
</h1>

<p className="mt-[30px] text-[12px] font-medium text-[#5B5D6B]">
{resultData.userName}님의 특성
</p>

<div className="mt-3 space-y-2">
<p className="text-[14px] font-semibold text-[#5B63FF]">
{resultData.beauty}
</p>
<p className="text-[14px] font-semibold text-[#5B63FF]">
{resultData.style}
</p>
<p className="text-[14px] font-semibold text-[#5B63FF]">
{resultData.content}
</p>
</div>
);

<div className="mt-8 space-y-[8px]">
<p className="text-[12px] font-medium text-[#8C91A7]">
{resultData.userName}님과 어울리는 브랜드
</p>

<p className="mt-2 text-[16px] font-bold text-[#5B63FF]">
{resultData.recommendedBrand}
</p>

<p className="mt-2 text-[16px] font-medium text-[#8C91A7]">
잘 어울릴 것으로 보여요
</p>
</div>

<div className="mt-16 flex items-center justify-center">
<img
src={MainIcon}
alt="메인 아이콘"
className="h-auto w-[170px] select-none"
draggable={false}
/>
</div>

<div className="h-10" />
</main>

<div className="sticky bottom-0 w-full bg-white/70 px-6 pb-8 pt-4 backdrop-blur">
{/* ✅ to="/" 대신 onClick */}
<Button
variant="primary"
size="lg"
fullWidth
withLogo
type="button"
onClick={onStart}
>
RealMatch 시작하기
</Button>
</div>
</div>
);
}