From 6cd192bb00849d08c1eefcbb0cdaf0e62e8eca33 Mon Sep 17 00:00:00 2001 From: Jinsoo1004 Date: Tue, 7 Nov 2023 23:37:22 +0900 Subject: [PATCH 01/10] =?UTF-8?q?=F0=9F=94=A8=20::=20View?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/OrganizationList/index.tsx | 79 +++++++++++++++++++++-- src/components/OrganizationList/style.ts | 47 ++++++++++++++ 2 files changed, 120 insertions(+), 6 deletions(-) create mode 100644 src/components/OrganizationList/style.ts diff --git a/src/components/OrganizationList/index.tsx b/src/components/OrganizationList/index.tsx index fc2707e..be6bc63 100644 --- a/src/components/OrganizationList/index.tsx +++ b/src/components/OrganizationList/index.tsx @@ -1,13 +1,80 @@ -import React from "react"; +import { useOrganizationList } from "@hooks/useOrganizationList"; +import React, { useEffect, useState } from "react"; +import { useNavigate } from "react-router-dom"; + +import * as S from "./style"; export const OrganizationList = () => { + const navigate = useNavigate(); + const { onRecentsListGet } = useOrganizationList(); + const [organizationList, setOrganizationList] = useState>([]); + // useEffect(() => { + // onRecentsListGet() + // .then((res) => { + // setOrganizationList( + // res.map((list: any) => ( + //
navigate(`/organization/${list.name}`)} + // key={list.idx} + // style={{ textDecoration: "none" }} + // >
+ // )), + // ); + // }) + // .catch((err) => { + // console.log(err); + // }); + // }, []); + return (
-
- -

-

-
+ + + + + asdasdsa + + ㅇㄴ로ㅠㄴㄹ늉리ㅓㅇ뉴ㅓㅗㄹ유너로ㅠㅇ너륭뉼나러오뉴란어ㅠ라널 + + + + + + + asdasdsa + + ㅇㄴ로ㅠㄴㄹ늉리ㅓㅇ뉴ㅓㅗㄹ유너로ㅠㅇ너륭뉼나러오뉴란어ㅠ라널 + + + + + + + asdasdsa + + ㅇㄴ로ㅠㄴㄹ늉리ㅓㅇ뉴ㅓㅗㄹ유너로ㅠㅇ너륭뉼나러오뉴란어ㅠ라널 + + + + + + + asdasdsa + + ㅇㄴ로ㅠㄴㄹ늉리ㅓㅇ뉴ㅓㅗㄹ유너로ㅠㅇ너륭뉼나러오뉴란어ㅠ라널 + + + + + + + asdasdsa + + ㅇㄴ로ㅠㄴㄹ늉리ㅓㅇ뉴ㅓㅗㄹ유너로ㅠㅇ너륭뉼나러오뉴란어ㅠ라널 + + + +
); }; diff --git a/src/components/OrganizationList/style.ts b/src/components/OrganizationList/style.ts new file mode 100644 index 0000000..b58495d --- /dev/null +++ b/src/components/OrganizationList/style.ts @@ -0,0 +1,47 @@ +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; +`; From 04d2415891df72e512d3fc4e922564de89d7bf0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=B0=AC=ED=98=81?= <109561938+dogbokchif@users.noreply.github.com> Date: Tue, 7 Nov 2023 23:54:46 +0900 Subject: [PATCH 02/10] =?UTF-8?q?=EC=A1=B0=EC=A7=81=20=EA=B2=80=EC=83=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/OrganizationList/index.tsx | 94 +++++++---------------- src/hooks/useOrganizationList.tsx | 14 +++- src/routes/index.tsx | 2 +- 3 files changed, 42 insertions(+), 68 deletions(-) diff --git a/src/components/OrganizationList/index.tsx b/src/components/OrganizationList/index.tsx index be6bc63..81fc0ec 100644 --- a/src/components/OrganizationList/index.tsx +++ b/src/components/OrganizationList/index.tsx @@ -1,80 +1,42 @@ import { useOrganizationList } from "@hooks/useOrganizationList"; import React, { useEffect, useState } from "react"; -import { useNavigate } from "react-router-dom"; +import { useNavigate, useParams } from "react-router-dom"; import * as S from "./style"; export const OrganizationList = () => { + const { query } = useParams(); const navigate = useNavigate(); - const { onRecentsListGet } = useOrganizationList(); + const { onSearchListGet } = useOrganizationList(); const [organizationList, setOrganizationList] = useState>([]); - // useEffect(() => { - // onRecentsListGet() - // .then((res) => { - // setOrganizationList( - // res.map((list: any) => ( - //
navigate(`/organization/${list.name}`)} - // key={list.idx} - // style={{ textDecoration: "none" }} - // >
- // )), - // ); - // }) - // .catch((err) => { - // console.log(err); - // }); - // }, []); + 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 (
- - - - - asdasdsa - - ㅇㄴ로ㅠㄴㄹ늉리ㅓㅇ뉴ㅓㅗㄹ유너로ㅠㅇ너륭뉼나러오뉴란어ㅠ라널 - - - - - - - asdasdsa - - ㅇㄴ로ㅠㄴㄹ늉리ㅓㅇ뉴ㅓㅗㄹ유너로ㅠㅇ너륭뉼나러오뉴란어ㅠ라널 - - - - - - - asdasdsa - - ㅇㄴ로ㅠㄴㄹ늉리ㅓㅇ뉴ㅓㅗㄹ유너로ㅠㅇ너륭뉼나러오뉴란어ㅠ라널 - - - - - - - asdasdsa - - ㅇㄴ로ㅠㄴㄹ늉리ㅓㅇ뉴ㅓㅗㄹ유너로ㅠㅇ너륭뉼나러오뉴란어ㅠ라널 - - - - - - - asdasdsa - - ㅇㄴ로ㅠㄴㄹ늉리ㅓㅇ뉴ㅓㅗㄹ유너로ㅠㅇ너륭뉼나러오뉴란어ㅠ라널 - - - - + {organizationList}
); }; 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/routes/index.tsx b/src/routes/index.tsx index 9f2e136..9dd3dc0 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -47,7 +47,7 @@ export const Router = () => { /> } /> } /> - } /> + } /> From 27054863b627c91b2eca53abd0c3f5353b26a51e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=B0=AC=ED=98=81?= <109561938+dogbokchif@users.noreply.github.com> Date: Wed, 8 Nov 2023 00:24:13 +0900 Subject: [PATCH 03/10] =?UTF-8?q?=EA=B2=80=EC=83=89=EC=B0=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/index.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 3822ac4..038019e 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -12,6 +12,7 @@ import { MainSideBar } from "@components/SideBar/SideBars/MainSideBar"; import Alarm from "@components/Alarm"; import Wrapper from "@components/Wrapper"; import Hambuger from "@assets/Hambuger.svg"; +import { animate } from "framer-motion"; export const API_URL = process.env.REACT_APP_API; @@ -21,6 +22,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 +36,14 @@ export const Home = () => { }); }, []); + const handleSerchChange = (e: any) => { + setQuery(e.target.value); + }; + + const handleSerch = () => { + navigate(`/test/${query}`); + }; + return (
@@ -58,8 +68,12 @@ export const Home = () => { - - + + From d3937f4c0e10dff3abbf627b6b88770fe2ab141e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=B0=AC=ED=98=81?= <109561938+dogbokchif@users.noreply.github.com> Date: Wed, 8 Nov 2023 01:24:12 +0900 Subject: [PATCH 04/10] =?UTF-8?q?=EC=98=AC=EA=B0=80=EB=8B=88=EC=A0=9C?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=EC=B0=BD=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20list=EB=B3=80=EA=B2=BD`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/OrganizationList/index.tsx | 10 ++++++++++ src/components/OrganizationList/style.ts | 21 +++++++++++++++++++++ src/hooks/useChangeOrganizationImg.tsx | 4 ++++ src/pages/Home/index.tsx | 10 ++++++++-- src/routes/index.tsx | 2 +- 5 files changed, 44 insertions(+), 3 deletions(-) diff --git a/src/components/OrganizationList/index.tsx b/src/components/OrganizationList/index.tsx index 81fc0ec..640c91c 100644 --- a/src/components/OrganizationList/index.tsx +++ b/src/components/OrganizationList/index.tsx @@ -36,6 +36,16 @@ export const OrganizationList = () => { return (
+ + Organization + { + navigate("/organization/create"); + }} + > + + add Organization + + {organizationList}
); diff --git a/src/components/OrganizationList/style.ts b/src/components/OrganizationList/style.ts index b58495d..1039e9a 100644 --- a/src/components/OrganizationList/style.ts +++ b/src/components/OrganizationList/style.ts @@ -45,3 +45,24 @@ export const DescriptionBox = styled.div` 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/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/pages/Home/index.tsx b/src/pages/Home/index.tsx index 038019e..7230d0b 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -12,7 +12,6 @@ import { MainSideBar } from "@components/SideBar/SideBars/MainSideBar"; import Alarm from "@components/Alarm"; import Wrapper from "@components/Wrapper"; import Hambuger from "@assets/Hambuger.svg"; -import { animate } from "framer-motion"; export const API_URL = process.env.REACT_APP_API; @@ -40,8 +39,14 @@ export const Home = () => { setQuery(e.target.value); }; + const handleOnQueryKeyPress = (e: any) => { + if (e.key == "Enter") { + handleSerch(); + } + }; + const handleSerch = () => { - navigate(`/test/${query}`); + navigate(`/organization/list/${query}`); }; return ( @@ -71,6 +76,7 @@ export const Home = () => { diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 9dd3dc0..87a8f77 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -36,6 +36,7 @@ export const Router = () => { {/* } /> */} } /> + } /> } /> } /> @@ -47,7 +48,6 @@ export const Router = () => { /> } /> } /> - } />
From e03372909c900d7805e49f3d4f48beb30e74043c Mon Sep 17 00:00:00 2001 From: Jinsoo1004 Date: Wed, 8 Nov 2023 01:27:32 +0900 Subject: [PATCH 05/10] =?UTF-8?q?=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EA=B0=80=EC=A0=B8=EC=98=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SideBars/OrganizationSideBar/index.tsx | 75 +++++++++++++------ .../SideBars/OrganizationSideBar/style.ts | 2 + src/hooks/useGetOrganizationInfo.tsx | 34 +++++++++ 3 files changed, 87 insertions(+), 24 deletions(-) create mode 100644 src/hooks/useGetOrganizationInfo.tsx 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/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 }; +}; From fd5c49302723e4487088adb59b6973eacc6cf28c Mon Sep 17 00:00:00 2001 From: Jinsoo1004 Date: Wed, 8 Nov 2023 04:10:54 +0900 Subject: [PATCH 06/10] =?UTF-8?q?=F0=9F=94=A8=20::=20node=EC=83=9D?= =?UTF-8?q?=EC=84=B1,=20=EA=B7=B8=EB=9E=98=ED=94=84=EC=83=9D=EC=84=B1,=20p?= =?UTF-8?q?sd=ED=8C=8C=EC=9D=BC=EB=93=B1=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/addNode.svg | 22 ++ src/components/GitGraph/index.tsx | 167 ++++++--------- src/components/GitGraph/style.ts | 202 ++---------------- .../{GitGraph => }/PsdNodeModal/index.tsx | 0 .../{GitGraph => }/PsdNodeModal/style.ts | 0 src/hooks/useGitgraph.tsx | 38 +++- src/hooks/usePsd.tsx | 33 +++ src/pages/CreateNode/index.tsx | 55 +++++ src/pages/Workspace/index.tsx | 4 +- src/routes/index.tsx | 12 +- 10 files changed, 223 insertions(+), 310 deletions(-) create mode 100644 src/assets/addNode.svg rename src/components/{GitGraph => }/PsdNodeModal/index.tsx (100%) rename src/components/{GitGraph => }/PsdNodeModal/style.ts (100%) create mode 100644 src/hooks/usePsd.tsx create mode 100644 src/pages/CreateNode/index.tsx 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/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/GitGraph/PsdNodeModal/index.tsx b/src/components/PsdNodeModal/index.tsx similarity index 100% rename from src/components/GitGraph/PsdNodeModal/index.tsx rename to src/components/PsdNodeModal/index.tsx diff --git a/src/components/GitGraph/PsdNodeModal/style.ts b/src/components/PsdNodeModal/style.ts similarity index 100% rename from src/components/GitGraph/PsdNodeModal/style.ts rename to src/components/PsdNodeModal/style.ts 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/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/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..cbd1d65 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,7 +28,6 @@ export const Router = () => { } /> } /> - } /> {/* } /> */} } /> @@ -41,12 +36,9 @@ export const Router = () => { {/* */} {/* } /> */} - } - /> } /> } /> + } /> } /> From 839477f59cc75439e9f3a0bcad29b4564e801f14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=B0=AC=ED=98=81?= <109561938+dogbokchif@users.noreply.github.com> Date: Wed, 8 Nov 2023 04:27:32 +0900 Subject: [PATCH 07/10] =?UTF-8?q?=EC=95=8C=EB=9E=8C`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Alarm/AlarmModal/index.tsx | 62 ++++++++++++++++++++ src/components/Alarm/AlarmModal/style.ts | 69 ++++++++++++++++++++++ src/components/Alarm/index.tsx | 70 +++-------------------- src/components/Alarm/style.ts | 32 ----------- src/hooks/useAlarm.tsx | 19 ++++++ 5 files changed, 157 insertions(+), 95 deletions(-) create mode 100644 src/components/Alarm/AlarmModal/index.tsx create mode 100644 src/components/Alarm/AlarmModal/style.ts create mode 100644 src/hooks/useAlarm.tsx diff --git a/src/components/Alarm/AlarmModal/index.tsx b/src/components/Alarm/AlarmModal/index.tsx new file mode 100644 index 0000000..29ac83b --- /dev/null +++ b/src/components/Alarm/AlarmModal/index.tsx @@ -0,0 +1,62 @@ +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 } = 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 box = (list: any) => ( + navigate(`${list.path}`)}> + {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..100810f 100644 --- a/src/components/Alarm/index.tsx +++ b/src/components/Alarm/index.tsx @@ -1,72 +1,16 @@ -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 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..6787654 100644 --- a/src/components/Alarm/style.ts +++ b/src/components/Alarm/style.ts @@ -1,37 +1,5 @@ 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` border-radius: 50%; width: 5%; diff --git a/src/hooks/useAlarm.tsx b/src/hooks/useAlarm.tsx new file mode 100644 index 0000000..220924c --- /dev/null +++ b/src/hooks/useAlarm.tsx @@ -0,0 +1,19 @@ +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); + } + }; + + return { onGetAlarm }; +}; From 32890a0144eee67bb9a5621e5d12aaada28ec962 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=B0=AC=ED=98=81?= <109561938+dogbokchif@users.noreply.github.com> Date: Wed, 8 Nov 2023 10:37:11 +0900 Subject: [PATCH 08/10] =?UTF-8?q?=EC=95=8C=EB=9E=8C=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/Bell.png | Bin 0 -> 1688 bytes src/components/Alarm/AlarmModal/index.tsx | 13 ++++++++++--- src/components/Alarm/index.tsx | 3 ++- src/components/Alarm/style.ts | 10 +++++----- src/hooks/useAlarm.tsx | 14 +++++++++++++- src/pages/Home/index.tsx | 5 +++-- src/pages/Home/style.ts | 4 ++++ 7 files changed, 37 insertions(+), 12 deletions(-) create mode 100644 src/assets/Bell.png diff --git a/src/assets/Bell.png b/src/assets/Bell.png new file mode 100644 index 0000000000000000000000000000000000000000..57c2636d76831c70b48d5fbf06958af22e3f6537 GIT binary patch literal 1688 zcmV;J250$+P)qbmQ!#iA zaw2OeiNx*#`|MQhJ`Csb)J|L|<<2cbIF zIYI?!B~-;u+1CNJ)n7Yk_pCP^|%q!Kp$72wn&fybvIGAwcj#fZ&Ay!OJt% z#dUS2{x14A3d^nqJ@4watB*nvwyO&-6z0b1zGeT`Qmh%uR--;Nhb$5!OqJU%Nwotu zb!Z+7(@aRpK5Lm%4AMfZt)5hl!Fec17};y(9h_Z3nhDX_GK`h-3dbR}62n?F3*{9C zpIQjPIF;RX9;z$Rjl4A~Yp!!>-H2^NgDsTT!H!wy!a?3DuLC?rErh)+mDhnKLAS~Mn^0KQ|Bbs7g*ktXtaJE8o zslwUNmEs(tq?)NvPE4G~C_A$~)=0*jMB6^CMu^RJ$NsC4Udu4nB-)9I^O$Tx{X!#b zu^y`fS@&UO-FQapLSu9wC%VrRM(ILhoW?i86l@|rR{^a1q<-d7YOR#HMtOb1ORPo_ z#U8@u!qgf?6nheVBR0oPtyMpnjv{6UYD9Qa;1ux^O3VPUTq7NgB8eHGS3)YHz0WMx z9LTOgRQn2~1lh&JuN6V84#aJXwAcqa$}u58^~fqf%zx68Re+q38m9;dP(8j?1ToIS zI0H*p@Z%k$134j8PJzV;&}a*~F+JWFRu`wh7{cI%4g@a*2wn&fybz$ee5Jq$P+fvA z>EJpLybvIGVF;^B@DDc~s4fHuUa|<#iI6Hzo6**l>`ZC5XKz;&T#I?RPwx>_>3F7&*s z-xR@I{i1oQ{A#qPeTOh7hOU~l+H)w|H$b-9kVRv4xz-+MW&6y57G3=))W&Uo{9PU_ zJgJY@RNR_rpfgEps`|3krVmbE9-0H$A6SXUwV-E{X`58H_kUwofSmeCGvUEqt@=rI zd-oUb-^y^J^I$ip9hY*Bp85jdo>q4{(KbNVactOf0-koQ%{8L!b)cWb_8jcbsc$~l zM`C9MhWWIk!zR&2q%qef{fsbPX1RozQK&^mb-dljY)_b68 zS9TqU=Nn?EPuGF|RDWq2IK*XF?e<=n6H7R-zgC+Ys@r>Ec3Ju#aX$=Cv#fmI)!(~* z(*k5m7*kwYNljmmE^pm(>c_X7{$o`9T4~2!i^ukb*%zOyf4`IyYGfx^e|7cC=H~za z00000004~4=T!$OdaLwT6xfq)e^w#BR9SA7{(ZZmKD4Fn%J6=T^$2cMkkSIwDt)&? zvYgUiSHrU5#Muy$YIs&EOo=;Fe^t8JgO`Cu>2@F|WWk1t)WWk8vXSCL(i-eKqPIXY-<~6aBw-r&YfY i%({);QRh)78~*{ejG%2s%4D$s0000>; }) => { - const { onGetAlarm } = useAlarm(); + const { onGetAlarm, onPatchAlarm } = useAlarm(); const navigate = useNavigate(); const [alarmList, setAlarmList] = useState>([]); @@ -33,10 +33,17 @@ const AlarmModal = ({ .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) => ( - navigate(`${list.path}`)}> + onClickBox(list)}> {list.text} {list.path} {list.registerTime} diff --git a/src/components/Alarm/index.tsx b/src/components/Alarm/index.tsx index 100810f..93ca598 100644 --- a/src/components/Alarm/index.tsx +++ b/src/components/Alarm/index.tsx @@ -1,6 +1,7 @@ import React, { useState } from "react"; export const API_URL = process.env.REACT_APP_API; import * as S from "./style"; +import Bell from "@assets/Bell.png"; import AlarmModal from "./AlarmModal"; const Alarm = () => { @@ -8,7 +9,7 @@ const Alarm = () => { return (
- setModalIsOpen(true)} /> + setModalIsOpen(true)} /> {modalIsOpen && }
); diff --git a/src/components/Alarm/style.ts b/src/components/Alarm/style.ts index 6787654..e09ba0c 100644 --- a/src/components/Alarm/style.ts +++ b/src/components/Alarm/style.ts @@ -1,9 +1,9 @@ import styled from "styled-components"; -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/hooks/useAlarm.tsx b/src/hooks/useAlarm.tsx index 220924c..9d04680 100644 --- a/src/hooks/useAlarm.tsx +++ b/src/hooks/useAlarm.tsx @@ -15,5 +15,17 @@ export const useAlarm = () => { } }; - return { onGetAlarm }; + 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/pages/Home/index.tsx b/src/pages/Home/index.tsx index 7230d0b..f986d71 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -70,7 +70,6 @@ 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; +`; From 5107f6b75d8f9083fdcdb035c0c29649f1020b0a Mon Sep 17 00:00:00 2001 From: Jinsoo1004 Date: Wed, 8 Nov 2023 11:19:57 +0900 Subject: [PATCH 09/10] =?UTF-8?q?=F0=9F=94=A8=20::=20psd?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/PsdNodeModal/index.tsx | 105 ++++--------------------- src/components/PsdNodeModal/style.ts | 107 +------------------------- 2 files changed, 16 insertions(+), 196 deletions(-) diff --git a/src/components/PsdNodeModal/index.tsx b/src/components/PsdNodeModal/index.tsx index e3f0fbb..5430328 100644 --- a/src/components/PsdNodeModal/index.tsx +++ b/src/components/PsdNodeModal/index.tsx @@ -1,9 +1,5 @@ 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 React, { Dispatch, SetStateAction } from "react"; import * as S from "./style"; @@ -14,96 +10,21 @@ const PsdNodeModal = ({ 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
} -
+ +
+ + +
+
+
+
+
+
+
+
); diff --git a/src/components/PsdNodeModal/style.ts b/src/components/PsdNodeModal/style.ts index 8914d18..be5bbf2 100644 --- a/src/components/PsdNodeModal/style.ts +++ b/src/components/PsdNodeModal/style.ts @@ -1,109 +1,8 @@ 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` +export const MainBox = 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; + width: 100%; + height: 100%; `; From 31de5d14c6077dbc4b51426e3f2acba99c2a22a5 Mon Sep 17 00:00:00 2001 From: Jinsoo1004 Date: Wed, 8 Nov 2023 11:22:33 +0900 Subject: [PATCH 10/10] Version 1.0.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index dadfc46..7cd1b8f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pcot", - "version": "1.0.0", + "version": "1.0.1", "private": true, "dependencies": { "@balkangraph/orgchart.js": "^8.13.1",