diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index d96a5b1e..0ba764b9 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1 +1 @@
-* @ghdtjgus76 @eugene028 @hamo-o @SeieunYoo
\ No newline at end of file
+* @eugene028 @hamo-o @SeieunYoo @soulchicken
\ No newline at end of file
diff --git a/apps/wow-docs/app/component/page.tsx b/apps/wow-docs/app/component/page.tsx
index 3f9ab728..ebc4728c 100644
--- a/apps/wow-docs/app/component/page.tsx
+++ b/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
component
;
+ return (
+ <>
+
+
+
+ {componentItems.map((item) => (
+
+
+
+
+ ))}
+
+
+ >
+ );
};
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%",
+});
diff --git a/apps/wow-docs/app/constants/routePath.ts b/apps/wow-docs/app/constants/routePath.ts
deleted file mode 100644
index 35261338..00000000
--- a/apps/wow-docs/app/constants/routePath.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const routePath = {
- overview: "/overview",
- foundation: "/foundation",
- component: "/component",
-};
diff --git a/apps/wow-docs/app/foundation/graphic/page.tsx b/apps/wow-docs/app/foundation/graphic/page.tsx
new file mode 100644
index 00000000..ecb25e8c
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+ Theme
+
+
+
+ GDSC의 메인 색상을 활용하여 매트하고 깔끔한 조형들을 활용해요.
+ 언제든지 테마에 어울리는 그래픽을 제작하여 응용할 수 있어요.
+
+
+
+
+
+
+
+
+
+ Example
+
+
+
+
+ {graphicExampleItems.slice(1).map((item) => (
+
+ ))}
+
+
+
+ >
+ );
+};
+
+export default GraphicPage;
+
+const containerStyle = css({
+ backgroundColor: "backgroundAlternative",
+ borderRadius: "sm",
+ padding: "32px 40px",
+});
+
+const imageStyle = css({
+ width: "100%",
+});
diff --git a/apps/wow-docs/app/foundation/page.tsx b/apps/wow-docs/app/foundation/page.tsx
index 54e295a9..eb2367ff 100644
--- a/apps/wow-docs/app/foundation/page.tsx
+++ b/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 f
;
+ return (
+ <>
+
+
+
+ {foundationItems.map((item) => (
+
+
+
+
+
+
+
+ ))}
+
+
+ >
+ );
};
export default FoundationPage;
+
+const containerStyle = css({
+ borderRadius: "8px",
+ border: "1px solid",
+ borderColor: "outline",
+});
diff --git a/apps/wow-docs/app/globals.css b/apps/wow-docs/app/globals.css
index 70922bc7..a8fce23c 100644
--- a/apps/wow-docs/app/globals.css
+++ b/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;
+}
diff --git a/apps/wow-docs/app/layout.tsx b/apps/wow-docs/app/layout.tsx
index 6c1c4964..bdb343e5 100644
--- a/apps/wow-docs/app/layout.tsx
+++ b/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 (
-
+
{
활용되는 가이드라인으로 구성함으로써 편의성과 확장성을 가지고 있어요.
-
+
Foundation
-
+
Component
diff --git a/apps/wow-docs/app/robots.ts b/apps/wow-docs/app/robots.ts
new file mode 100644
index 00000000..ab1e0bcd
--- /dev/null
+++ b/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}`,
+ };
+}
diff --git a/apps/wow-docs/app/sitemap.ts b/apps/wow-docs/app/sitemap.ts
new file mode 100644
index 00000000..2a6600c3
--- /dev/null
+++ b/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,
+ ];
+}
diff --git a/apps/wow-docs/components/Card.tsx b/apps/wow-docs/components/Card.tsx
new file mode 100644
index 00000000..87c34364
--- /dev/null
+++ b/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 {children}
;
+};
+
+export default Card;
+
+const containerStyle = css({
+ backgroundColor: "backgroundAlternative",
+ borderRadius: "sm",
+ padding: "32px 40px",
+});
diff --git a/apps/wow-docs/components/NavItem.tsx b/apps/wow-docs/components/Navbar/NavItem.tsx
similarity index 97%
rename from apps/wow-docs/components/NavItem.tsx
rename to apps/wow-docs/components/Navbar/NavItem.tsx
index 8e2ac0c3..d05e7d31 100644
--- a/apps/wow-docs/components/NavItem.tsx
+++ b/apps/wow-docs/components/Navbar/NavItem.tsx
@@ -70,7 +70,7 @@ const NavItem = ({ href, icon: Icon, alt, label, children }: NavItemProps) => {
: "inactive",
})}
>
-
+
{child.label}
diff --git a/apps/wow-docs/components/Sidebar.tsx b/apps/wow-docs/components/Navbar/Navbar.tsx
similarity index 61%
rename from apps/wow-docs/components/Sidebar.tsx
rename to apps/wow-docs/components/Navbar/Navbar.tsx
index e647347b..40512fd2 100644
--- a/apps/wow-docs/components/Sidebar.tsx
+++ b/apps/wow-docs/components/Navbar/Navbar.tsx
@@ -1,29 +1,35 @@
"use client";
-import NavItem from "@components/NavItem";
+import NavItem from "@components/Navbar/NavItem";
import Space from "@components/Space";
+import { routePath } from "@constants/routePath";
import { css } from "@styled-system/css";
import { navMenu } from "constants/navMenu";
+import Link from "next/link";
import type { CSSProperties } from "react";
import { GdscLogo } from "wowds-icons";
/**
- * @description Sidebar 컴포넌트는 탭을 통해 페이지 내비게이션을 제공하는 컴포넌트입니다.
+ * @description Navbar 컴포넌트는 탭을 통해 페이지 네비게이션을 제공하는 컴포넌트입니다.
*/
-export interface SidebarProps {
+export interface NavbarProps {
style?: CSSProperties;
}
-const Sidebar = ({ style }: SidebarProps) => {
+const Navbar = ({ style }: NavbarProps) => {
return (