sgdevcamp2025 · handje · Jan 31, 2025 · Jan 30, 2025 · Jan 30, 2025 · Jan 30, 2025
diff --git a/src/frontend/apps/web/app/(main)/[stockSlug]/page.tsx b/src/frontend/apps/web/app/(main)/[stockSlug]/page.tsx
@@ -1,5 +1,5 @@
 import { ChatContainer } from '@/src/features/chat';
-import { StockLayout } from '@/src/features/stock';
+import { StockDetailLayout } from '@/src/features/stock';
 
 // 주식데이터를 가지고 올수있는 방법이 필요합니다.
 
@@ -20,7 +20,7 @@ export default function StockDetailsPage({ params }) {
   return (
     <div className="flex bg-gray-700 py-6 px-[30px] h-full">
       <div className="pr-2 w-[45vw]">
-        <StockLayout />
+        <StockDetailLayout />
       </div>
 
       <div className="pl-2 w-[55vw]">

diff --git a/src/frontend/apps/web/app/(main)/layout.tsx b/src/frontend/apps/web/app/(main)/layout.tsx
@@ -1,3 +1,4 @@
+import { Header } from '@/src/shared';
 import '@workspace/ui/globals.css';
 
 export default function RootLayout({
@@ -11,7 +12,9 @@ export default function RootLayout({
       suppressHydrationWarning
     >
       <body>
-        <header className="h-[68px] bg-gray-800 flex items-center justify-center">Header</header>
+        <header className="h-[68px] w-full flex items-center justify-between px-4 py-1 bg-muted">
+          <Header />
+        </header>
         <div className="flex flex-col h-[calc(100vh-68px)] overflow-hidden">{children}</div>
       </body>
     </html>

diff --git a/src/frontend/apps/web/app/(main)/page.tsx b/src/frontend/apps/web/app/(main)/page.tsx
@@ -1,16 +1,20 @@
+import { StocksList } from '@/src/features/stock';
 import { Button } from '@workspace/ui/components';
 import Link from 'next/link';
 
+export const metadata = {
+  title: '주식 리스트 - 실시간 주식 정보',
+  description: '삼성전자, SK하이닉스, 카카오, 네이버, 한화에어로스페이스의 실시간 주식 정보를 확인하세요.',
+  keywords: '주식, 삼성전자, SK하이닉스, 카카오, 네이버, 한화에어로스페이스, 주식 정보',
+};
+
 export default function Page() {
-  // 버튼 예시
   return (
-    <div className="flex items-center justify-center min-h-svh">
-      <div className="flex flex-col items-center justify-center gap-4">
-        <h1 className="text-2xl font-bold">Hello World</h1>
-        <Button size="sm">
-          <Link href="/tesla">Button</Link>
-        </Button>
-      </div>
+    <div className="flex flex-col items-center justify-center min-h-svh">
+      <Button size="sm">
+        <Link href="/tesla">상세페이지로 이동</Link>
+      </Button>
+      <StocksList />
     </div>
   );
 }
diff --git a/src/frontend/apps/web/src/features/stock/index.tsx b/src/frontend/apps/web/src/features/stock/index.tsx
@@ -1 +1,2 @@
-export { default as StockLayout } from './stock-layout';
+export { default as StockDetailLayout } from './ui/stock-detail-layout';
+export { default as StocksList } from './ui/stocks-list';
diff --git a/src/frontend/apps/web/src/features/stock/stock-layout.tsx b/src/frontend/apps/web/src/features/stock/stock-layout.tsx
diff --git a/src/frontend/apps/web/src/features/stock/ui/stock-detail-layout.tsx b/src/frontend/apps/web/src/features/stock/ui/stock-detail-layout.tsx
@@ -0,0 +1,5 @@
+const StockDetailLayout = () => {
+  return <div className="bg-gray-200 w-full h-full">123</div>;
+};
+
+export default StockDetailLayout;
diff --git a/src/frontend/apps/web/src/features/stock/ui/stocks-list.tsx b/src/frontend/apps/web/src/features/stock/ui/stocks-list.tsx
@@ -0,0 +1,52 @@
+import { DataTable } from '@workspace/ui/components';
+
+const StocksList = () => {
+  const Stockdata = [
+    {
+      id: '1',
+      name: '삼성전자',
+      currPrice: '53700',
+      fluctuation: '+0.00',
+      volume: '1000',
+      stockSlug: 'samsung-electronics',
+    },
+    {
+      id: '2',
+      name: 'SK하이닉스',
+      currPrice: '221000',
+      fluctuation: '+0.68',
+      volume: '1000',
+      stockSlug: 'sk-hynix',
+    },
+    {
+      id: '3',
+      name: '카카오',
+      currPrice: '35750',
+      fluctuation: '+0.00',
+      volume: '1000',
+      stockSlug: 'kakao',
+    },
+    {
+      id: '4',
+      name: '네이버',
+      currPrice: '204000',
+      fluctuation: '-0.24',
+      volume: '1000',
+      stockSlug: 'naver',
+    },
+    {
+      id: '5',
+      name: '한화에어로스페이스',
+      currPrice: '411500',
+      fluctuation: '+7.30',
+      volume: '1000',
+      stockSlug: 'hanwha-aerospace',
+    },
+  ];
+  return (
+    <div className="w-3/4 shadow-s">
+      <DataTable data={Stockdata} />
+    </div>
+  );
+};
+export default StocksList;
diff --git a/src/frontend/apps/web/src/shared/components/header/header.tsx b/src/frontend/apps/web/src/shared/components/header/header.tsx
@@ -1,13 +1,16 @@
+'use client';
+
 import { Avatar, AvatarFallback, AvatarImage, Popover, PopoverContent, PopoverTrigger } from '@workspace/ui/components';
 import ProfileContainer from './profile-container';
+import { CircleUserRound } from 'lucide-react';
 
 //로고 이미지 경로 변경 필요
 const Header = () => {
   return (
-    <header className="h-[68px] w-full flex items-center justify-between px-2 py-1 bg-muted">
+    <>
       <Avatar variant="square">
         <AvatarImage src="https://github.com/shadcn.png" />
-        <AvatarFallback>logo</AvatarFallback>
+        <AvatarFallback className="text-primary font-bold">주톡피아</AvatarFallback>
       </Avatar>
       <Popover>
         <PopoverTrigger asChild>
@@ -16,7 +19,9 @@ const Header = () => {
             className="cursor-pointer"
           >
             <AvatarImage src="https://github.com/shadcn.png" />
-            <AvatarFallback>Avatar</AvatarFallback>
+            <AvatarFallback>
+              <CircleUserRound size={40} />
+            </AvatarFallback>
           </Avatar>
         </PopoverTrigger>
         <PopoverContent
@@ -26,7 +31,7 @@ const Header = () => {
           <ProfileContainer />
         </PopoverContent>
       </Popover>
-    </header>
+    </>
   );
 };
 

diff --git a/src/frontend/packages/ui/src/components/DataTable/data-table.tsx b/src/frontend/packages/ui/src/components/DataTable/data-table.tsx
@@ -1,22 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import {
-  ColumnDef,
-  SortingState,
-  flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from '@tanstack/react-table';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '../Table';
+import { ColumnDef, SortingState, flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../Table';
 import { Button } from '../Button';
 import { ArrowUpDown } from 'lucide-react';
 
@@ -98,49 +84,39 @@ export function DataTable({ data }: { data: Stock[] }) {
   });
 
   return (
-    <div className="flex w-[600px] flex-wrap">
-      <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>
-                );
-              })}
+    <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}
+              data-state={row.getIsSelected() && 'selected'}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+              ))}
             </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                data-state={row.getIsSelected() && 'selected'}
-              >
-                {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>
+          ))
+        ) : (
+          <TableRow>
+            <TableCell
+              colSpan={columns.length}
+              className="h-24 text-center"
+            >
+              No results.
+            </TableCell>
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
   );
 }