From 9703f085d1f26fc9c3f4d7e12136f0c74058f101 Mon Sep 17 00:00:00 2001
From: SeieunYoo <101736358+SeieunYoo@users.noreply.github.com>
Date: Sun, 22 Dec 2024 21:27:12 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20=ED=8C=8C=EC=9A=B4=EB=8D=B0=EC=9D=B4?=
=?UTF-8?q?=EC=85=98,=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8,=20=EA=B7=B8?=
=?UTF-8?q?=EB=9E=98=ED=94=BD=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A7=88?=
=?UTF-8?q?=ED=81=AC=EC=97=85=20(#182)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat: 파운데이션, 그래픽 페이지 마크업
* feat: 메타데이터 추가, 구글 콘솔 등록
* feat: url 에 대해 상수로 분리, sitemap, robot txt 추가
* feat: 페이지 마크업
* fix: routePath 에 변경 반영
* feat: 코드리뷰 반영
- scroll bar 추가
- 사이드바에 border 추가
* feat: 코드오너 수정, Card 컴포넌트 분리
* feat: 리뷰 반영
- 네비게이션 디자인 수정
- 메타데이터 수정
- Sidebar -> Navbar 로 워딩 변경
* feat: 그래픽 페이지에도 메타데이터 추가
- data -> pageData 로 파일명 변경
---
.github/CODEOWNERS | 2 +-
apps/wow-docs/app/component/page.tsx | 63 +++++-
apps/wow-docs/app/constants/routePath.ts | 5 -
apps/wow-docs/app/foundation/graphic/page.tsx | 97 +++++++++
apps/wow-docs/app/foundation/page.tsx | 54 ++++-
apps/wow-docs/app/globals.css | 9 +
apps/wow-docs/app/layout.tsx | 38 +++-
apps/wow-docs/app/overview/page.tsx | 4 +-
apps/wow-docs/app/robots.ts | 13 ++
apps/wow-docs/app/sitemap.ts | 27 +++
apps/wow-docs/components/Card.tsx | 15 ++
.../components/{ => Navbar}/NavItem.tsx | 2 +-
.../{Sidebar.tsx => Navbar/Navbar.tsx} | 36 +++-
apps/wow-docs/components/Text/Title.tsx | 15 +-
apps/wow-docs/constants/navMenu.ts | 65 +++---
apps/wow-docs/constants/pageData.ts | 198 ++++++++++++++++++
apps/wow-docs/constants/routePath.ts | 100 ++++++++-
.../wow-docs/public/component/actionsheet.png | Bin 0 -> 9499 bytes
apps/wow-docs/public/component/avatar.png | Bin 0 -> 17666 bytes
apps/wow-docs/public/component/box.png | Bin 0 -> 9285 bytes
apps/wow-docs/public/component/button.png | Bin 0 -> 1433 bytes
apps/wow-docs/public/component/checkbox.png | Bin 0 -> 12090 bytes
apps/wow-docs/public/component/chip.png | Bin 0 -> 17634 bytes
apps/wow-docs/public/component/divider.png | Bin 0 -> 8056 bytes
apps/wow-docs/public/component/dropdown.png | Bin 0 -> 11766 bytes
apps/wow-docs/public/component/header.png | Bin 0 -> 10948 bytes
apps/wow-docs/public/component/pagination.png | Bin 0 -> 14705 bytes
apps/wow-docs/public/component/picker.png | Bin 0 -> 11302 bytes
.../wow-docs/public/component/radiobutton.png | Bin 0 -> 12885 bytes
apps/wow-docs/public/component/searchbar.png | Bin 0 -> 11074 bytes
apps/wow-docs/public/component/stepper.png | Bin 0 -> 17913 bytes
apps/wow-docs/public/component/switch.png | Bin 0 -> 15232 bytes
apps/wow-docs/public/component/tabbar.png | Bin 0 -> 7965 bytes
apps/wow-docs/public/component/table.png | Bin 0 -> 8533 bytes
apps/wow-docs/public/component/tag.png | Bin 0 -> 9719 bytes
apps/wow-docs/public/component/toast.png | Bin 0 -> 9430 bytes
.../public/foundation/foundation-color.png | Bin 0 -> 13979 bytes
.../public/foundation/foundation-graphic.png | Bin 0 -> 28205 bytes
.../public/foundation/foundation-grid.png | Bin 0 -> 9873 bytes
.../public/foundation/foundation-icon.png | Bin 0 -> 19866 bytes
.../public/foundation/foundation-spacing.png | Bin 0 -> 10285 bytes
.../foundation/foundation-typography.png | Bin 0 -> 12395 bytes
.../public/graphic/graphic-example-1.png | Bin 0 -> 853075 bytes
.../public/graphic/graphic-example-2.png | Bin 0 -> 2002545 bytes
.../public/graphic/graphic-example-3.png | Bin 0 -> 168268 bytes
.../public/graphic/graphic-example-4.png | Bin 0 -> 917236 bytes
apps/wow-docs/public/images/logo.svg | 9 +
apps/wow-docs/public/images/og-image.png | Bin 0 -> 2725207 bytes
packages/wow-tokens/src/typography.ts | 4 +-
49 files changed, 691 insertions(+), 65 deletions(-)
delete mode 100644 apps/wow-docs/app/constants/routePath.ts
create mode 100644 apps/wow-docs/app/foundation/graphic/page.tsx
create mode 100644 apps/wow-docs/app/robots.ts
create mode 100644 apps/wow-docs/app/sitemap.ts
create mode 100644 apps/wow-docs/components/Card.tsx
rename apps/wow-docs/components/{ => Navbar}/NavItem.tsx (97%)
rename apps/wow-docs/components/{Sidebar.tsx => Navbar/Navbar.tsx} (61%)
create mode 100644 apps/wow-docs/constants/pageData.ts
create mode 100644 apps/wow-docs/public/component/actionsheet.png
create mode 100644 apps/wow-docs/public/component/avatar.png
create mode 100644 apps/wow-docs/public/component/box.png
create mode 100644 apps/wow-docs/public/component/button.png
create mode 100644 apps/wow-docs/public/component/checkbox.png
create mode 100644 apps/wow-docs/public/component/chip.png
create mode 100644 apps/wow-docs/public/component/divider.png
create mode 100644 apps/wow-docs/public/component/dropdown.png
create mode 100644 apps/wow-docs/public/component/header.png
create mode 100644 apps/wow-docs/public/component/pagination.png
create mode 100644 apps/wow-docs/public/component/picker.png
create mode 100644 apps/wow-docs/public/component/radiobutton.png
create mode 100644 apps/wow-docs/public/component/searchbar.png
create mode 100644 apps/wow-docs/public/component/stepper.png
create mode 100644 apps/wow-docs/public/component/switch.png
create mode 100644 apps/wow-docs/public/component/tabbar.png
create mode 100644 apps/wow-docs/public/component/table.png
create mode 100644 apps/wow-docs/public/component/tag.png
create mode 100644 apps/wow-docs/public/component/toast.png
create mode 100644 apps/wow-docs/public/foundation/foundation-color.png
create mode 100644 apps/wow-docs/public/foundation/foundation-graphic.png
create mode 100644 apps/wow-docs/public/foundation/foundation-grid.png
create mode 100644 apps/wow-docs/public/foundation/foundation-icon.png
create mode 100644 apps/wow-docs/public/foundation/foundation-spacing.png
create mode 100644 apps/wow-docs/public/foundation/foundation-typography.png
create mode 100644 apps/wow-docs/public/graphic/graphic-example-1.png
create mode 100644 apps/wow-docs/public/graphic/graphic-example-2.png
create mode 100644 apps/wow-docs/public/graphic/graphic-example-3.png
create mode 100644 apps/wow-docs/public/graphic/graphic-example-4.png
create mode 100644 apps/wow-docs/public/images/logo.svg
create mode 100644 apps/wow-docs/public/images/og-image.png
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 (