From 9f38c9ba17816b8e23d0f4b657832795bdc100bc Mon Sep 17 00:00:00 2001
From: JinleeJeong <pjjr0118@gmail.com>
Date: Tue, 27 Feb 2024 14:14:41 +0900
Subject: [PATCH 1/2] style: apply body style on drawer

---
 src/app/(main)/stock/[id]/page.tsx | 41 ++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/app/(main)/stock/[id]/page.tsx b/src/app/(main)/stock/[id]/page.tsx
index 40bd846..35e4162 100644
--- a/src/app/(main)/stock/[id]/page.tsx
+++ b/src/app/(main)/stock/[id]/page.tsx
@@ -5,7 +5,7 @@ import { Header } from "./_components/header";
 import { InvestmentTip } from "./_components/investment-tip";
 import { StockDetailResponse } from "@/api/generated/endpoint.schemas";
 import { DividendInfo } from "./_components/dividend-info";
-import { DrawerOverlay, Drawer as DrawerPrimitive } from "@/components/ui/drawer";
+import { DrawerOverlay, DrawerPortal, Drawer as DrawerPrimitive } from "@/components/ui/drawer";
 import { StockInfoDrawer } from "./_components/stock-drawer";
 
 const dummyStock: StockDetailResponse = {
@@ -30,18 +30,37 @@ export default function StockPage({ params }: { params: { id: string } }) {
   const handleInfoClick = () => {
     setShowStockInfo((prevState) => !prevState);
   };
+
+  React.useEffect(() => {
+    // 컴포넌트가 마운트될 때 body 스타일 변경
+    document.body.style.setProperty("margin", "auto", "important");
+    document.body.style.setProperty("padding", "0");
+
+    // 컴포넌트가 언마운트될 때 body 스타일 복원
+    return () => {
+      document.body.style.removeProperty("margin");
+    };
+  }, []);
+
   return (
     <DrawerPrimitive open={showStockInfo}>
-      <DrawerOverlay onClick={() => setShowStockInfo(false)} />
-      <StockInfoDrawer handleInfoClick={handleInfoClick} />
-      <Header stock={dummyStock} handleInfoClick={handleInfoClick} />
-      <div className="h-4 bg-grey-100" />
-      <InvestmentTip exDividendDate={dummyStock.exDividendDate} earliestPaymentDate={dummyStock.earliestPaymentDate} />
-      <DividendInfo
-        dividendPerShare={dummyStock.dividendPerShare}
-        dividendYield={dummyStock.dividendYield}
-        dividendMonths={dummyStock.dividendMonths}
-      />
+      <DrawerPortal>
+        <DrawerOverlay onClick={() => setShowStockInfo(false)} />
+        <StockInfoDrawer handleInfoClick={handleInfoClick} />
+      </DrawerPortal>
+      <div className="flex h-full w-full flex-col pt-2.5">
+        <Header stock={dummyStock} handleInfoClick={handleInfoClick} />
+        <div className="h-4 bg-grey-100" />
+        <InvestmentTip
+          exDividendDate={dummyStock.exDividendDate}
+          earliestPaymentDate={dummyStock.earliestPaymentDate}
+        />
+        <DividendInfo
+          dividendPerShare={dummyStock.dividendPerShare}
+          dividendYield={dummyStock.dividendYield}
+          dividendMonths={dummyStock.dividendMonths}
+        />
+      </div>
     </DrawerPrimitive>
   );
 }

From b14ceca4b26428d4badc7de07af677ccad337d6b Mon Sep 17 00:00:00 2001
From: JinleeJeong <pjjr0118@gmail.com>
Date: Tue, 27 Feb 2024 14:18:24 +0900
Subject: [PATCH 2/2] style: add remove property padding

---
 src/app/(main)/stock/[id]/page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/(main)/stock/[id]/page.tsx b/src/app/(main)/stock/[id]/page.tsx
index 35e4162..cca27de 100644
--- a/src/app/(main)/stock/[id]/page.tsx
+++ b/src/app/(main)/stock/[id]/page.tsx
@@ -39,6 +39,7 @@ export default function StockPage({ params }: { params: { id: string } }) {
     // 컴포넌트가 언마운트될 때 body 스타일 복원
     return () => {
       document.body.style.removeProperty("margin");
+      document.body.style.removeProperty("padding");
     };
   }, []);