diff --git a/package.json b/package.json index 0a4acee..0dd3370 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pcot", - "version": "1.0.0", + "version": "1.0.1", "private": true, "homepage": ".", "dependencies": { diff --git a/src/assets/Bell.png b/src/assets/Bell.png new file mode 100644 index 0000000..57c2636 Binary files /dev/null and b/src/assets/Bell.png differ diff --git a/src/assets/addNode.svg b/src/assets/addNode.svg new file mode 100644 index 0000000..5f8f2a9 --- /dev/null +++ b/src/assets/addNode.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Alarm/AlarmModal/index.tsx b/src/components/Alarm/AlarmModal/index.tsx new file mode 100644 index 0000000..f40c954 --- /dev/null +++ b/src/components/Alarm/AlarmModal/index.tsx @@ -0,0 +1,69 @@ +import { PopupModal } from "@components/Modal"; +import React, { Dispatch, SetStateAction, useEffect, useState } from "react"; +import { useAlarm } from "@hooks/useAlarm"; + +import * as S from "./style"; +import { useNavigate } from "react-router-dom"; + +const AlarmModal = ({ + active, + setActive, +}: { + active: boolean; + setActive?: Dispatch>; +}) => { + const { onGetAlarm, onPatchAlarm } = useAlarm(); + const navigate = useNavigate(); + const [alarmList, setAlarmList] = useState>([]); + + useEffect(() => { + onGetAlarm(1) + .then((res: any) => { + const alarmList = res.map((list: any) => ( +
+ {list.view === "Y" ? ( + {box(list)} + ) : ( + {box(list)} + )} +
+ )); + setAlarmList(alarmList); + }) + .catch((err) => { + console.log(err); + }); + }, []); + + const onClickBox = (list: any) => { + onPatchAlarm(list.idx).then((res: any) => { + console.log(res); + }); + navigate(`${list.path}`); + }; + + const box = (list: any) => ( + onClickBox(list)}> + {list.text} + {list.path} + {list.registerTime} + + ); + + const renderAlarmList = () => { + return
{alarmList}
; + }; + + return ( +
+ +
+ Notification +
{renderAlarmList() ? renderAlarmList() :
알람을 찾을 수 없습니다!
}
+
+ +
+ ); +}; + +export default AlarmModal; diff --git a/src/components/Alarm/AlarmModal/style.ts b/src/components/Alarm/AlarmModal/style.ts new file mode 100644 index 0000000..715c587 --- /dev/null +++ b/src/components/Alarm/AlarmModal/style.ts @@ -0,0 +1,69 @@ +import styled from "styled-components"; + +export const modalType = styled.h2` + font-size: 30px; + width: 100%; + height: 10%; + + color: black; + text-align: center; +`; + +export const box = styled.div` + margin: auto; + margin-top: 10px; + width: 95%; + height: 10%; + border-radius: 10px; + + overflow-y: scroll; + text-align: left; + + border: 1px solid blue; + cursor: pointer; +`; + +export const grayFilter = styled.div` + margin: auto; + margin-top: 10px; + width: 95%; + height: 10%; + border-radius: 10px; + + overflow-y: scroll; + text-align: left; + + border: 1px solid blue; + cursor: pointer; + + background-color: rgb(230, 230, 230); +`; + +export const content = styled.div` + width: 97%; + height: 10%; + margin-top: 1.5%; + margin-bottom: 1.5%; + margin-left: 1.5%; + margin-right: 1.5%; +`; + +export const title = styled.h1` + margin: auto; + font-size: 25px; + color: black; +`; + +export const path = styled.h3` + font-size: small; + width: 50%; + color: gray; +`; + +export const time = styled.h3` + font-size: small; + /* float: right; */ + margin-right: 5px; + text-align: right; + color: gray; +`; diff --git a/src/components/Alarm/index.tsx b/src/components/Alarm/index.tsx index 5bc75f3..93ca598 100644 --- a/src/components/Alarm/index.tsx +++ b/src/components/Alarm/index.tsx @@ -1,72 +1,17 @@ -import React, { useEffect, useState } from "react"; -import axios from "axios"; +import React, { useState } from "react"; export const API_URL = process.env.REACT_APP_API; import * as S from "./style"; -import { useNavigate } from "react-router-dom"; - -interface OrgData { - text: string; - path: string; - registerTime: string; -} +import Bell from "@assets/Bell.png"; +import AlarmModal from "./AlarmModal"; const Alarm = () => { - const [data, setData] = useState([]); - - const [isVisible, setIsVisible] = useState(false); - - const handleMouseClick = () => { - setIsVisible(!isVisible); - }; - - function Testit({ title, path, time }: { title: string; path: string; time: string }) { - const navigate = useNavigate(); - console.log(path); - console.log(time); - console.log(title); - return ( - <> - navigate(path)}> - {title} - {path} - {time} - - - ); - } - - useEffect(() => { - const fetchData = async () => { - try { - const response = await axios.get(`${API_URL}/v2/search/alarm/get?page=1`, { - withCredentials: true, - }); - const jsonData = response.data; - setData(jsonData.data as OrgData[]); - } catch (error) { - console.error("데이터를 가져오는 중에 오류 발생:", error); - } - }; - - fetchData(); - }, []); + const [modalIsOpen, setModalIsOpen] = useState(false); return ( - <> - - {isVisible && ( - - {data.map((orgData, index) => ( - - ))} - - )} - +
+ setModalIsOpen(true)} /> + {modalIsOpen && } +
); }; diff --git a/src/components/Alarm/style.ts b/src/components/Alarm/style.ts index bcd5299..e09ba0c 100644 --- a/src/components/Alarm/style.ts +++ b/src/components/Alarm/style.ts @@ -1,41 +1,9 @@ import styled from "styled-components"; -export const box = styled.div` - width: 100%; - height: 100%; - - overflow-y: scroll; - text-align: left; -`; - -export const content = styled.div` - width: 100%; - height: 20%; - margin-bottom: 10%; -`; - -export const title = styled.h1` - font-size: small; - color: black; -`; - -export const path = styled.h3` - font-size: small; - width: 90%; - color: gray; -`; - -export const time = styled.h3` - font-size: small; - /* float: right; */ - text-align: right; - color: gray; -`; - -export const AlarmBtn = styled.div` +export const AlarmBtn = styled.img` border-radius: 50%; - width: 5%; - height: 10%; - - background-color: black; + margin-top: 3px; + width: 27px; + height: 30px; + right: 45px; `; diff --git a/src/components/GitGraph/PsdNodeModal/index.tsx b/src/components/GitGraph/PsdNodeModal/index.tsx deleted file mode 100644 index e3f0fbb..0000000 --- a/src/components/GitGraph/PsdNodeModal/index.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { PopupModal } from "@components/Modal"; -import React, { Dispatch, SetStateAction, useEffect, useState } from "react"; -import { useParams } from "react-router-dom"; -import { useNodeInfo } from "@hooks/useNodeInfo"; - -import X from "@assets/X.png"; - -import * as S from "./style"; - -const PsdNodeModal = ({ - active, - setActive, -}: { - active: boolean; - setActive?: Dispatch>; -}) => { - const { PsdImgGet, NodePsdInfoGet, LayerPsdInfoGet } = useNodeInfo(); - const { organization, workspace, psdname, psdimg } = useParams(); - const [data, setData] = useState([]); - const [renderImg, setRenderImg] = useState([]); - const [renderNode, setRenderNode] = useState([]); - const [renderLayer, setRenderLayer] = useState([]); - - useEffect(() => { - PsdImgGet(organization, workspace, psdname, psdimg).then((res) => { - setData(res); - console.log(data); - - const psd = res.data; - const psdInfo = renderPsdImg(psd); - - setRenderImg(psdInfo); - }); - }); - - useEffect(() => { - NodePsdInfoGet(organization, workspace, psdname, psdimg).then((res) => { - setData(res); - - const node = res.data; - const nodeInfo = renderPsdInfo(node); - - setRenderNode(nodeInfo); - }); - }, []); - - useEffect(() => { - LayerPsdInfoGet(organization, workspace, psdname, psdimg).then((res) => { - setData(res); - - const layer = res.data; - const layerInfo = renderLayerInfo(layer); - - setRenderLayer(layerInfo); - }); - }, []); - - const renderPsdImg = (info: any) => { - console.log(info); - return ( -
- {info.file} -
- ); - }; - - const renderPsdInfo = (info: any) => { - console.log(info); - return ( -
- {info.name} - {info.size} - {info.comment} - {info.uploadUserName} - {info.uploadTime} -
- ); - }; - - const renderLayerInfo = (info: any) => { - console.log(info); - return ( -
- {info.name} - {info.width} - {info.height} - {info.modeKey} - {info.transeparency} - {info.clipping} - {info.vision} - {info.folderYn} -
- ); - }; - - return ( -
- -
- - - {renderImg ? renderImg :
Loading
} - {renderNode ? renderNode :
Loading
} - - {renderLayer ? renderLayer :
Loading
} -
- -
- ); -}; - -export default PsdNodeModal; diff --git a/src/components/GitGraph/PsdNodeModal/style.ts b/src/components/GitGraph/PsdNodeModal/style.ts deleted file mode 100644 index 8914d18..0000000 --- a/src/components/GitGraph/PsdNodeModal/style.ts +++ /dev/null @@ -1,109 +0,0 @@ -import styled from "styled-components"; - -export const X = styled.img` - position: absolute; - top: 10px; - right: 10px; - width: 30px; - height: 30px; - cursor: pointer; -`; - -export const Layout = styled.div` - display: flex; - justify-content: space-around; - margin-top: 20px; - float: left; -`; - -export const Img = styled.img` - display: flex; - align-items: flex-start; - margin-left: 20px; - width: 64%; - max-width: 450px; - max-height: 450px; - border-radius: 10px; -`; - -export const ModalPsdComment = styled.div` - width: 300px; - font-family: Pretendard; - font-size: 18px; - font-style: normal; - font-weight: 400; - line-height: normal; - align-self: center; - text-align: left; - margin-top: 7px; - margin-left: 35px; -`; - -export const ModalTitle = styled.div` - width: 400px; - font-family: Pretendard; - font-size: 22px; - font-style: normal; - font-weight: 400; - line-height: normal; - align-self: center; - text-align: left; - margin-top: 15px; - margin-left: 35px; -`; - -export const ModalInfoText = styled.p` - color: #7a7a7a; - font-family: Pretendard; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: normal; - align-self: center; - text-align: left; - margin-top: 15px; - margin-left: 35px; -`; - -export const LayerLayout = styled.div` - display: flex; - flex-direction: column; - margin-top: 20px; - /* word-break: break-all; */ - float: left; -`; - -export const LayerItem = styled.div` - display: flex; - align-items: flex-start; - margin-top: 10px; - margin-left: 10px; - width: 360px; - height: 50px; - line-height: 50px; - border: 1px solid #e9e9e7; - border-radius: 10px; - - cursor: pointer; -`; - -export const LayerImg = styled.img` - /* display: flex; - align-items: flex-start; */ - margin-left: 8px; - margin-top: 5px; - padding: 0; - width: 40px; - border-radius: 5px; -`; - -export const LayerText = styled.p` - font-family: Pretendard; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: normal; - align-self: center; - text-align: left; - margin-left: 10px; -`; diff --git a/src/components/GitGraph/index.tsx b/src/components/GitGraph/index.tsx index bf5ce7c..7f45951 100644 --- a/src/components/GitGraph/index.tsx +++ b/src/components/GitGraph/index.tsx @@ -1,118 +1,87 @@ import React, { useEffect, useState } from "react"; -import { useParams } from "react-router-dom"; -import { useGitgraph } from "@hooks/useGitgraph"; +import { useNavigate, useParams } from "react-router-dom"; +import { Gitgraph } from "@gitgraph/react"; +import { TemplateName, Orientation } from "@gitgraph/core"; import * as S from "./style"; -import PsdNodeModal from "@components/GitGraph/PsdNodeModal"; -import Plus from "@assets/plus.svg"; -import Tree from "@assets/modal_img.png"; -import Wrapper from "@components/Wrapper"; +import addNode from "@assets/addNode.svg"; +import { useGitgraph } from "@hooks/useGitgraph"; +import PsdNodeModal from "@components/PsdNodeModal"; + +interface GitTreeNode { + name: string; + comment: string; + child: GitTreeNode[]; +} export const GitGraph = () => { - const { onNodeChange, drawNodeTree } = useGitgraph(); + const navigate = useNavigate(); const { organization, workspace } = useParams(); - const [NodeList, setNodeList] = useState([]); - const [data, setData] = useState([]); - - const [modalIsOpen, setModalIsOpen] = useState(false); - const [nodemodalOpen, setNodeModalOpen] = useState(false); - const [timer, setTimer] = useState("00:00:00"); - - const renderTree = (node: any) => { - console.log("asd"); - return ( - - { - console.log(node.name); - PsdNodeModal; - }} - > - {node.name} - - console.log(node.comment)}> - {node.comment} - - {node.child.map((childNode: any) => renderTree(childNode))} - - ); - }; + const { drawNodeTree } = useGitgraph(); + const [data, setData] = useState(null); + const [isModalOpen, setIsModalOpen] = useState(false); // Add state to control the modal useEffect(() => { drawNodeTree(organization, workspace).then((res) => { setData(res.data); - console.log(data); - - const rootNode = res.data; - const tree = renderTree(rootNode); - - setNodeList(tree); }); - }, []); + }, [organization, workspace]); - const currentTimer = () => { - const date = new Date(); - const hours = String(date.getHours()).padStart(2, "0"); - const minutes = String(date.getMinutes()).padStart(2, "0"); - const seconds = String(date.getSeconds()).padStart(2, "0"); - setTimer(`${hours}:${minutes}:${seconds}`); + const handleNodeClick = (node: GitTreeNode) => { + console.log(node); + setIsModalOpen(true); // Open the modal when a node is clicked }; - const startTimer = () => { - setInterval(currentTimer, 1000); - }; - startTimer(); - return ( - +
- {nodemodalOpen && } - Node Graph - {NodeList} - { - setModalIsOpen(true); - }} - > - Plus - - - setModalIsOpen(false)}> - Tree - {timer} - - Node Name - - - Node Comment - - - Select Node - - - 노드선택하기 - - Main - B - C - D - - -
- { - setModalIsOpen(false); - }} - > - Make node - -
- - - {NodeList ? NodeList :
Loading
} + {data ? ( + + {(gitgraph: any) => { + const master = gitgraph.branch("main"); + + const drawBranch = (node: GitTreeNode, parentBranch: any) => { + const branch = parentBranch.branch(node.name); + branch.commit({ + subject: node.comment, + onClick: () => handleNodeClick(node), + }); + if (node.child.length > 0) { + node.child.forEach((child) => { + drawBranch(child, branch); + }); + } + }; + + if (data) { + drawBranch(data, master); + } + }} + + ) : ( +
Loading
+ )} - + {/* Render the modal component when isModalOpen is true */} + {isModalOpen && ( + + )} + { + navigate(`/create-node/${organization}/${workspace}`); + }} + /> +
); }; - -export default GitGraph; diff --git a/src/components/GitGraph/style.ts b/src/components/GitGraph/style.ts index ef64576..dd7532e 100644 --- a/src/components/GitGraph/style.ts +++ b/src/components/GitGraph/style.ts @@ -1,200 +1,22 @@ import styled from "styled-components"; -import Modal from "react-modal"; export const Container = styled.div` - width: 100%; - height: 100%; - text-align: left; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 20px; `; -export const ContributesText = styled.div` - font-family: Pretendard; - font-size: 30px; - font-style: normal; - font-weight: 400; - line-height: normal; - - height: 30px; - margin-left: 70px; - margin-top: 30px; - @media (max-width: 768px) { - margin-left: 50px; - } +export const Box = styled.div` + width: 100px; + height: 50px; `; -export const Button = styled.button` - width: 80px; - height: 80px; - border: none; - background: #316ae2; - border-radius: 73px; - color: #ffffff; - box-shadow: 2px 2px 15px rgb(0, 0, 0, 0.2); +export const addNode = styled.img` position: absolute; - right: 35px; - bottom: 35px; + width: 100px; + height: 100px; + right: 0; + bottom: 0; cursor: pointer; - - :active { - background: #585858; - cursor: pointer; - } - - img { - width: 40px; - } -`; - -export const GraphBox = styled.div` - margin-left: 70px; - margin-top: 30px; -`; - -export const ModalContainer = styled(Modal)` - width: 310px; - height: 650px; - margin: 0 auto; - padding: 10px; - background-color: #ffffff; - box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.1); - border-radius: 15px; - - img { - width: 200px; - margin-top: 30px; - /* align-self: center; */ - } -`; - -export const ModalTime = styled.div` - font-family: Pretendard; - font-size: 16px; - font-style: normal; - color: #acacac; - margin-top: 10px; - text-align: center; -`; - -export const ModalText = styled.div` - width: 400px; - font-family: Pretendard; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: normal; - align-self: center; - text-align: left; - margin-top: 15px; - margin-left: 35px; -`; - -export const ModalName = styled.input` - width: 270px; - height: 40px; - border: none; - border-radius: 10px; - background-color: #e9e9e7; - margin-top: 5px; - margin-left: 20px; -`; - -export const ModalComment = styled.input` - width: 270px; - height: 113px; - border: none; - border-radius: 10px; - background-color: #e9e9e7; - margin-top: 5px; - margin-left: 20px; -`; - -export const ModalButton = styled.button` - width: 270px; - height: 50px; - border: none; - background: #316ae2; - border-radius: 10px; - color: #ffffff; - cursor: pointer; - font-family: Pretendard; - font-style: normal; - font-size: 16px; - line-height: 135.5%; - text-align: center; - margin-left: 20px; - margin-top: 20px; - /* @media screen and (min-width: 600px) { - width: 94%; - height: 73px; - color: #ffffff; - } */ - :active { - background: #585858; - cursor: pointer; - } -`; - -export const SelectNode = styled.select` - width: 270px; - height: 40px; - border: none; - border-radius: 10px; - background-color: #e9e9e7; - margin-top: 10px; - margin-left: 20px; - padding-left: 20px; - padding-right: 20px; - /* font-size: inherit; - line-height: inherit; */ - &:focus { - background-color: #e4ecff; - } -`; - -export const OptionNode = styled.option` - width: 400px; - height: auto; - /* position: absolute; */ - transform: translate(-50%, -50%); - border-radius: 15px; - background-color: #ffffff; - font-family: Pretendard; - font-style: normal; - font-size: 14px; -`; - -export const NodeContainer = styled.div` - width: 100%; - height: 30%; -`; - -export const NodeBox = styled.div` - margin: 0; - padding-top: 5px; -`; - -export const NodeTextName = styled.p` - font-family: Pretendard; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: normal; - align-self: center; - text-align: left; - margin-top: 10px; - margin-left: 35px; - margin-bottom: 0; -`; - -export const NodeTextComment = styled.p` - color: #7a7a7a; - font-family: Pretendard; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: normal; - align-self: center; - text-align: left; - margin-top: 2px; - margin-left: 35px; `; diff --git a/src/components/OrganizationList/index.tsx b/src/components/OrganizationList/index.tsx index fc2707e..640c91c 100644 --- a/src/components/OrganizationList/index.tsx +++ b/src/components/OrganizationList/index.tsx @@ -1,13 +1,52 @@ -import React from "react"; +import { useOrganizationList } from "@hooks/useOrganizationList"; +import React, { useEffect, useState } from "react"; +import { useNavigate, useParams } from "react-router-dom"; + +import * as S from "./style"; export const OrganizationList = () => { + const { query } = useParams(); + const navigate = useNavigate(); + const { onSearchListGet } = useOrganizationList(); + const [organizationList, setOrganizationList] = useState>([]); + useEffect(() => { + onSearchListGet(query, 1) + .then((res) => { + const orgList = res.map((list: any) => ( +
navigate(`/organization/${list.name}`)} + key={list.idx} + style={{ textDecoration: "none" }} + > + + + + {list.name} + {list.comment} + + +
+ )); + setOrganizationList(orgList); + }) + .catch((err) => { + console.log(err); + }); + }, []); + return (
-
- -

-

-
+ + Organization + { + navigate("/organization/create"); + }} + > + + add Organization + + + {organizationList}
); }; diff --git a/src/components/OrganizationList/style.ts b/src/components/OrganizationList/style.ts new file mode 100644 index 0000000..1039e9a --- /dev/null +++ b/src/components/OrganizationList/style.ts @@ -0,0 +1,68 @@ +import styled from "styled-components"; + +export const Container = styled.div` + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 20px; +`; + +export const Box = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 350px; + height: 350px; + padding: 20px; +`; + +export const TextBox = styled.div` + width: 250px; +`; + +export const img = styled.img` + width: 250px; + height: 250px; + object-fit: cover; + border-radius: 20px; +`; + +export const TitleBox = styled.div` + width: 100%; + margin-top: 10px; + font-family: Pretendard; + font-size: 25px; + font-style: normal; + font-weight: 400; + line-height: normal; +`; + +export const DescriptionBox = styled.div` + font-family: Pretendard; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: normal; +`; + +export const header = styled.div` + display: flex; + justify-content: space-between; +`; + +export const pageName = styled.div` + font-family: Pretendard; + font-size: 30px; + margin-top: 50px; + margin-left: 100px; +`; + +export const createOrganization = styled.div` + font-family: Pretendard; + font-size: 15px; + color: blue; + margin-top: 50px; + margin-right: 100px; + cursor: pointer; +`; diff --git a/src/components/PsdNodeModal/index.tsx b/src/components/PsdNodeModal/index.tsx new file mode 100644 index 0000000..5430328 --- /dev/null +++ b/src/components/PsdNodeModal/index.tsx @@ -0,0 +1,33 @@ +import { PopupModal } from "@components/Modal"; +import React, { Dispatch, SetStateAction } from "react"; + +import * as S from "./style"; + +const PsdNodeModal = ({ + active, + setActive, +}: { + active: boolean; + setActive?: Dispatch>; +}) => { + return ( +
+ + +
+ + +
+
+
+
+
+
+
+ + +
+ ); +}; + +export default PsdNodeModal; diff --git a/src/components/PsdNodeModal/style.ts b/src/components/PsdNodeModal/style.ts new file mode 100644 index 0000000..be5bbf2 --- /dev/null +++ b/src/components/PsdNodeModal/style.ts @@ -0,0 +1,8 @@ +import styled from "styled-components"; + +export const MainBox = styled.div` + display: flex; + flex-direction: column; + width: 100%; + height: 100%; +`; diff --git a/src/components/SideBar/SideBars/OrganizationSideBar/index.tsx b/src/components/SideBar/SideBars/OrganizationSideBar/index.tsx index 7c3e916..5f11b25 100644 --- a/src/components/SideBar/SideBars/OrganizationSideBar/index.tsx +++ b/src/components/SideBar/SideBars/OrganizationSideBar/index.tsx @@ -1,16 +1,52 @@ import { SidebarHeader } from "@components/SideBar/SideBarHeader"; import { Typography } from "@components/SideBar/Typography"; -import React from "react"; +import React, { useEffect, useState } from "react"; import { Sidebar } from "react-pro-sidebar"; -import { useNavigate } from "react-router-dom"; +import { useNavigate, useParams } from "react-router-dom"; import * as S from "./style"; import addMemberBtn from "@assets/addMemberBtn.png"; +import { useGetOrganizationInfo } from "@hooks/useGetOrganizationInfo"; +import { useWorkspaceList } from "@hooks/useWorkspaceList"; + +export const API_URL = process.env.REACT_APP_API; export const OrganizationSideBar = (props: any) => { const navigate = useNavigate(); + const { organization } = useParams(); + const [organizationInfo, setOrganizationInfo] = useState([]); + const [organizationMember, setOrganizationMember] = useState>([]); + const [workspaceList, setWorkspaceList] = useState>([]); + const { serchOrganizationMamber, serchOrganizationMoreInfo } = useGetOrganizationInfo(); + const { onRecentsListGet } = useWorkspaceList(); - // const { Rank, setRank, Receiver, setReceiver } = userInvite(); + useEffect(() => { + serchOrganizationMoreInfo(organization).then((res) => { + setOrganizationInfo(res.data); + }); + serchOrganizationMamber(organization).then((res) => { + setOrganizationMember( + res.data.map((list: any) => ( + + )), + ); + }); + onRecentsListGet("recents").then((res: any) => { + setWorkspaceList( + res.map((list: any) => ( + navigate(`/workspace/${list.organizationName}/${list.name}`)} + /> + )), + ); + }); + }, []); return (
@@ -38,10 +74,13 @@ export const OrganizationSideBar = (props: any) => { flex: 1, }} > - +
- Organization - 테스트코맨트트트트트 + {organizationInfo.name} + {organizationInfo.comment}
@@ -50,18 +89,11 @@ export const OrganizationSideBar = (props: any) => { Members - - - - - - - - - - - - + {organizationMember} + {/* */} @@ -69,12 +101,7 @@ export const OrganizationSideBar = (props: any) => { Other Workspace - - - - - - + {workspaceList} diff --git a/src/components/SideBar/SideBars/OrganizationSideBar/style.ts b/src/components/SideBar/SideBars/OrganizationSideBar/style.ts index 27c3ddd..adafb60 100644 --- a/src/components/SideBar/SideBars/OrganizationSideBar/style.ts +++ b/src/components/SideBar/SideBars/OrganizationSideBar/style.ts @@ -8,6 +8,7 @@ export const Img = styled.img` width: 150px; height: 150px; border-radius: 50%; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12); `; export const BottomLayout = styled.div` @@ -37,6 +38,7 @@ export const BottomMember = styled.img` margin-left: 5px; margin-bottom: 5px; cursor: pointer; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); `; export const BottomWorkspace = styled.img` diff --git a/src/hooks/useAlarm.tsx b/src/hooks/useAlarm.tsx new file mode 100644 index 0000000..9d04680 --- /dev/null +++ b/src/hooks/useAlarm.tsx @@ -0,0 +1,31 @@ +import axios from "axios"; + +export const API_URL = process.env.REACT_APP_API; + +export const useAlarm = () => { + const onGetAlarm = async (page: any) => { + try { + const API = `${API_URL}/v2/search/alarm/get?page=${page}`; + const response = await axios.get(API, { + withCredentials: true, + }); + return response.data.data; + } catch (error) { + console.log(error); + } + }; + + const onPatchAlarm = async (idx: any) => { + try { + const API = `${API_URL}/v2/search/alarm/check?idx=${idx}`; + const response = await axios.patch(API, null, { + withCredentials: true, + }); + return response.data.data; + } catch (error) { + console.log(error); + } + }; + + return { onGetAlarm, onPatchAlarm }; +}; diff --git a/src/hooks/useChangeOrganizationImg.tsx b/src/hooks/useChangeOrganizationImg.tsx index 013cb7b..7f21c6e 100644 --- a/src/hooks/useChangeOrganizationImg.tsx +++ b/src/hooks/useChangeOrganizationImg.tsx @@ -1,9 +1,11 @@ import { ToastError, ToastSuccess } from "@lib/Toast"; import axios from "axios"; +import { useNavigate } from "react-router-dom"; export const API_URL = process.env.REACT_APP_API; export const useChangeOrganizationImg = () => { + const navigate = useNavigate(); const onOrganizationImgSubmit = async (formData: any) => { const OrganizationChangeImgURL = `${API_URL}/v2/cloud/organization/edit/profile`; try { @@ -14,6 +16,7 @@ export const useChangeOrganizationImg = () => { withCredentials: true, }); ToastSuccess("조직 이미지를 정상적으로 등록했습니다"); + navigate("/"); } catch (error: any) { console.log(error); ToastError("조직 이미지 등록에 실패했습니다"); @@ -27,6 +30,7 @@ export const useChangeOrganizationImg = () => { withCredentials: true, }); ToastSuccess("조직 이미지를 정상적으로 등록했습니다"); + navigate("/"); } catch (error: any) { console.log(error); ToastError("조직 이미지 등록에 실패했습니다"); diff --git a/src/hooks/useGetOrganizationInfo.tsx b/src/hooks/useGetOrganizationInfo.tsx new file mode 100644 index 0000000..7033361 --- /dev/null +++ b/src/hooks/useGetOrganizationInfo.tsx @@ -0,0 +1,34 @@ +import axios from "axios"; + +export const API_URL = process.env.REACT_APP_API; + +export const useGetOrganizationInfo = () => { + const serchOrganizationMoreInfo = async (organization: any) => { + try { + const response = await axios.get( + `${API_URL}/v2/search/organization/more?name=${organization}`, + { + withCredentials: true, + }, + ); + return response.data; + } catch (error) { + console.error(error); + } + }; + + const serchOrganizationMamber = async (organization: any) => { + try { + const response = await axios.get( + `${API_URL}/v2/search/organization/user/belong?organization=${organization}`, + { + withCredentials: true, + }, + ); + return response.data; + } catch (error) { + console.error(error); + } + }; + return { serchOrganizationMoreInfo, serchOrganizationMamber }; +}; diff --git a/src/hooks/useGitgraph.tsx b/src/hooks/useGitgraph.tsx index c156a2b..475350b 100644 --- a/src/hooks/useGitgraph.tsx +++ b/src/hooks/useGitgraph.tsx @@ -1,6 +1,7 @@ import { ToastError, ToastSuccess } from "@lib/Toast"; -import React, { useCallback, useState } from "react"; +import { useCallback, useState } from "react"; import axios from "axios"; +import { usePsd } from "./usePsd"; export const API_URL = process.env.REACT_APP_API; @@ -8,33 +9,46 @@ export const useGitgraph = () => { const [Name, setName] = useState(""); const [Comment, setComment] = useState(""); const [ParentName, setParentName] = useState(""); + const [PsdName, setPsdName] = useState(""); + const [Psd, setPsd] = useState(null); - const URL = `${API_URL}/v2/cloud/node/create/aws-test-org/test-work`; + const { uploadPsd } = usePsd(); - const onNodeChange = useCallback((e: React.ChangeEvent) => { - if (e.target.name === "name") { + const onNodeChange = useCallback((e: any) => { + if (e.target.name === "Name") { setName(e.target.value); - } else if (e.target.name === "new node") { + } else if (e.target.name === "Comment") { setComment(e.target.value); - } else if (e.target.name === "main") { + } else if (e.target.name === "ParentName") { setParentName(e.target.value); + } else if (e.target.name === "PsdName") { + setPsdName(e.target.value); + } else if (e.target.name === "Psd") { + const file = e.target.files[0]; + console.log(file); + setPsd(file); } }, []); - const onNodeSubmit = async () => { + const onNodeSubmit = async (organization: any, workspace: any) => { try { + if (!Name || !Comment || !ParentName || !Psd || !PsdName) { + ToastError("모든 항목을 입력해주세요."); + return; + } + const URL = `${API_URL}/v2/cloud/node/create/${organization}/${workspace}`; const response = await axios.post( URL, { name: Name, comment: Comment, - parent: ParentName, + parentName: ParentName, }, { withCredentials: true }, ); ToastSuccess("노드 생성에 성공하였습니다."); - // ({ state: { name: Name, comment: Comment } }); + await uploadPsd(Psd, PsdName, organization, workspace, Name); return response.data; } catch (error) { ToastError("노드 생성에 실패했습니다."); @@ -47,6 +61,7 @@ export const useGitgraph = () => { const response = await axios.get(getUrl, { withCredentials: true, }); + return response.data; } catch { ToastError("에러"); @@ -57,5 +72,10 @@ export const useGitgraph = () => { onNodeChange, drawNodeTree, onNodeSubmit, + Name, + Comment, + ParentName, + Psd, + PsdName, }; }; diff --git a/src/hooks/useOrganizationList.tsx b/src/hooks/useOrganizationList.tsx index 9503eb8..35646b6 100644 --- a/src/hooks/useOrganizationList.tsx +++ b/src/hooks/useOrganizationList.tsx @@ -15,5 +15,17 @@ export const useOrganizationList = () => { } }; - return { onRecentsListGet }; + const onSearchListGet = async (query: any, page: any) => { + try { + const API = `${API_URL}/v2/search/organization/?query=${query}&page=${page}`; + const response = await axios.get(API, { + withCredentials: true, + }); + return response.data.data; + } catch (error) { + console.log(error); + } + }; + + return { onRecentsListGet, onSearchListGet }; }; diff --git a/src/hooks/usePsd.tsx b/src/hooks/usePsd.tsx new file mode 100644 index 0000000..d2740c3 --- /dev/null +++ b/src/hooks/usePsd.tsx @@ -0,0 +1,33 @@ +import { ToastError } from "@lib/Toast"; +import axios from "axios"; + +export const API_URL = process.env.REACT_APP_API; + +export const usePsd = () => { + const uploadPsd = async ( + Psd: any, + Comment: any, + organization: any, + workspace: any, + nodeName: any, + ) => { + const URL = `${API_URL}/v2/cloud/push/upload/${organization}/${workspace}/${nodeName}`; + try { + const formData = new FormData(); + formData.append("file", Psd); + formData.append("comment", Comment); + + const response = await axios.post(URL, formData, { + headers: { + "Content-Type": "multipart/form-data", + }, + withCredentials: true, + }); + + return response.data; + } catch (error) { + ToastError("PSD 업로드에 실패했습니다."); + } + }; + return { uploadPsd }; +}; diff --git a/src/pages/CreateNode/index.tsx b/src/pages/CreateNode/index.tsx new file mode 100644 index 0000000..4158f11 --- /dev/null +++ b/src/pages/CreateNode/index.tsx @@ -0,0 +1,55 @@ +import { useGitgraph } from "@hooks/useGitgraph"; +import React, { useEffect, useState } from "react"; +import { useParams } from "react-router-dom"; + +export const CreateNode = () => { + const { organization, workspace } = useParams(); + const { drawNodeTree } = useGitgraph(); + const [names, setNames] = useState([]); + const { onNodeChange, onNodeSubmit, Name, Comment, PsdName } = useGitgraph(); + + 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); + }); + }, []); + + return ( +
+ + + + + + + +
+ ); +}; diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 3822ac4..f986d71 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -21,6 +21,7 @@ export const Home = () => { const [ProfileData, setProfileData] = useState([{}]); const [ProfileImg, setProfileImg] = useState(Profile); const [toggle, setToggle] = useState(false); + const [query, setQuery] = useState(""); useEffect(() => { onGetProfile() @@ -34,6 +35,20 @@ export const Home = () => { }); }, []); + const handleSerchChange = (e: any) => { + setQuery(e.target.value); + }; + + const handleOnQueryKeyPress = (e: any) => { + if (e.key == "Enter") { + handleSerch(); + } + }; + + const handleSerch = () => { + navigate(`/organization/list/${query}`); + }; + return (
@@ -55,14 +70,20 @@ export const Home = () => {
setToggle(!toggle)} /> - - - + + + + + - diff --git a/src/pages/Home/style.ts b/src/pages/Home/style.ts index c10b36e..8ca712b 100644 --- a/src/pages/Home/style.ts +++ b/src/pages/Home/style.ts @@ -115,3 +115,7 @@ export const Main = styled.div` grid-area: main; margin-top: 70px; `; + +export const AlamBox = styled.div` + margin: 5px; +`; diff --git a/src/pages/Workspace/index.tsx b/src/pages/Workspace/index.tsx index 36bd899..fe2039a 100644 --- a/src/pages/Workspace/index.tsx +++ b/src/pages/Workspace/index.tsx @@ -3,7 +3,7 @@ import React from "react"; import * as S from "./style"; import Chart from "@components/Organization/Chart"; -import Gitgraph from "@components/GitGraph"; +import { GitGraph } from "@components/GitGraph"; import { OrganizationSideBar } from "@components/SideBar/SideBars/OrganizationSideBar"; import Wrapper from "@components/Wrapper"; @@ -15,7 +15,7 @@ export const Workspace = () => { - + ); diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 9f2e136..3e87642 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,7 +1,5 @@ import React from "react"; -import { useState } from "react"; - import { Route, Routes } from "react-router-dom"; import { Login } from "@components/Auth/Login"; import { Signin } from "@components/Auth/Signin"; @@ -9,7 +7,6 @@ import { Profile } from "@pages/Profile"; import { NotFound } from "@components/NotFound"; import { Home } from "@pages/Home"; import { EmailVerify } from "@pages/EmailVerify"; -import GitGraph from "@components/GitGraph"; import { MakeWorkSpace } from "@pages/MakeWorkSpace"; import { MakeOrganization } from "@pages/MakeOrganization"; import { Organization } from "@pages/Organization"; @@ -17,10 +14,9 @@ import { AnimatePresence } from "framer-motion"; import { SetprofileImg } from "@pages/SetProfileImage"; import { OrganizationList } from "@components/OrganizationList"; import { Workspace } from "@pages/Workspace"; -import PsdNodeModal from "@components/GitGraph/PsdNodeModal"; +import { CreateNode } from "@pages/CreateNode"; export const Router = () => { - const [nodemodalOpen, setNodeModalOpen] = useState(true); return (
@@ -32,21 +28,18 @@ export const Router = () => { } /> } /> - } /> {/* } /> */} } /> + } /> } /> } /> {/* */} {/* } /> */} - } - /> } /> } /> + } /> } />