feat: 임시 구현 (리팩토링 필요)

daangn · Aug 17, 2023 · bab9768 · bab9768
1 parent c90ca7d
commit bab9768
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 16 deletions.
diff --git a/docs/src/__generated__/gatsby-schema.graphql b/docs/src/__generated__/gatsby-schema.graphql
diff --git a/docs/src/components/ComponentDocumentCategoryNav.tsx b/docs/src/components/ComponentDocumentCategoryNav.tsx
@@ -1,4 +1,5 @@
 import { Link } from "gatsby";
+import * as React from "react";
 
 import * as style from "./ComponentDocumentCategoryNav.css";
 
@@ -9,25 +10,45 @@ interface ComponentDocumentCategoryNavProps {
 const ComponentDocumentCategoryNav = ({
   currentPath,
 }: ComponentDocumentCategoryNavProps) => {
+  const [currentCategory, setCurrentCategory] = React.useState<
+    "overview" | "usage" | "style" | null
+  >(null);
+
+  React.useEffect(() => {
+    if (currentPath.includes("overview")) {
+      setCurrentCategory("overview");
+      return;
+    }
+    if (currentPath.includes("usage")) {
+      setCurrentCategory("usage");
+      return;
+    }
+    if (currentPath.includes("style")) {
+      setCurrentCategory("style");
+      return;
+    }
+    setCurrentCategory(null);
+  }, []);
+
   return (
     <>
       <nav className={style.navContainer}>
         <Link
           className={style.navLink({
-            active: currentPath.includes("overview"),
+            active: currentCategory === "overview",
           })}
           to={`${currentPath.split("/").slice(0, -2).join("/")}/overview`}
         >
           <p className={style.navLinkText}>Overview</p>
         </Link>
         <Link
-          className={style.navLink({ active: currentPath.includes("usage") })}
+          className={style.navLink({ active: currentCategory === "usage" })}
           to={`${currentPath.split("/").slice(0, -2).join("/")}/usage`}
         >
           <p className={style.navLinkText}>Usage</p>
         </Link>
         <Link
-          className={style.navLink({ active: currentPath.includes("style") })}
+          className={style.navLink({ active: currentCategory === "style" })}
           to={`${currentPath.split("/").slice(0, -2).join("/")}/style`}
         >
           <p className={style.navLinkText}>Style</p>

diff --git a/docs/src/components/sidebar/Sidebar.tsx b/docs/src/components/sidebar/Sidebar.tsx
@@ -77,7 +77,7 @@ const SidebarItemContainer = ({ logo }: { logo?: boolean }) => {
         currentPath={currentPath}
         to="/overview/progress-board"
         name="Progress Board"
-        title="overview"
+        category="overview"
         onClick={closeSidebar}
       />
 
@@ -87,14 +87,14 @@ const SidebarItemContainer = ({ logo }: { logo?: boolean }) => {
         currentPath={currentPath}
         to="/foundation/color"
         name="Color"
-        title="foundation"
+        category="foundation"
         onClick={closeSidebar}
       />
       <SidebarItem
         currentPath={currentPath}
         to="/foundation/typography"
         name="Typography"
-        title="foundation"
+        category="foundation"
         onClick={closeSidebar}
       />
 
@@ -113,7 +113,7 @@ const SidebarItemContainer = ({ logo }: { logo?: boolean }) => {
                       currentPath={currentPath}
                       to={item?.name!}
                       name={item?.name!}
-                      title="component"
+                      category="component"
                       onClick={closeSidebar}
                       status={item?.platform?.docs?.overview?.status!}
                       hasDeps
@@ -131,7 +131,7 @@ const SidebarItemContainer = ({ logo }: { logo?: boolean }) => {
                     }
                     alias={item?.alias!}
                     name={item?.name!}
-                    title="component"
+                    category="component"
                     onClick={closeSidebar}
                     status={item?.platform?.docs?.overview?.status! as Status}
                     hasDeps
@@ -153,7 +153,7 @@ const SidebarItemContainer = ({ logo }: { logo?: boolean }) => {
             }
             name={groupItems[0]?.name!}
             alias={groupItems[0]?.alias!}
-            title="component"
+            category="component"
             onClick={closeSidebar}
             status={groupItems[0]?.platform?.docs?.overview?.status! as Status}
           />
@@ -168,7 +168,7 @@ const SidebarItemContainer = ({ logo }: { logo?: boolean }) => {
           currentPath={currentPath}
           to={node?.primitive?.childMdx?.frontmatter?.slug!}
           name={node.name!}
-          title="primitive"
+          category="primitive"
           onClick={closeSidebar}
         />
       ))}

diff --git a/docs/src/components/sidebar/SidebarItem.tsx b/docs/src/components/sidebar/SidebarItem.tsx
@@ -1,5 +1,6 @@
 import type { GatsbyLinkProps } from "gatsby";
 import { Link } from "gatsby";
+import * as React from "react";
 
 import * as style from "./SidebarItem.css";
 
@@ -8,30 +9,43 @@ interface SidebarItemProps {
   /**
    * sidebar에 같은 이름으로 존재하는 컴포넌트가 있기 때문에 상위 카테고리로 구별해서 하이라이팅 해줌.
    */
-  title: "component" | "primitive" | "foundation" | "overview";
+  category: "component" | "primitive" | "foundation" | "overview";
   name: string;
   alias?: string;
   currentPath: string;
   status?: Status;
   hasDeps?: boolean;
 }
 
+// localhost:8000/component/alert-dialog/overview/
+// {domain}/{category}/{component}/{section}/
 const SidebarItem = ({
   currentPath,
   name,
-  title,
+  category,
   alias,
   status,
   to,
   hasDeps,
   onClick,
   onMouseEnter,
 }: GatsbyLinkProps<{}> & SidebarItemProps) => {
-  const currentPathName = currentPath.split("/")[2];
-  const currentname = name.replaceAll(" ", "-").toLowerCase();
-  const active = currentPathName === currentname && currentPath.includes(title);
+  const [isActive, setIsActive] = React.useState(false);
+  const componentName = currentPath.split("/")[2];
+  const convertedDisplayName = name.replaceAll(" ", "-").toLowerCase();
   const displayName = alias || name;
 
+  React.useEffect(() => {
+    if (
+      componentName === convertedDisplayName &&
+      currentPath.includes(category)
+    ) {
+      setIsActive(true);
+    } else {
+      setIsActive(false);
+    }
+  }, [currentPath]);
+
   return (
     <Link
       to={to}
@@ -42,7 +56,7 @@ const SidebarItem = ({
       <li
         className={style.item({
           disable: status === "todo",
-          highlight: active,
+          highlight: isActive,
           hasDeps,
         })}
       >