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

* feat: 파운데이션, 그래픽 페이지 마크업

* feat: 메타데이터 추가, 구글 콘솔 등록

* feat: url 에 대해 상수로 분리, sitemap, robot txt 추가

* feat: 페이지 마크업

* fix: routePath 에 변경 반영

* feat: 코드리뷰 반영
- scroll bar 추가
- 사이드바에 border 추가

* feat: 코드오너 수정, Card 컴포넌트 분리

* feat: 리뷰 반영
- 네비게이션 디자인 수정
- 메타데이터 수정
- Sidebar -> Navbar 로 워딩 변경

* feat: 그래픽 페이지에도 메타데이터 추가
- data -> pageData 로 파일명 변경

.github/CODEOWNERS

@@ -1 +1 @@
-* @ghdtjgus76 @eugene028 @hamo-o @SeieunYoo
+* @eugene028 @hamo-o @SeieunYoo @soulchicken

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/pageData";
+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: "Component",
+  description: "와우 디자인 시스템의 component 입니다.",
+};
+
 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,97 @@
+import Card from "@components/Card";
+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 type { Metadata } from "next/types";
+import Divider from "wowds-ui/Divider";
+
+export const metadata: Metadata = {
+  title: "Graphic",
+  description: "와우 디자인 시스템의 Graphic 입니다.",
+};
+
+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} />
+      <Card>
+        <Image
+          alt={graphicExampleItems[0]?.imageAlt as string}
+          className={imageStyle}
+          height={572}
+          src={graphicExampleItems[0]?.imageSrc as string}
+          width={908}
+        />
+      </Card>
+      <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/pageData";
+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: "Foundation",
+  description: "와우 디자인 시스템의 foundation 입니다.",
+};
+
 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/globals.css

@@ -96,3 +96,12 @@ body {
   flex-direction: row;
   min-height: 100vh;
 }
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1;
+  border-radius: 10px;
+}

apps/wow-docs/app/layout.tsx

@@ -1,12 +1,43 @@
 import "@/globals.css";
 
-import Sidebar from "@components/Sidebar";
+import Navbar from "@components/Navbar/Navbar";
 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 = ({
@@ -17,9 +48,10 @@ const RootLayout = ({
   return (
     <html lang="en">
       <body>
-        <Sidebar />
+        <Navbar />
         <styled.main
           height="100vh"
+          marginLeft="250px"
           padding="70px 102px 0 101px"
           position="relative"
           width="100vw"

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/Card.tsx

@@ -0,0 +1,15 @@
+import { css } from "@styled-system/css";
+import type { PropsWithChildren } from "react";
+
+interface CardProps extends PropsWithChildren {}
+const Card = ({ children }: CardProps) => {
+  return <div className={containerStyle}>{children}</div>;
+};
+
+export default Card;
+
+const containerStyle = css({
+  backgroundColor: "backgroundAlternative",
+  borderRadius: "sm",
+  padding: "32px 40px",
+});

apps/wow-docs/components/NavItem.tsx → apps/wow-docs/components/Navbar/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>