Merge pull request #124 from depromeet/32/feature/archive-page-function

32/feature/archive page function
depromeet · Jan 21, 2024 · e4d27b8 · e4d27b8
2 parents c9c89f2 + 5daad3f
commit e4d27b8
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 86 deletions.
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -7,7 +7,7 @@ import axios, {
 } from "axios";
 
 // API 서버 연결 설정 필요
-const DEVELOPMENT_API_URL = "http://101.101.211.46:8080";
+const DEVELOPMENT_API_URL = "https://api.praise-up.app";
 const PRODUCTION_API_URL = "https://api.praise-up.app";
 
 const baseApi = axios.create({

diff --git a/src/app/archive/marble-canvas.tsx b/src/app/archive/marble-canvas.tsx
@@ -1,16 +1,6 @@
 /* eslint-disable @typescript-eslint/unbound-method */
-import {
-  World,
-  Engine,
-  Bodies,
-  Events,
-  Mouse,
-  MouseConstraint,
-  Runner,
-  Body,
-  IEvent,
-  Query,
-} from "matter-js";
+// eslint-disable-next-line import/default
+import Matter, { IEvent } from "matter-js";
 import { useEffect, useRef, useState } from "react";
 
 import Bars from "@/assets/icons/bars.svg";
@@ -43,57 +33,31 @@ export const MarbleCanvas = ({
   onChangeView,
   onChangeSelectedMarbleId,
 }: Props) => {
-  const [engine, setEngine] = useState<Engine>();
-  const [marbleBodyList, setMarbleBodyList] = useState<Body[]>([]);
+  const {
+    World,
+    Engine,
+    Bodies,
+    Events,
+    Mouse,
+    MouseConstraint,
+    Runner,
+    Body,
+    Query,
+    Composite,
+  } = Matter;
+
+  const [engine, setEngine] = useState<Matter.Engine>();
+  const [marbleBodyList, setMarbleBodyList] = useState<Matter.Body[]>([]);
   const [canvasHeight, setCanvasHeight] = useState<number>(0);
 
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  // 에러 발생으로 임시 수정
-  const top = Bodies.rectangle(WIDTH / 2, -300, WIDTH, ASSET_WIDTH.wall, {
-    isStatic: true,
-    render: {
-      fillStyle: "white",
-    },
-  });
-  const floor = Bodies.rectangle(
-    WIDTH / 2,
-    canvasHeight,
-    WIDTH,
-    ASSET_WIDTH.wall,
-    {
-      isStatic: true,
-      render: {
-        fillStyle: "white",
-      },
-    },
-  );
-  const right = Bodies.rectangle(
-    WIDTH,
-    canvasHeight / 2 - 300,
-    ASSET_WIDTH.wall,
-    canvasHeight + 600,
-    {
-      isStatic: true,
-      render: {
-        fillStyle: "white",
-      },
-    },
-  );
-  const left = Bodies.rectangle(
-    0,
-    canvasHeight / 2 - 300,
-    ASSET_WIDTH.wall,
-    canvasHeight + 600,
-    {
-      isStatic: true,
-      render: {
-        fillStyle: "white",
-      },
-    },
-  );
 
   useEffect(() => {
-    const createdEngine = Engine.create();
+    const createdEngine = Engine.create({
+      timing: {
+        timeScale: 0.8,
+      },
+    });
     setEngine(createdEngine);
   }, []);
 
@@ -119,7 +83,7 @@ export const MarbleCanvas = ({
 
   // NOTE ===== Canvas Setting + Rendering Marble Object
   useEffect(() => {
-    if (!engine || !marbleList.length || !canvasHeight) return;
+    if (!engine || !marbleBodyList.length || !canvasHeight) return;
 
     const render = Render.create({
       engine,
@@ -131,16 +95,7 @@ export const MarbleCanvas = ({
         wireframes: false,
       },
     });
-    const mouse = Mouse.create(render.canvas);
-    const mouseConstraint = MouseConstraint.create(engine, {
-      mouse,
-      constraint: {
-        stiffness: 0,
-        render: {
-          visible: false,
-        },
-      },
-    });
+
     const { world } = engine;
     let isScrolling = false;
 
@@ -198,7 +153,7 @@ export const MarbleCanvas = ({
     };
 
     // Event Handler
-    const onMouseUp = (e: IEvent<MouseConstraint>) => {
+    const onMouseUp = (e: IEvent<Matter.MouseConstraint>) => {
       const { x, y } = e.mouse.mouseupPosition;
       const bodiesUnderMouse = Query.point(engine.world.bodies, { x, y });
 
@@ -232,19 +187,79 @@ export const MarbleCanvas = ({
 
     // NOTE: Setup functions
     const setupWallsObject = () => {
-      World.add(world, [top, floor, right, left]);
+      // 에러 발생으로 임시 수정
+      const top = Bodies.rectangle(
+        WIDTH / 2,
+        -300,
+        WIDTH + 60,
+        ASSET_WIDTH.wall,
+        {
+          isStatic: true,
+          render: {
+            fillStyle: "white",
+          },
+        },
+      );
+      const floor = Bodies.rectangle(
+        WIDTH / 2,
+        canvasHeight + ASSET_WIDTH.wall - 30,
+        WIDTH + 60,
+        ASSET_WIDTH.wall,
+        {
+          isStatic: true,
+          render: {
+            fillStyle: "white",
+          },
+        },
+      );
+      const right = Bodies.rectangle(
+        WIDTH + 20,
+        canvasHeight / 2 - 300,
+        ASSET_WIDTH.wall,
+        canvasHeight * 2,
+        {
+          isStatic: true,
+          render: {
+            fillStyle: "white",
+          },
+        },
+      );
+      const left = Bodies.rectangle(
+        -20,
+        canvasHeight / 2 - 300,
+        ASSET_WIDTH.wall,
+        canvasHeight * 2,
+        {
+          isStatic: true,
+          render: {
+            fillStyle: "white",
+          },
+        },
+      );
+      Composite.add(world, [top, floor, right, left]);
     };
 
+    const mouse = Mouse.create(render.canvas);
+    const mouseConstraint = MouseConstraint.create(engine, {
+      mouse,
+      constraint: {
+        stiffness: 0,
+        render: {
+          visible: false,
+        },
+      },
+    });
+
     const setupMouseConstraint = () => {
       removeDefaultEvent();
       addCustomEvent();
 
-      World.add(world, mouseConstraint);
+      Composite.add(world, mouseConstraint);
     };
 
     // NOTE: Rendering functions
-    const renderMarbleObject = async (marble: Body) => {
-      World.add(world, marble);
+    const renderMarbleObject = async (marble: Matter.Body) => {
+      Composite.add(world, marble);
 
       await setWaitTime(100);
     };
@@ -272,14 +287,14 @@ export const MarbleCanvas = ({
       World.clear(world, false);
       Engine.clear(engine);
     };
-  }, [marbleList, engine]);
+  }, [marbleBodyList, engine]);
 
   // NOTE ===== Modal openState에 따라 selectedMarble hide / render
   useEffect(() => {
     if (!engine || selectedMarbleId === -1) return;
 
     const selectedMarble = engine.world.bodies.find(
-      ({ id }) => id === selectedMarbleId,
+      ({ id, label }) => id === selectedMarbleId && label === "marble",
     );
     if (!selectedMarble) return;
 
@@ -290,8 +305,8 @@ export const MarbleCanvas = ({
       return;
     }
 
-    World.remove(engine.world, selectedMarble);
-    World.add(
+    Composite.remove(engine.world, selectedMarble);
+    Composite.add(
       engine.world,
       createMarbleObject({
         id: selectedMarble.id,
@@ -305,7 +320,7 @@ export const MarbleCanvas = ({
 
   // NOTE ===== isViewedList 업데이트에 따라 marble 색상 변경
   useEffect(() => {
-    if (!engine) return;
+    if (!engine || !isViewedIdList.length) return;
 
     const worldMarbleList = engine.world.bodies.filter(
       ({ label }) => label === "marble",

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: 40 });
+  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: 40 });
+  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)",
         }}
       />
 

diff --git a/src/constants/archive.tsx b/src/constants/archive.tsx
@@ -1,5 +1,5 @@
 export const ASSET_WIDTH = {
-  wall: 20,
+  wall: 50,
   marble: 50,
 };
 

diff --git a/src/utils/createMarbleObject.ts b/src/utils/createMarbleObject.ts
@@ -1,4 +1,5 @@
-import { Bodies } from "matter-js";
+// eslint-disable-next-line import/default
+import Matter from "matter-js";
 
 import marbleTexture from "@/assets/images/marble_01/marble-01-2x.webp";
 import marbleIsViewedTexture from "@/assets/images/marble_01/marble-01-isViewed-2x.webp";
@@ -12,6 +13,8 @@ export const createMarbleObject = ({
   textContent,
   isViewed = false,
 }: TMarbleObject) => {
+  const { Bodies } = Matter;
+
   const isFirstType = id % 2 === 0;
   const isNotViewedTexture = isFirstType ? marbleTexture : marbleTexture_2;
   const isViewedTexture = isFirstType