onItemClick(item)}
className={cn(
'h-11 px-3 flex items-center rounded-lg text-left text-base text-foreground',
- 'whitespace-nowrap cursor-pointer transition-colors duration-200',
- selectedItem === item ? 'bg-secondary' : 'hover:bg-secondary/60',
+ 'whitespace-nowrap cursor-pointer transition active:scale-[0.98]',
+ selectedItem === item ? 'bg-secondary' : 'hover:bg-muted',
)}
>
{item}
diff --git a/front/src/features/list/components/Pagination.tsx b/front/src/features/list/components/Pagination.tsx
new file mode 100644
index 0000000..44f3893
--- /dev/null
+++ b/front/src/features/list/components/Pagination.tsx
@@ -0,0 +1,102 @@
+import { cn, interactive } from '@/lib'
+import { buildPageItems } from '@/features/list/lib/pagination'
+import { ArrowIcon, DotsIcon } from '@/features/list/components/paginationIcons'
+
+interface PaginationProps {
+ totalPages: number
+ currentPage: number
+ onPageChange: (page: number) => void
+}
+
+export function Pagination({ totalPages, currentPage, onPageChange }: PaginationProps) {
+ if (totalPages === 0) {
+ return
+ }
+
+ const items = buildPageItems(currentPage, totalPages)
+
+ return (
+
+
+
1}
+ onClick={() => onPageChange(currentPage - 1)}
+ />
+
+
+
+ {items.map((item, idx) =>
+ item === 'dots' ? (
+
+ ) : (
+
onPageChange(item)}
+ />
+ ),
+ )}
+
+
+
+ )
+}
+
+function PageNumber({
+ page,
+ active,
+ onClick,
+}: {
+ page: number
+ active: boolean
+ onClick: () => void
+}) {
+ return (
+
+ )
+}
+
+function NavButton({
+ dir,
+ enabled,
+ onClick,
+}: {
+ dir: 'prev' | 'next'
+ enabled: boolean
+ onClick: () => void
+}) {
+ return (
+
+ )
+}
diff --git a/front/src/features/list/components/SidebarFooter.tsx b/front/src/features/list/components/SidebarFooter.tsx
deleted file mode 100644
index 454abc0..0000000
--- a/front/src/features/list/components/SidebarFooter.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Button } from '@/components'
-
-/** 좌측 사이드바 하단: 공급사명 + 로그아웃 */
-export function SidebarFooter() {
- return (
-
-
- {/* TODO: 공급사명 (auth store 연동) */}
- -
-
-
-
- )
-}
diff --git a/front/src/features/list/components/TableSection.tsx b/front/src/features/list/components/TableSection.tsx
new file mode 100644
index 0000000..76d276b
--- /dev/null
+++ b/front/src/features/list/components/TableSection.tsx
@@ -0,0 +1,79 @@
+import { type ReactNode } from 'react'
+import { Loader2 } from 'lucide-react'
+import { cn } from '@/lib'
+import type { ListItem } from '@/features/list/types'
+import { COLUMNS } from '@/features/list/components/tableColumns'
+
+interface TableSectionProps {
+ items: ListItem[]
+ selectedId?: string
+ isLoading?: boolean
+ onItemClick?: (item: ListItem) => void
+}
+
+export function TableSection({ items, selectedId, isLoading, onItemClick }: TableSectionProps) {
+ return (
+
+
+
+
+
+ {COLUMNS.map((col) => (
+ |
+ {col.label}
+ |
+ ))}
+
+
+
+
+ {isLoading ? (
+
+
+
+ ) : items.length === 0 ? (
+
+ 조회된 협상 내역이 없습니다.
+
+ ) : (
+ items.map((item) => (
+ onItemClick?.(item)}
+ className={cn(
+ 'h-[53px] cursor-pointer text-lg text-foreground transition-colors',
+ item.session_id === selectedId ? 'bg-table-selected' : 'hover:bg-table-hover',
+ )}
+ >
+ {COLUMNS.map((col) => (
+ |
+ {col.render ? col.render(item) : item[col.key] || '-'}
+ |
+ ))}
+
+ ))
+ )}
+
+
+
+
+ )
+}
+
+// 로딩/빈 상태 행
+function StateRow({ children }: { children: ReactNode }) {
+ return (
+
+ |
+ {children}
+ |
+
+ )
+}
diff --git a/front/src/features/list/components/paginationIcons.tsx b/front/src/features/list/components/paginationIcons.tsx
new file mode 100644
index 0000000..b7f8ba8
--- /dev/null
+++ b/front/src/features/list/components/paginationIcons.tsx
@@ -0,0 +1,32 @@
+// 페이지네이션 인라인 SVG (색 = currentColor)
+
+const ARROW_PATH = {
+ prev: 'M26.9995 30.6532L21.3457 24.9995L26.9995 19.3457L28.0532 20.3995L23.4532 24.9995L28.0532 29.5995L26.9995 30.6532Z',
+ next: 'M23.0005 30.6532L28.6543 24.9995L23.0005 19.3457L21.9468 20.3995L26.5468 24.9995L21.9468 29.5995L23.0005 30.6532Z',
+} as const
+
+export function ArrowIcon({ dir }: { dir: 'prev' | 'next' }) {
+ return (
+
+ )
+}
+
+export function DotsIcon() {
+ return (
+
+ )
+}
diff --git a/front/src/features/list/components/tableColumns.tsx b/front/src/features/list/components/tableColumns.tsx
new file mode 100644
index 0000000..16f5a0f
--- /dev/null
+++ b/front/src/features/list/components/tableColumns.tsx
@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react'
+import { formatDateTime } from '@/features/list/lib/datetime'
+import type { ListItem } from '@/features/list/types'
+
+// 컬럼 설정 (렌더링은 TableSection)
+export interface Column {
+ key: keyof ListItem
+ label: string
+ width: string
+ align: 'text-left' | 'text-center'
+ render?: (item: ListItem) => ReactNode
+}
+
+const STATUS_COLOR: Record
= {
+ 협상생성: 'text-info font-semibold',
+ 협상중: 'text-foreground font-semibold',
+ 협상완료: 'text-success font-semibold',
+ 미참여: 'text-muted-foreground font-semibold',
+ 협상거부: 'text-destructive font-semibold',
+}
+
+export const COLUMNS: Column[] = [
+ { key: 'item_code', label: '상품코드', width: 'w-[8.39%]', align: 'text-center' },
+ {
+ key: 'session_status',
+ label: '상태',
+ width: 'w-[6.57%]',
+ align: 'text-center',
+ render: (item) => (
+ {item.session_status || '-'}
+ ),
+ },
+ { key: 'qt_number', label: '견적번호', width: 'w-[14.29%]', align: 'text-center' },
+ { key: 'qt_type', label: '구분', width: 'w-[5.52%]', align: 'text-center' },
+ { key: 'item_name', label: '상품명', width: 'w-[20.96%]', align: 'text-left' },
+ { key: 'model_name', label: '모델명', width: 'w-[22.89%]', align: 'text-left' },
+ { key: 'maker_name', label: '제조사', width: 'w-[8.67%]', align: 'text-center' },
+ {
+ key: 'qt_end_time',
+ label: '마감일',
+ width: 'w-[13.72%]',
+ align: 'text-center',
+ render: (item) => formatDateTime(item.qt_end_time),
+ },
+]
diff --git a/front/src/features/list/containers/ContentContainer.tsx b/front/src/features/list/containers/ContentContainer.tsx
new file mode 100644
index 0000000..eb89662
--- /dev/null
+++ b/front/src/features/list/containers/ContentContainer.tsx
@@ -0,0 +1,27 @@
+import { useList } from '@/features/list/hooks/useList'
+import { ActionSection } from '@/features/list/components/ActionSection'
+import { TableSection } from '@/features/list/components/TableSection'
+import { Pagination } from '@/features/list/components/Pagination'
+
+export function ContentContainer() {
+ const { items, isLoading, totalPages, currentPage, setCurrentPage, selectedId, handleItemClick } =
+ useList()
+
+ return (
+ // 좌우 거터(80px) 일괄 적용
+
+ )
+}
diff --git a/front/src/features/list/containers/FilterContainer.tsx b/front/src/features/list/containers/FilterContainer.tsx
new file mode 100644
index 0000000..b2bc295
--- /dev/null
+++ b/front/src/features/list/containers/FilterContainer.tsx
@@ -0,0 +1,52 @@
+import { useShallow } from 'zustand/react/shallow'
+import { FilterGroup } from '@/features/list/components/FilterGroup'
+import { FILTER_GROUPS, type FilterKey } from '@/features/list/filterOptions'
+import { useListStore } from '@/features/list/stores/useListStore'
+
+export function FilterContainer() {
+ // 필터 필드만 구독 → 페이지 변경 시 리렌더 방지
+ const {
+ selectedType,
+ selectedStatus,
+ selectedDeadline,
+ toggleType,
+ toggleStatus,
+ toggleDeadline,
+ } = useListStore(
+ useShallow((s) => ({
+ selectedType: s.selectedType,
+ selectedStatus: s.selectedStatus,
+ selectedDeadline: s.selectedDeadline,
+ toggleType: s.toggleType,
+ toggleStatus: s.toggleStatus,
+ toggleDeadline: s.toggleDeadline,
+ })),
+ )
+
+ const selected: Record = {
+ type: selectedType,
+ status: selectedStatus,
+ deadline: selectedDeadline,
+ }
+ const toggle: Record void> = {
+ type: toggleType,
+ status: toggleStatus,
+ deadline: toggleDeadline,
+ }
+
+ return (
+
+
+ {FILTER_GROUPS.map((group) => (
+
+ ))}
+
+
-
- {FILTER_GROUPS.map((group) => (
-
- ))}
-
-