feat: workspace 컴포넌트 구현

#80

client/src/App.tsx

@@ -1,29 +1,11 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
+import WorkSpace from "@features/workSpace/WorkSpace";
 
 const App = () => {
-  const [count, setCount] = useState(0);
+  // TODO 라우터, react query 설정
 
   return (
     <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
+      <WorkSpace />
     </>
   );
 };

client/src/features/workSpace/WorkSpace.style.ts

@@ -0,0 +1,11 @@
+import { css } from "@styled-system/css";
+
+export const container = css({
+  display: "flex",
+  gap: "sm",
+});
+
+export const content = css({
+  position: "relative",
+  width: "100%",
+});

client/src/features/workSpace/WorkSpace.tsx

@@ -0,0 +1,22 @@
+import { Page } from "@features/page/Page";
+import { BottomNavigator } from "@components/bottomNavigator/BottonNavigator";
+import { Sidebar } from "@components/sidebar/Sidebar";
+import { container, content } from "./WorkSpace.style";
+
+const WorkSpace = () => {
+  // TODO 여러개의 Page 관리
+
+  return (
+    <div className={container}>
+      <Sidebar />
+      <div className={content}>
+        <Page x={0} y={100} />
+        <Page x={800} y={10} />
+        <Page x={400} y={300} />
+      </div>
+      <BottomNavigator />
+    </div>
+  );
+};
+
+export default WorkSpace;