[Feat] 드롭다운 페이지 마크업

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

@@ -0,0 +1,118 @@
+import Card from "@components/Card";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import { Flex, Grid } from "@styled-system/jsx";
+import Button from "wowds-ui/Button";
+
+type ButtonProps = {
+  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 },
+];
+
+const smallButtons: ButtonProps[] = [
+  {},
+  { disabled: true },
+  { "data-hover": true },
+  { "data-active": true },
+];
+
+const ComponentTab = () => {
+  return (
+    <>
+      <Space height={48} />
+      <Text as="h2" typo="display2WebPage">
+        Component
+      </Text>
+      <Space height={40} />
+
+      <Text as="h3" typo="headingWebPage">
+        L size
+      </Text>
+      <Space height={20} />
+      <Card isBackground>
+        <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 {...props}>Button1</Button>
+          ))}
+        </Grid>
+      </Card>
+      <Space height={40} />
+
+      <Text as="h3" typo="headingWebPage">
+        S size
+      </Text>
+      <Space height={20} />
+      <Card
+        isBackground
+        contentStyle={{
+          flexDirection: "column",
+          gap: 20,
+        }}
+      >
+        <Flex alignItems="center" direction="column" gap={12}>
+          <Text color="sub" typo="body1">
+            Outline
+          </Text>
+          <Flex gap="1rem">
+            {smallButtons.map((props) => (
+              <Button size="sm" variant="outline" {...props}>
+                Button2
+              </Button>
+            ))}
+          </Flex>
+        </Flex>
+        <Flex alignItems="center" direction="column" gap={12}>
+          <Text color="sub" typo="body1">
+            Solid
+          </Text>
+          <Flex gap="1rem">
+            {smallButtons.map((props) => (
+              <Button size="sm" variant="solid" {...props}>
+                Button2
+              </Button>
+            ))}
+          </Flex>
+        </Flex>
+        <Flex alignItems="center" direction="column" gap={12}>
+          <Text color="sub" typo="body1">
+            Sub
+          </Text>
+          <Flex gap="1rem">
+            {smallButtons.map((props) => (
+              <Button size="sm" variant="sub" {...props}>
+                Button2
+              </Button>
+            ))}
+          </Flex>
+        </Flex>
+      </Card>
+      <Space height={40} />
+    </>
+  );
+};
+
+export default ComponentTab;

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

@@ -0,0 +1,113 @@
+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 widthButtonItems: 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 combinationButtonItems: 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 withIconButtonItems: 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 withSubjectButtonItems: Item[] = [
+  {
+    main: "L size",
+    sub: "Subtext는 메인 텍스트 하단에 배치, Subtext는 Label3으로 지정",
+    imageAlt: "withSubject-1",
+    imageSrc: "/button/withSubject-1.png",
+    imageWidth: 907,
+    imageHeight: 156,
+  },
+];
+
+const GuidelineTab = () => {
+  return (
+    <>
+      <Space height={48} />
+      <Text as="h2" typo="display2WebPage">
+        Guideline
+      </Text>
+      <Space height={40} />
+      <Text as="h3" typo="headingWebPage">
+        Width
+      </Text>
+      <Space height={40} />
+      <ImageCards items={widthButtonItems} />
+      <Divider />
+      <Space height={40} />
+      <Text as="h3" typo="headingWebPage">
+        Combination
+      </Text>
+      <Space height={40} />
+      <ImageCards items={combinationButtonItems} />
+      <Divider />
+      <Space height={40} />
+      <Text as="h3" typo="headingWebPage">
+        With Icon
+      </Text>
+      <Space height={40} />
+      <ImageCards items={withIconButtonItems} />
+      <Divider />
+      <Space height={40} />
+      <Text as="h3" typo="headingWebPage">
+        With Subject
+      </Text>
+      <Space height={40} />
+      <ImageCards items={withSubjectButtonItems} />
+    </>
+  );
+};
+
+export default GuidelineTab;

apps/wow-docs/app/component/button/page.tsx

@@ -0,0 +1,38 @@
+import Card from "@components/Card";
+import ComponentDetailTabs from "@components/ComponentDetailTabs";
+import Space from "@components/Space";
+import Title from "@components/Text/Title";
+import type { Metadata } from "next/types";
+import Button from "wowds-ui/Button";
+
+import ComponentTab from "@/component/button/_component/ComponentTab";
+import GuidelineTab from "@/component/button/_component/GuidelineTab";
+
+export const metadata: Metadata = {
+  title: "Button",
+  description: "와우 디자인 시스템의 Button 입니다.",
+};
+
+const ButtonPage = () => {
+  return (
+    <>
+      <Title
+        main="Button"
+        sub="사용자가 설정한 동작을 수행하기 위해 누르는 컴포넌트입니다."
+        variant="header"
+      />
+      <Space height={40} />
+      <Card style={{ padding: "156px 154px", gap: 24 }}>
+        <Button>Button1</Button>
+        <Button variant="outline">Button1</Button>
+      </Card>
+      <Space height={92} />
+      <ComponentDetailTabs
+        componentTab={<ComponentTab />}
+        guidelineTab={<GuidelineTab />}
+      />
+    </>
+  );
+};
+
+export default ButtonPage;

apps/wow-docs/app/component/dropdown/ComponentTab.tsx

@@ -0,0 +1,42 @@
+import Card from "@components/Card";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import { css } from "@styled-system/css";
+import Image from "next/image";
+
+export const ComponentTab = () => {
+  return (
+    <>
+      {" "}
+      <Space height={48} />
+      <Text typo="display2WebPage">Component</Text>
+      <Space height={40} />
+      <Text typo="headingWebPage">Select</Text>
+      <Space height={20} />
+      <Card className={containerStyle}>
+        <Image
+          alt="dropdown-component"
+          height={400}
+          src="/component/dropdown/component-dropdown.png"
+          width={330}
+        />
+      </Card>
+      <Space height={40} />
+      <Text typo="headingWebPage">List</Text>
+      <Space height={20} />
+      <Card>
+        <Image
+          alt="dropdown-option"
+          height={360}
+          src="/component/dropdown/component-dropdownoption.png"
+          width={300}
+        />
+      </Card>
+    </>
+  );
+};
+
+const containerStyle = css({
+  display: "flex",
+  justifyContent: "center",
+});