tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+ return (
+ |
+ )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+ return (
+ |
+ )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+ return (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableCaption({
+ className,
+ ...props
+}: React.ComponentProps<"caption">) {
+ return (
+
+ )
+}
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+}
diff --git a/src/advanced/components/ui/feature/CartButton.tsx b/src/advanced/components/ui/feature/CartButton.tsx
new file mode 100644
index 000000000..3db3a752a
--- /dev/null
+++ b/src/advanced/components/ui/feature/CartButton.tsx
@@ -0,0 +1,29 @@
+interface CartButtonProps {
+ itemCount: number;
+}
+
+export function CartButton({ itemCount }: CartButtonProps) {
+ return (
+
+
+ {itemCount > 0 && (
+
+ {itemCount}
+
+ )}
+
+
+ {/* 1. Logo Section: 항상 고정 */}
+
+ SHOP
+
+ {/* 2. Center Slot: 검색창 등 */}
+ {center && {center} }
+
+
+ {/* 3. Right Slot: 버튼, 카트 등 */}
+
+
+
- {notifications.length > 0 && (
-
- {notifications.map(notif => (
-
- {notif.message}
-
-
- ))}
-
+
+
+ {/* Page Content */}
+ {isAdmin ? (
+ setIsAdmin(false)}>
+
+
+ ) : (
+ setIsAdmin(true)}
+ >
+ {({ debouncedSearchTerm }) => (
+
+ )}
+
)}
-
-
-
-
- SHOP
- {/* 검색창 - 안티패턴: 검색 로직이 컴포넌트에 직접 포함 */}
- {!isAdmin && (
-
- setSearchTerm(e.target.value)}
- placeholder="상품 검색..."
- className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
- />
-
- )}
-
-
-
-
-
-
- {isAdmin ? (
-
-
- 관리자 대시보드
- 상품과 쿠폰을 관리할 수 있습니다
-
-
-
-
-
- {activeTab === 'products' ? (
-
-
-
- 상품 목록
-
-
-
-
-
-
- | 상품명 |
- 가격 |
- 재고 |
- 설명 |
- 작업 |
-
-
-
- {(activeTab === 'products' ? products : products).map(product => (
-
- | {product.name} |
- {formatPrice(product.price, product.id)} |
-
- 10 ? 'bg-green-100 text-green-800' :
- product.stock > 0 ? 'bg-yellow-100 text-yellow-800' :
- 'bg-red-100 text-red-800'
- }`}>
- {product.stock}개
-
- |
- {product.description || '-'} |
-
-
-
- |
-
- ))}
-
-
-
- ) : (
-
-
- 쿠폰 관리
-
-
-
- {coupons.map(coupon => (
-
-
-
- {coupon.name}
- {coupon.code}
-
-
- {coupon.discountType === 'amount'
- ? `${coupon.discountValue.toLocaleString()}원 할인`
- : `${coupon.discountValue}% 할인`}
-
-
-
-
-
-
- ))}
-
-
-
-
-
-
- {showCouponForm && (
-
- )}
-
- )}
-
-
- {/* 상품 목록 */}
-
-
- 전체 상품
-
- 총 {products.length}개 상품
-
-
- "{debouncedSearchTerm}"에 대한 검색 결과가 없습니다.
-
- {filteredProducts.map(product => {
- const remainingStock = getRemainingStock(product);
-
- return (
-
- {/* 상품 이미지 영역 (placeholder) */}
-
-
- {product.isRecommended && (
-
- BEST
-
- )}
- {product.discounts.length > 0 && (
-
- ~{Math.max(...product.discounts.map(d => d.rate)) * 100}%
-
- )}
-
-
- {/* 상품 정보 */}
-
- {product.name}
- {product.description && (
- {product.description}
- )}
-
- {/* 가격 정보 */}
-
- {formatPrice(product.price, product.id)}
- {product.discounts.length > 0 && (
-
- {product.discounts[0].quantity}개 이상 구매시 할인 {product.discounts[0].rate * 100}%
-
- )}
-
-
- {/* 재고 상태 */}
-
- {remainingStock <= 5 && remainingStock > 0 && (
- 품절임박! {remainingStock}개 남음
- )}
- {remainingStock > 5 && (
- 재고 {remainingStock}개
- )}
-
-
- {/* 장바구니 버튼 */}
-
-
-
- );
- })}
-
-
-
-
-
-
-
-
- 장바구니
-
- {cart.length === 0 ? (
-
- ) : (
-
- {cart.map(item => {
- const itemTotal = calculateItemTotal(item);
- const originalPrice = item.product.price * item.quantity;
- const hasDiscount = itemTotal < originalPrice;
- const discountRate = hasDiscount ? Math.round((1 - itemTotal / originalPrice) * 100) : 0;
-
- return (
-
-
- {item.product.name}
-
-
-
-
-
- {item.quantity}
-
-
-
- {hasDiscount && (
- -{discountRate}%
- )}
-
- {Math.round(itemTotal).toLocaleString()}원
-
-
-
-
- );
- })}
-
-
- {cart.length > 0 && (
- <>
-
-
- 쿠폰 할인
-
-
- {coupons.length > 0 && (
-
- )}
-
-
-
- 결제 정보
-
-
- 상품 금액
- {totals.totalBeforeDiscount.toLocaleString()}원
-
- {totals.totalBeforeDiscount - totals.totalAfterDiscount > 0 && (
-
- 할인 금액
- -{(totals.totalBeforeDiscount - totals.totalAfterDiscount).toLocaleString()}원
-
- )}
-
- 결제 예정 금액
- {totals.totalAfterDiscount.toLocaleString()}원
-
-
-
- )}
-
-
-
+ {title}
+ {description}
+
+
+
+
+
+ {activeTab === "products" ? (
+
+ ) : (
+
+ )}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/basic/components/ui/admin/coupon/AddCouponCard.tsx b/src/basic/components/ui/admin/coupon/AddCouponCard.tsx
new file mode 100644
index 000000000..3c47051a8
--- /dev/null
+++ b/src/basic/components/ui/admin/coupon/AddCouponCard.tsx
@@ -0,0 +1,35 @@
+import { Button } from "../../common/button";
+import { Card } from "../../common/card";
+
+
+interface AddCouponCardProps {
+ onClick: () => void;
+}
+
+export function AddCouponCard({ onClick }: AddCouponCardProps) {
+ return (
+
+
+
+ );
+}
+
diff --git a/src/basic/components/ui/admin/coupon/CouponCard.tsx b/src/basic/components/ui/admin/coupon/CouponCard.tsx
new file mode 100644
index 000000000..7022681b6
--- /dev/null
+++ b/src/basic/components/ui/admin/coupon/CouponCard.tsx
@@ -0,0 +1,52 @@
+import { Coupon } from '@/types';
+import { Card, CardContent } from '../../common/card';
+import { Button } from '../../common/button';
+
+
+interface CouponCardProps {
+ coupon: Coupon;
+ onDelete: () => void;
+}
+
+export function CouponCard({ coupon, onDelete }: CouponCardProps) {
+ return (
+
+
+
+
+ {coupon.name}
+ {coupon.code}
+
+
+ {coupon.discountType === 'amount'
+ ? `${coupon.discountValue.toLocaleString()}원 할인`
+ : `${coupon.discountValue}% 할인`}
+
+
+
+
+
+ 쿠폰 관리
+
+
+ {/* 쿠폰 목록 */}
+
+
+ {coupons.map((coupon) => (
+ removeCoupon(coupon.code)}
+ />
+ ))}
+
+ couponForm.isOpen ? couponForm.close() : couponForm.open()
+ }
+ />
+
+
+ {/* 쿠폰 추가 폼 */}
+
+
+
+
+
+ 상품명
+ 가격
+ 재고
+ 설명
+ 작업
+
+
+
+ {products.map((product: ProductWithUI) => (
+
+
+ {product.name}
+
+
+
+ {formatPrice(product.price, product.id)}
+
+
+
+ 10
+ ? 'stockHigh'
+ : product.stock > 0
+ ? 'stockLow'
+ : 'stockHigh'
+ }
+ >
+ {product.stock}개
+
+
+
+
+ {product.description || '-'}
+
+
+
+
+
+
+
+ ))}
+
+ {/* 데이터가 없을 때 처리 */}
+ {products.length === 0 && (
+
+
+ 등록된 상품이 없습니다.
+
+
+ )}
+
+
+
+
+ {/* 상품 목록 */}
+
+
+ 전체 상품
+
+ 총 {products.length}개 상품
+
+
+
+ "{debouncedSearchTerm}"에 대한 검색 결과가 없습니다.
+
+
+ {filteredProducts.map((product) => {
+ const remainingStock = getRemainingStock(product);
+ return (
+ addToCart(product)}
+ />
+ );
+ })}
+
+
+
+
+
+ {/* 장바구니 섹션 */}
+
+
+
+ 장바구니
+
+ {cart.length === 0 ? (
+
+ ) : (
+
+ {cart.map((item) => {
+ const itemTotal = getItemTotal(item);
+ const originalPrice = item.product.price * item.quantity;
+ const hasDiscount = itemTotal < originalPrice;
+ const discountRate = hasDiscount
+ ? Math.round((1 - itemTotal / originalPrice) * 100)
+ : 0;
+
+ return (
+
+
+
+ {item.product.name}
+
+
+
+
+
+
+
+ {item.quantity}
+
+
+
+
+ {hasDiscount && (
+
+ -{discountRate}%
+
+ )}
+
+ {Math.round(itemTotal).toLocaleString()}원
+
+
+
+
+ );
+ })}
+
+
+ {cart.length > 0 && (
+ <>
+ {/* 쿠폰 섹션 */}
+
+
+
+ 쿠폰 할인
+
+
+
+ {coupons.length > 0 && (
+
+ )}
+
+
+ {/* 결제 정보 섹션 */}
+
+ 결제 정보
+
+
+ 상품 금액
+
+ {totals.totalBeforeDiscount.toLocaleString()}원
+
+
+ {totals.totalDiscount > 0 && (
+
+ 할인 금액
+ -{totals.totalDiscount.toLocaleString()}원
+
+ )}
+
+ 결제 예정 금액
+
+ {totals.totalAfterDiscount.toLocaleString()}원
+
+
+
+
+ )}
+
+
+
+
+ {product.isRecommended && (
+
+ BEST
+
+ )}
+ {product.discounts.length > 0 && (
+
+ ~{Math.max(...product.discounts.map((d) => d.rate)) * 100}%
+
+ )}
+ {product.name}
+ {product.description && (
+
+ {product.description}
+
+ )}
+
+ {/* 가격 정보 */}
+
+ {formatPrice(product?.price)}
+ {product.discounts.length > 0 && (
+
+ {product.discounts[0].quantity}개 이상 구매시 할인{' '}
+ {product.discounts[0].rate * 100}%
+
+ )}
+
+ {remainingStock <= 5 && remainingStock > 0 && (
+
+ 품절임박! {remainingStock}개 남음
+
+ )}
+ {remainingStock > 5 && (
+ 재고 {remainingStock}개
+ )}
+
+ {notifications.map((notif) => (
+
+ {notif.message}
+
+
+ ))}
+ |
+ )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+ return (
+ |
+ )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+ return (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableCaption({
+ className,
+ ...props
+}: React.ComponentProps<"caption">) {
+ return (
+
+ )
+}
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+}
diff --git a/src/basic/components/ui/feature/CartButton.tsx b/src/basic/components/ui/feature/CartButton.tsx
new file mode 100644
index 000000000..3db3a752a
--- /dev/null
+++ b/src/basic/components/ui/feature/CartButton.tsx
@@ -0,0 +1,29 @@
+interface CartButtonProps {
+ itemCount: number;
+}
+
+export function CartButton({ itemCount }: CartButtonProps) {
+ return (
+
+
+ {itemCount > 0 && (
+
+ {itemCount}
+
+ )}
+
+
+ {/* 1. Logo Section: 항상 고정 */}
+
+ SHOP
+
+ {/* 2. Center Slot: 검색창 등 */}
+ {center && {center} }
+
+
+ {/* 3. Right Slot: 버튼, 카트 등 */}
+
+
+ | |