그룹화 및 기존 코드 이동 및 리팩토링

README.md

@@ -43,11 +43,12 @@ Cloud-Canvas는 이러한 문제점을 해결하기 위한 GUI 기반 인프라
 ## 📌 아키텍쳐
 
 ### 전반적인 인프라
+
 ![image](https://github.com/user-attachments/assets/5901b688-0d3d-4698-ad22-a4d4bb7aa8fd)
 
 ### CI/CD
-<img width="1024" alt="cicd" src="https://github.com/user-attachments/assets/286d7d2d-bb6a-4315-bcff-4a6ea7569077">
 
+<img width="1024" alt="cicd" src="https://github.com/user-attachments/assets/286d7d2d-bb6a-4315-bcff-4a6ea7569077">
 
 # 팀
 

apps/client/src/App.tsx

@@ -1,7 +1,67 @@
-import Header from '@components/Header';
-import Sidebar from '@components/Sidebar';
+import CloudGraph from '@/src/CloudGraph';
+import Header from '@components/Layout/Header';
+import Sidebar from '@components/Layout/Sidebar';
+import { useSelectionContext } from '@contexts/SelectionContext';
+import useGraphActions from '@hooks/useGraphActions';
+import {
+    AppBar,
+    InputLabel,
+    MenuItem,
+    Select,
+    SelectChangeEvent,
+    Toolbar,
+    Typography,
+} from '@mui/material';
 import Box from '@mui/material/Box';
-import { CloudGraph } from '@cloud-graph/index';
+import { useState } from 'react';
+
+const PropertiesBar = () => {
+    return (
+        <AppBar
+            position="absolute"
+            color="default"
+            sx={{ top: 0, left: 0, right: 0, padding: '20px 0' }}
+        >
+            <Toolbar
+                sx={{
+                    display: 'flex',
+                    gap: 2,
+                }}
+            >
+                <Typography variant="h6">Properties</Typography>
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                    {/* {selectedCloud.properties && */}
+                    {/*     Object.entries(selectedCloud.properties).map( */}
+                    {/*         ([key, value]) => { */}
+                    {/*             return ( */}
+                    {/*                 <Select */}
+                    {/*                     id={key} */}
+                    {/*                     value={groups[key]} */}
+                    {/*                     displayEmpty */}
+                    {/*                     onChange={(e: SelectChangeEvent) => */}
+                    {/*                         handleChange(e, key) */}
+                    {/*                     } */}
+                    {/*                     sx={{ width: 200 }} */}
+                    {/*                 > */}
+                    {/*                     <MenuItem value="">None</MenuItem> */}
+                    {/*                     <MenuItem value={'seoul'}> */}
+                    {/*                         Seoul */}
+                    {/*                     </MenuItem> */}
+                    {/*                     <MenuItem value={'china'}> */}
+                    {/*                         China */}
+                    {/*                     </MenuItem> */}
+                    {/*                     <MenuItem value={'japan'}> */}
+                    {/*                         Japan */}
+                    {/*                     </MenuItem> */}
+                    {/*                 </Select> */}
+                    {/*             ); */}
+                    {/*         }, */}
+                    {/*     )} */}
+                </Box>
+            </Toolbar>
+        </AppBar>
+    );
+};
 
 function App() {
     return (
@@ -21,7 +81,14 @@ function App() {
                 }}
             >
                 <Header />
-                <CloudGraph />
+                <Box
+                    sx={{
+                        position: 'relative',
+                    }}
+                >
+                    <PropertiesBar />
+                    <CloudGraph />
+                </Box>
             </Box>
         </Box>
     );

apps/client/src/CloudGraph.tsx

@@ -0,0 +1,145 @@
+import BendingPointer from '@components/BendingPointer';
+import Connection from '@components/Connection';
+import Connectors from '@components/Connectors';
+import Edge from '@components/Edge';
+import Graph from '@components/Graph';
+import GridBackground from '@components/GridBackground';
+import Group from '@components/Group';
+import Node from '@components/Node';
+import { useEdgeContext } from '@contexts/EdgeContext';
+import { useGroupContext } from '@contexts/GroupContext';
+import { useNodeContext } from '@contexts/NodeContext';
+import { useSvgContext } from '@contexts/SvgContext';
+import useConnection from '@hooks/useConnection';
+import useGraphActions from '@hooks/useGraphActions';
+import useSelection from '@hooks/useSelection';
+import { useEffect } from 'react';
+
+export default () => {
+    const { svgRef } = useSvgContext();
+    const {
+        state: { nodes },
+    } = useNodeContext();
+    const {
+        state: { edges },
+    } = useEdgeContext();
+    const {
+        state: { groups },
+    } = useGroupContext();
+    const {
+        selectedNodeId,
+        selectedEdge,
+        selectedGroupId,
+        clearSelection,
+        selectNode,
+        selectSegEdge,
+        selectEntireEdge,
+    } = useSelection();
+
+    const {
+        moveNode,
+        addEdge,
+        splitEdge,
+        moveBendingPointer,
+        getGroupBounds,
+        moveGroup,
+        removeNode,
+        removeEdge,
+    } = useGraphActions();
+
+    const {
+        connection,
+        isConnecting,
+        openConnection,
+        connectConnection,
+        closeConnection,
+    } = useConnection({
+        updateEdgeFn: addEdge,
+    });
+
+    useEffect(() => {
+        const handleContextMenu = (e: MouseEvent) => e.preventDefault();
+        const handleMouseDown = () => clearSelection();
+        document.addEventListener('contextmenu', handleContextMenu);
+        document.addEventListener('mousedown', handleMouseDown);
+
+        return () => {
+            document.removeEventListener('contextmenu', handleContextMenu);
+            svgRef.current?.removeEventListener('mousedown', handleMouseDown);
+        };
+    }, []);
+
+    return (
+        <Graph>
+            <GridBackground />
+            {Object.values(groups).map((group) => (
+                <Group
+                    group={group}
+                    bounds={getGroupBounds(group.id)}
+                    onMove={moveGroup}
+                />
+            ))}
+            {Object.values(nodes).map((node) => (
+                <>
+                    <Node
+                        node={node}
+                        isSelected={selectedNodeId === node.id}
+                        onMove={moveNode}
+                        onSelect={selectNode}
+                        onRemove={removeNode}
+                    />
+                    <Connectors
+                        node={node}
+                        isSelected={selectedNodeId === node.id}
+                        isConnecting={isConnecting}
+                        onOpenConnection={openConnection}
+                        onConnectConnection={connectConnection}
+                        onCloseConnection={closeConnection}
+                    />
+                </>
+            ))}
+            {connection && (
+                <Connection
+                    source={connection.source}
+                    target={connection.target}
+                />
+            )}
+
+            {edges &&
+                Object.values(edges).map((edge) => (
+                    <>
+                        <Edge
+                            key={edge.id}
+                            edge={edge}
+                            selectedEdge={selectedEdge}
+                            sourceConnector={
+                                nodes[edge.source.id].connectors[
+                                    edge.source.connectorType
+                                ]
+                            }
+                            targetConnector={
+                                nodes[edge.target.id].connectors[
+                                    edge.target.connectorType
+                                ]
+                            }
+                            onSelectEntire={selectEntireEdge}
+                            onSelectSegment={selectSegEdge}
+                            onSplit={splitEdge}
+                            onRemove={removeEdge}
+                        />
+                        {edge.bendingPoints.map((point, index) => (
+                            <BendingPointer
+                                key={`${edge.id}-${index}`}
+                                edgeId={edge.id}
+                                point={point}
+                                index={index}
+                                onMove={(newPoint) =>
+                                    moveBendingPointer(edge.id, index, newPoint)
+                                }
+                            />
+                        ))}
+                    </>
+                ))}
+        </Graph>
+    );
+};