Merge branch 'release/V1.2.0' into main

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pcot",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "homepage": ".",
   "dependencies": {

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<string[]>([]);
   const [selectedNode1, setSelectedNode1] = useState("");
-  const [bottomItems, setBottomItems] = useState<string[]>([]);
+  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<HTMLSelectElement>, 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 = ({
                 </select>
               </p>
 
-              <S.Img src="https://via.placeholder.com/300" alt="testimg" />
+              <S.Img src={beforePsdImg} alt="testimg" />
             </div>
             <S.CenterLogo src={changeBtn} alt="textlogo" />
             <div>
               <p>{Name}</p>
-              <S.Img src="https://via.placeholder.com/300" alt="testimg2" />
+              <S.Img src={psdImg} alt="testimg2" />
             </div>
           </S.Layout>
-          <S.BottomLayout>{bottomItems}</S.BottomLayout>
+          <S.BottomLayout>
+            {bottomItems ? bottomItems : <div>노드를 선택해주세요</div>}
+          </S.BottomLayout>
         </div>
       </PopupModal>
     </div>

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`

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,
       });

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";

src/pages/Workspace/index.tsx

@@ -17,8 +17,10 @@ export const Workspace = () => {
         <S.FloatBox>
           <OrganizationSideBar name={organization} />
         </S.FloatBox>
-        <Chart />
-        <GitGraph />
+        <S.Main>
+          <Chart />
+          <GitGraph />
+        </S.Main>
       </Wrapper>
     </div>
   );

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;
 `;