[Feature] Foundation Icon 페이지 마크업 작성

apps/wow-docs/app/foundation/icon/page.tsx

@@ -0,0 +1,32 @@
+import ImageCards from "@components/ImageCards";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import Title from "@components/Text/Title";
+import { iconDescriptions } from "@constants/document/foundation/icon";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Icon",
+  description: "와우 디자인 시스템의 Icon입니다.",
+};
+
+const IconPage = () => {
+  return (
+    <>
+      <Title
+        main="Icon"
+        sub="아이콘은 간결한 표현을 통해 쉽고 빠르게 정보를 전달하는 것을 목표로 합니다."
+        variant="header"
+      />
+      <Space height={68} />
+      <Text as="h2" typo="display2WebPage">
+        Guideline
+      </Text>
+      <Space height={48} />
+      <ImageCards items={iconDescriptions} />
+      <Space height={200} />
+    </>
+  );
+};
+
+export default IconPage;

apps/wow-docs/constants/document/foundation/icon.tsx

@@ -0,0 +1,36 @@
+import type { Item } from "@components/ImageCards";
+
+export const iconDescriptions: Item[] = [
+  {
+    main: "Motif",
+    sub: "메인 서체 Product Sans의 조형적 요소를 이용해서 아이콘을 제작했어요.",
+    imageSrc: "/icon/icon_motif.svg",
+    imageWidth: 567,
+    imageHeight: 111,
+    imageAlt:
+      "와우 디자인 시스템 Icon의 모티브가 된 Product Sans의 조형적 요소를 나타내는 이미지",
+  },
+  {
+    main: "Grid",
+    sub: "사이즈별로 정해둔 그리드에 맞춰 아이콘을 제작해요.",
+    imageSrc: "/icon/icon_grid.svg",
+    imageWidth: 989,
+    imageHeight: 301,
+    imageAlt:
+      "사이즈별로 정해진 그리드에 맞춰 아이콘을 제작하는 방법을 나타내는 이미지",
+  },
+  {
+    main: "Icon",
+    imageSrc: "/icon/icon.svg",
+    imageWidth: 909,
+    imageHeight: 304,
+    imageAlt: "와우 디자인 시스템의 아이콘 종류를 나타내는 이미지",
+  },
+  {
+    main: "Component",
+    imageSrc: "/icon/icon_component.svg",
+    imageWidth: 909,
+    imageHeight: 322,
+    imageAlt: "와우 디자인 시스템의 다양한 아이콘 컴포넌트를 나타내는 이미지",
+  },
+];