Feature/#139 3D 텃밭 구조 변경 (#140)

* refactor: 3D 텃밭의 bar chakra ui 사용해서 구현 - #139 * refactor: 3D 텃밭 chakra ui 컴포넌트 사용하도록 수정 - #139 * refactor: 사용되지 않는 style.css 삭제 - #139 * design: 수정된 3D 텃밭 팀 페이지에서 보이도록 수정 - #139
BDD-CLUB · Mar 20, 2024 · 8d36a51 · 8d36a51
1 parent d4f452e
commit 8d36a51
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 83 deletions.
diff --git a/src/app/team/[teamId]/page.tsx b/src/app/team/[teamId]/page.tsx
@@ -33,7 +33,7 @@ const Page = () => {
       <Flex pos="relative" align="center" flex="1" gap="8">
         {/* TODO  잔디 */}
         <Box pos="relative" overflow="hidden" w="100%" h={{ base: '250px', md: '300px' }}>
-          <Box pos="absolute" left="50%" transform="translate(-50%, 0%)">
+          <Box pos="absolute" w="100%" h="100%">
             <Garden3D
               rotate
               rotateY={0}

diff --git a/src/components/Garden3D/Bar/index.tsx b/src/components/Garden3D/Bar/index.tsx
@@ -1,4 +1,5 @@
-import './style.css';
+import { Box } from '@chakra-ui/react';
+
 import { colorInfo } from '@/mocks/Garden3D';
 
 import { CubeProps } from '../types';
@@ -11,58 +12,60 @@ const Bar = ({ count, maxCount, currX, currZ, offsetY, cubeSizeHalf }: CubeProps
 
   return (
     <>
-      <div
+      <Box
+        pos="absolute"
+        zIndex="13"
+        left="50%"
         style={{
           width: `${cubeSizeHalf * 2}px`,
           height: `${barHeight}px`,
           background: `${colorInfo[barX].side1}`,
           transform: `translateX(${currX}px) translateY(${offsetY - barHeight}px) translateZ(${currZ + cubeSizeHalf}px)`,
         }}
-        className="cube_side front_panel"
       />
-      <div
+      <Box
+        pos="absolute"
+        zIndex="13"
+        left="50%"
         style={{
           width: `${cubeSizeHalf * 2}px`,
           height: `${barHeight}px`,
           background: `${colorInfo[barX].side1}`,
-          transform: `translateX(${currX}px) translateY(${
-            offsetY - barHeight
-          }px) translateZ(${currZ}px) rotateY(180deg) translateZ(${cubeSizeHalf}px)`,
+          transform: `translateX(${currX}px) translateY(${offsetY - barHeight}px) translateZ(${currZ}px) rotateY(180deg) translateZ(${cubeSizeHalf}px)`,
         }}
-        className="cube_side back_panel"
       />
-      <div
+      <Box
+        pos="absolute"
+        zIndex="13"
+        left="50%"
         style={{
           width: `${cubeSizeHalf * 2}px`,
           height: `${barHeight}px`,
           background: `${colorInfo[barX].side2}`,
-          transform: `translateX(${currX}px) translateY(${
-            offsetY - barHeight
-          }px) translateZ(${currZ}px) rotateY(90deg) translateZ(${cubeSizeHalf}px)`,
+          transform: `translateX(${currX}px) translateY(${offsetY - barHeight}px) translateZ(${currZ}px) rotateY(90deg) translateZ(${cubeSizeHalf}px)`,
         }}
-        className="cube_side right_panel"
       />
-      <div
+      <Box
+        pos="absolute"
+        zIndex="13"
+        left="50%"
         style={{
           width: `${cubeSizeHalf * 2}px`,
           height: `${barHeight}px`,
           background: `${colorInfo[barX].side2}`,
-          transform: `translateX(${currX}px) translateY(${
-            offsetY - barHeight
-          }px) translateZ(${currZ}px) rotateY(270deg) translateZ(${cubeSizeHalf}px)`,
+          transform: `translateX(${currX}px) translateY(${offsetY - barHeight}px) translateZ(${currZ}px) rotateY(270deg) translateZ(${cubeSizeHalf}px)`,
         }}
-        className="cube_side left_panel"
       />
-      <div
+      <Box
+        pos="absolute"
+        zIndex="15"
+        left="50%"
         style={{
           width: `${cubeSizeHalf * 2}px`,
           height: `${cubeSizeHalf * 2}px`,
           background: `${colorInfo[barX].ceil}`,
-          transform: `translateX(${currX}px) translateY(${
-            offsetY - barHeight
-          }px) translateZ(${currZ}px) rotateX(90deg) translateZ(${cubeSizeHalf}px)`,
+          transform: `translateX(${currX}px) translateY(${offsetY - barHeight}px) translateZ(${currZ}px) rotateX(90deg) translateZ(${cubeSizeHalf}px)`,
         }}
-        className="cube_above upper_panel"
       />
     </>
   );

diff --git a/src/components/Garden3D/Bar/style.css b/src/components/Garden3D/Bar/style.css
diff --git a/src/components/Garden3D/index.tsx b/src/components/Garden3D/index.tsx
@@ -1,19 +1,17 @@
 'use client';
 
+import { Box } from '@chakra-ui/react';
 import { useState } from 'react';
 
-import './style.css';
-
 import Bar from './Bar';
 import { Garden3DProps } from './types';
 
 const Garden3D = ({ rotate = false, cubeSize, cubeGap, rotateY, gardenInfos }: Garden3DProps) => {
   const cubeSizeHalf = cubeSize / 2;
 
-  const offsetX = 300;
   const offsetDefaultY = 545;
   const [offsetY, setOffsetY] = useState<number>(offsetDefaultY);
-  const offsetZ = 0;
+
   const gap = cubeSize + cubeGap;
   const standX = (gardenInfos[gardenInfos.length - 1].week - gardenInfos[0].week + 1) / 2 + gardenInfos[0].week;
   const maxCount =
@@ -45,19 +43,25 @@ const Garden3D = ({ rotate = false, cubeSize, cubeGap, rotateY, gardenInfos }: G
   };
 
   return (
-    <div className="container" onMouseDown={rotate ? mouseDown : undefined} role="textbox" tabIndex={0}>
-      <div className="fake_scene">
+    <Box pos="relative" zIndex="20" overflow="hidden" w="100%" h="100%" onMouseDown={rotate ? mouseDown : undefined}>
+      <Box
+        pos="absolute"
+        top="-380px"
+        w="100%"
+        h="100%"
+        style={{ perspective: '800px', transformStyle: 'preserve-3d' }}
+      >
         {gardenInfos.map((info) => {
-          const currZ = offsetZ + (info.date - 3) * gap;
-          const currX = offsetX + (info.week - standX) * gap;
+          const currX = (info.week - standX) * gap;
+          const currZ = (info.date - 3) * gap;
 
           return (
-            <div
+            <Box
               key={info.id}
-              className="scene"
-              style={{
-                transform: `rotateY(${yDegree}deg)`,
-              }}
+              pos="absolute"
+              w="100%"
+              h="100%"
+              style={{ transformStyle: 'preserve-3d', transform: `rotateY(${yDegree}deg)` }}
             >
               <Bar
                 count={info.count}
@@ -67,11 +71,11 @@ const Garden3D = ({ rotate = false, cubeSize, cubeGap, rotateY, gardenInfos }: G
                 offsetY={offsetY}
                 cubeSizeHalf={cubeSizeHalf}
               />
-            </div>
+            </Box>
           );
         })}
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };
 

diff --git a/src/components/Garden3D/style.css b/src/components/Garden3D/style.css