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

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/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 (
     <>

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

@@ -0,0 +1,31 @@
+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} />
+    </>
+  );
+};
+
+export default IconPage;

apps/wow-docs/components/Card.tsx

@@ -1,16 +1,22 @@
-import { css } from "@styled-system/css";
+import { css, cx } from "@styled-system/css";
 import type { CSSProperties, PropsWithChildren } from "react";
 
 interface CardProps extends PropsWithChildren {
   isBackground?: boolean;
   style?: CSSProperties;
   contentStyle?: CSSProperties;
+  className?: string;
 }
 
-const Card = ({ children, isBackground = false, ...props }: CardProps) => {
+const Card = ({
+  children,
+  isBackground = false,
+  className,
+  ...props
+}: CardProps) => {
   return (
     <div
-      className={containerStyle}
+      className={cx(containerStyle, className)}
       {...(props.style && { style: props.style })}
     >
       {isBackground ? (

apps/wow-docs/components/ImageCards.tsx

@@ -2,10 +2,11 @@ import Card from "@components/Card";
 import Space from "@components/Space";
 import Title from "@components/Text/Title";
 import Image from "next/image";
+import type { ReactNode } from "react";
 
 export type Item = {
   main: string;
-  sub: string;
+  sub?: string | ReactNode;
   imageAlt: string;
   imageSrc: string;
   imageWidth: number;

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.png",
+    imageWidth: 989,
+    imageHeight: 300,
+    imageAlt:
+      "와우 디자인 시스템 Icon의 모티브가 된 Product Sans의 조형적 요소를 나타내는 이미지",
+  },
+  {
+    main: "Grid",
+    sub: "사이즈별로 정해둔 그리드에 맞춰 아이콘을 제작해요.",
+    imageSrc: "/icon/icon_grid.png",
+    imageWidth: 989,
+    imageHeight: 301,
+    imageAlt:
+      "사이즈별로 정해진 그리드에 맞춰 아이콘을 제작하는 방법을 나타내는 이미지",
+  },
+  {
+    main: "Icon",
+    imageSrc: "/icon/icon.jpg",
+    imageWidth: 909,
+    imageHeight: 304,
+    imageAlt: "와우 디자인 시스템의 아이콘 종류를 나타내는 이미지",
+  },
+  {
+    main: "Component",
+    imageSrc: "/icon/icon_component.jpg",
+    imageWidth: 909,
+    imageHeight: 322,
+    imageAlt: "와우 디자인 시스템의 다양한 아이콘 컴포넌트를 나타내는 이미지",
+  },
+];