Merge pull request #118 from TeamPiickle/feat/#117-moodPiickle_edit

Feat/#117 mood piickle edit
TeamPiickle · Jul 22, 2022 · 19b46b1 · 19b46b1
2 parents 77b4126 + e5dcabb
commit 19b46b1
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 25 deletions.
diff --git a/src/components/Main/MoodPiickle/index.tsx b/src/components/Main/MoodPiickle/index.tsx
@@ -4,6 +4,7 @@ import { useSetRecoilState } from "recoil";
 import { useCategoryLists } from "../../../core/api/main";
 import { sliderIdxState } from "../../../core/atom/slider";
 import { headingTitles } from "../../../core/main/headingTitles";
+import { gridValue } from "../../../core/main/moodPiickle";
 import HeadingTitleContainer from "../../common/HeadingTitleContainer";
 import { St } from "./style";
 
@@ -32,13 +33,18 @@ export default function MoodPiickle() {
       <HeadingTitleContainer headingTitles={headingTitles[1]} />
       <St.CategoryWrapper>
         {randomCategory &&
-          randomCategory.slice(0, 4).map((moodPiickle) => (
-            <St.CategoryOneLine key={moodPiickle._id}>
-              <St.Category onClick={() => moveCategory(moodPiickle._id)} imgUrl={moodPiickle.imgurl}>
-                <St.CategoryTitle>{moodPiickle.title}</St.CategoryTitle>
-                <St.CategoryContent>{moodPiickle.content}</St.CategoryContent>
-              </St.Category>
-            </St.CategoryOneLine>
+          randomCategory.slice(0, 4).map((moodPiickle, index) => (
+            <St.Category
+              key={moodPiickle._id}
+              onClick={() => moveCategory(moodPiickle._id)}
+              imgUrl={moodPiickle.imgurl}
+              columnStart={gridValue[index].columnStart}
+              columnEnd={gridValue[index].columnEnd}
+              rowStart={gridValue[index].rowStart}
+              rowEnd={gridValue[index].rowEnd}>
+              <St.CategoryTitle>{moodPiickle.title}</St.CategoryTitle>
+              <St.CategoryContent>{moodPiickle.content}</St.CategoryContent>
+            </St.Category>
           ))}
       </St.CategoryWrapper>
     </St.Container>

diff --git a/src/components/Main/MoodPiickle/style.ts b/src/components/Main/MoodPiickle/style.ts
@@ -6,38 +6,41 @@ export const St = {
   `,
 
   CategoryWrapper: styled.div`
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.8rem;
-    justify-content: center;
-    padding: 0 1.6rem;
-
+    height: 37.6rem;
     width: 36rem;
-    margin: 0 auto;
+
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    grid-gap: 0.8rem;
   `,
 
   CategoryOneLine: styled.div`
     height: 16rem;
   `,
 
-  Category: styled.article<{ imgUrl: string }>`
-    position: relative;
-    flex: 1;
-    flex-direction: column;
-    aspect-ratio: 1 / 1;
-    width: 16rem;
-
-    box-sizing: border-box;
-
+  Category: styled.article<{
+    columnStart: number;
+    columnEnd: number;
+    rowStart: number;
+    rowEnd: number;
+    imgUrl: string;
+  }>`
     display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 
     border: 0.1rem solid #e0e0e0;
     border-radius: 1.6rem;
-    align-items: center;
-    justify-content: center;
 
     background: url(${({ imgUrl }) => imgUrl});
     background-size: cover;
+
+    grid-column-start: ${({ columnStart }) => columnStart};
+    grid-column-end: ${({ columnEnd }) => columnEnd};
+    grid-row-start: ${({ rowStart }) => rowStart};
+    grid-row-end: ${({ rowEnd }) => rowEnd};
   `,
 
   CategoryTitle: styled.strong`

diff --git a/src/core/main/moodPiickle.ts b/src/core/main/moodPiickle.ts
@@ -0,0 +1,41 @@
+type gridValueProps = {
+  id: number;
+  columnStart: number;
+  columnEnd: number;
+  rowStart: number;
+  rowEnd: number;
+};
+
+export const gridValue: gridValueProps[] = [
+  {
+    id: 1,
+    columnStart: 1,
+    columnEnd: 2,
+    rowStart: 1,
+    rowEnd: 2,
+  },
+
+  {
+    id: 2,
+    columnStart: 1,
+    columnEnd: 2,
+    rowStart: 2,
+    rowEnd: 3,
+  },
+
+  {
+    id: 3,
+    columnStart: 2,
+    columnEnd: 3,
+    rowStart: 1,
+    rowEnd: 2,
+  },
+
+  {
+    id: 4,
+    columnStart: 2,
+    columnEnd: 3,
+    rowStart: 2,
+    rowEnd: 3,
+  },
+];