diff --git a/src/asset/image/categoryBanner.png b/src/asset/image/categoryBanner.png
new file mode 100644
index 00000000..f6fedb76
Binary files /dev/null and b/src/asset/image/categoryBanner.png differ
diff --git a/src/asset/image/index.tsx b/src/asset/image/index.tsx
index 7505a104..37791805 100644
--- a/src/asset/image/index.tsx
+++ b/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";
diff --git a/src/components/Category/CategoryContents/index.tsx b/src/components/Category/CategoryContents/index.tsx
new file mode 100644
index 00000000..164fc1f4
--- /dev/null
+++ b/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 (
+
+
+ {categoryList.map((item, index) => {
+ return (
+
+ {item.title}
+ {item.content}
+
+ );
+ })}
+
+
+ );
+}
diff --git a/src/components/Category/CategoryContents/style.ts b/src/components/Category/CategoryContents/style.ts
new file mode 100644
index 00000000..09dbd932
--- /dev/null
+++ b/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};
+ `,
+};
diff --git a/src/components/Category/index.tsx b/src/components/Category/index.tsx
index ee4c965e..6b22170c 100644
--- a/src/components/Category/index.tsx
+++ b/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 (
+
+
+
);
}
+
+const St = {
+ CategoryBanner: styled.img`
+ width: 36rem;
+ height: 13.6rem;
+ `,
+};
diff --git a/src/components/common/HeadingTitleContainer/style.ts b/src/components/common/HeadingTitleContainer/style.ts
index 7a90ae3b..172c7f05 100644
--- a/src/components/common/HeadingTitleContainer/style.ts
+++ b/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};
`,
diff --git a/src/core/category/categoryList.ts b/src/core/category/categoryList.ts
new file mode 100644
index 00000000..b7f25ad4
--- /dev/null
+++ b/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: "커플과의 추억을 공유하세요",
+ },
+];