Skip to content

Commit 5300e05

Browse files
yabsedyabsed
committed
SegmentedTabBar 2
1 parent f656d83 commit 5300e05

File tree

5 files changed

+51
-81
lines changed

5 files changed

+51
-81
lines changed

‎src/features/pay/components/coin/CoinPanel.tsx‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState } from 'react';
2-
import { Button, StatCard } from '@/shared/ui';
2+
import { Button, SegmentedTabBar, StatCard } from '@/shared/ui';
33
import { useTranslation } from '@/shared/i18n';
44

55
type Mode = 'deposit' | 'withdraw';
@@ -35,21 +35,15 @@ export function CoinPanel({ currentCoin, onDeposit, onWithdraw }: CoinPanelProps
3535
className="mb-7.5"
3636
/>
3737

38-
<div className="flex gap-2 justify-center mb-5">
39-
<Button
40-
onClick={() => setMode('deposit')}
41-
variant={mode === 'deposit' ? 'primary' : 'outline'}
42-
size="sm"
43-
>
44-
{t.pay.charge}
45-
</Button>
46-
<Button
47-
onClick={() => setMode('withdraw')}
48-
variant={mode === 'withdraw' ? 'primary' : 'outline'}
49-
size="sm"
50-
>
51-
{t.pay.withdraw}
52-
</Button>
38+
<div className="flex justify-center mb-5">
39+
<SegmentedTabBar
40+
tabs={[
41+
{ id: 'deposit', label: t.pay.charge },
42+
{ id: 'withdraw', label: t.pay.withdraw },
43+
]}
44+
activeTab={mode}
45+
onTabChange={setMode}
46+
/>
5347
</div>
5448

5549
<h4 className="mb-5 text-text-secondary font-bold">

‎src/features/product/components/detail/SellerProductList.tsx‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useState, useMemo } from 'react';
22
import { useTranslation } from '@/shared/i18n';
33
import { useDetail } from '@/features/product/hooks/DetailContext';
44
import ProductCard from '@/features/product/components/list/ProductCard';
5-
import { Button, Pagination } from '@/shared/ui';
5+
import { Pagination, SegmentedTabBar } from '@/shared/ui';
66

77
const ITEMS_PER_PAGE = 4;
88

@@ -44,21 +44,15 @@ export function SellerProductList() {
4444
<h3 className="text-lg font-bold mb-4">
4545
{nickname}{t.product.salesItems}
4646
</h3>
47-
<div className="mb-4 flex gap-2">
48-
<Button
49-
variant={!showAuction ? "primary" : "secondary"}
50-
size="sm"
51-
onClick={() => handleTabChange(false)}
52-
>
53-
{t.product.regular}
54-
</Button>
55-
<Button
56-
variant={showAuction ? "primary" : "secondary"}
57-
size="sm"
58-
onClick={() => handleTabChange(true)}
59-
>
60-
{t.auction.auction}
61-
</Button>
47+
<div className="mb-4">
48+
<SegmentedTabBar
49+
tabs={[
50+
{ id: 'regular', label: t.product.regular },
51+
{ id: 'auction', label: t.auction.auction },
52+
]}
53+
activeTab={showAuction ? 'auction' : 'regular'}
54+
onTabChange={(tab) => handleTabChange(tab === 'auction')}
55+
/>
6256
</div>
6357
{currentItems.length === 0 ? (
6458
<p className="text-text-muted text-sm">

‎src/features/product/components/form/ProductForm.tsx‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useState, useEffect } from 'react';
22
import { useForm } from 'react-hook-form';
33
import { zodResolver } from '@hookform/resolvers/zod';
4-
import { Button } from '@/shared/ui';
4+
import { Button, SegmentedTabBar } from '@/shared/ui';
55
import { useTranslation } from '@/shared/i18n';
66
import { productFormSchema, type ProductFormData } from '@/features/product/hooks/schemas';
77
import { useImageUpload, ImageUploadSection } from '@/features/image';
@@ -132,23 +132,15 @@ const ProductForm = ({
132132
{showAuctionOption && (
133133
<>
134134
<div className="mb-6 flex flex-col gap-3">
135-
<div className="flex gap-2">
136-
<Button
137-
type="button"
138-
size="sm"
139-
variant={!isAuction ? "primary" : "secondary"}
140-
onClick={() => setValue('isAuction', false)}
141-
>
142-
{t.product.regular}
143-
</Button>
144-
<Button
145-
type="button"
146-
size="sm"
147-
variant={isAuction ? "primary" : "secondary"}
148-
onClick={() => setValue('isAuction', true)}
149-
>
150-
{t.auction.auction}
151-
</Button>
135+
<div>
136+
<SegmentedTabBar
137+
tabs={[
138+
{ id: 'regular', label: t.product.regular },
139+
{ id: 'auction', label: t.auction.auction },
140+
]}
141+
activeTab={isAuction ? 'auction' : 'regular'}
142+
onTabChange={(tab) => setValue('isAuction', tab === 'auction')}
143+
/>
152144
</div>
153145
{isAuction && (
154146
<div className="flex items-center gap-2">

‎src/features/product/pages/ProductList.tsx‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { useRegionSelection } from "@/features/location/hooks/useRegionSelection
99
import RegionSelector from "@/features/location/components/RegionSelector";
1010
import RegionSelectModal from "@/features/location/components/RegionSelectModal";
1111
import { useTranslation } from "@/shared/i18n";
12-
import { Button } from "@/shared/ui";
12+
import { SegmentedTabBar } from "@/shared/ui";
1313
import { useProductFilters } from "@/features/product/store/productFiltersStore";
1414

1515
export default function ProductList() {
@@ -47,9 +47,10 @@ export default function ProductList() {
4747

4848
const handleAuctionChange = (value: boolean) => {
4949
setSearchParams((prev) => {
50-
prev.set("auction", String(value));
51-
return prev;
52-
});
50+
const next = new URLSearchParams(prev);
51+
next.set("auction", String(value));
52+
return next;
53+
}, { replace: true });
5354
};
5455

5556
// 지역 필터: 동 단위, 시/구/군 단위, 시/도 단위 모두 지원
@@ -72,17 +73,12 @@ export default function ProductList() {
7273
<RegionSelector regionName={currentRegionName} onClick={openModal} />
7374
<SearchBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
7475
</div>
75-
<div className="mb-4 flex gap-2">
76-
{filterOptions.map((opt) => (
77-
<Button
78-
key={String(opt.value)}
79-
variant={showAuction === opt.value ? "primary" : "secondary"}
80-
size="sm"
81-
onClick={() => handleAuctionChange(opt.value)}
82-
>
83-
{opt.label}
84-
</Button>
85-
))}
76+
<div className="mb-4">
77+
<SegmentedTabBar
78+
tabs={filterOptions.map((opt) => ({ id: String(opt.value), label: opt.label }))}
79+
activeTab={String(showAuction)}
80+
onTabChange={(tab) => handleAuctionChange(tab === 'true')}
81+
/>
8682
</div>
8783
<DataListLayout
8884
isLoading={loading}

‎src/features/user/pages/SellerProfile.tsx‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useUser, useUserProfile } from '@/features/user/hooks/useUser';
44
import { useUserProducts } from '@/features/product/hooks/useProducts';
55
import { useCreateRoom } from '@/features/chat/hooks/useChat';
66
import { PageContainer } from '@/shared/layouts/PageContainer';
7-
import { Loading, ErrorMessage, EmptyState, Button, DetailHeader, DetailSection, Avatar, Pagination } from '@/shared/ui';
7+
import { Loading, ErrorMessage, EmptyState, Button, DetailHeader, DetailSection, Avatar, Pagination, SegmentedTabBar } from '@/shared/ui';
88
import ProductCard from '@/features/product/components/list/ProductCard';
99
import { useTranslation } from '@/shared/i18n';
1010

@@ -84,21 +84,15 @@ function SellerProfile() {
8484
{/* 판매 상품 목록 */}
8585
<div>
8686
<h2 className="text-lg font-bold mb-4">{profile.nickname}{t.user.sellerSalesItems}</h2>
87-
<div className="mb-4 flex gap-2">
88-
<Button
89-
variant={!showAuction ? "primary" : "secondary"}
90-
size="sm"
91-
onClick={() => handleTabChange(false)}
92-
>
93-
{t.product.regular}
94-
</Button>
95-
<Button
96-
variant={showAuction ? "primary" : "secondary"}
97-
size="sm"
98-
onClick={() => handleTabChange(true)}
99-
>
100-
{t.auction.auction}
101-
</Button>
87+
<div className="mb-4">
88+
<SegmentedTabBar
89+
tabs={[
90+
{ id: 'regular', label: t.product.regular },
91+
{ id: 'auction', label: t.auction.auction },
92+
]}
93+
activeTab={showAuction ? 'auction' : 'regular'}
94+
onTabChange={(tab) => handleTabChange(tab === 'auction')}
95+
/>
10296
</div>
10397
{productsLoading ? (
10498
<Loading />

0 commit comments

Comments
 (0)