[Feat] wow-docs 초기 세팅 (#178)

* fix: action/checkout 버전업

* feat: 초기 설정 및 overview 페이지 마크업

* feat: 필요없는 파일 삭제, panda preset 에 textStyle 추가

* feat: build-docs 액션 추가

* feat: 타이포 추가

* feat: 액션 삭제

* feat: styled-system 반영

* feat: wow-ui에도 반영

* chore: changset 추가

* feat: title 컴포넌트 생성 및 디자인 수정

* fix: font-family 명 수정

* fix: 페이지 라우팅 경로 수정

* feat: components 절대경로 추가, Text 컴포넌트 위치 변경

* feat: 사이드 바 완성

* feat: 네비게이션 바

.changeset/smart-radios-exist.md

@@ -0,0 +1,6 @@
+---
+"wowds-tokens": patch
+"wowds-theme": patch
+---
+
+header1, header2 토큰을 추가합니다.

.github/workflows/a11y-test.yml

@@ -11,7 +11,7 @@ jobs:
   accessibility:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
@@ -21,7 +21,7 @@ jobs:
           node-version: 20
 
       - name: Cache Dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ~/.pnpm-store
           key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}

.github/workflows/bundling-size.yml

@@ -25,6 +25,9 @@ jobs:
           version: 8
           run_install: false
 
+      - name: Install Dependency
+        run: pnpm install --no-frozen-lockfile
+
       - name: Check Sizes
         uses: preactjs/[email protected]
         with:

.github/workflows/deploy-chromatic.yml

@@ -11,7 +11,7 @@ jobs:
   chromatic-deployment:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
@@ -21,7 +21,7 @@ jobs:
           node-version: 20.x
 
       - name: Cache Dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ~/.pnpm-store
           key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}

.github/workflows/release.yml

@@ -21,7 +21,7 @@ jobs:
           node-version: 20.x
 
       - name: Cache Dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ~/.pnpm-store
           key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}

.github/workflows/test.yml

@@ -11,7 +11,7 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
@@ -21,7 +21,7 @@ jobs:
           node-version: 20
 
       - name: Cache Dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ~/.pnpm-store
           key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}

apps/wow-docs/.eslintrc.js

@@ -0,0 +1,135 @@
+const { resolve } = require("node:path");
+
+const project = resolve(process.cwd(), "tsconfig.json");
+/** @type {import("eslint").Linter.Config} */
+
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project,
+  },
+  extends: [
+    "plugin:@next/next/recommended",
+    "eslint:recommended",
+    "plugin:storybook/recommended",
+    "plugin:import/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:import/typescript",
+    "plugin:jsx-a11y/recommended",
+    "plugin:prettier/recommended",
+  ],
+  plugins: [
+    "@typescript-eslint/eslint-plugin",
+    "react",
+    "only-warn",
+    "simple-import-sort",
+  ],
+  globals: {
+    React: true,
+    JSX: true,
+    console: true,
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+    commonjs: true,
+  },
+  rules: {
+    "no-unused-vars": "error",
+    eqeqeq: [
+      "error",
+      "always",
+      {
+        null: "ignore",
+      },
+    ],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error",
+    "react/function-component-definition": [
+      "error",
+      {
+        namedComponents: "arrow-function",
+      },
+    ],
+    "react/jsx-curly-brace-presence": [
+      "error",
+      {
+        props: "never",
+        children: "never",
+      },
+    ],
+    "react/jsx-sort-props": [
+      "error",
+      {
+        callbacksLast: true,
+        multiline: "last",
+        shorthandFirst: true,
+      },
+    ],
+    "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        format: ["camelCase", "UPPER_CASE", "PascalCase"],
+        selector: "variable",
+        leadingUnderscore: "allow",
+      },
+      {
+        format: ["camelCase", "PascalCase"],
+        selector: "function",
+      },
+      {
+        format: ["PascalCase"],
+        selector: "interface",
+      },
+      {
+        format: ["PascalCase"],
+        selector: "typeAlias",
+      },
+    ],
+    "@typescript-eslint/no-empty-function": "warn",
+    "import/no-duplicates": "error",
+    "import/namespace": [
+      "error",
+      {
+        allowComputed: true,
+      },
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        endOfLine: "auto",
+      },
+    ],
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+  },
+
+  settings: {
+    "import/ignore": ["^@styled-system/css/css"],
+    "import/resolver": {
+      typescript: { project },
+    },
+    react: {
+      version: "detect",
+    },
+  },
+
+  ignorePatterns: [
+    ".*.js",
+    "node_modules/",
+    "dist/",
+    "styled-system/",
+    "panda.config.ts",
+    "rollup.config.js",
+    "postcss.config.cjs",
+    "jest.config.ts",
+    "jest.setup.ts",
+    "coverage/",
+  ],
+
+  env: {
+    jest: true,
+  },
+};

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

@@ -0,0 +1,5 @@
+const ComponentPage = () => {
+  return <div>component</div>;
+};
+
+export default ComponentPage;

apps/wow-docs/app/constants/routePath.ts

@@ -0,0 +1,5 @@
+export const routePath = {
+  overview: "/overview",
+  foundation: "/foundation",
+  component: "/component",
+};

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

@@ -0,0 +1,5 @@
+const FoundationPage = () => {
+  return <div>f</div>;
+};
+
+export default FoundationPage;

apps/wow-docs/app/globals.css

@@ -1,2 +1,98 @@
 @layer reset, base, tokens, recipes, utilities;
 @import url("wowds-ui/styles.css");
+
+@font-face {
+  font-family: "SUIT";
+  font-weight: 200;
+  font-display: swap;
+  src:
+    url("./fonts/SUIT-Thin.woff2") format("woff2"),
+    url("./fonts/SUIT-Thin.woff") format("woff");
+}
+
+@font-face {
+  font-family: "SUIT";
+  font-weight: 300;
+  font-display: swap;
+  src:
+    url("./fonts/SUIT-ExtraLight.woff2") format("woff2"),
+    url("./fonts/SUIT-ExtraLight.woff") format("woff");
+}
+
+@font-face {
+  font-family: "SUIT";
+  font-weight: 400;
+  font-display: swap;
+  src:
+    url("./fonts/SUIT-Regular.woff2") format("woff2"),
+    url("./fonts/SUIT-Regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: "SUIT";
+  font-weight: 500;
+  font-display: swap;
+  src:
+    url("./fonts/SUIT-Medium.woff2") format("woff2"),
+    url("./fonts/SUIT-Medium.woff") format("woff");
+}
+
+@font-face {
+  font-family: "SUIT";
+  font-weight: 600;
+  font-display: swap;
+  src:
+    url("./fonts/SUIT-SemiBold.woff2") format("woff2"),
+    url("./fonts/SUIT-SemiBold.woff") format("woff");
+}
+
+@font-face {
+  font-family: "SUIT";
+  font-weight: 700;
+  font-display: swap;
+  src:
+    url("./fonts/SUIT-Bold.woff2") format("woff2"),
+    url("./fonts/SUIT-Bold.woff") format("woff");
+}
+
+@font-face {
+  font-family: "SUIT";
+  font-weight: 800;
+  font-display: swap;
+  src:
+    url("./fonts/SUIT-ExtraBold.woff2") format("woff2"),
+    url("./fonts/SUIT-ExtraBold.woff") format("woff");
+}
+
+@font-face {
+  font-family: "SUIT";
+  font-weight: 900;
+  font-display: swap;
+  src:
+    url("./fonts/SUIT-Heavy.woff2") format("woff2"),
+    url("./fonts/SUIT-Heavy.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Product-Sans";
+  font-weight: 400;
+  font-display: swap;
+  src:
+    url("./fonts/ProductSans-Regular.woff2") format("woff2"),
+    url("./fonts/ProductSans-Regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Product-Sans";
+  font-weight: 700;
+  font-display: swap;
+  src:
+    url("./fonts/ProductSans-Bold.woff2") format("woff2"),
+    url("./fonts/ProductSans-Bold.woff") format("woff");
+}
+
+body {
+  display: flex;
+  flex-direction: row;
+  min-height: 100vh;
+}

apps/wow-docs/app/layout.tsx

@@ -1,14 +1,12 @@
 import "@/globals.css";
 
-import Sidebar from "components/Sidebar";
+import Sidebar from "@components/Sidebar";
+import { styled } from "@styled-system/jsx";
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-
-const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Turborepo",
-  description: "Generated by create turbo",
+  title: "와우 디자인 시스템",
+  description: "GDSC Hongik 디자인 시스템",
 };
 
 const RootLayout = ({
@@ -17,10 +15,17 @@ const RootLayout = ({
   children: React.ReactNode;
 }): JSX.Element => {
   return (
-    <html lang="ko">
-      <body className={inter.className}>
+    <html lang="en">
+      <body>
         <Sidebar />
-        {children}
+        <styled.main
+          height="100vh"
+          padding="70px 102px 0 101px"
+          position="relative"
+          width="100vw"
+        >
+          {children}
+        </styled.main>
       </body>
     </html>
   );

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

@@ -0,0 +1,16 @@
+import { styled } from "@styled-system/jsx";
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <styled.main
+      backgroundColor="primary"
+      height="100vh"
+      margin="-70px -102px 0 -101px"
+      padding="70px 102px 0 101px"
+    >
+      {children}
+    </styled.main>
+  );
+};
+
+export default Layout;