SCRUM-225-웹 버전 UI 수정 (#36)

* fix: top nav 수정

* feat: 2d graph를 packages/ui에서 통합으로 관리

* chore: tree 컴포넌트를 위한 라이브러리 설치

* feat: Theme에 tree 추가

* feat: tree용 북마크 조회 API 연동 및 tree 구조 구현

* fix: 행성 UI 수정

Author: gs0428

apps/extension/package.json

@@ -15,7 +15,6 @@
     "lettercoder": "^0.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-force-graph-2d": "^1.27.1",
     "react-router-dom": "^6.28.0",
     "zustand": "^5.0.1"
   },

apps/extension/src/pages/bookmark.tsx

@@ -1,11 +1,11 @@
 import { useMemo } from "react";
 
-import ForceGraph from "@/components/force-graph";
 import Loading from "@/components/loading";
 import { useCreateStar } from "@/state/mutation/star";
 import { useStarStore } from "@/state/zustand/star";
 import { useTabStore } from "@/state/zustand/tab";
 import { getHtmlText } from "@/utils/chrome";
+import { Graph2D } from "@repo/ui";
 import { RectangleButton } from "@repo/ui";
 
 import { useNavigate } from "react-router-dom";
@@ -69,7 +69,7 @@ const Bookmark = () => {
     <Loading title="페이지를 요약하고 있어요!">
       <main className="flex h-full flex-col justify-center gap-28 overflow-x-hidden">
         <section>
-          <ForceGraph graphData={graphData} />
+          <Graph2D graphData={graphData} />
           <h1 className="text-notification">현재 페이지 정보</h1>
         </section>
         <section className="space-y-4">

apps/extension/src/pages/create-bookmark.tsx

@@ -3,7 +3,6 @@ import { useEffect, useMemo, useState } from "react";
 import AISummary from "@/assets/ai-summary.svg?react";
 import Logo from "@/assets/logo.svg?react";
 import CardWrapper from "@/components/create-bookmark/card-wrapper";
-import ForceGraph from "@/components/force-graph";
 import Loading from "@/components/loading";
 import { useCreateCategory } from "@/state/mutation/category";
 import { useCompleteCreateStar, useUpdateStar } from "@/state/mutation/star";
@@ -13,6 +12,7 @@ import { useStarStore } from "@/state/zustand/star";
 import { useTabStore } from "@/state/zustand/tab";
 import { CategoryListProps } from "@/types/category";
 import { CompleteSummarizeStarProps } from "@/types/star";
+import { Graph2D } from "@repo/ui";
 import { Keyword, RectangleButton, Spinner, Textarea } from "@repo/ui";
 
 import { Navigate, useLocation, useSearchParams } from "react-router-dom";
@@ -199,7 +199,7 @@ const CreateBookmark = () => {
           </button>
         </header>
         <section>
-          <ForceGraph graphData={graphData} />
+          <Graph2D graphData={graphData} />
         </section>
         <CardWrapper
           thumbnailUrl={bookmark.thumbnailUrl}

apps/www/package.json

@@ -13,6 +13,7 @@
     "@tanstack/react-query": "^5.59.20",
     "next": "15.0.3",
     "react": "19.0.0-rc-66855b96-20241106",
+    "react-d3-tree": "^3.6.6",
     "react-dom": "19.0.0-rc-66855b96-20241106",
     "three": "^0.175.0",
     "wordcloud": "^1.2.3",

apps/www/src/app/bookmarks/layout.tsx

@@ -1,9 +1,13 @@
 import Sidebar from "@/components/bookmarks/sidebar";
+import NavDropdown from "@/components/common/nav-dropdown";
 
 const BookmarksLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <main className="flex min-h-screen overflow-hidden">
       <Sidebar />
+      <div className="fixed right-5 top-5 z-10">
+        <NavDropdown />
+      </div>
       {children}
     </main>
   );

apps/www/src/app/bookmarks/page.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import Graph from "@/components/bookmarks/graph";
 import GraphDetail from "@/components/bookmarks/graph/graph-detail";
 import Planet from "@/components/bookmarks/graph/planet";
+import Tree from "@/components/bookmarks/tree";
 import { GRAPH_THEME } from "@/constants/bookmark";
 import { useGetAllStars } from "@/lib/tanstack/query/star";
 import { useBookmarkStore } from "@/lib/zustand/bookmark";
@@ -34,6 +35,23 @@ const BookmarkPage = () => {
     });
   };
 
+  const renderTheme = () => {
+    switch (bookmarkStore.selectedTheme) {
+      case GRAPH_THEME.GRAPH:
+        return <Graph onOpen={onOpen} data={data!.result} />;
+      case GRAPH_THEME.PLANET:
+        return <Planet onOpen={onOpen} data={data!.result} />;
+      case GRAPH_THEME.TREE:
+        return <Tree onOpen={onOpen} />;
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      bookmarkStore.setStars(data.result);
+    }
+  }, [data]);
+
   if (isPending || !data) {
     return (
       <main className="flex h-screen w-screen items-center justify-center">
@@ -44,11 +62,7 @@ const BookmarkPage = () => {
 
   return (
     <>
-      {bookmarkStore.selectedTheme === GRAPH_THEME.GRAPH ? (
-        <Graph onOpen={onOpen} data={data!.result} />
-      ) : (
-        <Planet onOpen={onOpen} data={data!.result} />
-      )}
+      {renderTheme()}
       <GraphDetail open={detail.open} id={detail.id} onClose={onClose} />
     </>
   );

apps/www/src/app/globals.css

@@ -58,3 +58,24 @@ input[type="checkbox"] {
     border-radius: 50%;
   }
 }
+
+.node__root,
+.node__branch,
+.node__leaf {
+  text {
+    fill: #fff;
+  }
+}
+
+.node__leaf {
+  stroke: #fff !important;
+  fill: #111 !important;
+}
+
+.rd3t-link {
+  stroke: #fff !important;
+}
+
+.rd3t-label__attributes tspan:nth-of-type(n + 2) {
+  display: none;
+}

apps/www/src/components/bookmarks/graph/graph-detail.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -11,7 +11,8 @@ import trash from "@/assets/icons/trash.svg";
 import { useCreateCategory } from "@/lib/tanstack/mutation/category";
 import { useDeleteStar, useUpdateStar } from "@/lib/tanstack/mutation/star";
 import { useGetGraphDetail } from "@/lib/tanstack/query/graph";
-import { Card, cn, Keyword, Modal, RectangleButton, Spinner, Textarea } from "@repo/ui";
+import { useBookmarkStore } from "@/lib/zustand/bookmark";
+import { Card, cn, Graph2D, Keyword, Modal, RectangleButton, Spinner, Textarea } from "@repo/ui";
 
 interface GraphDetailProps {
   open: boolean;
@@ -29,11 +30,41 @@ const GraphDetail = ({ open, id, onClose }: GraphDetailProps) => {
     useGetGraphDetail(id);
 
   const [edit, setEdit] = useState({ activated: false, keyword: "", ...(starData?.result || {}) });
+  const stars = useBookmarkStore((state) => state.stars);
 
   const { mutateAsync: createCategory, isPending: createCategoryLoading } = useCreateCategory();
   const { mutateAsync: updateStar, isPending: updateStarLoading } = useUpdateStar();
   const { mutateAsync: deleteStar, isPending: deleteStarLoading } = useDeleteStar(onClose);
 
+  const graphData = useMemo(() => {
+    if (!stars?.starListDto || !stars?.linkListDto || !id) return { nodes: [], links: [] };
+
+    // 현재 북마크와 연결된 링크만 필터링
+    const relatedLinks = stars.linkListDto.filter((link) => link.linkedNodeIdList.includes(id));
+
+    // 관련된 노드 ID 수집
+    const relatedNodeIds = new Set<string>();
+    relatedLinks.forEach((link) => {
+      link.linkedNodeIdList.forEach((nodeId) => relatedNodeIds.add(nodeId));
+    });
+
+    // 관련된 노드만 필터링
+    const relatedNodes = stars.starListDto.filter((star) => relatedNodeIds.has(star.starId));
+
+    return {
+      nodes: relatedNodes.map((star) => ({
+        id: star.starId,
+        name: star.title,
+        val: Math.min(star.views, 10),
+        url: star.siteUrl,
+      })),
+      links: relatedLinks.map((link) => ({
+        source: link.linkedNodeIdList[0],
+        target: link.linkedNodeIdList[1],
+      })),
+    };
+  }, [stars, id]);
+
   const onSelectCategory = (categoryName: string) => {
     setEdit((prev) => ({ ...prev, categoryName }));
   };
@@ -235,6 +266,19 @@ const GraphDetail = ({ open, id, onClose }: GraphDetailProps) => {
                 )}
               </div>
             </div>
+            <Graph2D
+              graphData={{
+                nodes: graphData.nodes.map((star) => ({
+                  id: star.id,
+                  name: star.name,
+                  val: 1,
+                })),
+                links: graphData.links.map((link) => ({
+                  source: link.source,
+                  target: link.target,
+                })),
+              }}
+            />
             <Card
               Thumbnail={
                 starData?.result?.thumbnailUrl ? (
@@ -327,7 +371,9 @@ const GraphDetail = ({ open, id, onClose }: GraphDetailProps) => {
       ) : (
         <div className="flex h-full w-full flex-col items-center justify-center gap-4 px-2">
           <p>북마크를 찾을 수 없습니다.</p>
-          <RectangleButton onClick={onCloseDetail}>상세 창 닫기</RectangleButton>
+          <RectangleButton onClick={onCloseDetail} className="w-full flex-none">
+            상세 창 닫기
+          </RectangleButton>
         </div>
       )}
     </div>