상세페이지 주식부분 레이아웃

src/frontend/apps/web/src/features/stock/ui/stock-chart-container.tsx

@@ -0,0 +1,28 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@workspace/ui/components';
+
+const StockChartContainer = () => {
+  return (
+    <>
+      <ResizablePanelGroup direction="vertical">
+        <ResizablePanel
+          defaultSize={30}
+          className="flex items-center justify-center bg-gray-200 p-4"
+        >
+          주식차트
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel
+          defaultSize={10}
+          className="flex items-center justify-center bg-gray-300 p-4"
+        >
+          거래량 캔들차트
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </>
+  );
+};
+export default StockChartContainer;

src/frontend/apps/web/src/features/stock/ui/stock-detail-layout.tsx

@@ -1,5 +1,17 @@
+import StockChartContainer from './stock-chart-container';
+import StockInfoContainer from './stock-info-container';
+
 const StockDetailLayout = () => {
-  return <div className="bg-gray-200 w-full h-full">123</div>;
+  return (
+    <div className="w-full h-full flex flex-col">
+      <div className="h-[120px]">
+        <StockInfoContainer />
+      </div>
+      <div className="h-full rounded-md overflow-hidden">
+        <StockChartContainer />
+      </div>
+    </div>
+  );
 };
 
 export default StockDetailLayout;

src/frontend/apps/web/src/features/stock/ui/stock-info-container.tsx

@@ -0,0 +1,12 @@
+import StockInfo from './stock-info';
+import StockLogo from './stock-logo';
+
+const StockInfoContainer = () => {
+  return (
+    <div className="h-full flex flex-row justify-start items-center gap-3">
+      <StockLogo />
+      <StockInfo />
+    </div>
+  );
+};
+export default StockInfoContainer;

src/frontend/apps/web/src/features/stock/ui/stock-info.tsx

@@ -0,0 +1,17 @@
+const StockInfo = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <div>
+        <span className="font-bold mr-1">테슬라</span>
+        <span>000000</span>
+      </div>
+      <div>
+        <span className="font-bold mr-2">579,913</span>
+        <span className="text-xs">
+          어제보다 <span className="text-red-700">+6.72(0.2%)</span>
+        </span>
+      </div>
+    </div>
+  );
+};
+export default StockInfo;

src/frontend/apps/web/src/features/stock/ui/stock-logo.tsx

@@ -0,0 +1,16 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components';
+
+const StockLogo = () => {
+  return (
+    <>
+      <Avatar
+        variant="square"
+        className="w-[60px] h-[60px]"
+      >
+        <AvatarImage src="https://thumb.tossinvest.com/image/resized/48x0/https%3A%2F%2Fstatic.toss.im%2Fpng-icons%2Fsecurities%2Ficn-sec-fill-NAS006XY7-E0.png" />
+        <AvatarFallback>Logo</AvatarFallback>
+      </Avatar>
+    </>
+  );
+};
+export default StockLogo;