Skip to content

매칭검사 최종 api 연결 완료 #46

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
JioCoder merged 1 commit into from
Feb 3, 2026
Merged

매칭검사 최종 api 연결 완료 #46

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
71 changes: 52 additions & 19 deletions app/routes/home/home-after-match.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@ import BrandCard from "./components/BrandCard";
import CampaignCard from "./components/CampaignCard";
import MatchAnalysisSection from "./components/MatchAnalysisSection";
import CreatorProfileCard from "./components/CreatorProfileCard";
import { getMatchingBrands, getMatchingCampaigns, toggleBrandLike, type MatchingBrand, type MatchingCampaign } from "../matching/api/matching";
import {
getMatchingBrands,
getMatchingCampaigns,
toggleBrandLike,
type MatchingBrand,
type MatchingCampaign,
} from "../matching/api/matching";
import { useMatchResultStore } from "../../stores/matching-result";
import bannerBeauty from "../../assets/home-banner/banner-beauty.svg";
import bannerFashion from "../../assets/home-banner/banner-fashion.svg";
Expand All @@ -17,7 +23,9 @@ export default function HomeAfterMatchPage() {
const [category, setCategory] = useState<CategoryKey>("beauty");
const [brands, setBrands] = useState<MatchingBrand[]>([]);
const [campaigns, setCampaigns] = useState<MatchingCampaign[]>([]);
const [popularCampaigns, setPopularCampaigns] = useState<MatchingCampaign[]>([]);
const [popularCampaigns, setPopularCampaigns] = useState<MatchingCampaign[]>(
[],
);

// 스토어에서 매칭 결과 가져오지만 -> api/v1/me/feature로 변경
const matchResult = useMatchResultStore((s) => s.result);
Expand All @@ -28,7 +36,7 @@ export default function HomeAfterMatchPage() {
const [brandsData, campaignsData, popularData] = await Promise.all([
getMatchingBrands("MATCH_SCORE", "ALL"),
getMatchingCampaigns("MATCH_SCORE", "ALL"),
getMatchingCampaigns("POPULARITY", "ALL")
getMatchingCampaigns("POPULARITY", "ALL"),
]);
setBrands(brandsData.brands);
setCampaigns(campaignsData.campaigns);
Expand All @@ -50,25 +58,28 @@ export default function HomeAfterMatchPage() {
creatorName: "크리에이터 님",
creatorType: "creator",
summary: apiResult.userType || "크리에이터",
highlightBrandText: apiResult.highMatchingBrandList?.brands[0]?.brandName || "매칭된 브랜드",
highlightBrandText:
apiResult.highMatchingBrandList?.brands[0]?.brandName ||
"매칭된 브랜드",
traits: {
beauty: apiResult.typeTag?.[0] || "특성 1",
fashion: apiResult.typeTag?.[1] || "특성 2",
content: apiResult.typeTag?.[2] || "특성 3",
}
},
} as CreatorProfileModel;
} else if (matchResult?.summary) {
// apiResult가 없으면 summary 사용
return {
creatorName: "크리에이터 님",
creatorType: "creator",
summary: matchResult.summary.userName || "크리에이터",
highlightBrandText: matchResult.summary.recommendedBrand || "매칭된 브랜드",
highlightBrandText:
matchResult.summary.recommendedBrand || "매칭된 브랜드",
traits: {
beauty: matchResult.summary.traits.beauty || "특성 1",
fashion: matchResult.summary.traits.style || "특성 2",
content: matchResult.summary.traits.content || "특성 3",
}
},
} as CreatorProfileModel;
}
return null;
Expand All @@ -80,9 +91,11 @@ export default function HomeAfterMatchPage() {
const brandId = Number(id);
const newLikeStatus = await toggleBrandLike(brandId);

setBrands(prev => prev.map(brand =>
brand.id === brandId ? { ...brand, isLiked: newLikeStatus } : brand
));
setBrands((prev) =>
prev.map((brand) =>
brand.id === brandId ? { ...brand, isLiked: newLikeStatus } : brand,
),
);
} catch (error) {
console.error("Failed to toggle brand like:", error);
}
Expand All @@ -95,13 +108,21 @@ export default function HomeAfterMatchPage() {
const newLikeStatus = await toggleBrandLike(campaignId);

// 매칭률 높은 캠페인 업데이트
setCampaigns(prev => prev.map(campaign =>
campaign.id === campaignId ? { ...campaign, isLiked: newLikeStatus } : campaign
));
setCampaigns((prev) =>
prev.map((campaign) =>
campaign.id === campaignId
? { ...campaign, isLiked: newLikeStatus }
: campaign,
),
);
// 인기 캠페인도 업데이트
setPopularCampaigns(prev => prev.map(campaign =>
campaign.id === campaignId ? { ...campaign, isLiked: newLikeStatus } : campaign
));
setPopularCampaigns((prev) =>
prev.map((campaign) =>
campaign.id === campaignId
? { ...campaign, isLiked: newLikeStatus }
: campaign,
),
);
} catch (error) {
console.error("Failed to toggle campaign like:", error);
}
Expand Down Expand Up @@ -145,7 +166,9 @@ export default function HomeAfterMatchPage() {
isLiked: brand.isLiked,
}}
onClick={() => {
navigate(`/brand?brandId=${brand.id}&domain=${brand.name?.toLowerCase() || ""}`);
navigate(
`/brand?brandId=${brand.id}&domain=${brand.name?.toLowerCase() || ""}`,
);
}}
onLikeToggle={handleBrandLikeToggle}
/>
Expand Down Expand Up @@ -175,7 +198,12 @@ export default function HomeAfterMatchPage() {
descText: campaign.name || campaign.title || "",
rewardText: `원고료 ${campaign.reward?.toLocaleString()}원`,
startAt: "",
ddayLabel: campaign.dDay !== undefined ? (campaign.dDay === 0 ? "D-DAY" : `D-${campaign.dDay}`) : "",
ddayLabel:
campaign.dDay !== undefined
? campaign.dDay === 0
? "D-DAY"
: `D-${campaign.dDay}`
: "",
progressText: String(campaign.applicants),
isLiked: campaign.isLiked,
logoUrl: campaign.logoUrl,
Expand Down Expand Up @@ -215,7 +243,12 @@ export default function HomeAfterMatchPage() {
descText: campaign.name || campaign.title || "",
rewardText: `원고료 ${campaign.reward?.toLocaleString()}원`,
startAt: "",
ddayLabel: campaign.dDay !== undefined ? (campaign.dDay === 0 ? "D-DAY" : `D-${campaign.dDay}`) : "",
ddayLabel:
campaign.dDay !== undefined
? campaign.dDay === 0
? "D-DAY"
: `D-${campaign.dDay}`
: "",
progressText: String(campaign.applicants),
isLiked: campaign.isLiked,
logoUrl: campaign.logoUrl,
Expand Down
120 changes: 0 additions & 120 deletions app/routes/home/home.mock.ts
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions app/routes/matching/test/_shared/types/matches.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export type HighMatchingBrandList = {
};

export type MatchesResponseResult = {
userName: string;
userType: string;
typeTag: string[];
highMatchingBrandList: HighMatchingBrandList;
Expand Down
24 changes: 19 additions & 5 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
Expand Up @@ -12,7 +12,9 @@ type Brand = {
};

type ApiResult = {
username: string;
userType: string;
userTypeImage?: string;
typeTag: string[];
highMatchingBrandList: {
count: number;
Expand All @@ -33,21 +35,33 @@ export default function MatchingResultContent() {
const data = useMemo(() => {
const apiResult = location.state?.apiResult;

// userName은 아직 API에 없으므로 기존대로 query/default 사용
const userName = searchParams.get("userName") ?? "비비";

if (apiResult) {
console.log("[result] apiResult exists:", !!apiResult);
console.log(
"[result] first brand:",
apiResult?.highMatchingBrandList?.brands?.[0],
);
const userName = apiResult.username;
const userType = apiResult.userType;
const tags = apiResult.typeTag.slice(0, 3);
const brands = [...apiResult.highMatchingBrandList.brands]
.sort((a, b) => b.matchingRatio - a.matchingRatio)
.slice(0, 3);

return { userName, userType, tags, brands };
return {
userName,
userType,
tags,
brands,
userTypeImage: apiResult.userTypeImage,
};
}

// fallback (직접 진입/새로고침으로 state 사라진 경우)
const userName =
searchParams.get("username") ?? searchParams.get("userName") ?? "비비";
const userType = searchParams.get("userType") ?? "섬세한 설계자";

const tags = searchParams
.get("typeTag")
?.split(",")
Expand All @@ -61,7 +75,7 @@ export default function MatchingResultContent() {
{ brandId: 3, brandName: "ma:nyo", matchingRatio: 91 },
];

return { userName, userType, tags, brands };
return { userName, userType, tags, brands, userTypeImage: undefined };
}, [location.state, searchParams]);

const onStart = () => {
Expand Down
Loading