Skip to content

Commit

Permalink
Merge pull request #194 from boostcampwm-2024/fix/client/last
Browse files Browse the repository at this point in the history 
Fix/client/last
  • Loading branch information
@SeoGeonhyuk
SeoGeonhyuk authored Dec 5, 2024
2 parents 35d04c1 + ffb9e0f commit d1dc49c
Show file tree
Hide file tree
Showing 12 changed files with 121 additions and 45 deletions.
2 changes: 1 addition & 1 deletion apps/client/src/Root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ function Root() {
const loader = useLoaderData();

return (
<CloudGraphProvider initialData={loader?.data.architecture}>
<CloudGraphProvider initialData={loader?.data}>
<Layout />
</CloudGraphProvider>
);
Expand Down
92 changes: 55 additions & 37 deletions apps/client/src/components/CloudGraphProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,52 +7,70 @@ import { SelectionProvider } from '@contexts/SelectionContext';
import { SvgProvider } from '@contexts/SvgContext';
import { calcViewBoxBounds } from '@helpers/viewBox';
import { Edge, Group, Node } from '@types';
import { ReactNode } from 'react';
import { createContext, ReactNode, useContext, useRef, useState } from 'react';

type Props = {
children: ReactNode;
initialData: {
nodes: Record<string, Node>;
edges: Record<string, Edge>;
groups: Record<string, Group>;
id: string;
title: string;
architecture: {
nodes: Record<string, Node>;
edges: Record<string, Edge>;
groups: Record<string, Group>;
};
};
};
const CloudGraphContext = createContext<any>({});

export default ({ children, initialData }: Props) => {
const architecture = initialData?.architecture;
const [data, setData] = useState(initialData);
return (
<DimensionProvider>
<SvgProvider>
<GraphProvider
initialViewBox={
initialData?.nodes
? calcViewBoxBounds(
initialData?.nodes,
{
<CloudGraphContext.Provider value={{ data, setData }}>
<DimensionProvider>
<SvgProvider>
<GraphProvider
initialViewBox={
architecture?.nodes
? calcViewBoxBounds(
architecture?.nodes,
{
x: 0,
y: 0,
width: document.body.clientWidth * 3,
height:
document.body.clientHeight * 3,
},
'2d',
)
: {
x: 0,
y: 0,
width: document.body.clientWidth * 3,
height: document.body.clientHeight * 3,
},
'2d',
)
: {
x: 0,
y: 0,
width: document.body.clientWidth * 2,
height: document.body.clientHeight * 2,
}
}
>
<GroupProvider initialGroups={initialData?.groups}>
<NodeProvider initialNodes={initialData?.nodes}>
<EdgeProvider initialEdges={initialData?.edges}>
<SelectionProvider>
{children}
</SelectionProvider>
</EdgeProvider>
</NodeProvider>
</GroupProvider>
</GraphProvider>
</SvgProvider>
</DimensionProvider>
width: document.body.clientWidth * 2,
height: document.body.clientHeight * 2,
}
}
>
<GroupProvider initialGroups={architecture?.groups}>
<NodeProvider initialNodes={architecture?.nodes}>
<EdgeProvider
initialEdges={architecture?.edges}
>
<SelectionProvider>
{children}
</SelectionProvider>
</EdgeProvider>
</NodeProvider>
</GroupProvider>
</GraphProvider>
</SvgProvider>
</DimensionProvider>
</CloudGraphContext.Provider>
);
};

export const useCloudGraph = () => {
const state = useContext(CloudGraphContext);
return state;
};
2 changes: 1 addition & 1 deletion apps/client/src/components/NCloud/NetworksBar/RegionSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export default ({ region, disabled = false, onChangeRegion }: Props) => {
>
<ListItemIcon>
<img
src={`/assets/${option.value.toUpperCase()}.svg`}
src={`/${option.value.toUpperCase()}.svg`}
alt="flag"
/>
</ListItemIcon>
Expand Down
15 changes: 13 additions & 2 deletions apps/client/src/components/SaveDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import DialogTitle from '@mui/material/DialogTitle';
import TextField from '@mui/material/TextField';
import { useNavigate, useParams } from 'react-router-dom';
import { urls } from '../apis';
import { useCloudGraph } from './CloudGraphProvider';
type Props = {
open: boolean;
onClose: () => void;
Expand All @@ -26,6 +27,7 @@ export default ({ open, onClose }: Props) => {
const {
state: { edges },
} = useEdgeContext();
const { data: graphData, setData: setGraphData } = useCloudGraph();

const navigate = useNavigate();
const params = useParams();
Expand All @@ -42,6 +44,7 @@ export default ({ open, onClose }: Props) => {

const handleSubmit = async (e: React.FormEvent<HTMLInputElement>) => {
e.preventDefault();

const title = (e.target as any).title.value;

const resp = await saveArchitecture({
Expand All @@ -53,9 +56,14 @@ export default ({ open, onClose }: Props) => {
},
title,
});
if (resp.id) {
if (resp?.id) {
navigate(`${resp.id}`);
}

setGraphData((prev: any) => ({
...prev,
title,
}));
onClose();
};
return (
Expand All @@ -78,9 +86,12 @@ export default ({ open, onClose }: Props) => {
<label>Title</label>
<TextField
margin="dense"
defaultValue={
graphData.title ? graphData.title : ''
}
id="title"
name="title"
required
required={true}
variant="outlined"
type="text"
fullWidth
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/models/ncloud/ImageBlock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@ export const ImageBlock: Node = {
},
properties: {
...Networks,
imgSrc: '/assets/upload.svg',
imgSrc: '/upload.svg',
},
};
3 changes: 2 additions & 1 deletion apps/hub/Dockerfile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ WORKDIR /app
RUN mkdir -p /app/server
COPY --from=build /build/.next/standalone/ ./standalone/
COPY --from=build /build/.next/static/ ./standalone/.next/static
COPY --from=build /build/public/ ./standalone/public

ENV BACK_URL=https://api.cloudcanvas.kro.kr
ENTRYPOINT ["sh", "-c", "node standalone/server.js"]
ENTRYPOINT ["sh", "-c", "node standalone/server.js"]
15 changes: 15 additions & 0 deletions apps/hub/public/JP.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions apps/hub/public/KR.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions apps/hub/public/SG.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions apps/hub/public/upload.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion apps/hub/src/app/architectures/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ export default function ArchitectureDetailPage() {
<div className="flex gap-4 justify-end items-center">
<div className="mr-2">
<span className="font-black text-xl text-emerald-600">
₩{Math.floor(cost)}
₩{Math.floor(cost).toLocaleString()}
</span>
<span> / month</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/hub/src/components/ArchitectureBoard/ArchitectureItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const ArchitectureItem = ({
))}
</div>
</div>
<div className="w-52">₩ {Math.floor(cost)}</div>
<div className="w-52">₩ {Math.floor(cost).toLocaleString()}</div>
<div className="w-40">{stars}</div>
<div className="w-40">{imports}</div>
</li>
Expand Down

0 comments on commit d1dc49c

Please sign in to comment.