Merge branch 'release/V1.1.0' into main

package.json

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

src/components/GitGraph/index.tsx

@@ -19,7 +19,9 @@ export const GitGraph = () => {
   const { organization, workspace } = useParams();
   const { drawNodeTree } = useGitgraph();
   const [data, setData] = useState<GitTreeNode | null>(null);
-  const [isModalOpen, setIsModalOpen] = useState(false); // Add state to control the modal
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [nodeName, setNodeName] = useState<string>("");
+  const [nodeComment, setNodeComment] = useState<any>(null);
 
   useEffect(() => {
     drawNodeTree(organization, workspace).then((res) => {
@@ -29,7 +31,9 @@ export const GitGraph = () => {
 
   const handleNodeClick = (node: GitTreeNode) => {
     console.log(node);
-    setIsModalOpen(true); // Open the modal when a node is clicked
+    setIsModalOpen(true);
+    setNodeName(node.name);
+    setNodeComment(node.comment);
   };
 
   return (
@@ -67,12 +71,12 @@ export const GitGraph = () => {
           <div>Loading</div>
         )}
       </S.Container>
-      {/* Render the modal component when isModalOpen is true */}
       {isModalOpen && (
         <PsdNodeModal
           active={isModalOpen}
           setActive={setIsModalOpen}
-          // Pass any necessary props to your modal component
+          nodeName={nodeName}
+          nodeComment={nodeComment}
         />
       )}
       <S.addNode

src/components/Modal/index.tsx

@@ -27,6 +27,9 @@ const customModalStyles: ReactModal.Styles = {
     backgroundColor: "white",
     justifyContent: "center",
     overflow: "auto",
+    scrollbarWidth: "none",
+    msOverflowStyle: "none",
+    WebkitScrollSnapType: "none",
   },
 };
 

src/components/OrganizationInfo/index.tsx

@@ -0,0 +1,40 @@
+import { useGetOrganizationInfo } from "@hooks/useGetOrganizationInfo";
+import React, { useEffect, useState } from "react";
+
+import * as S from "./style";
+
+export const API_URL = process.env.REACT_APP_API;
+
+export const OrganizationInfo = (props: any) => {
+  const { serchOrganizationMoreInfo } = useGetOrganizationInfo();
+  const [organizationInfo, setOrganizationInfo] = useState<any>();
+  useEffect(() => {
+    const name = props.name;
+    serchOrganizationMoreInfo(name)
+      .then((res) => {
+        console.log(res.data);
+        setOrganizationInfo(
+          <S.InfoArea>
+            <S.Flex>
+              <S.OrganizationName>{res.data.name}</S.OrganizationName>
+              <S.Info>{res.data.exposure}</S.Info>
+            </S.Flex>
+            <S.Comment>{res.data.comment}</S.Comment>
+            <S.Info>{res.data.planName}</S.Info>
+            <S.Date>{res.data.createTime}</S.Date>
+          </S.InfoArea>,
+        );
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, []);
+  return (
+    <S.Container>
+      <S.Title>
+        <S.TitleText>Information</S.TitleText>
+      </S.Title>
+      <S.Container>{organizationInfo}</S.Container>
+    </S.Container>
+  );
+};

src/components/OrganizationInfo/style.ts

@@ -0,0 +1,80 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  text-align: left;
+`;
+
+export const InfoArea = styled.div`
+  margin-left: 325px;
+  margin-right: 75px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas: "info";
+`;
+
+export const Title = styled.span`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas: "title button";
+`;
+
+export const TitleText = styled.div`
+  font-family: Pretendard;
+  font-size: 30px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  grid-area: title;
+  justify-self: start;
+  margin-left: 50px;
+  margin-top: 15px;
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+
+export const OrganizationName = styled.div`
+  grid-area: imgname;
+  font-family: Pretendard;
+  font-size: 25px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  margin-bottom: 10px;
+  align-self: center;
+  margin-right: 10px;
+`;
+
+export const Comment = styled.div`
+  grid-area: imgname;
+  font-family: Pretendard;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  align-self: center;
+  margin-top: 2px;
+`;
+
+export const Info = styled.div`
+  grid-area: imgname;
+  color: #7a7a7a;
+  font-family: Pretendard;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  align-self: center;
+  margin-top: 2px;
+`;
+
+export const Date = styled.h1`
+  font-size: small;
+  /* float: right; */
+  margin-right: 5px;
+  text-align: right;
+  color: gray;
+`;
+
+export const Flex = styled.div`
+  display: flex;
+`;

src/components/OrganizationManipulate/index.tsx

@@ -0,0 +1,22 @@
+import { useGetOrganizationInfo } from "@hooks/useGetOrganizationInfo";
+import React, { useEffect, useState } from "react";
+
+import * as S from "./style";
+
+export const API_URL = process.env.REACT_APP_API;
+
+export const OrganizationManupulate = (props: any) => {
+  return (
+    <S.Container>
+      <S.Title>
+        <S.TitleText>Manipulate</S.TitleText>
+      </S.Title>
+      <S.EditArea>
+        <S.Edit>Invite people</S.Edit>
+        <S.Edit>Change Profile Image</S.Edit>
+        <S.EditWarning>Change Exposure</S.EditWarning>
+        <S.EditWarning>Delete</S.EditWarning>
+      </S.EditArea>
+    </S.Container>
+  );
+};

src/components/OrganizationManipulate/style.ts

@@ -0,0 +1,71 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  text-align: left;
+`;
+
+export const Title = styled.span`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas: "title button";
+`;
+
+export const TitleText = styled.div`
+  font-family: Pretendard;
+  font-size: 30px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  grid-area: title;
+  justify-self: start;
+  margin-left: 50px;
+  margin-top: 15px;
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+
+export const EditArea = styled.div`
+  margin-left: 325px;
+  margin-right: 75px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas: "info";
+`;
+
+export const Edit = styled.div`
+  grid-area: imgname;
+  color: black;
+  cursor: pointer;
+  font-family: Pretendard;
+  font-size: 23px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  align-self: center;
+  margin-top: 4px;
+`;
+
+export const EditWarning = styled.div`
+  grid-area: imgname;
+  color: red;
+  cursor: pointer;
+  font-family: Pretendard;
+  font-size: 23px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  align-self: center;
+  margin-top: 4px;
+`;
+
+export const Date = styled.h1`
+  font-size: small;
+  /* float: right; */
+  margin-right: 5px;
+  text-align: right;
+  color: gray;
+`;
+
+export const Flex = styled.div`
+  display: flex;
+`;

src/components/PsdComparisonModal/index.tsx

@@ -1,42 +1,108 @@
 import { PopupModal } from "@components/Modal";
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import changeBtn from "@assets/changeBtn.png";
 import X from "@assets/X.png";
 
 import * as S from "./style";
+import { useGitgraph } from "@hooks/useGitgraph";
+import { useParams } from "react-router-dom";
+import { usePsd } from "@hooks/usePsd";
+
+export const PsdComparisonModal = ({
+  closeModal,
+  Name,
+  psdName,
+}: {
+  closeModal: () => void;
+  Name: any;
+  psdName: any;
+}) => {
+  const { drawNodeTree } = useGitgraph();
+  const { psdCompare, nodePsdList } = usePsd();
+  const { organization, workspace } = useParams();
+  const [names, setNames] = useState<string[]>([]);
+  const [selectedNode1, setSelectedNode1] = useState("");
+  const [bottomItems, setBottomItems] = useState<string[]>([]);
+
+  useEffect(() => {
+    drawNodeTree(organization, workspace).then((res) => {
+      const extractNames = (node: any) => {
+        if (node && node.name) {
+          setNames((prevNames: string[]) => [...prevNames, node.name]);
+        }
+        if (node.child && node.child.length > 0) {
+          node.child.forEach(extractNames);
+        }
+      };
+      extractNames(res.data);
+    });
+  }, []);
+
+  const onNodeChange = (e: React.ChangeEvent<HTMLSelectElement>, nodeNumber: number) => {
+    const selectedNode = e.target.value;
+    if (nodeNumber === 1) {
+      setSelectedNode1(selectedNode);
+    }
+  };
+
+  useEffect(() => {
+    console.log(`Node 1: ${selectedNode1}`);
+    if (!selectedNode1) return;
+    nodePsdList(organization, workspace, selectedNode1).then((res) => {
+      psdCompare(organization, workspace, selectedNode1, Name, res.data[0].name, psdName).then(
+        (res) => {
+          console.log(res.data.layer);
+          const bottomItems = res.data.layer.map((item: any) => {
+            if (item.status === "create") {
+              return (
+                <S.BottomItemCreate key={item.after.name}>{item.after.name}</S.BottomItemCreate>
+              );
+            } else if (item.status === "edit") {
+              return (
+                <S.BottomItemChange key={item.after.name}>{item.after.name}</S.BottomItemChange>
+              );
+            } else if (item.status === "delete") {
+              return (
+                <S.BottomItemDelete key={item.before.name}>{item.before.name}</S.BottomItemDelete>
+              );
+            } else if (item.status === "immutable") {
+              return <S.BottomItemNomal key={item.after.name}>{item.after.name}</S.BottomItemNomal>;
+            }
+          });
+          setBottomItems(bottomItems);
+        },
+      );
+    });
+  }, [selectedNode1]);
 
-export const PsdComparisonModal = () => {
   return (
     <div>
       <PopupModal>
         <div>
-          <S.X src={X} alt="testimg" />
+          <S.X onClick={closeModal} src={X} alt="testimg" />
           <S.Layout>
             <div>
-              <p>asxdasd</p>
+              <p>
+                <select onChange={(e) => onNodeChange(e, 1)} name="ParentName">
+                  <option value="">선택</option>
+                  {names.map((name) => (
+                    <option key={name} value={name}>
+                      {name}
+                    </option>
+                  ))}
+                </select>
+              </p>
+
               <S.Img src="https://via.placeholder.com/300" alt="testimg" />
             </div>
             <S.CenterLogo src={changeBtn} alt="textlogo" />
             <div>
-              <p>asxdas</p>
+              <p>{Name}</p>
               <S.Img src="https://via.placeholder.com/300" alt="testimg2" />
             </div>
           </S.Layout>
-          <S.BottomLayout>
-            <S.BottomItem>line1</S.BottomItem>
-            <S.BottomItem>line1</S.BottomItem>
-            <S.BottomItem>line1</S.BottomItem>
-            <S.BottomItem>line1</S.BottomItem>
-            <S.BottomItem>line1</S.BottomItem>
-            <S.BottomItem>line1</S.BottomItem>
-            <S.BottomItem>line1</S.BottomItem>
-            <S.BottomItem>line1</S.BottomItem>
-            <S.BottomItem>line1</S.BottomItem>
-            <S.BottomItem>line1</S.BottomItem>
-            <S.BottomItem>line1</S.BottomItem>
-            <S.BottomItem>line1</S.BottomItem>
-          </S.BottomLayout>
+          <S.BottomLayout>{bottomItems}</S.BottomLayout>
         </div>
       </PopupModal>
     </div>