Merge pull request #198 from boostcampwm-2024/fix/prototype/final

🐞 Fix(client): share, save시 2d 정보로 변환하여 저장
boostcampwm-2024 · Dec 5, 2024 · 87602ec · 87602ec
2 parents 8227146 + c64af6b
commit 87602ec
Show file tree

Hide file tree

Showing 5 changed files with 231 additions and 57 deletions.
diff --git a/apps/client/src/components/NCloud/NetworksBar/SubnetSelect.tsx b/apps/client/src/components/NCloud/NetworksBar/SubnetSelect.tsx
@@ -83,6 +83,7 @@ export default ({
                             variant="text"
                             disabled={disabled}
                             disableRipple
+                            sx={{ whiteSpace: 'nowrap' }}
                         >
                             {subnet ? subnet.value : <AddCircleOutlineIcon />}
                         </Button>

diff --git a/apps/client/src/components/NCloud/NetworksBar/VpcSelect.tsx b/apps/client/src/components/NCloud/NetworksBar/VpcSelect.tsx
@@ -88,6 +88,7 @@ export default ({
                             type="submit"
                             disabled={disabled}
                             disableRipple
+                            sx={{ whiteSpace: 'nowrap' }}
                         >
                             {vpc ? vpc.value : <AddCircleOutlineIcon />}
                         </Button>

diff --git a/apps/client/src/components/SaveDialog.tsx b/apps/client/src/components/SaveDialog.tsx
@@ -12,6 +12,8 @@ import TextField from '@mui/material/TextField';
 import { useNavigate, useParams } from 'react-router-dom';
 import { urls } from '../apis';
 import { useCloudGraph } from './CloudGraphProvider';
+import { useDimensionContext } from '@contexts/DimensionContext';
+import useGraph from '@hooks/useGraph';
 type Props = {
     open: boolean;
     onClose: () => void;
@@ -27,7 +29,9 @@ export default ({ open, onClose }: Props) => {
     const {
         state: { edges },
     } = useEdgeContext();
+    const { updatePointForDimension } = useGraph();
     const { data: graphData, setData: setGraphData } = useCloudGraph();
+    const { dimension } = useDimensionContext();
 
     const navigate = useNavigate();
     const params = useParams();
@@ -47,12 +51,22 @@ export default ({ open, onClose }: Props) => {
 
         const title = (e.target as any).title.value;
 
+        let updatedNodes = nodes;
+        let updatedEdges = edges;
+        // 서버에 저장시 2d로 변환
+        if (dimension === '3d') {
+            const { updatedNodes: _updatedNodes, updatedEdges: _updatedEdges } =
+                updatePointForDimension(nodes, edges, '2d');
+
+            updatedNodes = _updatedNodes;
+            updatedEdges = _updatedEdges;
+        }
         const resp = await saveArchitecture({
             cost: 0,
             architecture: {
-                nodes,
+                nodes: updatedNodes,
+                edges: updatedEdges,
                 groups,
-                edges,
             },
             title,
         });

diff --git a/apps/client/src/components/ShareDialog.tsx b/apps/client/src/components/ShareDialog.tsx
@@ -1,26 +1,92 @@
+import { useDimensionContext } from '@contexts/DimensionContext';
+import { useEdgeContext } from '@contexts/EdgeContext';
+import { useGroupContext } from '@contexts/GroupContext';
+import { useNodeContext } from '@contexts/NodeContext';
+import { useSvgContext } from '@contexts/SvgContext';
+import { calculateNodeBoundingBox } from '@helpers/node';
+import useFetch from '@hooks/useFetch';
+import { FormControl, Stack, useColorScheme, useTheme } from '@mui/material';
 import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
-import Select, { OnChangeValue } from 'react-select';
+import TextField from '@mui/material/TextField';
 import { useState } from 'react';
-import Creatable, { useCreatable } from 'react-select/creatable';
-import { Stack, FormControl } from '@mui/material';
-import { useEdgeContext } from '@contexts/EdgeContext';
-import { useGroupContext } from '@contexts/GroupContext';
-import { useNodeContext } from '@contexts/NodeContext';
-import useFetch from '@hooks/useFetch';
+import { OnChangeValue } from 'react-select';
+import Creatable from 'react-select/creatable';
 import { urls } from '../apis';
-import { useSvgContext } from '@contexts/SvgContext';
-import { calculateNodeBoundingBox } from '@helpers/node';
-import { useDimensionContext } from '@contexts/DimensionContext';
+import useGraph from '@hooks/useGraph';
+
 type Props = {
     open: boolean;
     onClose: () => void;
 };
 
+const reactSelectStyles = (mode: string, theme: any) => ({
+    control: (provided: any) => ({
+        ...provided,
+        backgroundColor:
+            mode === 'dark' ? '#393939' : theme.palette.background.paper,
+        borderColor:
+            mode === 'dark' ? theme.palette.grey[700] : theme.palette.divider,
+        minHeight: '40px',
+        height: '40px',
+        boxShadow: 'none',
+        '&:hover': {
+            borderColor: mode === 'dark' ? '#fff' : theme.palette.text.primary,
+        },
+        '&:focus-within': {
+            borderColor:
+                mode === 'dark'
+                    ? theme.palette.primary.main
+                    : theme.palette.text.primary,
+        },
+    }),
+    input: (provided: any) => ({
+        ...provided,
+        color:
+            mode === 'dark'
+                ? theme.palette.text.primary
+                : theme.palette.text.secondary,
+    }),
+    menu: (provided: any) => ({
+        ...provided,
+        display: 'none',
+    }),
+    dropdownIndicator: () => ({ display: 'none' }),
+    indicatorSeparator: () => ({ display: 'none' }),
+    multiValue: (provided: any) => ({
+        ...provided,
+        backgroundColor:
+            mode === 'dark' ? theme.palette.grey[700] : theme.palette.grey[300],
+    }),
+    multiValueLabel: (provided: any) => ({
+        ...provided,
+        color:
+            mode === 'dark'
+                ? theme.palette.common.white
+                : theme.palette.text.primary,
+    }),
+    multiValueRemove: (provided: any) => ({
+        ...provided,
+        color:
+            mode === 'dark'
+                ? theme.palette.common.white
+                : theme.palette.text.primary,
+        ':hover': {
+            backgroundColor:
+                mode === 'dark'
+                    ? theme.palette.grey[600]
+                    : theme.palette.grey[400],
+            color:
+                mode === 'dark'
+                    ? theme.palette.common.white
+                    : theme.palette.text.primary,
+        },
+    }),
+});
+
 export default ({ open, onClose }: Props) => {
     const {
         state: { nodes },
@@ -31,15 +97,38 @@ export default ({ open, onClose }: Props) => {
     const {
         state: { edges },
     } = useEdgeContext();
+    const { updatePointForDimension } = useGraph();
+
     const { svgRef } = useSvgContext();
     const { dimension } = useDimensionContext();
+    const { mode } = useColorScheme();
+    const theme = useTheme();
 
     const [tags, setTags] = useState<{ label: string; value: string }[]>([]);
 
     const { error, execute: shareArchitecture } = useFetch(urls('share'), {
         method: 'POST',
     });
 
+    const getCloneSvg = (svg: SVGSVGElement) => {
+        const allNodeBoundsBox = calculateNodeBoundingBox(
+            Object.values(nodes),
+            dimension,
+        );
+        const padding = 90 * 8;
+
+        const viewBox = `${allNodeBoundsBox.minX - padding} ${
+            allNodeBoundsBox.minY - padding
+        } ${allNodeBoundsBox.width + padding * 2} ${
+            allNodeBoundsBox.height + padding * 2
+        }`;
+
+        const svgClone = svg.cloneNode(true) as SVGSVGElement;
+        svgClone.setAttribute('viewBox', viewBox);
+
+        return svgClone;
+    };
+
     const handleClose = () => {
         onClose();
     };
@@ -62,27 +151,26 @@ export default ({ open, onClose }: Props) => {
             return;
         }
 
-        const allNodeBoundsBox = calculateNodeBoundingBox(
-            Object.values(nodes),
-            dimension,
-        );
-        const padding = 90 * 4;
+        const svgClone = getCloneSvg(svgRef.current);
 
-        const viewBox = `${allNodeBoundsBox.minX - padding} ${
-            allNodeBoundsBox.minY - padding
-        } ${allNodeBoundsBox.width + padding * 2} ${
-            allNodeBoundsBox.height + padding * 2
-        }`;
+        let updatedNodes = nodes;
+        let updatedEdges = edges;
+        // 서버에 저장시 2d로 변환
+        if (dimension === '3d') {
+            const { updatedNodes: _updatedNodes, updatedEdges: _updatedEdges } =
+                updatePointForDimension(nodes, edges, '2d');
+
+            updatedNodes = _updatedNodes;
+            updatedEdges = _updatedEdges;
+        }
 
-        const svgClone = svgRef.current.cloneNode(true) as SVGSVGElement;
-        svgClone.setAttribute('viewBox', viewBox);
         await shareArchitecture({
             cost: 0,
             tags: cloudTags,
             architecture: {
-                nodes,
+                nodes: updatedNodes,
+                edges: updatedEdges,
                 groups,
-                edges,
                 svg: svgClone.outerHTML,
             },
             title,
@@ -133,14 +221,7 @@ export default ({ open, onClose }: Props) => {
                             name="tags"
                             value={tags}
                             onChange={handleChange}
-                            styles={{
-                                menu: (provided) => ({
-                                    ...provided,
-                                    display: 'none',
-                                }),
-                                dropdownIndicator: () => ({ display: 'none' }),
-                                indicatorSeparator: () => ({ display: 'none' }),
-                            }}
+                            styles={reactSelectStyles(mode!, theme)}
                         />
                     </FormControl>
                 </Stack>