[Feature] Color, Typo, Spacing 페이지 마크업 작성

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

@@ -0,0 +1,71 @@
+import Card from "@components/Card";
+import ImageCards from "@components/ImageCards";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import Title from "@components/Text/Title";
+import {
+  componentDescriptions,
+  globalDescription,
+  semanticDescriptions,
+} from "@constants/document/foundation/color";
+import Image from "next/image";
+import type { Metadata } from "next/types";
+import Divider from "wowds-ui/Divider";
+
+export const metadata: Metadata = {
+  title: "Color",
+  description: "와우 디자인 시스템의 Color 입니다.",
+};
+
+const ColorPage = () => {
+  return (
+    <>
+      <Title
+        main="Color"
+        sub="컬러는 사용자가 브랜드 아이덴티티와 기능을 인지하는 것을 돕는 시각적 요소입니다."
+        variant="header"
+      />
+      <Space height={68} />
+      <Text as="h2" typo="display2WebPage">
+        Semantic
+      </Text>
+      <Text color="sub" typo="body1">
+        전체 컬러 팔레트 중 서비스에 사용되는 컬러를 용도별로 지정해서
+        시스템화해요.
+      </Text>
+      <Space height={40} />
+      <ImageCards items={semanticDescriptions} />
+      <Text as="h3" typo="headingWebPage">
+        Component
+      </Text>
+      <Text color="sub" typo="body1">
+        UI 내 요소들에 사용되는 컬러로, State별로 나누어서 정리했어요.
+        <br />
+        정리된 토큰 외 컬러 사용시 변형 및 확장이 가능해요.
+      </Text>
+      <Space height={20} />
+      <ImageCards items={componentDescriptions} />
+      <Divider />
+      <Space height={40} />
+      <Text as="h2" typo="display2WebPage">
+        Global
+      </Text>
+      <Text color="sub" typo="body1">
+        모든 컬러의 셰이드를 지정했어요. 그래픽 및 UI 요소를 확장할 시 이 안에서
+        참조하여 사용해요.
+      </Text>
+      <Space height={40} />
+      <Card>
+        <Image
+          alt={globalDescription.imageAlt}
+          height={globalDescription.imageHeight}
+          src={globalDescription.imageSrc}
+          width={globalDescription.imageWidth}
+        />
+      </Card>
+      <Space height={40} />
+    </>
+  );
+};
+
+export default ColorPage;

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

@@ -0,0 +1,74 @@
+import Card from "@components/Card";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import Title from "@components/Text/Title";
+import {
+  paddingDescription,
+  radiusDescription,
+  strokeDescription,
+} from "@constants/document/foundation/spacing";
+import Image from "next/image";
+import type { Metadata } from "next/types";
+import Divider from "wowds-ui/Divider";
+
+export const metadata: Metadata = {
+  title: "Spacing",
+  description: "와우 디자인 시스템의 Spacing 입니다.",
+};
+
+const SpacingPage = () => {
+  return (
+    <>
+      <Title
+        main="Spacing"
+        sub="스페이싱은 일관된 간격으로 요소를 배치해 일관된 UI를 만드는 것을 목표로 합니다."
+        variant="header"
+      />
+      <Space height={68} />
+      <Text as="h2" typo="display2WebPage">
+        Radius
+      </Text>
+      <Space height={20} />
+      <Card>
+        <Image
+          alt={radiusDescription.imageAlt}
+          height={radiusDescription.imageHeight}
+          src={radiusDescription.imageSrc}
+          width={radiusDescription.imageWidth}
+        />
+      </Card>
+      <Divider style={{ margin: "40px 0" }} />
+      <Text as="h2" typo="display2WebPage">
+        Padding
+      </Text>
+      <Text color="sub" typo="body1">
+        {paddingDescription.sub}
+      </Text>
+      <Space height={40} />
+      <Card>
+        <Image
+          alt={paddingDescription.imageAlt}
+          height={paddingDescription.imageHeight}
+          src={paddingDescription.imageSrc}
+          width={paddingDescription.imageWidth}
+        />
+      </Card>
+      <Divider style={{ margin: "40px 0" }} />
+      <Text as="h2" typo="display2WebPage">
+        Stroke
+      </Text>
+      <Space height={20} />
+      <Card>
+        <Image
+          alt={strokeDescription.imageAlt}
+          height={strokeDescription.imageHeight}
+          src={strokeDescription.imageSrc}
+          width={strokeDescription.imageWidth}
+        />
+      </Card>
+      <Space height={40} />
+    </>
+  );
+};
+
+export default SpacingPage;

apps/wow-docs/app/foundation/typography/_component/BodyCard.tsx

@@ -0,0 +1,18 @@
+import Card from "@components/Card";
+import Text from "@components/Text";
+import { Flex } from "@styled-system/jsx";
+
+const BodyCard = () => {
+  return (
+    <Card style={{ justifyContent: "flex-start", padding: "48px 77px" }}>
+      <Flex flexDirection="column" gap="xl">
+        <Text typo="body0">Body0 : SUIT v1_Medium, 18px, 160%, -1%</Text>
+        <Text typo="body1">Body1 : SUIT v1_Medium, 16px, 160%, -1%</Text>
+        <Text typo="body2">Body2 : SUIT v1_Medium, 14px, 160%, -1%</Text>
+        <Text typo="body3">Body3 : SUIT v1_Medium, 12px, 140%, 0%</Text>
+      </Flex>
+    </Card>
+  );
+};
+
+export default BodyCard;

apps/wow-docs/app/foundation/typography/_component/DisplayCard.tsx

@@ -0,0 +1,16 @@
+import Card from "@components/Card";
+import Text from "@components/Text";
+import { Flex } from "@styled-system/jsx";
+
+const DisplayCard = () => {
+  return (
+    <Card style={{ justifyContent: "flex-start", padding: "48px 77px" }}>
+      <Flex flexDirection="column" gap="md">
+        <Text typo="display1">Display1 : SUIT v1_Bold, 40px, 130%, -1%</Text>
+        <Text typo="display2">Display2 : SUIT v1_Bold, 32px, 130%, -1%</Text>
+      </Flex>
+    </Card>
+  );
+};
+
+export default DisplayCard;

apps/wow-docs/app/foundation/typography/_component/HeaderCard.tsx

@@ -0,0 +1,16 @@
+import Card from "@components/Card";
+import Text from "@components/Text";
+import { Flex } from "@styled-system/jsx";
+
+const HeaderCard = () => {
+  return (
+    <Card style={{ justifyContent: "flex-start", padding: "48px 77px" }}>
+      <Flex flexDirection="column" gap="xl">
+        <Text typo="header1">Header1 : Product Sans, 20px, 130%, 0%</Text>
+        <Text typo="header2">Header2 : Product Sans, 14px, 130%, 0%</Text>
+      </Flex>
+    </Card>
+  );
+};
+
+export default HeaderCard;

apps/wow-docs/app/foundation/typography/_component/HeadingCard.tsx

@@ -0,0 +1,17 @@
+import Card from "@components/Card";
+import Text from "@components/Text";
+import { Flex } from "@styled-system/jsx";
+
+const HeadingCard = () => {
+  return (
+    <Card style={{ justifyContent: "flex-start", padding: "48px 77px" }}>
+      <Flex flexDirection="column" gap="xl">
+        <Text typo="h1">Heading1 : SUIT v1_Semibold, 24px, 130%, -1%</Text>
+        <Text typo="h2">Heading2 : SUIT v1_Semibold, 18px, 130%, -1%</Text>
+        <Text typo="h3">Heading3 : SUIT v1_Semibold, 16px, 130%, -1%</Text>
+      </Flex>
+    </Card>
+  );
+};
+
+export default HeadingCard;

apps/wow-docs/app/foundation/typography/_component/LabelCard.tsx

@@ -0,0 +1,43 @@
+import Card from "@components/Card";
+import Text from "@components/Text";
+import { Flex } from "@styled-system/jsx";
+
+const LabelCard = () => {
+  return (
+    <Card style={{ justifyContent: "flex-start", padding: "48px 77px" }}>
+      <Flex gap="xl">
+        <Flex flexDirection="column" gap="md">
+          <Text typo="label1">Label1 : SUIT v1_Semibold, 16px, 100%, -1%</Text>
+          <Text typo="label1U">
+            Label1_U : SUIT v1_Semibold, 16px, 100%, -1%
+          </Text>
+          <Text typo="label2">Label2 : SUIT v1_Semibold, 14px, 100%, -1%</Text>
+          <Flex flexDirection="column" gap="sm">
+            <Text typo="label2U">
+              Label2_U : SUIT v1_Semibold, 14px, 100%, -1%
+            </Text>
+            <Text typo="label2U">링크 버튼 등에 활용해요.</Text>
+          </Flex>
+          <Flex flexDirection="column" gap="sm">
+            <Text typo="label2U2">
+              Label2_U2 : SUIT v1_Medium, 14px, 160%, -1%
+            </Text>
+            <Text typo="label2U2">링크 버튼 등에 활용해요.</Text>
+          </Flex>
+        </Flex>
+        <Flex flexDirection="column" gap="md">
+          <Text typo="label2Mono">
+            Label2_U2 : SUIT v1_Medium, 14px, 160%, -1%
+          </Text>
+          <Text color="sub" typo="label2Mono">
+            포인트 텍스트로 자유롭게 활용하되, 영문으로만 사용해요. <br />
+            문장 단위로 사용하지 않아요.
+          </Text>
+          <Text typo="label3">Label3 : SUIT v1_Semibold, 12px, 100%, 0%</Text>
+        </Flex>
+      </Flex>
+    </Card>
+  );
+};
+
+export default LabelCard;

apps/wow-docs/app/foundation/typography/_component/PrimaryCard.tsx

@@ -0,0 +1,87 @@
+import Card from "@components/Card";
+import Text from "@components/Text";
+import { Flex } from "@styled-system/jsx";
+
+const PrimaryCard = () => {
+  return (
+    <Card style={{ justifyContent: "flex-start", padding: "74px 77px" }}>
+      <Flex gap="xl" style={{ width: "100%" }}>
+        <Flex flexDirection="column" gap="md">
+          <Flex align="baseline" gap="md">
+            <Text
+              color="primary"
+              style={{ fontSize: "42px" }}
+              typo="display2WebPage"
+            >
+              GDSC Hongik
+            </Text>
+            <Text
+              color="primary"
+              style={{ fontSize: "12px" }}
+              typo="display2WebPage"
+            >
+              Product Sans_Bold
+            </Text>
+          </Flex>
+          <Flex align="baseline" gap="md">
+            <Text color="primary" style={{ fontSize: "42px" }}>
+              GDSC Hongik
+            </Text>
+            <Text color="primary" style={{ fontSize: "12px" }}>
+              Product Sans_Regular
+            </Text>
+          </Flex>
+        </Flex>
+        <Flex flexDirection="column" gap="md">
+          <Flex align="baseline" gap="md">
+            <Text
+              color="primary"
+              style={{
+                fontSize: "42px",
+                fontWeight: "700",
+              }}
+            >
+              지뎃시 홍익
+            </Text>
+            <Text
+              color="primary"
+              style={{ fontSize: "12px", fontWeight: "700" }}
+            >
+              SUIT_v1_Bold
+            </Text>
+          </Flex>
+          <Flex align="baseline" gap="md" justifyContent="space-between">
+            <Text
+              color="primary"
+              style={{ fontSize: "42px", fontWeight: "600" }}
+            >
+              지뎃시 홍익
+            </Text>
+            <Text
+              color="primary"
+              style={{ fontSize: "12px", fontWeight: "600" }}
+            >
+              SUIT_v1_Semibold
+            </Text>
+          </Flex>
+          <Flex align="baseline" gap="md" justifyContent="space-between">
+            <Text
+              color="primary"
+              style={{ fontSize: "42px", fontWeight: "500" }}
+            >
+              지뎃시 홍익
+            </Text>
+            <Text
+              color="primary"
+              style={{ fontSize: "12px", fontWeight: "500" }}
+            >
+              SUIT_v1_Medium
+            </Text>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Card>
+  );
+};
+
+export default PrimaryCard;

apps/wow-docs/app/foundation/typography/_component/SecondaryCard.tsx

@@ -0,0 +1,26 @@
+import Card from "@components/Card";
+import Text from "@components/Text";
+import { Flex } from "@styled-system/jsx";
+
+const SecondaryCard = () => {
+  return (
+    <Card style={{ justifyContent: "flex-start", padding: "74px 77px" }}>
+      <Flex align="baseline" gap="md">
+        <Text
+          color="primary"
+          style={{ fontFamily: "Roboto-Mono", fontSize: "42px" }}
+        >
+          GDSC Hongik
+        </Text>
+        <Text
+          color="primary"
+          style={{ fontFamily: "Roboto-Mono", fontSize: "16px" }}
+        >
+          Roboto Mono_Regular
+        </Text>
+      </Flex>
+    </Card>
+  );
+};
+
+export default SecondaryCard;