🐛 fix: 화면 크기 변화시 차트 크기가 부드럽게 변하지 않는 문제 수정

boostcampwm-2024 · Dec 4, 2024 · 6d95ca7 · 6d95ca7
1 parent 99018b3
commit 6d95ca7
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 5 deletions.
diff --git a/packages/frontend/src/pages/stock-detail/StockDetail.tsx b/packages/frontend/src/pages/stock-detail/StockDetail.tsx
@@ -36,9 +36,7 @@ export const StockDetail = () => {
       />
       <article className="grid flex-1 grid-cols-1 gap-5 xl:grid-cols-[2fr_1fr] 2xl:grid-cols-[2.5fr_1fr_1fr] [&>section]:gap-5">
         <section className="flex flex-col">
-          <div className="relative h-full">
-            <TradingChart />
-          </div>
+          <TradingChart />
           <StockMetricsPanel
             eps={eps}
             high52w={high52w}
@@ -51,7 +49,7 @@ export const StockDetail = () => {
           loginStatus={loginStatus}
           isOwnerStock={userOwnerStock.isOwner}
         />
-        <section className="flex flex-wrap gap-5 2xl:flex-col 2xl:flex-nowrap">
+        <section className="flex flex-col flex-wrap gap-5 lg:flex-row 2xl:flex-col 2xl:flex-nowrap">
           <div className="flex-1">
             <NotificationPanel className="h-full w-full" />
           </div>

diff --git a/packages/frontend/src/pages/stock-detail/TradingChart.tsx b/packages/frontend/src/pages/stock-detail/TradingChart.tsx
@@ -61,7 +61,7 @@ export const TradingChart = () => {
   useChartResize({ containerRef, chart });
 
   return (
-    <div className="flex h-[30rem] flex-col xl:h-full">
+    <div className="flex min-h-[30rem] flex-col">
       <section className="flex justify-end gap-5">
         {TIME_UNIT.map((option) => (
           <RadioButton

diff --git a/packages/frontend/src/pages/stock-detail/hooks/useChart.ts b/packages/frontend/src/pages/stock-detail/hooks/useChart.ts
@@ -52,6 +52,7 @@ export const useChart = ({
     chart.current = createChart(containerInstance, {
       width: containerInstance.clientWidth,
       height: containerInstance.clientHeight,
+      autoSize: true,
       ...createChartOptions(graphTheme),
     });