[Feature] component 페이지 마크업 (avatar, checkbox, switch, header)

apps/wow-docs/app/component/avatar/_components/ComponentTab.tsx

@@ -0,0 +1,38 @@
+import Card from "@components/Card";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import { Flex } from "@styled-system/jsx";
+import Avatar from "wowds-ui/Avatar";
+
+const ComponentTab = () => {
+  return (
+    <>
+      <Space height={48} />
+      <Text typo="display2WebPage">Component</Text>
+      <Space height={40} />
+      <Text typo="headingWebPage">S Size</Text>
+      <Space height={20} />
+      <Card style={{ padding: "46px auto" }}>
+        <Flex gap={12}>
+          <Avatar size="sm" />
+          <Avatar size="sm" variant="green" />
+          <Avatar size="sm" variant="yellow" />
+          <Avatar size="sm" variant="red" />
+        </Flex>
+      </Card>
+      <Space height={40} />
+      <Text typo="headingWebPage">L Size</Text>
+      <Space height={20} />
+      <Card style={{ padding: "32px auto" }}>
+        <Flex gap={20}>
+          <Avatar />
+          <Avatar variant="green" />
+          <Avatar variant="yellow" />
+          <Avatar variant="red" />
+        </Flex>
+      </Card>
+    </>
+  );
+};
+
+export default ComponentTab;

apps/wow-docs/app/component/avatar/_components/GuidelineTab.tsx

@@ -0,0 +1,83 @@
+import Card from "@components/Card";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import Title from "@components/Text/Title";
+import Image from "next/image";
+import Divider from "wowds-ui/Divider";
+
+const GuidelineTab = () => {
+  return (
+    <>
+      <Space height={48} />
+      <Text typo="display2WebPage">Guideline</Text>
+      <Space height={40} />
+      <Title
+        main="Style"
+        sub="기본 아바타 그래픽은 4종을 제공해요. 프로필 이미지를 지정할 경우 대체하여 사용해요."
+        variant="component"
+      />
+      <Space height={20} />
+      <Card style={{ padding: "49px auto" }}>
+        <Image
+          alt="기본 아바타 그래픽을 제공하고 사용자 지정 이미지를 사용할 수 있습니다"
+          height={138}
+          src="/component/avatar/avatar-guide-1.svg"
+          width={354}
+        />
+      </Card>
+      <Space height={40} />
+      <Divider />
+      <Space height={40} />
+      <Title
+        main="Size"
+        sub="크기에 따라 다른 방식으로 활용해요."
+        variant="component"
+      />
+      <Space height={40} />
+      <Title
+        main="S Size"
+        sub="이름과 함께 병행하여 사용 가능"
+        variant="component"
+      />
+      <Space height={20} />
+      <Card style={{ padding: "32px auto" }}>
+        <Image
+          alt="S size를 아바타만 사용하거나 이름과 병행한 이미지"
+          height={140}
+          src="/component/avatar/avatar-guide-2.svg"
+          width={908}
+        />
+      </Card>
+      <Space height={40} />
+      <Text color="sub" typo="body1">
+        헤더에 적용할 경우, 아바타만 사용하거나 이름과 병행 가능
+      </Text>
+      <Space height={20} />
+      <Card style={{ padding: "32px auto" }}>
+        <Image
+          alt="S size를 헤더에 적용한 경우, 아바타만 사용하거나 이름과 병행한 이미지"
+          height={150}
+          src="/component/avatar/avatar-guide-3.svg"
+          width={390}
+        />
+      </Card>
+      <Space height={40} />
+      <Title
+        main="L Size"
+        sub="헤더에 적용할 경우, 아바타만 사용하거나 이름과 병행 가능"
+        variant="component"
+      />
+      <Space height={20} />
+      <Card style={{ padding: "32px auto" }}>
+        <Image
+          alt="L size를 아바타만 사용하거나 이름과 병행한 이미지"
+          height={233}
+          src="/component/avatar/avatar-guide-4.svg"
+          width={908}
+        />
+      </Card>
+    </>
+  );
+};
+
+export default GuidelineTab;

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

@@ -0,0 +1,40 @@
+import Card from "@components/Card";
+import ComponentDetailTabs from "@components/ComponentDetailTabs";
+import Space from "@components/Space";
+import Title from "@components/Text/Title";
+import { componentItems } from "@constants/pageData";
+import type { Metadata } from "next/types";
+import Avatar from "wowds-ui/Avatar";
+
+import ComponentTab from "@/component/avatar/_components/ComponentTab";
+import GuidelineTab from "@/component/avatar/_components/GuidelineTab";
+
+export const metadata: Metadata = {
+  title: "Avatar",
+  description: "와우 디자인 시스템의 avatar component 입니다.",
+};
+
+const AvatarPage = () => {
+  const avatarPageData = componentItems.find((item) => item.title === "Avatar");
+  return (
+    <>
+      <Title
+        main={avatarPageData?.title ?? ""}
+        sub={avatarPageData?.description ?? ""}
+        variant="header"
+      />
+      <Space height={40} />
+      <Card style={{ padding: "50px 144px" }}>
+        <Avatar />
+      </Card>
+      <Space height={92} />
+      <ComponentDetailTabs
+        componentTab={<ComponentTab />}
+        guidelineTab={<GuidelineTab />}
+      />
+      <Space height={92} />
+    </>
+  );
+};
+
+export default AvatarPage;

apps/wow-docs/app/component/checkbox/_components/ComponentTab.tsx

@@ -0,0 +1,64 @@
+import Card from "@components/Card";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import { Flex } from "@styled-system/jsx";
+import Image from "next/image";
+import type { CheckboxProps } from "wowds-ui/Checkbox";
+import Checkbox from "wowds-ui/Checkbox";
+
+type CheckboxItem = CheckboxProps & {
+  key: number;
+  pressed?: boolean;
+};
+
+const checkboxAndTexts: CheckboxItem[] = [
+  {
+    key: 1,
+    position: "vertical",
+    label: "Text",
+    defaultChecked: true,
+  },
+  {
+    key: 2,
+    position: "vertical",
+    label: "Text",
+  },
+  {
+    key: 3,
+    label: "Text",
+    defaultChecked: true,
+  },
+  { key: 4, label: "Text" },
+];
+
+const ComponentTab = () => {
+  return (
+    <>
+      <Space height={48} />
+      <Text typo="display2WebPage">Component</Text>
+      <Space height={40} />
+      <Text typo="headingWebPage">Box</Text>
+      <Space height={20} />
+      <Card>
+        <Image
+          alt="사용되는 텍스트의 길이 및 용도에 따라 컴포넌트 버전을 선택"
+          height={60}
+          src="/component/checkbox/checkbox-component-box.svg"
+          width={220}
+        />
+      </Card>
+      <Space height={40} />
+      <Text typo="headingWebPage">Box + Text</Text>
+      <Space height={20} />
+      <Card>
+        <Flex gap="2rem">
+          {checkboxAndTexts.map((props) => (
+            <Checkbox {...props} />
+          ))}
+        </Flex>
+      </Card>
+    </>
+  );
+};
+
+export default ComponentTab;

apps/wow-docs/app/component/checkbox/_components/GuidelineTab.tsx

@@ -0,0 +1,43 @@
+import Card from "@components/Card";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import Image from "next/image";
+
+const GuidelineTab = () => {
+  return (
+    <>
+      <Space height={48} />
+      <Text as="h2" typo="display2WebPage">
+        Guideline
+      </Text>
+      <Space height={40} />
+      <Text color="sub" typo="body1">
+        사용되는 텍스트의 길이 및 용도에 따라 컴포넌트 버전을 선택
+      </Text>
+      <Space height={20} />
+      <Card>
+        <Image
+          alt="사용되는 텍스트의 길이 및 용도에 따라 컴포넌트 버전을 선택"
+          height={90}
+          src="/component/checkbox/checkbox-guide-1.svg"
+          width={379}
+        />
+      </Card>
+      <Space height={40} />
+      <Text color="sub" typo="body1">
+        너비 규칙은 Horizontal에만 적용
+      </Text>
+      <Space height={20} />
+      <Card>
+        <Image
+          alt="너비 규칙은 Horizontal에만 적용"
+          height={140}
+          src="/component/checkbox/checkbox-guide-2.svg"
+          width={908}
+        />
+      </Card>
+    </>
+  );
+};
+
+export default GuidelineTab;

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

@@ -0,0 +1,49 @@
+import Card from "@components/Card";
+import ComponentDetailTabs from "@components/ComponentDetailTabs";
+import Space from "@components/Space";
+import Title from "@components/Text/Title";
+import { componentItems } from "@constants/pageData";
+import { css } from "@styled-system/css";
+import type { Metadata } from "next/types";
+import Checkbox from "wowds-ui/Checkbox";
+
+import ComponentTab from "@/component/checkbox/_components/ComponentTab";
+import GuidelineTab from "@/component/checkbox/_components/GuidelineTab";
+
+export const metadata: Metadata = {
+  title: "Checkbox",
+  description: "와우 디자인 시스템의 Checkbox 입니다.",
+};
+
+const CheckboxComponentPage = () => {
+  const CheckboxPageData = componentItems.find(
+    (item) => item.title === "Checkbox"
+  );
+  return (
+    <>
+      <Title
+        main={CheckboxPageData?.title ?? ""}
+        sub={CheckboxPageData?.description ?? ""}
+        variant="header"
+      />
+      <Space height={40} />
+      <Card className={cardStyle}>
+        <Checkbox checked label="Text" />
+        <Checkbox label="Text" />
+      </Card>
+      <Space height={92} />
+      <ComponentDetailTabs
+        componentTab={<ComponentTab />}
+        guidelineTab={<GuidelineTab />}
+      />
+      <Space height={92} />
+    </>
+  );
+};
+
+export default CheckboxComponentPage;
+
+const cardStyle = css({
+  alignItems: "end",
+  gap: "32px",
+});

apps/wow-docs/app/component/header/_components/ComponentTab.tsx

@@ -0,0 +1,57 @@
+import Card from "@components/Card";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import Header from "wowds-ui/Header";
+
+const ComponentTab = () => {
+  return (
+    <>
+      <Space height={48} />
+      <Text typo="display2WebPage">Component</Text>
+      <Space height={40} />
+      <Text typo="headingWebPage">Mobile Ver.</Text>
+      <Space height={20} />
+      <Card style={{ padding: "46px auto" }}>
+        <Flex
+          className={mobileHeaderContainerStyle}
+          direction="column"
+          gap={20}
+        >
+          <Header username="김홍익" variant="username" />
+          <Header variant="login" />
+          <Header variant="none" />
+        </Flex>
+      </Card>
+      <Space height={40} />
+      <Text typo="headingWebPage">PC Ver.</Text>
+      <Space height={20} />
+      <Card style={{ padding: "32px auto" }}>
+        <Flex className={pcHeaderContainerStyle} direction="column" gap={20}>
+          <Header username="김홍익" variant="username" />
+          <Header variant="login" />
+          <Header variant="none" />
+        </Flex>
+      </Card>
+    </>
+  );
+};
+
+export default ComponentTab;
+
+const mobileHeaderContainerStyle = css({
+  width: "390px",
+  "& > header": {
+    backgroundColor: "background",
+    height: "66px",
+  },
+});
+
+const pcHeaderContainerStyle = css({
+  width: "880px",
+  "& > header": {
+    backgroundColor: "background",
+    height: "43.2px",
+  },
+});