File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
'use client';
import { useRouter } from 'next/navigation';
import { FoxBadge } from '@fox/core/components/fox-badge';
import { FoxButton } from '@fox/core/components/fox-button';
import { FoxStatusIndicator } from '@fox/core/components/fox-status-indicator';
import { FoxTable } from '@fox/core/components/fox-table';
import { FoxTableCell } from '@fox/core/components/fox-table-cell';
import { FoxTableRow } from '@fox/core/components/fox-table-row';
import { EMPTY_FIELD_PLACEHOLDER } from '@/lib/domain/merchant-detail';
import { merchantProductNewPath } from '@/lib/domain/merchant-detail-query';
import {
formatProductBadgeLabel,
formatProductPrice,
formatProductVisibilityLabel,
type MerchantProduct,
} from '@/lib/domain/merchant-product';
import { MerchantProductRowActions } from './merchant-product-row-actions';
import { MerchantThumbnail } from './merchant-thumbnail';
import styles from './merchant-product-table.module.scss';
interface MerchantProductTableProps {
frcsNo: string;
products: MerchantProduct[];
/** 상세가 아직 저장되지 않은 가맹점 — 백엔드가 메뉴 등록을 거부하므로 추가를 막는다. */
canAdd: boolean;
}
/**
* 기획 BO-MAL-002 ⑥ — 메뉴는 목록으로만 보이고 등록·수정은 별도 화면에서 한다.
* 목록 화면 뼈대(FoxListContainer)는 머리말·검색까지 딸려 와 카드 안에는 표 조각만 놓는다.
*/
export function MerchantProductTable({ frcsNo, products, canAdd }: MerchantProductTableProps) {
const router = useRouter();
return (
<div className={styles.root}>
<div className={styles.toolbar}>
<span className={styles.count}>등록 메뉴 {products.length}건</span>
<FoxButton
type="primary"
size="md"
leadingIcon={<i className="fox-ico fox-ico-Plus" aria-hidden="true" />}
label="메뉴 추가"
disabled={!canAdd}
onAction={() => router.push(merchantProductNewPath(frcsNo))}
/>
</div>
{!canAdd && (
<p className={styles.hint}>
아래 [등록]으로 상세를 먼저 저장하면 이 화면에서 바로 메뉴를 추가할 수 있습니다.
</p>
)}
<div className={styles.table}>
<FoxTable type="list" caption="메뉴 목록">
<FoxTableRow head>
<FoxTableCell head width={64} align="center">순서</FoxTableCell>
<FoxTableCell head width={140} align="center">이미지</FoxTableCell>
<FoxTableCell head width={240}>메뉴명</FoxTableCell>
<FoxTableCell head>설명</FoxTableCell>
<FoxTableCell head width={140} align="center">가격</FoxTableCell>
<FoxTableCell head width={180} align="center">배지</FoxTableCell>
<FoxTableCell head width={96} align="center">노출</FoxTableCell>
<FoxTableCell head width={220} align="center">관리</FoxTableCell>
</FoxTableRow>
{products.length === 0 ? (
<FoxTableRow>
<FoxTableCell colSpan={8} align="center">
등록된 메뉴가 없습니다.
</FoxTableCell>
</FoxTableRow>
) : (
products.map((product, index) => (
<FoxTableRow key={product.id}>
<FoxTableCell align="center" label="순서">
{product.sortOrder ?? index + 1}
</FoxTableCell>
<FoxTableCell align="center" label="이미지">
<MerchantThumbnail src={product.imageUrl} alt={`${product.name} 이미지`} />
</FoxTableCell>
<FoxTableCell emphasis label="메뉴명">{product.name}</FoxTableCell>
<FoxTableCell label="설명">
<span className={styles.description}>
{product.description ?? EMPTY_FIELD_PLACEHOLDER}
</span>
</FoxTableCell>
<FoxTableCell align="center" label="가격">
{formatProductPrice(product.price)}
</FoxTableCell>
<FoxTableCell align="center" label="배지">
{product.badges.length === 0 ? (
EMPTY_FIELD_PLACEHOLDER
) : (
<span className={styles.badges}>
{product.badges.map((badge) => (
<FoxBadge key={badge} type="pastel" color="neutral" size="sm">
{formatProductBadgeLabel(badge)}
</FoxBadge>
))}
</span>
)}
</FoxTableCell>
<FoxTableCell align="center" label="노출">
<FoxStatusIndicator
type={product.isVisible ? 'success' : 'default'}
label={formatProductVisibilityLabel(product.isVisible)}
/>
</FoxTableCell>
<FoxTableCell align="center" label="관리">
<MerchantProductRowActions product={product} />
</FoxTableCell>
</FoxTableRow>
))
)}
</FoxTable>
</div>
</div>
);
}