Skip to content

Commit 3543761

Browse files
yabsedyabsed
committed
[UI] 등록된 상품이 없습니다
1 parent 5300e05 commit 3543761

File tree

4 files changed

+78
-59
lines changed

4 files changed

+78
-59
lines changed

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

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useTranslation } from '@/shared/i18n';
33
import { useDetail } from '@/features/product/hooks/DetailContext';
44
import ProductCard from '@/features/product/components/list/ProductCard';
55
import { Pagination, SegmentedTabBar } from '@/shared/ui';
6+
import { DataListLayout } from '@/shared/layouts/DataListLayout';
67

78
const ITEMS_PER_PAGE = 4;
89

@@ -54,24 +55,25 @@ export function SellerProductList() {
5455
onTabChange={(tab) => handleTabChange(tab === 'auction')}
5556
/>
5657
</div>
57-
{currentItems.length === 0 ? (
58-
<p className="text-text-muted text-sm">
59-
{showAuction ? t.auction.noAuctions : t.product.noProducts}
60-
</p>
61-
) : (
62-
<>
63-
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
64-
{paginatedItems.map(p => (
65-
<ProductCard key={p.id} product={p} />
66-
))}
67-
</div>
58+
<DataListLayout
59+
isLoading={false}
60+
error={undefined}
61+
isEmpty={currentItems.length === 0}
62+
emptyMessage={showAuction ? t.auction.noAuctions : t.product.noProducts}
63+
>
64+
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
65+
{paginatedItems.map(p => (
66+
<ProductCard key={p.id} product={p} />
67+
))}
68+
</div>
69+
{totalPages > 1 && (
6870
<Pagination
6971
currentPage={currentPage}
7072
totalPages={totalPages}
7173
onPageChange={setCurrentPage}
7274
/>
73-
</>
74-
)}
75+
)}
76+
</DataListLayout>
7577
</div>
7678
);
7779
}

‎src/features/user/components/MyBidsTab.tsx‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@ import { useEffect, useMemo, useState } from "react";
22
import { useQueries } from "@tanstack/react-query";
33
import { useProducts } from "@/features/product/hooks/useProducts";
44
import { productApi } from "@/features/product/api/product";
5-
import { EmptyState, Loading, Pagination, SegmentedTabBar } from '@/shared/ui';
5+
import { Pagination, SegmentedTabBar } from '@/shared/ui';
66
import ProductCard from "@/features/product/components/list/ProductCard";
77
import { useTranslation } from '@/shared/i18n';
88
import { useUser } from '@/features/user/hooks/useUser';
99
import { PageContainer } from '@/shared/layouts/PageContainer';
1010
import { OnboardingRequired } from '@/shared/ui';
11+
import { DataListLayout } from '@/shared/layouts/DataListLayout';
1112
import { payApi } from '@/features/pay/api/payApi';
1213
import type { ProductDetailResponse } from '@/shared/api/types';
1314
import { useSearchParams } from 'react-router-dom';
@@ -47,7 +48,7 @@ const MyBidsTab = () => {
4748
}, [bidsTab]);
4849

4950
// 1. Fetch all auction products
50-
const { products: auctionProducts, loading: productsLoading } = useProducts({ auction: true });
51+
const { products: auctionProducts, loading: productsLoading, error: productsError } = useProducts({ auction: true });
5152

5253
// 2. Fetch product details to get auction IDs
5354
const productDetailQueries = useQueries({
@@ -113,6 +114,7 @@ const MyBidsTab = () => {
113114
});
114115

115116
const transactionsLoading = transactionQueries.some(q => q.isLoading);
117+
const transactionsError = transactionQueries.find(q => q.error)?.error as Error | undefined;
116118

117119
// 7. Check if a specific auction has been paid
118120
const checkAuctionPaid = (product: ProductDetailResponse | undefined): boolean => {
@@ -180,10 +182,11 @@ const MyBidsTab = () => {
180182
}
181183

182184
const isLoading = productsLoading || productDetailsLoading || topBidsLoading || transactionsLoading;
183-
184-
if (isLoading) {
185-
return <Loading />;
186-
}
185+
const error =
186+
productsError ||
187+
(productDetailQueries.find(q => q.error)?.error as Error | undefined) ||
188+
(topBidQueries.find(q => q.error)?.error as Error | undefined) ||
189+
transactionsError;
187190

188191
const getEmptyMessage = () => {
189192
return t.auction.noMyBids;
@@ -205,22 +208,25 @@ const MyBidsTab = () => {
205208
/>
206209
</div>
207210

208-
{currentAuctions.length === 0 ? (
209-
<EmptyState message={getEmptyMessage()} />
210-
) : (
211-
<>
212-
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
213-
{paginatedAuctions.map(product => (
214-
<ProductCard key={product!.id} product={product!} />
215-
))}
216-
</div>
211+
<DataListLayout
212+
isLoading={isLoading}
213+
error={error}
214+
isEmpty={currentAuctions.length === 0}
215+
emptyMessage={getEmptyMessage()}
216+
>
217+
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
218+
{paginatedAuctions.map(product => (
219+
<ProductCard key={product!.id} product={product!} />
220+
))}
221+
</div>
222+
{totalPages > 1 && (
217223
<Pagination
218224
currentPage={currentPage}
219225
totalPages={totalPages}
220226
onPageChange={setCurrentPage}
221227
/>
222-
</>
223-
)}
228+
)}
229+
</DataListLayout>
224230
</div>
225231
</div>
226232
);

‎src/features/user/components/UserProfile.tsx‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { useEffect, useMemo, useState } from "react";
22
import { useNavigate, useSearchParams } from "react-router-dom";
33
import { useUserProducts, useCreateProduct } from "@/features/product/hooks/useProducts";
4-
import { EmptyState, Button, DetailSection, Pagination, SegmentedTabBar } from '@/shared/ui';
4+
import { Button, DetailSection, Pagination, SegmentedTabBar } from '@/shared/ui';
55
import ProductCard from "@/features/product/components/list/ProductCard";
66
import ProductForm from "@/features/product/components/form/ProductForm";
77
import { useTranslation } from '@/shared/i18n';
88

99
import { useUser } from '@/features/user/hooks/useUser';
1010
import { PageContainer } from '@/shared/layouts/PageContainer';
1111
import { OnboardingRequired } from '@/shared/ui';
12+
import { DataListLayout } from '@/shared/layouts/DataListLayout';
1213

1314
const ITEMS_PER_PAGE = 8;
1415

@@ -48,8 +49,11 @@ const UserProfile = () => {
4849
setCurrentPage(1);
4950
}, [salesTab]);
5051

51-
const { products: regularProducts } = useUserProducts('me', undefined, undefined, false);
52-
const { products: auctionProducts } = useUserProducts('me', undefined, undefined, true);
52+
const { products: regularProducts, loading: regularLoading, error: regularError } = useUserProducts('me', undefined, undefined, false);
53+
const { products: auctionProducts, loading: auctionLoading, error: auctionError } = useUserProducts('me', undefined, undefined, true);
54+
55+
const productsLoading = regularLoading || auctionLoading;
56+
const productsError = regularError || auctionError;
5357

5458
const currentProducts = showAuction ? auctionProducts : regularProducts;
5559

@@ -125,22 +129,26 @@ const UserProfile = () => {
125129
onTabChange={handleTabChange}
126130
/>
127131
</div>
128-
{currentProducts.length === 0 ? (
129-
<EmptyState message={showAuction ? t.auction.noAuctions : t.product.noSalesItems} />
130-
) : (
131-
<>
132-
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
133-
{paginatedProducts.map(p => (
134-
<ProductCard key={p.id} product={p} />
135-
))}
136-
</div>
132+
133+
<DataListLayout
134+
isLoading={productsLoading}
135+
error={productsError}
136+
isEmpty={currentProducts.length === 0}
137+
emptyMessage={showAuction ? t.auction.noAuctions : t.product.noSalesItems}
138+
>
139+
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
140+
{paginatedProducts.map(p => (
141+
<ProductCard key={p.id} product={p} />
142+
))}
143+
</div>
144+
{totalPages > 1 && (
137145
<Pagination
138146
currentPage={currentPage}
139147
totalPages={totalPages}
140148
onPageChange={setCurrentPage}
141149
/>
142-
</>
143-
)}
150+
)}
151+
</DataListLayout>
144152
</div>
145153
</div>
146154
);

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

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useUserProducts } from '@/features/product/hooks/useProducts';
55
import { useCreateRoom } from '@/features/chat/hooks/useChat';
66
import { PageContainer } from '@/shared/layouts/PageContainer';
77
import { Loading, ErrorMessage, EmptyState, Button, DetailHeader, DetailSection, Avatar, Pagination, SegmentedTabBar } from '@/shared/ui';
8+
import { DataListLayout } from '@/shared/layouts/DataListLayout';
89
import ProductCard from '@/features/product/components/list/ProductCard';
910
import { useTranslation } from '@/shared/i18n';
1011

@@ -21,10 +22,11 @@ function SellerProfile() {
2122
const [showAuction, setShowAuction] = useState(false);
2223
const [currentPage, setCurrentPage] = useState(1);
2324

24-
const { products: regularProducts, loading: regularLoading } = useUserProducts(userId || '', undefined, undefined, false);
25-
const { products: auctionProducts, loading: auctionLoading } = useUserProducts(userId || '', undefined, undefined, true);
25+
const { products: regularProducts, loading: regularLoading, error: regularError } = useUserProducts(userId || '', undefined, undefined, false);
26+
const { products: auctionProducts, loading: auctionLoading, error: auctionError } = useUserProducts(userId || '', undefined, undefined, true);
2627

2728
const productsLoading = regularLoading || auctionLoading;
29+
const productsError = regularError || auctionError;
2830
const currentProducts = showAuction ? auctionProducts : regularProducts;
2931

3032
const paginatedProducts = useMemo(() => {
@@ -94,24 +96,25 @@ function SellerProfile() {
9496
onTabChange={(tab) => handleTabChange(tab === 'auction')}
9597
/>
9698
</div>
97-
{productsLoading ? (
98-
<Loading />
99-
) : currentProducts.length === 0 ? (
100-
<EmptyState message={showAuction ? t.auction.noAuctions : t.product.noProducts} />
101-
) : (
102-
<>
103-
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
104-
{paginatedProducts.map((product) => (
105-
<ProductCard key={product.id} product={product} />
106-
))}
107-
</div>
99+
<DataListLayout
100+
isLoading={productsLoading}
101+
error={productsError}
102+
isEmpty={currentProducts.length === 0}
103+
emptyMessage={showAuction ? t.auction.noAuctions : t.product.noProducts}
104+
>
105+
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
106+
{paginatedProducts.map((product) => (
107+
<ProductCard key={product.id} product={product} />
108+
))}
109+
</div>
110+
{totalPages > 1 && (
108111
<Pagination
109112
currentPage={currentPage}
110113
totalPages={totalPages}
111114
onPageChange={setCurrentPage}
112115
/>
113-
</>
114-
)}
116+
)}
117+
</DataListLayout>
115118
</div>
116119
</PageContainer>
117120
);

0 commit comments

Comments
 (0)