Skip to content

[Design] 홈,리워드,기여도 배경 색상 변경 #225

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
hojpegmafia merged 1 commit into from
Aug 10, 2026
Merged

[Design] 홈,리워드,기여도 배경 색상 변경 #225

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
26 changes: 13 additions & 13 deletions src/layouts/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,10 +63,10 @@ const Layout = () => {

const hideBottomBar = isLogin || isSignup || isCertification || isCertificationGuide || isCertificationShoot || isCertificationSuccess || isCertificationFail || isImageSearch || isProblemSearch || isMyContribution || isAllContribution || isDisposalInfoFail || isDisposalInfoDetail || isCamera || isDisposalInfo || isReward || isCommunityDetail || isMyPosts || isMycomments || isMyProfileEdit || isMyfavorites || isMyhistory || isCommunityWrite || isCommunityModify;

const hasGreenBackground = isGuide || isCertification || isCertificationGuide || isCertificationShoot || isCertificationSuccess || isDisposalInfo || isDisposalInfoDetail || isImageSearch || isProblemSearch || isDisposalInfoFail || isCamera || isAllContribution || isReward || isCommunityMain || isCommunityWrite || isCommunityModify || isCommunityDetail || isMyContribution;
const hasGreenBackground = isGuide || isCertification || isCertificationGuide || isCertificationShoot || isCertificationSuccess || isDisposalInfo || isDisposalInfoDetail || isImageSearch || isProblemSearch || isDisposalInfoFail || isCamera || isCommunityMain || isCommunityWrite || isCommunityModify || isCommunityDetail;

return (
<div className={`flex flex-1 flex-col min-h-screen ${hasGreenBackground ? 'bg-bg-green1' : 'bg-white'}`}>
<div className={`flex flex-1 flex-col min-h-screen ${hasGreenBackground ? 'bg-bg-green1' : 'bg-bg-my'}`}>
<div className='flex mx-auto min-h-screen w-full max-w-120'>
{isGuide && <TopBar title='이용 가이드' bgColor='bg-bg-green1' />}

Expand All @@ -91,17 +91,17 @@ const Layout = () => {
{isMyhistory && <TopBar title='리워드 사용내역' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-my' />}
{isMycomments && <TopBar title='작성한 댓글' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-my' />}

{isReward && <TopBar title='리워드 적립' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-green1' />}
{isRewardHistory && <TopBar title='리워드 내역' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-green1' />}
{isRewardStore && <TopBar title='리워드 상점' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-green1' />}
{isRewardProdocts && <TopBar title='제품 정보' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-green1' />}
{isRewardCheckout && <TopBar title='포인트 사용' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-green1' />}
{isRewardAddressList && <TopBar title='배송지 목록' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-green1' />}
{isRewardAddressSearch && <TopBar title='배송지 입력' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-green1' />}
{isRewardAddressEdit && <TopBar title='배송지 입력' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-green1' />}

{isMyContribution && <TopBar title='나의 기여도' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-green1' />}
{isAllContribution && <TopBar title='전체 기여도' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-green1' />}
{isReward && <TopBar title='리워드 적립' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-my' />}
{isRewardHistory && <TopBar title='리워드 내역' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-my' />}
{isRewardStore && <TopBar title='리워드 상점' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-my' />}
{isRewardProdocts && <TopBar title='제품 정보' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-my' />}
{isRewardCheckout && <TopBar title='포인트 사용' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-my' />}
{isRewardAddressList && <TopBar title='배송지 목록' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-my' />}
{isRewardAddressSearch && <TopBar title='배송지 입력' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-my' />}
{isRewardAddressEdit && <TopBar title='배송지 입력' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-my' />}

{isMyContribution && <TopBar title='나의 기여도' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-my' />}
{isAllContribution && <TopBar title='전체 기여도' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-my' />}

<div className={`mx-auto flex w-full max-w-120 flex-col ${hideTopBar ? 'min-h-dvh' : 'pt-14'}`}>
<main className='flex flex-1 flex-col'>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/all-contribution-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,15 +104,15 @@ export default function AllContributionPage() {

if (isPending) {
return (
<div className='flex min-h-[calc(100dvh-56px)] items-center justify-center bg-bg-green1'>
<div className='flex min-h-[calc(100dvh-56px)] items-center justify-center bg-[#F9FBFB]'>
<LoadingSpinner />
</div>
);
}

if (isError) {
return (
<div className='flex min-h-[calc(100dvh-56px)] flex-col items-center justify-center gap-4 bg-bg-green1 px-5 text-center'>
<div className='flex min-h-[calc(100dvh-56px)] flex-col items-center justify-center gap-4 bg-[#F9FBFB] px-5 text-center'>
<p className='text-base font-semibold text-text'>
전체 기여도를 불러오지 못했어요.
</p>
Expand All @@ -131,7 +131,7 @@ export default function AllContributionPage() {
const feeds = data.pages.flatMap((page) => page.feeds);

return (
<div className='min-h-[calc(100dvh-56px)] bg-bg-green1'>
<div className='min-h-[calc(100dvh-56px)] bg-[#F9FBFB]'>
<div className='px-5 py-6'>
<UserCountBanner
userCount={firstPage.totalParticipantCount}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/home-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export default function HomePage() {
};

return (
<div className='min-h-screen bg-bg-green1 pb-32 font-pretendard text-text'>
<div className='min-h-screen bg-[#F9FBFB] pb-32 font-pretendard text-text'>
<main className='px-5 pb-8 pt-4'>
{/* 홈 상단 인사말과 로그아웃 진입 버튼입니다. */}
<header className='flex items-start justify-between'>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/my-contribution-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export default function MyContributionPage() {
}

return (
<div className='min-h-screen bg-[#F4FFF8] pt-14'>
<div className='min-h-screen bg-[#F9FBFB] pt-14'>
<section>
<div className='px-5 py-6'>
<h2 className='text-[20px] font-bold leading-[1.35] text-text'>
Expand Down
8 changes: 4 additions & 4 deletions src/pages/my-page/reward-use-history-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,22 +160,22 @@ const RewardUseHistoryPage = () => {

if (isPending) {
return (
<div className='flex min-h-screen items-center justify-center bg-bg-my'>
<div className='flex min-h-screen items-center justify-center bg-[#F9FBFB]'>
<LoadingSpinner />
</div>
);
}

if (isError) {
return (
<div className='flex min-h-screen items-center justify-center bg-bg-my'>
<div className='flex min-h-screen items-center justify-center bg-[#F9FBFB]'>
리워드 사용 내역을 불러오지 못했어요.
</div>
);
}

return (
<div className='min-h-screen bg-bg-my'>
<div className='min-h-screen bg-[#F9FBFB]'>
<main className='px-5 pb-[40px] pt-[60px]'>
{rewardUseHistory.length > 0 ? (
<ul className='flex flex-col gap-[10px]'>
Expand Down Expand Up @@ -250,4 +250,4 @@ const RewardUseHistoryPage = () => {
);
};

export default RewardUseHistoryPage;
export default RewardUseHistoryPage;
2 changes: 1 addition & 1 deletion src/pages/reward-page/reward-address-complete-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default function RewardAddressCompletePage() {
}

return (
<div className='flex flex-1 flex-col bg-bg-green1 px-5 pb-6 font-pretendard text-text'>
<div className='flex flex-1 flex-col bg-[#F9FBFB] px-5 pb-6 font-pretendard text-text'>
<div className='flex flex-1 flex-col items-center justify-center text-center'>
<img
src={FullCheck}
Expand Down
4 changes: 2 additions & 2 deletions src/pages/reward-page/reward-address-detail-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ function RewardAddressDetailForm({
const inputClassName = 'mt-2 h-12 w-full rounded-[20px] border border-gray-200 bg-white px-6 text-[15px] font-medium text-text outline-none placeholder:text-gray-400 focus:border-main-green1';

return (
<div className='flex flex-1 flex-col bg-gray-50 px-5 pb-7 font-pretendard'>
<div className='flex flex-1 flex-col bg-[#F9FBFB] px-5 pb-7 font-pretendard'>
<form className='flex flex-1 flex-col pt-4' onSubmit={handleSubmit}>
<h1 className='text-lg font-bold text-text'>상세정보를 입력해주세요</h1>

Expand Down Expand Up @@ -239,7 +239,7 @@ export default function RewardAddressDetailPage() {

if (isEditMode && isAddressListPending) {
return (
<div className='flex flex-1 items-center justify-center bg-gray-50'>
<div className='flex flex-1 items-center justify-center bg-[#F9FBFB]'>
<LoadingSpinner />
</div>
);
Expand Down
6 changes: 3 additions & 3 deletions src/pages/reward-page/reward-address-list-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,15 +54,15 @@ export default function RewardAddressListPage() {

if (isPending) {
return (
<div className='flex flex-1 items-center justify-center bg-bg-green1'>
<div className='flex flex-1 items-center justify-center bg-[#F9FBFB]'>
<LoadingSpinner />
</div>
);
}

if (isError || !addressList) {
return (
<div className='flex flex-1 flex-col bg-bg-green1 px-4 pb-8 font-pretendard'>
<div className='flex flex-1 flex-col bg-[#F9FBFB] px-4 pb-8 font-pretendard'>
<FailInfo
title='배송지 목록을 불러오지 못했어요.'
content='잠시 후 다시 시도해 주세요.'
Expand All @@ -72,7 +72,7 @@ export default function RewardAddressListPage() {
}

return (
<div className='flex flex-1 flex-col bg-bg-green1 px-4 pb-8 font-pretendard'>
<div className='flex flex-1 flex-col bg-[#F9FBFB] px-4 pb-8 font-pretendard'>
<button type='button' onClick={() => navigate('/reward/address-search')} className='mx-4 mt-4 flex h-16 w-[calc(100%-2rem)] items-center justify-center gap-3 rounded-[22px] border border-dashed border-main-green1 bg-bg-green2 font-pretendard text-base font-bold text-main-green1'>
<span aria-hidden='true' className='text-[30px] font-light leading-none'>
+
Expand Down
2 changes: 1 addition & 1 deletion src/pages/reward-page/reward-address-search-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function RewardAddressSearchPage() {
};

return (
<div className='flex flex-1 flex-col bg-bg-green1 px-4 pb-8 font-pretendard'>
<div className='flex flex-1 flex-col bg-[#F9FBFB] px-4 pb-8 font-pretendard'>
<h1 className='mt-4 text-xl font-semibold text-black'>주소를 검색해주세요</h1>

<form className='mt-4 flex items-center gap-3' onSubmit={handleSearch}>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/reward-page/reward-product-detail-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function RewardProductDetailPage() {
product.status !== 'ACTIVE';

return (
<div className='flex flex-1 flex-col bg-white px-5 pb-6 pt-4 font-pretendard'>
<div className='flex flex-1 flex-col bg-[#F9FBFB] px-5 pb-6 pt-4 font-pretendard'>
{!isValidProductId ? (
<FailInfo
title='제품을 찾을 수 없어요.'
Expand Down
8 changes: 4 additions & 4 deletions src/pages/reward-page/reward-purchase-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ export default function RewardCheckoutPage() {
(isPartnerProduct && isAddressError)
) {
return (
<div className='flex flex-1 flex-col bg-white px-5 pb-6 pt-4 font-pretendard'>
<div className='flex flex-1 flex-col bg-[#F9FBFB] px-5 pb-6 pt-4 font-pretendard'>
<FailInfo
title='제품을 불러오지 못했어요.'
content='제품 번호를 확인한 후 다시 시도해 주세요.'
Expand All @@ -208,15 +208,15 @@ export default function RewardCheckoutPage() {
(isPartnerProduct && isAddressPending)
) {
return (
<div className='flex flex-1 items-center justify-center bg-white'>
<div className='flex flex-1 items-center justify-center bg-[#F9FBFB]'>
<LoadingSpinner />
</div>
);
}

if (!productDetail || !rewardPoints) {
return (
<div className='flex flex-1 flex-col bg-white px-5 pb-6 pt-4 font-pretendard'>
<div className='flex flex-1 flex-col bg-[#F9FBFB] px-5 pb-6 pt-4 font-pretendard'>
<FailInfo
title='제품을 찾을 수 없어요.'
content='잠시 후 다시 시도해 주세요.'
Expand All @@ -236,7 +236,7 @@ export default function RewardCheckoutPage() {
(isPartner ? !selectedShippingAddress : !hasGifticonRecipient);

return (
<div className='flex flex-1 flex-col bg-bg-green1 px-5 pb-6 pt-4 font-pretendard'>
<div className='flex flex-1 flex-col bg-[#F9FBFB] px-5 pb-6 pt-4 font-pretendard'>
<h1 className='text-lg font-bold text-text'>제품 내역</h1>
<div className='mt-3 flex min-h-27 items-center gap-4 rounded-[28px] bg-white px-5 py-[18px]'>
<div className='flex h-[70px] w-[70px] shrink-0 items-center justify-center overflow-hidden rounded-xl bg-gray-100'>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/reward-page/reward-use-complete-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,15 @@ export default function RewardUseCompletePage() {

if (!locationProductType && isPending) {
return (
<div className='flex flex-1 items-center justify-center bg-bg-green1'>
<div className='flex flex-1 items-center justify-center bg-[#F9FBFB]'>
<LoadingSpinner />
</div>
);
}

if (!rewardProductType || isError) {
return (
<div className='flex flex-1 flex-col bg-bg-green1 px-5 pb-6 font-pretendard'>
<div className='flex flex-1 flex-col bg-[#F9FBFB] px-5 pb-6 font-pretendard'>
<FailInfo
title='완료 정보를 불러오지 못했어요.'
content='리워드 스토어에서 사용 내역을 확인해 주세요.'
Expand All @@ -69,7 +69,7 @@ export default function RewardUseCompletePage() {
rewardProductType === 'PARTNER_BRAND' ? '배송지' : '번호';

return (
<div className='flex flex-1 flex-col bg-bg-green1 px-5 pb-6 font-pretendard text-text'>
<div className='flex flex-1 flex-col bg-[#F9FBFB] px-5 pb-6 font-pretendard text-text'>
<div className='flex flex-1 flex-col items-center justify-center text-center'>
<img
src={FullCheck}
Expand Down
Loading