diff --git a/src/frontend/apps/web/app/(main)/[stockSlug]/page.tsx b/src/frontend/apps/web/app/(main)/[stockSlug]/page.tsx index f607c772..05d0bb61 100644 --- 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 (
- +
diff --git a/src/frontend/apps/web/app/(main)/layout.tsx b/src/frontend/apps/web/app/(main)/layout.tsx index 64c59e9b..3e7fc59f 100644 --- 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 > -
Header
+
+
+
{children}
diff --git a/src/frontend/apps/web/app/(main)/page.tsx b/src/frontend/apps/web/app/(main)/page.tsx index fce4bc64..d32bd1b0 100644 --- 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 ( -
-
-

Hello World

- -
+
+ +
); } diff --git a/src/frontend/apps/web/src/features/stock/index.tsx b/src/frontend/apps/web/src/features/stock/index.tsx index 83a397e4..9aa7a15f 100644 --- 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 deleted file mode 100644 index 7cbc75c2..00000000 --- a/src/frontend/apps/web/src/features/stock/stock-layout.tsx +++ /dev/null @@ -1,5 +0,0 @@ -const StockLayout = () => { - return
123
; -}; - -export default StockLayout; 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 new file mode 100644 index 00000000..2f8d8e32 --- /dev/null +++ b/src/frontend/apps/web/src/features/stock/ui/stock-detail-layout.tsx @@ -0,0 +1,5 @@ +const StockDetailLayout = () => { + return
123
; +}; + +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 new file mode 100644 index 00000000..03e6242b --- /dev/null +++ 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 ( +
+ +
+ ); +}; +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 index 92e4b1a0..381cb5e8 100644 --- 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 ( -
+ <> - logo + 주톡피아 @@ -16,7 +19,9 @@ const Header = () => { className="cursor-pointer" > - Avatar + + + { -
+ ); }; diff --git a/src/frontend/packages/ui/src/components/DataTable/data-table.tsx b/src/frontend/packages/ui/src/components/DataTable/data-table.tsx index ec77d725..cef02da7 100644 --- 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 ( -
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ); - })} +
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}; + })} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + {flexRender(cell.column.columnDef.cell, cell.getContext())} + ))} - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} - - )) - ) : ( - - - No results. - - - )} - -
-
+ )) + ) : ( + + + No results. + + + )} + + ); }