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

apps/wow-docs/app/component/button/_component/ComponentTab.tsx

@@ -5,36 +5,37 @@ import { Flex, Grid } from "@styled-system/jsx";
 import Button from "wowds-ui/Button";
 
 type ButtonProps = {
+  key: number;
   variant?: "outline" | "solid" | "sub";
   disabled?: boolean;
   "data-hover"?: boolean;
   "data-active"?: boolean;
 };
 
 const largeButtons: ButtonProps[] = [
-  {},
-  { variant: "outline" },
-  { disabled: true },
-  { variant: "outline", disabled: true },
-  { "data-hover": true },
-  { variant: "outline", "data-hover": true },
-  { "data-active": true },
-  { variant: "outline", "data-active": true },
+  { key: 1 },
+  { key: 2, variant: "outline" },
+  { key: 3, disabled: true },
+  { key: 4, variant: "outline", disabled: true },
+  { key: 5, "data-hover": true },
+  { key: 6, variant: "outline", "data-hover": true },
+  { key: 7, "data-active": true },
+  { key: 8, variant: "outline", "data-active": true },
 ];
 
-const smallButtons = [
-  {},
-  { disabled: true },
-  { "data-hover": true },
-  { "data-active": true },
+const smallButtons: ButtonProps[] = [
+  { key: 1 },
+  { key: 2, disabled: true },
+  { key: 3, "data-hover": true },
+  { key: 4, "data-active": true },
 ];
 
 const ComponentTab = () => {
   return (
     <>
       <Space height={48} />
       <Text as="h2" typo="display2WebPage">
-        Guideline
+        Component
       </Text>
       <Space height={40} />
 
@@ -43,17 +44,20 @@ const ComponentTab = () => {
       </Text>
       <Space height={20} />
       <Card isBackground>
-        <Grid gridTemplateColumns="repeat(2, 1fr)" justifyItems="center">
+        <Grid
+          gridTemplateColumns="repeat(2, 1fr)"
+          justifyItems="center"
+          maxWidth={328 * 2}
+          width="100%"
+        >
           <Text color="sub" typo="body1">
             Solid
           </Text>
           <Text color="sub" typo="body1">
             Outline
           </Text>
           {largeButtons.map((props) => (
-            <Button style={{ width: 328 }} {...props}>
-              Button1
-            </Button>
+            <Button {...props}>Button1</Button>
           ))}
         </Grid>
       </Card>

apps/wow-docs/app/component/button/_component/GuidelineTab.tsx

@@ -1,76 +1,14 @@
-import type { Item } from "@components/ImageCards";
 import ImageCards from "@components/ImageCards";
 import Space from "@components/Space";
 import Text from "@components/Text";
 import Divider from "wowds-ui/Divider";
 
-const widthItems: Item[] = [
-  {
-    main: "PC",
-    sub: "최대 너비, 고정 너비는 그리드 기준 4칸",
-    imageAlt: "width-1",
-    imageSrc: "/button/width-1.png",
-    imageWidth: 907,
-    imageHeight: 148,
-  },
-  {
-    main: "Mobile",
-    sub: "전체 그리드 혹은 박스 컴포넌트에 Fill로 너비 맞추기",
-    imageAlt: "width-2",
-    imageSrc: "/button/width-2.png",
-    imageWidth: 390,
-    imageHeight: 254,
-  },
-];
-
-const combinationItems: Item[] = [
-  {
-    main: "L size",
-    sub: "좌우 및 상하로 2개의 버튼 조합 가능",
-    imageAlt: "combination-1",
-    imageSrc: "/button/combination-1.png",
-    imageWidth: 907,
-    imageHeight: 352,
-  },
-  {
-    main: "S size",
-    sub: "Outline, Solid 버튼끼리 자유롭게 조합",
-    imageAlt: "combination-2",
-    imageSrc: "/button/combination-2.png",
-    imageWidth: 907,
-    imageHeight: 230,
-  },
-];
-
-const withIconItems: Item[] = [
-  {
-    main: "L size",
-    sub: "20*20 size 아이콘과 병치",
-    imageAlt: "withIcon-1",
-    imageSrc: "/button/withIcon-1.png",
-    imageWidth: 907,
-    imageHeight: 156,
-  },
-  {
-    main: "S size",
-    sub: "14*14 size 아이콘과 병치",
-    imageAlt: "withIcon-2",
-    imageSrc: "/button/withIcon-2.png",
-    imageWidth: 907,
-    imageHeight: 134,
-  },
-];
-
-const withSubjectItems: Item[] = [
-  {
-    main: "L size",
-    sub: "Subtext는 메인 텍스트 하단에 배치, Subtext는 Label3으로 지정",
-    imageAlt: "withSubject-1",
-    imageSrc: "/button/withSubject-1.png",
-    imageWidth: 907,
-    imageHeight: 156,
-  },
-];
+import {
+  combinationButtonItems,
+  widthButtonItems,
+  withIconButtonItems,
+  withSubjectButtonItems,
+} from "../../../../constants/store";
 
 const GuidelineTab = () => {
   return (
@@ -84,28 +22,28 @@ const GuidelineTab = () => {
         Width
       </Text>
       <Space height={40} />
-      <ImageCards items={widthItems} />
+      <ImageCards items={widthButtonItems} />
       <Divider />
       <Space height={40} />
       <Text as="h3" typo="headingWebPage">
         Combination
       </Text>
       <Space height={40} />
-      <ImageCards items={combinationItems} />
+      <ImageCards items={combinationButtonItems} />
       <Divider />
       <Space height={40} />
       <Text as="h3" typo="headingWebPage">
         With Icon
       </Text>
       <Space height={40} />
-      <ImageCards items={withIconItems} />
+      <ImageCards items={withIconButtonItems} />
       <Divider />
       <Space height={40} />
       <Text as="h3" typo="headingWebPage">
         With Subject
       </Text>
       <Space height={40} />
-      <ImageCards items={withSubjectItems} />
+      <ImageCards items={withSubjectButtonItems} />
     </>
   );
 };

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/grid/page.tsx

@@ -1,78 +1,17 @@
-import type { Item } from "@components/ImageCards";
 import ImageCards from "@components/ImageCards";
 import Space from "@components/Space";
 import Text from "@components/Text";
 import Title from "@components/Text/Title";
 import type { Metadata } from "next/types";
 import Divider from "wowds-ui/Divider";
 
+import { breakpointItems, gridItems } from "../../../constants/store";
+
 export const metadata: Metadata = {
   title: "Grid",
   description: "와우 디자인 시스템의 Grid 입니다.",
 };
 
-const gridItems: Item[] = [
-  {
-    main: "Basic Grid - PC",
-    sub: "데스크탑 환경에서 사용되는 그리드예요. 가운데 영역에 고정하여 배치해요.",
-    imageAlt: "grid-1",
-    imageSrc: "/grid/grid-1.png",
-    imageWidth: 900,
-    imageHeight: 280,
-  },
-  {
-    main: "Admin Grid - PC",
-    sub: "좌측에 사이드바 영역을 250px로 배치하고, 우측 남은 영역에 기본 PC 그리드를 동일하게 적용해요.",
-    imageAlt: "grid-2",
-    imageSrc: "/grid/grid-2.png",
-    imageWidth: 900,
-    imageHeight: 280,
-  },
-  {
-    main: "Basic Grid - Mobile",
-    sub: "4분할 반응형 그리드로, Margin과 Gutter값만 고정해요.",
-    imageAlt: "grid-3",
-    imageSrc: "/grid/grid-3.png",
-    imageWidth: 300,
-    imageHeight: 308,
-  },
-];
-
-const breakpointItems: Item[] = [
-  {
-    main: "XS",
-    sub: "최소 규격은 360px, 최대 규격은 599px로, 주로 모바일 환경에 대응해요.",
-    imageAlt: "breakpoint-1",
-    imageSrc: "/grid/breakpoint-1.png",
-    imageWidth: 695,
-    imageHeight: 280,
-  },
-  {
-    main: "S",
-    sub: "최소 규격은 600px, 최대 규격은 899px로, 주로 태블릿 세로 규격에 대응해요.",
-    imageAlt: "breakpoint-2",
-    imageSrc: "/grid/breakpoint-2.png",
-    imageWidth: 630,
-    imageHeight: 444,
-  },
-  {
-    main: "M",
-    sub: "최소 규격은 900px, 최대 규격은 1279px로, 주로 태블릿 가로 규격에 대응해요.",
-    imageAlt: "breakpoint-3",
-    imageSrc: "/grid/breakpoint-3.png",
-    imageWidth: 895,
-    imageHeight: 444,
-  },
-  {
-    main: "L",
-    sub: "최소 규격은 가로 1280px, 그 이상의 모든 해상도에 적용되는 레이아웃으로, 데스크탑 환경에 대응해요.",
-    imageAlt: "breakpoint-4",
-    imageSrc: "/grid/breakpoint-4.png",
-    imageWidth: 895,
-    imageHeight: 210,
-  },
-];
-
 const GridPage = () => {
   return (
     <>