Feature/#35 3D 잔디 props 변경 (#39)

* chore: cube 색상 추가 #35 * fix: cube 색상 추가 된 것에 따라 코드 수정 #35 * feat: cube component의 props 추가 (count) #35 * feat: cube component 의 props 추가 (maxCount) #35 * fix: 수정된 cube props 에 맞게 코드 수정 #35 * feat: floar 와 bar component 를 한 개로 합치기 #35 * chore: garden mocks data 수정 #35 * feat: bar component 에서 width, height props 로 받아서 넣기. #35 * #chore: cube component props 명 변경 #35 * fix: cube component 변수명 변경에 따른 코드 수정 #35 * chore: garden component props 에 cubeSize 추가 #35 * chore: garden component props 변수명 수정 - cubeSizeHalf -> cubeSize #35 * fix: 변경된 garden의 props에 맞게 코드 수정 #35 * chore: garden component props 추가 (cubeGap) #35 * feat: 변경된 garden props 에 맞게 코드 변경 #35 * refactor: css의 빈 줄 삭제 #35
BDD-CLUB · Feb 15, 2024 · 529206a · 529206a
1 parent 3a1281d
commit 529206a
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 122 deletions.
diff --git a/src/components/Garden3D/Bar/index.tsx b/src/components/Garden3D/Bar/index.tsx
@@ -1,59 +1,66 @@
 import './style.css';
 import { colorInfo } from '@/mocks/Garden3D';
 
-import { CubeBarProps } from '../types';
+import { CubeProps } from '../types';
 
 const exponentialFunction = (height: number) => 10 * height;
 
-const Bar = ({ barHeight, currX, currZ, offsetY, cubeSize }: CubeBarProps) => {
+const Bar = ({ count, maxCount, currX, currZ, offsetY, cubeSizeHalf }: CubeProps) => {
+  const barX = count === 0 ? 0 : Math.ceil(count / maxCount);
+  const barHeight = barX === 0 ? 3 : exponentialFunction(barX);
+
   return (
     <>
       <div
         style={{
-          height: `${exponentialFunction(barHeight)}px`,
-          background: `${colorInfo[barHeight - 1].side1}`,
-          transform: `translateX(${currX}px) translateY(${
-            offsetY - exponentialFunction(barHeight) + 3
-          }px) translateZ(${currZ + cubeSize}px)`,
+          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
         style={{
-          height: `${exponentialFunction(barHeight)}px`,
-          background: `${colorInfo[barHeight - 1].side1}`,
+          width: `${cubeSizeHalf * 2}px`,
+          height: `${barHeight}px`,
+          background: `${colorInfo[barX].side1}`,
           transform: `translateX(${currX}px) translateY(${
-            offsetY - exponentialFunction(barHeight) + 3
-          }px) translateZ(${currZ}px) rotateY(180deg) translateZ(${cubeSize}px)`,
+            offsetY - barHeight
+          }px) translateZ(${currZ}px) rotateY(180deg) translateZ(${cubeSizeHalf}px)`,
         }}
         className="cube_side back_panel"
       />
       <div
         style={{
-          height: `${exponentialFunction(barHeight)}px`,
-          background: `${colorInfo[barHeight - 1].side2}`,
+          width: `${cubeSizeHalf * 2}px`,
+          height: `${barHeight}px`,
+          background: `${colorInfo[barX].side2}`,
           transform: `translateX(${currX}px) translateY(${
-            offsetY - exponentialFunction(barHeight) + 3
-          }px) translateZ(${currZ}px) rotateY(90deg) translateZ(${cubeSize}px)`,
+            offsetY - barHeight
+          }px) translateZ(${currZ}px) rotateY(90deg) translateZ(${cubeSizeHalf}px)`,
         }}
         className="cube_side right_panel"
       />
       <div
         style={{
-          height: `${exponentialFunction(barHeight)}px`,
-          background: `${colorInfo[barHeight - 1].side2}`,
+          width: `${cubeSizeHalf * 2}px`,
+          height: `${barHeight}px`,
+          background: `${colorInfo[barX].side2}`,
           transform: `translateX(${currX}px) translateY(${
-            offsetY - exponentialFunction(barHeight) + 3
-          }px) translateZ(${currZ}px) rotateY(270deg) translateZ(${cubeSize}px)`,
+            offsetY - barHeight
+          }px) translateZ(${currZ}px) rotateY(270deg) translateZ(${cubeSizeHalf}px)`,
         }}
         className="cube_side left_panel"
       />
       <div
         style={{
-          background: `${colorInfo[barHeight - 1].ceil}`,
+          width: `${cubeSizeHalf * 2}px`,
+          height: `${cubeSizeHalf * 2}px`,
+          background: `${colorInfo[barX].ceil}`,
           transform: `translateX(${currX}px) translateY(${
-            offsetY - exponentialFunction(barHeight) + 3
-          }px) translateZ(${currZ}px) rotateX(90deg) translateZ(${cubeSize}px)`,
+            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
@@ -1,14 +1,11 @@
 .cube_above {
   display: block;
   position: absolute;
-  width: 32px;
-  height: 32px;
 }
 
 .cube_side {
   display: block;
   position: absolute;
-  width: 32px;
 }
 
 .front_panel,

diff --git a/src/components/Garden3D/Floor/index.tsx b/src/components/Garden3D/Floor/index.tsx
diff --git a/src/components/Garden3D/Floor/style.css b/src/components/Garden3D/Floor/style.css
diff --git a/src/components/Garden3D/index.tsx b/src/components/Garden3D/index.tsx
@@ -3,16 +3,15 @@
 import './style.css';
 
 import Bar from './Bar';
-import Floor from './Floor';
 import { Garden3DProps } from './types';
 
-const Garden3D = ({ gardenInfos }: Garden3DProps) => {
-  const cubeSize = 16;
+const Garden3D = ({ cubeSize, cubeGap, gardenInfos }: Garden3DProps) => {
+  const cubeSizeHalf = cubeSize / 2;
 
   const offsetX = 300;
   const offsetY = 500;
   const offsetZ = 0;
-  const gap = cubeSize * 2 + 4;
+  const gap = cubeSize + cubeGap;
   const standX = (gardenInfos[gardenInfos.length - 1].week - gardenInfos[0].week + 1) / 2 + gardenInfos[0].week;
   const maxCount =
     gardenInfos.reduce((prev, value) => {
@@ -34,17 +33,14 @@ const Garden3D = ({ gardenInfos }: Garden3DProps) => {
                 transform: 'rotateY(40deg)',
               }}
             >
-              {info.count === 0 ? (
-                <Floor currX={currX} currZ={currZ} offsetY={offsetY} cubeSize={cubeSize} />
-              ) : (
-                <Bar
-                  barHeight={Math.ceil(info.count / maxCount)}
-                  currX={currX}
-                  currZ={currZ}
-                  offsetY={offsetY}
-                  cubeSize={cubeSize}
-                />
-              )}
+              <Bar
+                count={info.count}
+                maxCount={maxCount}
+                currX={currX}
+                currZ={currZ}
+                offsetY={offsetY}
+                cubeSizeHalf={cubeSizeHalf}
+              />
             </div>
           );
         })}

diff --git a/src/components/Garden3D/style.css b/src/components/Garden3D/style.css
@@ -1,29 +1,22 @@
 .container {
   width: 600px;
   height: 300px;
-
   position: relative;
-
   overflow: hidden;
 }
 
 .scene {
   width: inherit;
   height: inherit;
-
   position: absolute;
-
   transform-style: preserve-3d;
 }
 
 .fake_scene {
   width: inherit;
   height: inherit;
-
   perspective: 800px;
-
   position: absolute;
   top: -380px;
-
   transform-style: preserve-3d;
 }
diff --git a/src/components/Garden3D/types.ts b/src/components/Garden3D/types.ts
@@ -4,13 +4,13 @@ export interface CubeProps {
   currX: number;
   currZ: number;
   offsetY: number;
-  cubeSize: number;
-}
-
-export interface CubeBarProps extends CubeProps {
-  barHeight: number;
+  cubeSizeHalf: number;
+  count: number;
+  maxCount: number;
 }
 
 export interface Garden3DProps {
+  cubeSize: number;
+  cubeGap: number;
   gardenInfos: GardenInfoType[];
 }
diff --git a/src/mocks/Garden3D.ts b/src/mocks/Garden3D.ts
@@ -1,6 +1,11 @@
 import { CubeColorType, GardenInfoType } from '@/types';
 
 const colorInfo: CubeColorType[] = [
+  {
+    ceil: '#EDF2F7',
+    side1: '#CBD5E0',
+    side2: '#A0AEC0',
+  },
   {
     ceil: '#D4EDC3',
     side1: '#C9E2AF',
@@ -30,7 +35,7 @@ const userInfos: GardenInfoType[] = [
   // { date: 3, week: 1, count: 10, id: 4 },
   { date: 4, week: 1, count: 8, id: 5 },
   { date: 5, week: 1, count: 10, id: 6 },
-  { date: 6, week: 1, count: 1, id: 7 },
+  { date: 6, week: 1, count: 0, id: 7 },
   { date: 0, week: 2, count: 12, id: 8 },
   { date: 1, week: 2, count: 9, id: 9 },
   { date: 2, week: 2, count: 1, id: 10 },