Merge pull request #104 from boostcampwm-2024/dev-fe

dev-fe 브랜치 메인으로 머지

Author: Tolerblanc

frontend/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/editor/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

frontend/package.json

@@ -3,25 +3,44 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    }
+  },
   "scripts": {
     "dev": "vite --host",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview --host"
   },
   "dependencies": {
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
     "@tanstack/react-query": "^5.59.19",
+    "@xyflow/react": "^12.3.4",
     "autoprefixer": "^10.4.20",
+    "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "framer-motion": "^11.11.11",
     "highlight.js": "^11.10.0",
     "lowlight": "^3.1.0",
+    "lucide-react": "^0.454.0",
+    "next-themes": "^0.4.3",
     "novel": "^0.5.0",
     "postcss": "^8.4.47",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.14",
+    "tailwindcss-animate": "^1.0.7",
+    "tailwindest": "^2.3.6",
+    "use-debounce": "^10.0.4",
     "zustand": "^5.0.1"
   },
   "devDependencies": {

frontend/public/logo.png

@@ -2,20 +2,21 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import Sidebar from "./components/sidebar";
 import HoverTrigger from "./components/HoverTrigger";
-import Editor from "./components/editor";
-import { defaultEditorContent } from "./components/editor/content";
+import EditorView from "./components/editor/EditorView";
 import SideWrapper from "./components/layout/SideWrapper";
+import Canvas from "./components/canvas";
 
 const queryClient = new QueryClient();
 
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <div className="h-screen bg-[#231F20]">
+      <div className="h-screen bg-white">
         <SideWrapper side="right">
-          <Editor initialValue={defaultEditorContent} />
+          <EditorView />
         </SideWrapper>
-        <HoverTrigger className="w-64">
+        <Canvas className="z-0 h-full w-full" />
+        <HoverTrigger className="absolute inset-0 z-20 w-64">
           <Sidebar />
         </HoverTrigger>
       </div>

frontend/public/warning-icon.png

@@ -0,0 +1,40 @@
+import { Get, Post, Patch, Delete } from "@/lib/axios";
+
+export interface NodeRequest {
+  title: string;
+  x: number;
+  y: number;
+}
+
+export interface NodeCoors {
+  x: number;
+  y: number;
+}
+
+export const getNodeCoors = async (id: number) => {
+  const url = `/node${id}`;
+
+  const res = await Get<NodeCoors>(url);
+  return res.data;
+};
+
+export const createNode = async (id: number, nodeData: NodeRequest) => {
+  const url = `/node/${id}`;
+
+  const res = await Post<null, NodeRequest>(url, nodeData);
+  return res.data;
+};
+
+export const deleteNode = async (id: number) => {
+  const url = `/node/${id}`;
+
+  const res = await Delete<null>(url);
+  return res.data;
+};
+
+export const updateNode = async (id: number, nodeData: NodeRequest) => {
+  const url = `/node/${id}`;
+
+  const res = await Patch<null, NodeRequest>(url, nodeData);
+  return res.data;
+};

frontend/public/workspace-logo.svg

@@ -0,0 +1,56 @@
+import { JSONContent } from "novel";
+
+import { Get, Post, Delete, Patch } from "@/lib/axios";
+
+export type Page = {
+  id: number;
+  title: string;
+  content: JSONContent;
+};
+
+export type CreatePageRequest = {
+  title: string;
+  content: JSONContent;
+  x: number;
+  y: number;
+};
+
+export type PageRequest = {
+  title: string;
+  content: JSONContent;
+};
+
+export const getPage = async (id: number) => {
+  const url = `/page/${id}`;
+
+  const res = await Get<Page>(url);
+  return res.data;
+};
+
+export const getPages = async () => {
+  const url = "/page";
+
+  const res = await Get<Page[]>(url);
+  return res.data;
+};
+
+export const createPage = async (pageData: CreatePageRequest) => {
+  const url = `/page`;
+
+  const res = await Post<null, CreatePageRequest>(url, pageData);
+  return res.data;
+};
+
+export const deletePage = async (id: number) => {
+  const url = `/page/${id}`;
+
+  const res = await Delete<null>(url);
+  return res.data;
+};
+
+export const updatePage = async (id: number, pageData: PageRequest) => {
+  const url = `/page/${id}`;
+
+  const res = await Patch<null, PageRequest>(url, pageData);
+  return res.data;
+};

frontend/src/App.tsx

@@ -0,0 +1,14 @@
+import usePageStore from "@/store/usePageStore";
+import Editor from "./editor";
+import { usePage } from "@/hooks/usePages";
+
+export default function EditorView() {
+  const { currentPage } = usePageStore();
+  const { data } = usePage(currentPage);
+
+  if (!data) {
+    return <div></div>;
+  }
+
+  return <Editor key={data.id} initialValue={data.content} pageId={data.id} />;
+}

frontend/src/api/node.ts

@@ -2,7 +2,7 @@ import logo from "/logo.png?url";
 
 export default function LogoBtn() {
   return (
-    <div className="h-8 w-8 rounded-md bg-slate-700 p-2">
+    <div className="h-8 w-8 overflow-clip rounded-md">
       <img src={logo} />
     </div>
   );