jungjjeong | feat: scroll 값 수정 및 벽 색상 원복

depromeet · Jan 21, 2024 · 5daad3f · 5daad3f
1 parent d0a40fa
commit 5daad3f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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)",
         }}
       />