[Feature] Grid 페이지, Button 페이지 마크업 (#184)

* feat: grid 페이지 이미지 추가 * design: 카드 정렬 스타일 * feat: grid 페이지 마크업 * feat: ImageCards 컴포넌트 분리 * feat: button 페이지 이미지 추가 * feat: button 페이지 기본 마크업 * feat: button 페이지 Guideline 탭 마크업 * feat: Card 컴포넌트 컨텐츠 추가할 수 있도록 * feat: Card 컴포넌트 컨텐츠 스타일 추가할 수 있도록 * feat: button 페이지 Component 탭 S size 마크업 * feat: button 페이지 Component 탭 L size 마크업 * feat: ComponentDetailTabs 분리 * fix: Item 타입sub 옵셔널 전환 * fix: 컴포넌트 탭 텍스트 수정 * style: Item 객체 네이밍 변경 * fix: Component 탭 카드 반응형 적용되도록 * feat: Card 컴포넌트 className prop 추가 * rename: data 상수들 따로 관리하기 * feat: sub 태그 ReactNode 타입 추가 * fix: 버튼 key 설정
GDSC-Hongik · Jan 12, 2025 · cf57561 · cf57561
1 parent 9703f08
commit cf57561
Show file tree

Hide file tree

Showing 24 changed files with 504 additions and 5 deletions.
diff --git a/apps/wow-docs/app/component/button/_component/ComponentTab.tsx b/apps/wow-docs/app/component/button/_component/ComponentTab.tsx
@@ -0,0 +1,119 @@
+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 = {
+  key: number;
+  variant?: "outline" | "solid" | "sub";
+  disabled?: boolean;
+  "data-hover"?: boolean;
+  "data-active"?: boolean;
+};
+
+const largeButtons: ButtonProps[] = [
+  { 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: 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">
+        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;
diff --git a/apps/wow-docs/app/component/button/_component/GuidelineTab.tsx b/apps/wow-docs/app/component/button/_component/GuidelineTab.tsx
@@ -0,0 +1,51 @@
+import ImageCards from "@components/ImageCards";
+import Space from "@components/Space";
+import Text from "@components/Text";
+import Divider from "wowds-ui/Divider";
+
+import {
+  combinationButtonItems,
+  widthButtonItems,
+  withIconButtonItems,
+  withSubjectButtonItems,
+} from "../../../../constants/store";
+
+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;
diff --git a/apps/wow-docs/app/component/button/page.tsx b/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;
diff --git a/apps/wow-docs/app/foundation/grid/page.tsx b/apps/wow-docs/app/foundation/grid/page.tsx
@@ -0,0 +1,40 @@
+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 GridPage = () => {
+  return (
+    <>
+      <Title
+        main="Grid"
+        sub="그리드는 페이지의 일관성과 시각적 질서를 유지하기 위해 사용합니다."
+        variant="header"
+      />
+      <Space height={68} />
+      <Text as="h2" typo="display2WebPage">
+        Layout Grid
+      </Text>
+      <Space height={40} />
+      <ImageCards items={gridItems} />
+      <Divider />
+      <Space height={40} />
+      <Text as="h2" typo="display2WebPage">
+        Breakpoint
+      </Text>
+      <Space height={40} />
+      <ImageCards items={breakpointItems} />
+    </>
+  );
+};
+
+export default GridPage;
diff --git a/apps/wow-docs/components/Card.tsx b/apps/wow-docs/components/Card.tsx
@@ -1,9 +1,36 @@
-import { css } from "@styled-system/css";
-import type { PropsWithChildren } from "react";
+import { css, cx } from "@styled-system/css";
+import type { CSSProperties, PropsWithChildren } from "react";
 
-interface CardProps extends PropsWithChildren {}
-const Card = ({ children }: CardProps) => {
-  return <div className={containerStyle}>{children}</div>;
+interface CardProps extends PropsWithChildren {
+  isBackground?: boolean;
+  style?: CSSProperties;
+  contentStyle?: CSSProperties;
+  className?: string;
+}
+
+const Card = ({
+  children,
+  isBackground = false,
+  className,
+  ...props
+}: CardProps) => {
+  return (
+    <div
+      className={cx(containerStyle, className)}
+      {...(props.style && { style: props.style })}
+    >
+      {isBackground ? (
+        <div
+          className={contentStyle}
+          {...(props.contentStyle && { style: props.contentStyle })}
+        >
+          {children}
+        </div>
+      ) : (
+        children
+      )}
+    </div>
+  );
 };
 
 export default Card;
@@ -12,4 +39,20 @@ const containerStyle = css({
   backgroundColor: "backgroundAlternative",
   borderRadius: "sm",
   padding: "32px 40px",
+
+  display: "flex",
+  justifyContent: "center",
+});
+
+const contentStyle = css({
+  width: "100%",
+  height: "100%",
+  background: "white",
+
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+
+  paddingY: 20,
+  paddingX: 114,
 });
diff --git a/apps/wow-docs/components/ComponentDetailTabs.tsx b/apps/wow-docs/components/ComponentDetailTabs.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import type { ReactNode } from "react";
+import Tabs from "wowds-ui/Tabs";
+import TabsContent from "wowds-ui/TabsContent";
+import TabsItem from "wowds-ui/TabsItem";
+import TabsList from "wowds-ui/TabsList";
+
+interface ComponentTabsProps {
+  componentTab?: ReactNode;
+  guidelineTab?: ReactNode;
+  codeTab?: ReactNode;
+}
+
+const ComponentDetailTabs = ({
+  componentTab,
+  guidelineTab,
+  codeTab,
+}: ComponentTabsProps) => {
+  return (
+    <Tabs defaultValue="component">
+      <TabsList>
+        <TabsItem value="component">Component</TabsItem>
+        <TabsItem value="guideline">Guideline</TabsItem>
+        <TabsItem value="code">Code</TabsItem>
+      </TabsList>
+      <TabsContent value="component">{componentTab}</TabsContent>
+      <TabsContent value="guideline">{guidelineTab}</TabsContent>
+      <TabsContent value="code">{codeTab}</TabsContent>
+    </Tabs>
+  );
+};
+
+export default ComponentDetailTabs;
diff --git a/apps/wow-docs/components/ImageCards.tsx b/apps/wow-docs/components/ImageCards.tsx
@@ -0,0 +1,40 @@
+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 | ReactNode;
+  imageAlt: string;
+  imageSrc: string;
+  imageWidth: number;
+  imageHeight: number;
+};
+
+interface ImageCardProps {
+  items: Item[];
+}
+
+const ImageCards = ({ items }: ImageCardProps) => {
+  return items.map(
+    ({ main, sub, imageAlt, imageSrc, imageWidth, imageHeight }) => (
+      <>
+        <Title main={main} sub={sub} variant="component" />
+        <Space height={20} />
+        <Card>
+          <Image
+            alt={imageAlt}
+            height={imageHeight}
+            src={imageSrc}
+            width={imageWidth}
+          />
+        </Card>
+        <Space height={40} />
+      </>
+    )
+  );
+};
+
+export default ImageCards;