From 5daad3f665afa41cf2f66dd0c637960a02d95582 Mon Sep 17 00:00:00 2001
From: Jungjjeong <sky990106@dgu.ac.kr>
Date: Sun, 21 Jan 2024 21:28:18 +0900
Subject: [PATCH] =?UTF-8?q?jungjjeong=20|=20feat:=20scroll=20=EA=B0=92=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=B2=BD=20=EC=83=89=EC=83=81?=
 =?UTF-8?q?=20=EC=9B=90=EB=B3=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/archive/marble-canvas.tsx   | 38 +++++++++++++++++------------
 src/app/archive/preview-card.tsx    |  4 +--
 src/app/archive/preview-summary.tsx |  4 +--
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/app/archive/marble-canvas.tsx b/src/app/archive/marble-canvas.tsx
index 0258dee5..94c53ca3 100644
--- a/src/app/archive/marble-canvas.tsx
+++ b/src/app/archive/marble-canvas.tsx
@@ -54,7 +54,9 @@ export const MarbleCanvas = ({
 
   useEffect(() => {
     const createdEngine = Engine.create({
-      enableSleeping: true,
+      timing: {
+        timeScale: 0.8,
+      },
     });
     setEngine(createdEngine);
   }, []);
@@ -186,45 +188,51 @@ export const MarbleCanvas = ({
     // NOTE: Setup functions
     const setupWallsObject = () => {
       // 에러 발생으로 임시 수정
-      const top = Bodies.rectangle(WIDTH / 2, -300, WIDTH, ASSET_WIDTH.wall, {
-        isStatic: true,
-        render: {
-          fillStyle: "black",
+      const top = Bodies.rectangle(
+        WIDTH / 2,
+        -300,
+        WIDTH + 60,
+        ASSET_WIDTH.wall,
+        {
+          isStatic: true,
+          render: {
+            fillStyle: "white",
+          },
         },
-      });
+      );
       const floor = Bodies.rectangle(
         WIDTH / 2,
-        canvasHeight,
-        WIDTH,
+        canvasHeight + ASSET_WIDTH.wall - 30,
+        WIDTH + 60,
         ASSET_WIDTH.wall,
         {
           isStatic: true,
           render: {
-            fillStyle: "black",
+            fillStyle: "white",
           },
         },
       );
       const right = Bodies.rectangle(
-        WIDTH,
+        WIDTH + 20,
         canvasHeight / 2 - 300,
         ASSET_WIDTH.wall,
-        canvasHeight + 600,
+        canvasHeight * 2,
         {
           isStatic: true,
           render: {
-            fillStyle: "black",
+            fillStyle: "white",
           },
         },
       );
       const left = Bodies.rectangle(
-        0,
+        -20,
         canvasHeight / 2 - 300,
         ASSET_WIDTH.wall,
-        canvasHeight + 600,
+        canvasHeight * 2,
         {
           isStatic: true,
           render: {
-            fillStyle: "black",
+            fillStyle: "white",
           },
         },
       );
diff --git a/src/app/archive/preview-card.tsx b/src/app/archive/preview-card.tsx
index 3a43eb49..6ef6772e 100644
--- a/src/app/archive/preview-card.tsx
+++ b/src/app/archive/preview-card.tsx
@@ -16,7 +16,7 @@ type Props = {
 
 export const PreviewCard = ({ cardData, onChangeView }: Props) => {
   UseScrollToTop();
-  const { isOverflow } = useWindowScrollY({ point: 39 });
+  const { isOverflow } = useWindowScrollY({ point: 80 });
 
   const [isScrolled, setIsScrolled] = useState<boolean>(false);
 
@@ -45,7 +45,7 @@ export const PreviewCard = ({ cardData, onChangeView }: Props) => {
       {/* scroll을 위한 영역 */}
       <div
         style={{
-          height: "calc(100vh + 40px)",
+          height: "calc(100vh + 100px)",
         }}
       />
 
diff --git a/src/app/archive/preview-summary.tsx b/src/app/archive/preview-summary.tsx
index 1bf8d8f0..86848db1 100644
--- a/src/app/archive/preview-summary.tsx
+++ b/src/app/archive/preview-summary.tsx
@@ -16,7 +16,7 @@ type Props = {
 
 export const PreviewSummary = ({ marbleNum, onChangeView }: Props) => {
   UseScrollToTop();
-  const { isOverflow } = useWindowScrollY({ point: 39 });
+  const { isOverflow } = useWindowScrollY({ point: 80 });
 
   const [isScrolled, setIsScrolled] = useState<boolean>(false);
 
@@ -45,7 +45,7 @@ export const PreviewSummary = ({ marbleNum, onChangeView }: Props) => {
       {/* scroll을 위한 영역 */}
       <div
         style={{
-          height: "calc(100vh + 40px)",
+          height: "calc(100vh + 100px)",
         }}
       />