주식리스트 테이블 레이아웃 구현

src/frontend/apps/web/app/(main)/page.tsx

@@ -11,9 +11,6 @@ export const metadata = {
 export default function Page() {
   return (
     <div className="flex flex-col items-center justify-center min-h-svh">
-      <Button size="sm">
-        <Link href="/tesla">상세페이지로 이동</Link>
-      </Button>
       <StocksList />
     </div>
   );

src/frontend/apps/web/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.64.2",
+    "@tanstack/react-table": "^8.20.6",
     "@workspace/ui": "workspace:*",
     "lucide-react": "0.473.0",
     "next": "^14.2.23",

src/frontend/apps/web/src/features/stock/index.tsx

@@ -1,2 +1 @@
-export { default as StockDetailLayout } from './ui/stock-detail-layout';
-export { default as StocksList } from './ui/stocks-list';
+export { StockDetailLayout, StocksList } from './ui';

src/frontend/apps/web/src/features/stock/model/index.ts

@@ -0,0 +1,2 @@
+export { type Stock } from './stock.types';
+export { columns } from './stocks-table.columns';

src/frontend/apps/web/src/features/stock/model/stock.types.ts

@@ -0,0 +1,8 @@
+export type Stock = {
+  id: string;
+  name: string;
+  currPrice: string;
+  fluctuation: string;
+  volume: string;
+  slug: string;
+};

src/frontend/apps/web/src/features/stock/model/stocks-table.columns.tsx

@@ -0,0 +1,61 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { Stock } from './stock.types';
+import { Button } from '@workspace/ui/components';
+import { ArrowUpDown } from 'lucide-react';
+
+export const columns: ColumnDef<Stock>[] = [
+  {
+    accessorKey: 'name',
+    header: () => <div className="text-left">종목명</div>,
+    cell: ({ row }) => <div className="text-left">{row.getValue('name')}</div>,
+  },
+  {
+    id: 'currPrice',
+    accessorFn: (row) => parseFloat(row.currPrice),
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+      >
+        현재가
+        <ArrowUpDown />
+      </Button>
+    ),
+    cell: ({ row }) => {
+      const price = parseFloat(row.getValue('currPrice'));
+      const formatted = new Intl.NumberFormat('en-US', {
+        style: 'decimal',
+        currency: 'KRW',
+      }).format(price);
+      return <div className="text-right font-medium">{`${formatted}원`}</div>;
+    },
+  },
+  {
+    id: 'fluctuation',
+    accessorFn: (row) => parseFloat(row.fluctuation),
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+      >
+        등락률
+        <ArrowUpDown />
+      </Button>
+    ),
+    cell: ({ row }) => <div>{row.getValue('fluctuation')}%</div>,
+  },
+  {
+    id: 'volume',
+    accessorFn: (row) => parseFloat(row.volume),
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+      >
+        거래량
+        <ArrowUpDown />
+      </Button>
+    ),
+    cell: ({ row }) => <div>{row.getValue('volume')}</div>,
+  },
+];

src/frontend/apps/web/src/features/stock/ui/index.ts

@@ -0,0 +1,2 @@
+export { default as StockDetailLayout } from './stock-detail-layout';
+export { default as StocksList } from './stocks-list-table';

src/frontend/apps/web/src/features/stock/ui/stocks-list-table.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { SortingState, flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
+import { useState } from 'react';
+import { Stock, columns } from '../model';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@workspace/ui/components';
+import { useRouter } from 'next/navigation';
+
+const Stockdata: Stock[] = [
+  {
+    id: '1',
+    name: '삼성전자',
+    currPrice: '53700',
+    fluctuation: '+0.00',
+    volume: '1000',
+    slug: 'samsung-electronics',
+  },
+  {
+    id: '2',
+    name: 'SK하이닉스',
+    currPrice: '221000',
+    fluctuation: '+0.68',
+    volume: '1000',
+    slug: 'sk-hynix',
+  },
+  {
+    id: '3',
+    name: '카카오',
+    currPrice: '35750',
+    fluctuation: '+0.00',
+    volume: '1000',
+    slug: 'kakao',
+  },
+  {
+    id: '4',
+    name: '네이버',
+    currPrice: '204000',
+    fluctuation: '-0.24',
+    volume: '1000',
+    slug: 'naver',
+  },
+  {
+    id: '5',
+    name: '한화에어로스페이스',
+    currPrice: '411500',
+    fluctuation: '+7.30',
+    volume: '1000',
+    slug: 'hanwha-aerospace',
+  },
+];
+
+const StocksListTable = () => {
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const router = useRouter();
+
+  const table = useReactTable({
+    data: Stockdata,
+    columns,
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting,
+    },
+  });
+  return (
+    <div className="w-3/4 shadow-s">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                return <TableHead key={header.id}>{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}</TableHead>;
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                className="cursor-pointer"
+                onClick={() => {
+                  router.push(`/${row.original.slug ?? ''}`);
+                }}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell
+                colSpan={columns.length}
+                className="h-24 text-center"
+              >
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+export default StocksListTable;

src/frontend/packages/ui/package.json

@@ -20,7 +20,6 @@
     "@radix-ui/react-toggle": "^1.1.1",
     "@radix-ui/react-toggle-group": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.7",
-    "@tanstack/react-table": "^8.20.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "0.473.0",