Skip to content

Refactor/home #189

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
yoonyoungyang merged 5 commits into from
Feb 12, 2026
Merged

Refactor/home #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
45d78ca
크리에이터 오타 수정
yoonyoungyang Feb 12, 2026
2406f2d
이상한 기호 수정 및 > 버튼 연결
yoonyoungyang Feb 12, 2026
e05ded6
반응형 적용
yoonyoungyang Feb 12, 2026
5eab440
캠페인 배너 적용 및 반응형 적용
yoonyoungyang Feb 12, 2026
25e8fde
Merge branch 'main' of https://github.com/RealMatchTeam/FE into refac…
yoonyoungyang Feb 12, 2026
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
198 changes: 102 additions & 96 deletions app/routes/brand-detail/brand-detail-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,8 @@ export default function BrandDetailContent({ data }: Props) {
(p) => {
const fallback =
(p.productImageUrls ?? []).find(Boolean) ??
(p.thumbnailImageUrl ?? "");
p.thumbnailImageUrl ??
"";

return {
productId: p.productId,
Expand Down Expand Up @@ -343,12 +344,11 @@ export default function BrandDetailContent({ data }: Props) {
? domainParam
: "beauty";

const brandIdNum =
validBrandId
? brandId
: Number.isFinite(Number(data.id)) && Number(data.id) > 0
? Number(data.id)
: null;
const brandIdNum = validBrandId
? brandId
: Number.isFinite(Number(data.id)) && Number(data.id) > 0
? Number(data.id)
: null;

if (!brandIdNum) return;

Expand Down Expand Up @@ -489,14 +489,19 @@ export default function BrandDetailContent({ data }: Props) {
const showTitle = showSectionTitle;

return (
<div key={`${sec.title}-${idx}`} className={idx ? "mt-5" : ""}>
<div
key={`${sec.title}-${idx}`}
className={idx ? "mt-5" : ""}
>
{showTitle ? (
<div className="text-title3 text-text-black">
{sec.title}
</div>
) : null}

<div className={showTitle ? "mt-2 space-y-1.5" : "space-y-1.5"}>
<div
className={showTitle ? "mt-2 space-y-1.5" : "space-y-1.5"}
>
{(sec.groups ?? []).map((g, gi) => (
<TagGroup
key={`${sec.title}-${g.label}-${gi}`}
Expand Down Expand Up @@ -531,94 +536,95 @@ export default function BrandDetailContent({ data }: Props) {
<DividerBlock />

<section className="py-9">
<div className="text-title1 text-text-black">캠페인 내역</div>

{histories.length === 0 ? (
<div className="mt-2 inline-flex w-full flex-col items-start gap-2 bg-white">
<div className="flex h-[126px] w-full flex-col items-start justify-center">
<div className="flex w-full flex-col items-start gap-[14px] pb-[60px] pt-[60px]">
<div className="flex w-full flex-col items-center justify-center gap-[10px]">
<div className="w-[113px] text-center text-[12px] font-medium leading-[16px] text-text-gray2">
진행한 캠페인이 없어요
</div>
</div>
</div>
</div>
</div>
) : (
<>
<div className="mt-3">
{pageItems.map((h) => (
<HistoryRow key={h.id} item={h} />
))}
</div>

<div className="my-5 flex items-center justify-center gap-3">
{page > GROUP_SIZE && (
<button
type="button"
onClick={goPrevGroup}
className="grid h-7 w-7 place-items-center text-text-gray3"
>
<DoubleArrowLeftIcon />
</button>
)}

<button
type="button"
onClick={goPrev}
disabled={!canPrev}
className="grid h-7 w-7 place-items-center text-text-gray3 disabled:opacity-30"
>
<ArrowLeftIcon />
</button>

<div className="flex items-center gap-3">
{displayPages.map((p) => {
const disabledPage = p > totalPages && !hasNext;
const active = p === page;

return (
<button
key={p}
type="button"
onClick={() => !disabledPage && goPage(p)}
disabled={disabledPage}
className={
active
? "h-7 w-7 rounded-md text-[13px] font-semibold text-white"
: "h-7 w-7 rounded-md text-[13px] font-medium text-text-gray3 disabled:opacity-30"
}
style={active ? { backgroundColor: "#A9ADFF" } : undefined}
>
{p}
</button>
);
})}
</div>

<button
type="button"
onClick={goNext}
disabled={!canNext}
className="grid h-7 w-7 place-items-center text-text-gray3 disabled:opacity-30"
>
<ArrowRightIcon />
</button>

<button
type="button"
onClick={goNextGroup}
disabled={!canNextGroup}
className="grid h-7 w-7 place-items-center text-text-gray3 disabled:opacity-30"
>
<DoubleArrowRightIcon />
</button>
</div>
</>
)}
</section>
<div className="text-title1 text-text-black">캠페인 내역</div>

{histories.length === 0 ? (
<div className="mt-2 inline-flex w-full flex-col items-start gap-2 bg-white">
<div className="flex w-full flex-col items-start justify-center">
<div className="flex w-full flex-col items-start gap-[0.875rem] py-[3.75rem]">
<div className="flex w-full flex-col items-center justify-center gap-[0.625rem]">
<div className="w-[7.0625rem] text-center text-callout1 text-text-gray2">
진행한 캠페인이 없어요
</div>
</div>
</div>
</div>
</div>
) : (
<>
<div className="mt-3">
{pageItems.map((h) => (
<HistoryRow key={h.id} item={h} />
))}
</div>

<div className="my-5 flex items-center justify-center gap-3">
{page > GROUP_SIZE && (
<button
type="button"
onClick={goPrevGroup}
className="grid h-7 w-7 place-items-center text-text-gray3"
>
<DoubleArrowLeftIcon />
</button>
)}

<button
type="button"
onClick={goPrev}
disabled={!canPrev}
className="grid h-7 w-7 place-items-center text-text-gray3 disabled:opacity-30"
>
<ArrowLeftIcon />
</button>

<div className="flex items-center gap-3">
{displayPages.map((p) => {
const disabledPage = p > totalPages && !hasNext;
const active = p === page;

return (
<button
key={p}
type="button"
onClick={() => !disabledPage && goPage(p)}
disabled={disabledPage}
className={
active
? "h-7 w-7 rounded-md text-[0.8125rem] font-semibold text-white"
: "h-7 w-7 rounded-md text-[0.8125rem] font-medium text-text-gray3 disabled:opacity-30"
}
style={
active ? { backgroundColor: "#A9ADFF" } : undefined
}
>
{p}
</button>
);
})}
</div>

<button
type="button"
onClick={goNext}
disabled={!canNext}
className="grid h-7 w-7 place-items-center text-text-gray3 disabled:opacity-30"
>
<ArrowRightIcon />
</button>

<button
type="button"
onClick={goNextGroup}
disabled={!canNextGroup}
className="grid h-7 w-7 place-items-center text-text-gray3 disabled:opacity-30"
>
<DoubleArrowRightIcon />
</button>
</div>
</>
)}
</section>
</div>
</div>
</div>
Expand Down
24 changes: 16 additions & 8 deletions app/routes/brand-detail/components/OngoingCampaignSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,34 +20,42 @@ export default function OngoingCampaignSection({
const isEmpty = campaigns.length === 0;

return (
<section className="pt-9 pb-9 px-2">
<section className="pt-9 pb-9">
<div className="flex items-center justify-between">
<div className="text-title1 text-text-black">진행 중인 다른 캠페인</div>

{!isEmpty && onMore ? (
<button
type="button"
onClick={onMore}
className="grid h-8 w-8 place-items-center rounded-full text-text-gray2"
className="mt-0.5 grid h-6 w-6 place-items-center"
aria-label="more"
>
<span className="text-[18px] leading-none">›</span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path
d="M9 18L15 12L9 6"
stroke="#9B9BA1"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</button>
) : null}
</div>

{isEmpty ? (
<div className="flex h-[126px] w-full flex-col justify-center items-start">
<div className="flex w-full flex-col items-start gap-[14px] pt-[50px] pb-[60px]">
<div className="flex w-full flex-col items-center justify-center gap-[10px]">
<div className="w-[113px] text-center text-[12px] font-medium leading-[16px] text-text-gray2">
<div className="flex h-31.5 w-full flex-col justify-center items-start">
<div className="flex w-full flex-col items-start gap-3.5 pt-15 pb-15">
<div className="flex w-full flex-col items-center justify-center gap-2.5">
<div className="w-40 text-center text-callout1 text-text-gray2">
진행 중인 다른 캠페인이 없어요
</div>
</div>
</div>
</div>
) : (
<div className="mt-4 -mx-5 overflow-x-auto px-5 scrollbar-hide">
<div className="mt-4 -mx-4 overflow-x-auto px-5 scrollbar-hide">
<div className="flex gap-3">
{campaigns.map((c) => (
<div
Expand Down
4 changes: 2 additions & 2 deletions app/routes/brand-detail/components/ProductMiniCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ export type ProductMiniCardItem = {

type Props = {
item: ProductMiniCardItem;
onClick?: () => void;
onClick?: () => void;
};

export default function ProductMiniCard({ item, onClick }: Props) {
return (
<div
className="w-[150px] md:w-[170px] lg:w-[190px] shrink-0 mt-2 mb-2.5 cursor-pointer"
className="mt-2 mb-[0.625rem] w-[9.375rem] shrink-0 cursor-pointer"
onClick={onClick}
role="button"
>
Expand Down
10 changes: 5 additions & 5 deletions app/routes/brand-detail/components/SponsorableProductSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,10 @@ export default function SponsorableProductSection({

{isEmpty ? (
<div className="mt-2 inline-flex w-full flex-col items-start gap-2 bg-white">
<div className="flex h-[126px] w-full flex-col items-start justify-center">
<div className="flex w-full flex-col items-start gap-[14px] py-[60px]">
<div className="flex w-full flex-col items-center justify-center gap-[10px]">
<div className="w-[113px] text-center text-callout1 text-text-gray2">
<div className="flex w-full flex-col items-start justify-center">
<div className="flex w-full flex-col items-start gap-[0.875rem] py-[3.75rem]">
<div className="flex w-full flex-col items-center justify-center gap-[0.625rem]">
<div className="w-1 text-center text-callout1 text-text-gray2">
협찬 가능한 제품이 없어요
</div>
</div>
Expand All @@ -53,7 +53,7 @@ export default function SponsorableProductSection({
</div>
) : (
<div className="mt-2 -mx-4 overflow-x-hidden">
<div className="px-4 overflow-x-auto scrollbar-hide">
<div className="overflow-x-auto px-4 scrollbar-hide">
<div className="flex w-max gap-4">
{products.map((p, idx) => (
<ProductMiniCard
Expand Down
Loading
Loading