[Feat] Docs 작업내역 (#176)

* build: ➕ @babel/preset-react dev dependencies 추가 * fix: 🐛 ischecked non-boolean 속성 타입 오류 수정 * chore: 🍱 add folder, home icon * docs: 📝 update wow-icons changelog * chore: sidebar temp * Update packages/wow-ui/src/components/Chip/index.tsx Co-authored-by: SeieunYoo <[email protected]> * docs: 📝 update changelog * chore: update aside area-label * fix: 🐛 update html lang, hydration error * chore: wow-icon changelog 쪽 원복 --------- Co-authored-by: SeieunYoo <[email protected]> Co-authored-by: SeieunYoo <[email protected]>
GDSC-Hongik · Nov 24, 2024 · 6e86da8 · 6e86da8
1 parent b3bd675
commit 6e86da8
Show file tree

Hide file tree

Showing 12 changed files with 10,492 additions and 8,173 deletions.
diff --git a/.changeset/odd-baboons-hide.md b/.changeset/odd-baboons-hide.md
@@ -0,0 +1,5 @@
+---
+"wowds-icons": patch
+---
+
+Home, Folder 컴포넌트를 추가합니다.
diff --git a/apps/wow-docs/app/layout.tsx b/apps/wow-docs/app/layout.tsx
@@ -1,5 +1,6 @@
 import "@/globals.css";
 
+import Sidebar from "components/Sidebar";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 
@@ -16,8 +17,11 @@ const RootLayout = ({
   children: React.ReactNode;
 }): JSX.Element => {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html lang="ko">
+      <body className={inter.className}>
+        <Sidebar />
+        {children}
+      </body>
     </html>
   );
 };

diff --git a/apps/wow-docs/components/Sidebar.tsx b/apps/wow-docs/components/Sidebar.tsx
@@ -0,0 +1,40 @@
+import { css } from "@styled-system/css";
+import type { CSSProperties } from "react";
+import { GdscLogo } from "wowds-icons";
+
+/**
+ * @description Sidebar 컴포넌트는 탭을 통해 페이지 내비게이션을 제공하는 컴포넌트입니다.
+ */
+export interface SidebarProps {
+  style?: CSSProperties;
+}
+
+const Sidebar = ({ style }: SidebarProps) => {
+  return (
+    <aside
+      aria-label="navigation bar"
+      className={sidebarContainerStyle}
+      style={style}
+    >
+      <GdscLogo />
+      <div className={titleTextStyle}>Wow Design System</div>
+    </aside>
+  );
+};
+
+export default Sidebar;
+
+const sidebarContainerStyle = css({
+  width: 250,
+  height: "100%",
+  flexShrink: 0,
+});
+
+const titleTextStyle = css({
+  color: "textBlack",
+  fontFamily: "Product Sans",
+  fontSize: "20px",
+  fontWeight: 700,
+  lineHeight: "130%",
+  letterSpacing: "-0.2px",
+});
diff --git a/apps/wow-docs/constants/navMenu.ts b/apps/wow-docs/constants/navMenu.ts
@@ -0,0 +1,53 @@
+import { Folder, Home } from "wowds-icons";
+export const navMenu = [
+  {
+    href: "/overview",
+    icon: Home,
+    alt: "home icon",
+    label: "Overview",
+  },
+  {
+    href: "/foundation",
+    icon: Folder,
+    alt: "folder icon",
+    label: "Foundation",
+    children: [
+      { href: "/color", label: "Color" },
+      { href: "/typography", label: "Typography" },
+      { href: "/grid", label: "Grid" },
+      { href: "/spacing", label: "Spacing" },
+      { href: "/icon", label: "Icon" },
+      { href: "/graphic", label: "Graphic" },
+    ],
+  },
+  {
+    href: "/component",
+    icon: Folder,
+    alt: "folder icon",
+    label: "Component",
+    children: [
+      { label: "Avatar", href: "/avatar" },
+      { label: "Box", href: "/box" },
+      { label: "Button", href: "/button" },
+      { label: "Checkbox", href: "/checkbox" },
+      { label: "Chip", href: "/chip" },
+      { label: "Divider", href: "/divider" },
+      { label: "DropDown", href: "/dropdown" },
+      { label: "Header", href: "/header" },
+      { label: "MultiGroup", href: "/multigroup" },
+      { label: "Pagination", href: "/pagination" },
+      { label: "Picker", href: "/picker" },
+      { label: "RadioGroup", href: "/radiogroup" },
+      { label: "SearchBar", href: "/searchbar" },
+      { label: "Spinner", href: "/spinner" },
+      { label: "Stepper", href: "/stepper" },
+      { label: "Switch", href: "/switch" },
+      { label: "Table", href: "/table" },
+      { label: "Tabs", href: "/tabs" },
+      { label: "Tag", href: "/tag" },
+      { label: "TextButton", href: "/textbutton" },
+      { label: "TextField", href: "/textfield" },
+      { label: "Toast", href: "/toast" },
+    ],
+  },
+];
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.24.1",
     "@changesets/changelog-git": "^0.2.0",
     "@changesets/cli": "^2.27.1",
@@ -72,20 +73,20 @@
     "jest-dom": "link:@types/testing-library/jest-dom",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.2",
-    "prettier": "^3.2.5",
     "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
     "rollup": "^4.17.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "shared-config": "workspace:^",
-    "wowds-theme": "workspace:^",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "tsc-alias": "^1.8.10",
     "tsx": "^4.11.0",
     "turbo": "latest",
     "typescript": "^5.3.3",
+    "wowds-theme": "workspace:^",
     "wowds-tokens": "workspace:^"
   },
   "packageManager": "[email protected]",

diff --git a/packages/wow-icons/src/component/Folder.tsx b/packages/wow-icons/src/component/Folder.tsx
@@ -0,0 +1,46 @@
+import { forwardRef } from "react";
+import { color } from "wowds-tokens";
+
+import type { IconProps } from "@/types/Icon.ts";
+
+const Folder = forwardRef<SVGSVGElement, IconProps>(
+  (
+    {
+      className,
+      width = "20",
+      height = "20",
+      viewBox = "0 0 20 20",
+      stroke = "white",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <svg
+        aria-label="folder icon"
+        className={className}
+        fill="none"
+        height={height}
+        ref={ref}
+        viewBox={viewBox}
+        width={width}
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <path
+          d="M10.802 5.37344L10.9769 5.58333H11.2502H17.7502V16.9167H2.25016V3.08333L8.89361 3.08333L10.802 5.37344Z"
+          stroke={color[stroke]}
+          strokeWidth="1.16667"
+        />
+        <path
+          d="M8.33333 12.4999C8.33333 13.4204 7.58714 14.1666 6.66667 14.1666C5.74619 14.1666 5 13.4204 5 12.4999C5 11.5794 5.74619 10.8333 6.66667 10.8333C7.58714 10.8333 8.33333 11.5794 8.33333 12.4999Z"
+          stroke={color[stroke]}
+          strokeWidth="1.16667"
+        />
+      </svg>
+    );
+  }
+);
+
+Folder.displayName = "Folder";
+export default Folder;
diff --git a/packages/wow-icons/src/component/Home.tsx b/packages/wow-icons/src/component/Home.tsx
@@ -0,0 +1,57 @@
+import { forwardRef } from "react";
+import { color } from "wowds-tokens";
+
+import type { IconProps } from "@/types/Icon.ts";
+
+const Home = forwardRef<SVGSVGElement, IconProps>(
+  (
+    {
+      className,
+      width = "20",
+      height = "20",
+      viewBox = "0 0 20 20",
+      stroke = "white",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <svg
+        aria-label="home icon"
+        className={className}
+        fill="none"
+        height={height}
+        ref={ref}
+        viewBox={viewBox}
+        width={width}
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <g id="&#237;&#153;&#136;">
+          <path
+            d="M16.6665 7.91675V17.7399H3.33317V7.91675"
+            id="Vector 497"
+            stroke={color[stroke]}
+            strokeWidth="1.16667"
+          />
+          <path
+            d="M2.08317 8.75L9.99984 2.5L17.9165 8.75"
+            id="Vector 499"
+            stroke={color[stroke]}
+            strokeLinejoin="bevel"
+            strokeWidth="1.16667"
+          />
+          <path
+            d="M11.6666 13.3334C11.6666 14.2539 10.9204 15.0001 9.99992 15.0001C9.07944 15.0001 8.33325 14.2539 8.33325 13.3334C8.33325 12.4129 9.07944 11.6667 9.99992 11.6667C10.9204 11.6667 11.6666 12.4129 11.6666 13.3334Z"
+            id="Ellipse 37"
+            stroke={color[stroke]}
+            strokeWidth="1.16667"
+          />
+        </g>
+      </svg>
+    );
+  }
+);
+
+Home.displayName = "Home";
+export default Home;
diff --git a/packages/wow-icons/src/component/index.ts b/packages/wow-icons/src/component/index.ts
@@ -6,9 +6,11 @@ export { default as Close } from "./Close.tsx";
 export { default as DoubleArrow } from "./DoubleArrow.tsx";
 export { default as DownArrow } from "./DownArrow.tsx";
 export { default as Edit } from "./Edit.tsx";
+export { default as Folder } from "./Folder.tsx";
 export { default as GdscLogo } from "./GdscLogo.tsx";
 export { default as GreenAvatar } from "./GreenAvatar.tsx";
 export { default as Help } from "./Help.tsx";
+export { default as Home } from "./Home.tsx";
 export { default as LeftArrow } from "./LeftArrow.tsx";
 export { default as Link } from "./Link.tsx";
 export { default as Plus } from "./Plus.tsx";

diff --git a/packages/wow-icons/src/svg/folder.svg b/packages/wow-icons/src/svg/folder.svg
diff --git a/packages/wow-icons/src/svg/home.svg b/packages/wow-icons/src/svg/home.svg
diff --git a/packages/wow-ui/src/components/Chip/index.tsx b/packages/wow-ui/src/components/Chip/index.tsx
@@ -107,11 +107,11 @@ const Chip: ChipComponent & { displayName?: string } = forwardRef(
 
     return (
       <Component
-        ischecked
         aria-checked={clickable ? ischecked : undefined}
         aria-disabled={disabled}
         aria-label={`chip ${ischecked ? "activated" : "inactivated"}`}
         data-selected={ischecked}
+        ischecked={String(ischecked)}
         ref={ref}
         role={clickable ? "checkbox" : undefined}
         style={style}