diff --git a/package.json b/package.json index 820927e..1694aaa 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pcot", - "version": "1.1.0", + "version": "1.2.0", "private": true, "homepage": ".", "dependencies": { diff --git a/src/assets/selectNodeImg.png b/src/assets/selectNodeImg.png new file mode 100644 index 0000000..758f08a Binary files /dev/null and b/src/assets/selectNodeImg.png differ diff --git a/src/components/PsdComparisonModal/index.tsx b/src/components/PsdComparisonModal/index.tsx index db4d278..fc261b2 100644 --- a/src/components/PsdComparisonModal/index.tsx +++ b/src/components/PsdComparisonModal/index.tsx @@ -8,6 +8,9 @@ import * as S from "./style"; import { useGitgraph } from "@hooks/useGitgraph"; import { useParams } from "react-router-dom"; import { usePsd } from "@hooks/usePsd"; +import selectNodeImg from "@assets/selectNodeImg.png"; + +export const API_URL = process.env.REACT_APP_API; export const PsdComparisonModal = ({ closeModal, @@ -23,7 +26,9 @@ export const PsdComparisonModal = ({ const { organization, workspace } = useParams(); const [names, setNames] = useState([]); const [selectedNode1, setSelectedNode1] = useState(""); - const [bottomItems, setBottomItems] = useState([]); + const [bottomItems, setBottomItems] = useState(""); + const [psdImg, setPsdImg] = useState(""); + const [beforePsdImg, setBeforePsdImg] = useState(selectNodeImg); useEffect(() => { drawNodeTree(organization, workspace).then((res) => { @@ -37,6 +42,9 @@ export const PsdComparisonModal = ({ }; extractNames(res.data); }); + setPsdImg( + `${API_URL}/v2/cloud/pull/image/preview/${organization}/${workspace}/${Name}/${psdName}`, + ); }, []); const onNodeChange = (e: React.ChangeEvent, nodeNumber: number) => { @@ -50,6 +58,9 @@ export const PsdComparisonModal = ({ console.log(`Node 1: ${selectedNode1}`); if (!selectedNode1) return; nodePsdList(organization, workspace, selectedNode1).then((res) => { + setBeforePsdImg( + `${API_URL}/v2/cloud/pull/image/preview/${organization}/${workspace}/${selectedNode1}/${res.data[0].name}`, + ); psdCompare(organization, workspace, selectedNode1, Name, res.data[0].name, psdName).then( (res) => { console.log(res.data.layer); @@ -94,15 +105,17 @@ export const PsdComparisonModal = ({

- +

{Name}

- +
- {bottomItems} + + {bottomItems ? bottomItems :
노드를 선택해주세요
} +
diff --git a/src/components/PsdComparisonModal/style.ts b/src/components/PsdComparisonModal/style.ts index 6ef234c..ae8a351 100644 --- a/src/components/PsdComparisonModal/style.ts +++ b/src/components/PsdComparisonModal/style.ts @@ -16,10 +16,12 @@ export const BottomLayout = styled.div` `; export const Img = styled.img` - width: 80%; + width: 300px; + height: 300px; max-width: 300px; max-height: 300px; border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); `; export const CenterLogo = styled.img` diff --git a/src/hooks/useNodeInfo.tsx b/src/hooks/useNodeInfo.tsx index 40ecd40..af693cc 100644 --- a/src/hooks/useNodeInfo.tsx +++ b/src/hooks/useNodeInfo.tsx @@ -5,7 +5,7 @@ export const API_URL = process.env.REACT_APP_API; export const useNodeInfo = () => { const PsdImgGet = async (OrgName: any, WokName: any, psdName: any, psdImg: any) => { try { - const API = `${API_URL}/v2/cloud/pull/source/${OrgName}/${WokName}/${psdName}/${psdName}/${psdImg}`; + const API = `${API_URL}/v2/cloud/pull/source/${OrgName}/${WokName}/${psdName}/${psdImg}`; const response = await axios.get(API, { withCredentials: true, }); diff --git a/src/pages/MakeWorkSpace/index.tsx b/src/pages/MakeWorkSpace/index.tsx index c820b12..ea0e024 100644 --- a/src/pages/MakeWorkSpace/index.tsx +++ b/src/pages/MakeWorkSpace/index.tsx @@ -1,4 +1,3 @@ -import { ProfileHover } from "@components/ProfileHover"; import React from "react"; import { useCreateWorkSpace } from "@hooks/useCreateWorkSpace"; import { useParams } from "react-router-dom"; diff --git a/src/pages/Workspace/index.tsx b/src/pages/Workspace/index.tsx index 4248130..b30d494 100644 --- a/src/pages/Workspace/index.tsx +++ b/src/pages/Workspace/index.tsx @@ -17,8 +17,10 @@ export const Workspace = () => { - - + + + + ); diff --git a/src/pages/Workspace/style.ts b/src/pages/Workspace/style.ts index 4ffbbab..5d5ea7b 100644 --- a/src/pages/Workspace/style.ts +++ b/src/pages/Workspace/style.ts @@ -2,4 +2,10 @@ import styled from "styled-components"; export const FloatBox = styled.div` float: left; + position: fixed; + z-index: 2; +`; + +export const Main = styled.div` + padding-left: 250px; `;