[Feat] 파운데이션, 컴포넌트, 그래픽 페이지 마크업

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

@@ -1,5 +1,66 @@
+import Space from "@components/Space";
+import Title from "@components/Text/Title";
+import { componentItems } from "@constants/data";
+import { css } from "@styled-system/css";
+import { Grid } from "@styled-system/jsx";
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "컴포넌트",
+  description: "와우 디자인 시스템의 컴포넌트 입니다.",
+};
+
 const ComponentPage = () => {
-  return <div>component</div>;
+  return (
+    <>
+      <Title
+        main="Component"
+        sub="컴포넌트는 기능을 수행할 수 있는 최소 단위로,일관된 UI와 효율적인 개발을 위해 사용합니다."
+        variant="header"
+      />
+      <Space height={68} />
+      <Grid gap="22px" gridTemplateColumns="repeat(3, 1fr)">
+        {componentItems.map((item) => (
+          <Link className={containerStyle} href={item.href} key={item.imageAlt}>
+            <Image
+              alt={item.imageAlt}
+              className={imageStyle}
+              height={200}
+              src={item.imageSrc}
+              width={314}
+            />
+            <Title
+              className={titleStyle}
+              main={item.title}
+              padding="20px"
+              sub={item.description}
+              variant="component"
+            />
+          </Link>
+        ))}
+      </Grid>
+      <Space height={127} />
+    </>
+  );
 };
 
 export default ComponentPage;
+
+const containerStyle = css({
+  display: "flex",
+  flexDirection: "column",
+});
+
+const titleStyle = css({
+  borderRadius: "0 0 8px 8px",
+  border: "1px solid",
+  borderColor: "outline",
+  borderTop: "none",
+  flex: "auto",
+});
+
+const imageStyle = css({
+  width: "100%",
+});

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

@@ -0,0 +1,92 @@
+"use client";
+
+import Space from "@components/Space";
+import Text from "@components/Text";
+import Title from "@components/Text/Title";
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import Image from "next/image";
+import Divider from "wowds-ui/Divider";
+
+const graphicExampleItems = [
+  {
+    imageAlt: "graphic-example-1",
+    imageSrc: "/graphic/graphic-example-1.png",
+  },
+  {
+    imageAlt: "graphic-example-2",
+    imageSrc: "/graphic/graphic-example-2.png",
+  },
+  {
+    imageAlt: "graphic-example-3",
+    imageSrc: "/graphic/graphic-example-3.png",
+  },
+  {
+    imageAlt: "graphic-example-4",
+    imageSrc: "/graphic/graphic-example-4.png",
+  },
+];
+const GraphicPage = () => {
+  return (
+    <>
+      <Title
+        main="Graphic"
+        sub="그래픽 이미지를 통해 와우 디자인 시스템의 브랜드 아이덴티티를 일관되게 전달합니다."
+        variant="header"
+      />
+      <Space height={68} />
+      <Text as="h2" typo="display2WebPage">
+        Theme
+      </Text>
+      <Space height={4} />
+      <Text as="h2" color="sub" typo="body1">
+        GDSC의 메인 색상을 활용하여 매트하고 깔끔한 조형들을 활용해요. <br />
+        언제든지 테마에 어울리는 그래픽을 제작하여 응용할 수 있어요.
+      </Text>
+      <Space height={40} />
+      <div className={containerStyle}>
+        <Image
+          alt={graphicExampleItems[0]?.imageAlt as string}
+          className={imageStyle}
+          height={572}
+          src={graphicExampleItems[0]?.imageSrc as string}
+          width={908}
+        />
+      </div>
+      <Space height={40} />
+      <Divider />
+      <Space height={40} />
+      <Text as="h2" typo="display2WebPage">
+        Example
+      </Text>
+      <Space height={40} />
+      <div className={containerStyle}>
+        <Flex flexDirection="column" gap="40px">
+          {graphicExampleItems.slice(1).map((item) => (
+            <Image
+              alt={item.imageAlt}
+              className={imageStyle}
+              height={572}
+              key={item.imageAlt}
+              src={item.imageSrc}
+              width={908}
+            />
+          ))}
+        </Flex>
+      </div>
+      <Space height={80} />
+    </>
+  );
+};
+
+export default GraphicPage;
+
+const containerStyle = css({
+  backgroundColor: "backgroundAlternative",
+  borderRadius: "sm",
+  padding: "32px 40px",
+});
+
+const imageStyle = css({
+  width: "100%",
+});

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

@@ -1,5 +1,57 @@
+import Space from "@components/Space";
+import Title from "@components/Text/Title";
+import { foundationItems } from "@constants/data";
+import { css } from "@styled-system/css";
+import { Flex, Grid } from "@styled-system/jsx";
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "파운데이션",
+  description: "와우 디자인 시스템의 파운데이션입니다.",
+};
+
 const FoundationPage = () => {
-  return <div>f</div>;
+  return (
+    <>
+      <Title
+        main="Foundation"
+        sub="파운데이션은 가장 기초적인 디자인 요소로, 일관된 디자인을 위해 다음의 규칙에 맞게 사용합니다"
+        variant="header"
+      />
+      <Space height={68} />
+      <Grid gap="22px" gridTemplateColumns="repeat(2, 1fr)">
+        {foundationItems.map((item) => (
+          <Link className={containerStyle} href={item.href} key={item.imageAlt}>
+            <Flex>
+              <Title
+                justifyContent="end"
+                main={item.title}
+                padding="20px"
+                sub={item.description}
+                variant="component"
+              />
+
+              <Image
+                alt={item.imageAlt}
+                height={200}
+                src={item.imageSrc}
+                width={200}
+              />
+            </Flex>
+          </Link>
+        ))}
+      </Grid>
+      <Space height={127} />
+    </>
+  );
 };
 
 export default FoundationPage;
+
+const containerStyle = css({
+  borderRadius: "8px",
+  border: "1px solid",
+  borderColor: "outline",
+});

apps/wow-docs/app/layout.tsx

@@ -5,8 +5,39 @@ import { styled } from "@styled-system/jsx";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "와우 디자인 시스템",
+  title: { default: "와우 디자인 시스템", template: "%s | 와우 디자인 시스템" },
   description: "GDSC Hongik 디자인 시스템",
+  verification: {
+    google: process.env.NEXT_PUBLIC_GOOGLE_CONSOLE_KEY,
+    other: {
+      "naver-site-verification":
+        process.env.NEXT_PUBLIC_NAVER_CONSOLE_KEY ?? "",
+    },
+  },
+  openGraph: {
+    title: "와우 디자인 시스템",
+    description: "GDSC Hongik 디자인 시스템",
+    images: ["/images/og-image.png"],
+    siteName: "와우 디자인 시스템",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "와우 디자인 시스템",
+    description: "GDSC Hongik 디자인 시스템",
+    images: ["/images/og-image.png"],
+  },
+  icons: {
+    icon: "/images/logo.svg",
+    apple: "/images/logo.svg",
+    other: [
+      {
+        rel: "icon",
+        type: "image/svg+xml",
+        url: "/images/logo.svg",
+      },
+    ],
+  },
 };
 
 const RootLayout = ({

apps/wow-docs/app/overview/page.tsx

@@ -26,12 +26,12 @@ const OverviewPage = () => {
         활용되는 가이드라인으로 구성함으로써 편의성과 확장성을 가지고 있어요.
       </Text>
       <Space height={60} />
-      <Link className={linkTextStyle} href={routePath.foundation}>
+      <Link className={linkTextStyle} href={routePath.foundation.base}>
         Foundation
         <RightArrow />
       </Link>
       <Space height={42} />
-      <Link className={linkTextStyle} href={routePath.component}>
+      <Link className={linkTextStyle} href={routePath.component.base}>
         Component
         <RightArrow />
       </Link>

apps/wow-docs/app/robots.ts

@@ -0,0 +1,13 @@
+import { PRDOUCTION_URL } from "@constants/routePath";
+import type { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+    },
+    sitemap: `${PRDOUCTION_URL}/sitemap.xml`,
+    host: `${PRDOUCTION_URL}`,
+  };
+}

apps/wow-docs/app/sitemap.ts

@@ -0,0 +1,27 @@
+import { PRDOUCTION_URL, routePath } from "@constants/routePath";
+import type { MetadataRoute } from "next";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const foundationRoutes = Object.values(routePath.foundation).map((path) => ({
+    url: `${PRDOUCTION_URL}${path}`,
+    lastModified: new Date().toISOString().split("T")[0],
+  }));
+
+  const componentRoutes = Object.values(routePath.component).map((path) => ({
+    url: `${PRDOUCTION_URL}${path}`,
+    lastModified: new Date().toISOString().split("T")[0],
+  }));
+
+  return [
+    {
+      url: `${PRDOUCTION_URL}`,
+      lastModified: new Date().toISOString().split("T")[0],
+    },
+    {
+      url: `${PRDOUCTION_URL}${routePath.overview}`,
+      lastModified: new Date().toISOString().split("T")[0],
+    },
+    ...foundationRoutes,
+    ...componentRoutes,
+  ];
+}

apps/wow-docs/components/NavItem.tsx

@@ -70,7 +70,7 @@ const NavItem = ({ href, icon: Icon, alt, label, children }: NavItemProps) => {
                       : "inactive",
                 })}
               >
-                <Text as="div" style={{ padding: "11px 36px" }} typo="body1">
+                <Text as="div" style={{ paddingLeft: "22px" }} typo="body1">
                   {child.label}
                 </Text>
               </Link>

apps/wow-docs/components/Sidebar.tsx

@@ -22,8 +22,10 @@ const Sidebar = ({ style }: SidebarProps) => {
       style={style}
     >
       <Space height={54} />
-      <GdscLogo />
-      <div className={titleTextStyle}>Wow Design System</div>
+      <div className={headerStyle}>
+        <GdscLogo />
+        <div className={titleTextStyle}>Wow Design System</div>
+      </div>
       <Space height={49} />
       <nav
         aria-label="nav menu"
@@ -53,10 +55,12 @@ const sidebarContainerStyle = css({
   width: "250px",
   minWidth: "250px",
   height: "100%",
-  paddingLeft: "20px",
   flexShrink: 0,
 });
 
+const headerStyle = css({
+  paddingLeft: "20px",
+});
 const titleTextStyle = css({
   color: "textBlack",
   fontFamily: "Product-Sans",
@@ -70,6 +74,5 @@ const navContainerStyle = css({
   padding: "8px 0px",
   display: "flex",
   flexDirection: "column",
-  minHeight: "calc(100vh - 98px)",
   justifyContent: "space-between",
 });

apps/wow-docs/components/Text/Title.tsx

@@ -1,16 +1,23 @@
 import Text from "@components/Text";
+import type { FlexProps } from "@styled-system/jsx";
 import { Flex } from "@styled-system/jsx";
+import type { ReactNode } from "react";
 
-interface TitleProps {
+interface TitleProps extends FlexProps {
   variant: "header" | "component";
   main: string;
-  sub: string;
+  sub: ReactNode;
 }
 
-const Title = ({ variant, main, sub }: TitleProps) => {
+const Title = ({ variant, main, sub, ...rest }: TitleProps) => {
   const isHeader = variant === "header";
   return (
-    <Flex display="flex" flexDirection="column" gap={isHeader ? "sm" : "xxs"}>
+    <Flex
+      display="flex"
+      flexDirection="column"
+      gap={isHeader ? "sm" : "xxs"}
+      {...rest}
+    >
       <Text
         as={isHeader ? "h1" : "h3"}
         typo={isHeader ? "displayWebPage" : "headingWebPage"}