Merge pull request #53 from TeamPiickle/feat/#50-Category

Feat/#50 category

src/asset/image/index.tsx

@@ -1,3 +1,4 @@
+export { default as CategoryBanner } from "./categoryBanner.png";
 export { ReactComponent as MoodPiickle1 } from "./MoodPiickle1.svg";
 export { ReactComponent as MoodPiickle2 } from "./MoodPiickle2.svg";
 export { ReactComponent as MoodPiickle3 } from "./MoodPiickle3.svg";

src/components/Category/CategoryContents/index.tsx

@@ -0,0 +1,97 @@
+import { categoryList } from "../../../core/category/categoryList";
+import { St } from "./style";
+
+export default function CategoryContents() {
+  type gridValueProps = {
+    id: number;
+    columnStart: number;
+    columnEnd: number;
+    rowStart: number;
+    rowEnd: number;
+  };
+  const gridValue: gridValueProps[] = [
+    {
+      id: 1,
+      columnStart: 1,
+      columnEnd: 2,
+      rowStart: 1,
+      rowEnd: 6,
+    },
+
+    {
+      id: 2,
+      columnStart: 1,
+      columnEnd: 2,
+      rowStart: 6,
+      rowEnd: 9,
+    },
+
+    {
+      id: 3,
+      columnStart: 1,
+      columnEnd: 2,
+      rowStart: 9,
+      rowEnd: 12,
+    },
+
+    {
+      id: 4,
+      columnStart: 1,
+      columnEnd: 2,
+      rowStart: 12,
+      rowEnd: 15,
+    },
+
+    {
+      id: 5,
+      columnStart: 2,
+      columnEnd: 3,
+      rowStart: 1,
+      rowEnd: 4,
+    },
+
+    {
+      id: 6,
+      columnStart: 2,
+      columnEnd: 3,
+      rowStart: 4,
+      rowEnd: 7,
+    },
+
+    {
+      id: 7,
+      columnStart: 2,
+      columnEnd: 3,
+      rowStart: 7,
+      rowEnd: 12,
+    },
+
+    {
+      id: 8,
+      columnStart: 2,
+      columnEnd: 3,
+      rowStart: 12,
+      rowEnd: 15,
+    },
+  ];
+
+  return (
+    <St.FlexContainer>
+      <St.CategoryItemContainer>
+        {categoryList.map((item, index) => {
+          return (
+            <St.CategoryItem
+              key={item.id}
+              columnStart={gridValue[index].columnStart}
+              columnEnd={gridValue[index].columnEnd}
+              rowStart={gridValue[index].rowStart}
+              rowEnd={gridValue[index].rowEnd}>
+              <St.CategoryTitle>{item.title}</St.CategoryTitle>
+              <St.CategoryDescription>{item.content}</St.CategoryDescription>
+            </St.CategoryItem>
+          );
+        })}
+      </St.CategoryItemContainer>
+    </St.FlexContainer>
+  );
+}

src/components/Category/CategoryContents/style.ts

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+
+export const St = {
+  FlexContainer: styled.div`
+    display: flex;
+    justify-content: center;
+  `,
+
+  CategoryItemContainer: styled.section`
+    width: 32.8rem;
+    height: 57.8rem;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(14, 1fr);
+    grid-gap: 0.8rem;
+  `,
+
+  CategoryItem: styled.article<{ columnStart: number; columnEnd: number; rowStart: number; rowEnd: number }>`
+    grid-column-start: ${({ columnStart }) => columnStart};
+    grid-column-end: ${({ columnEnd }) => columnEnd};
+    grid-row-start: ${({ rowStart }) => rowStart};
+    grid-row-end: ${({ rowEnd }) => rowEnd};
+    background-color: white;
+    border-radius: 1.6rem;
+    border: 0.1rem solid #e0e0e0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  `,
+
+  CategoryTitle: styled.h2`
+    ${({ theme }) => theme.fonts.h1};
+    color: ${({ theme }) => theme.colors.bg};
+  `,
+
+  CategoryDescription: styled.p`
+    ${({ theme }) => theme.fonts.h2};
+    color: ${({ theme }) => theme.colors.gray600};
+  `,
+};

src/components/Category/index.tsx

@@ -1,9 +1,29 @@
-import Header from "../common/Header";
+import styled from "styled-components";
 
+import { CategoryBanner } from "../../asset/image";
+import { HeadingTitle } from "../../core/main/headingTitles";
+import Header from "../common/Header";
+import HeadingTitleContainer from "../common/HeadingTitleContainer";
+import CategoryContents from "./CategoryContents";
 export default function Category() {
+  const categoryTitles: HeadingTitle = {
+    title: "Mood Piickle",
+    content: "더욱 쉽게 피클을 즐길 수 있는 방법!\n지금 나의 무드에 맞는 카테고리를 골라보세요",
+    isMoreBtn: false,
+  };
   return (
     <main>
       <Header />
+      <St.CategoryBanner src={CategoryBanner} />
+      <HeadingTitleContainer headingTitles={categoryTitles} />
+      <CategoryContents />
     </main>
   );
 }
+
+const St = {
+  CategoryBanner: styled.img`
+    width: 36rem;
+    height: 13.6rem;
+  `,
+};

src/components/common/HeadingTitleContainer/style.ts

@@ -22,6 +22,8 @@ export const St = {
   Content: styled.p`
     margin-top: 0.4rem;
 
+    white-space: pre-wrap;
+
     color: ${({ theme }) => theme.colors.gray600};
     ${({ theme }) => theme.fonts.h2};
   `,

src/core/category/categoryList.ts

@@ -0,0 +1,48 @@
+type categoryListProps = {
+  id: number;
+  title: string;
+  content: string;
+};
+
+export const categoryList: categoryListProps[] = [
+  {
+    id: 0,
+    title: "소개팅",
+    content: "커플과의 추억을 공유하세요",
+  },
+  {
+    id: 0,
+    title: "소개팅",
+    content: "커플과의 추억을 공유하세요",
+  },
+  {
+    id: 0,
+    title: "소개팅",
+    content: "커플과의 추억을 공유하세요",
+  },
+  {
+    id: 0,
+    title: "소개팅",
+    content: "커플과의 추억을 공유하세요",
+  },
+  {
+    id: 0,
+    title: "소개팅",
+    content: "커플과의 추억을 공유하세요",
+  },
+  {
+    id: 0,
+    title: "소개팅",
+    content: "커플과의 추억을 공유하세요",
+  },
+  {
+    id: 0,
+    title: "소개팅",
+    content: "커플과의 추억을 공유하세요",
+  },
+  {
+    id: 0,
+    title: "소개팅",
+    content: "커플과의 추억을 공유하세요",
+  },
+];