diff --git a/package.json b/package.json index 0dd3370..820927e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pcot", - "version": "1.0.1", + "version": "1.1.0", "private": true, "homepage": ".", "dependencies": { diff --git a/src/assets/banner.png b/src/assets/banner.png new file mode 100644 index 0000000..242b303 Binary files /dev/null and b/src/assets/banner.png differ diff --git a/src/assets/banner.svg b/src/assets/banner.svg deleted file mode 100644 index bea2d79..0000000 --- a/src/assets/banner.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/src/components/GitGraph/index.tsx b/src/components/GitGraph/index.tsx index 7f45951..f73cbfa 100644 --- a/src/components/GitGraph/index.tsx +++ b/src/components/GitGraph/index.tsx @@ -19,7 +19,9 @@ export const GitGraph = () => { const { organization, workspace } = useParams(); const { drawNodeTree } = useGitgraph(); const [data, setData] = useState(null); - const [isModalOpen, setIsModalOpen] = useState(false); // Add state to control the modal + const [isModalOpen, setIsModalOpen] = useState(false); + const [nodeName, setNodeName] = useState(""); + const [nodeComment, setNodeComment] = useState(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 = () => {
Loading
)} - {/* Render the modal component when isModalOpen is true */} {isModalOpen && ( )} { + const { serchOrganizationMoreInfo } = useGetOrganizationInfo(); + const [organizationInfo, setOrganizationInfo] = useState(); + useEffect(() => { + const name = props.name; + serchOrganizationMoreInfo(name) + .then((res) => { + console.log(res.data); + setOrganizationInfo( + + + {res.data.name} + {res.data.exposure} + + {res.data.comment} + {res.data.planName} + {res.data.createTime} + , + ); + }) + .catch((err) => { + console.log(err); + }); + }, []); + return ( + + + Information + + {organizationInfo} + + ); +}; diff --git a/src/components/OrganizationInfo/style.ts b/src/components/OrganizationInfo/style.ts new file mode 100644 index 0000000..d6122d7 --- /dev/null +++ b/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; +`; diff --git a/src/components/OrganizationManipulate/index.tsx b/src/components/OrganizationManipulate/index.tsx new file mode 100644 index 0000000..18c0e27 --- /dev/null +++ b/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 ( + + + Manipulate + + + Invite people + Change Profile Image + Change Exposure + Delete + + + ); +}; diff --git a/src/components/OrganizationManipulate/style.ts b/src/components/OrganizationManipulate/style.ts new file mode 100644 index 0000000..9bd1c48 --- /dev/null +++ b/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; +`; diff --git a/src/components/PsdComparisonModal/index.tsx b/src/components/PsdComparisonModal/index.tsx index 9b84053..db4d278 100644 --- a/src/components/PsdComparisonModal/index.tsx +++ b/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([]); + const [selectedNode1, setSelectedNode1] = useState(""); + const [bottomItems, setBottomItems] = useState([]); + + 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, 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 ( + {item.after.name} + ); + } else if (item.status === "edit") { + return ( + {item.after.name} + ); + } else if (item.status === "delete") { + return ( + {item.before.name} + ); + } else if (item.status === "immutable") { + return {item.after.name}; + } + }); + setBottomItems(bottomItems); + }, + ); + }); + }, [selectedNode1]); -export const PsdComparisonModal = () => { return (
- +
-

asxdasd

+

+ +

+
-

asxdas

+

{Name}

 - - line1 - line1 - line1 - line1 - line1 - line1 - line1 - line1 - line1 - line1 - line1 - line1 - + {bottomItems}
diff --git a/src/components/PsdComparisonModal/style.ts b/src/components/PsdComparisonModal/style.ts index 5031d60..6ef234c 100644 --- a/src/components/PsdComparisonModal/style.ts +++ b/src/components/PsdComparisonModal/style.ts @@ -39,12 +39,31 @@ export const CenterLogo = styled.img` } `; -export const BottomItem = styled.div` +export const BottomItemNomal = styled.div` + width: 100%; + height: 50px; + line-height: 50px; + background-color: #fff; +`; +export const BottomItemChange = styled.div` width: 100%; height: 50px; line-height: 50px; background-color: #f1f8ff; `; +export const BottomItemDelete = styled.div` + width: 100%; + height: 50px; + line-height: 50px; + background-color: #ffeef0; +`; + +export const BottomItemCreate = styled.div` + width: 100%; + height: 50px; + line-height: 50px; + background-color: #e6ffed; +`; export const X = styled.img` position: absolute; diff --git a/src/components/PsdNodeModal/index.tsx b/src/components/PsdNodeModal/index.tsx index 5430328..f0e7bd0 100644 --- a/src/components/PsdNodeModal/index.tsx +++ b/src/components/PsdNodeModal/index.tsx @@ -1,31 +1,89 @@ +import React, { Dispatch, SetStateAction, useEffect, useState } from "react"; import { PopupModal } from "@components/Modal"; -import React, { Dispatch, SetStateAction } from "react"; - import * as S from "./style"; +import { usePsd } from "@hooks/usePsd"; +import { useParams } from "react-router-dom"; +import { PsdComparisonModal } from "@components/PsdComparisonModal"; + +export const API_URL = process.env.REACT_APP_API; const PsdNodeModal = ({ active, setActive, + nodeName, + nodeComment, }: { active: boolean; setActive?: Dispatch>; + nodeName?: string; + nodeComment?: string; }) => { + const { nodePsdList, psdLayerList } = usePsd(); + const { organization, workspace } = useParams(); + const [filteredData, setFilteredData] = useState([]); + const [psdImg, setPsdImg] = useState(""); + const [compareModalVisible, setCompareModalVisible] = useState(false); + const [psdName, setPsdName] = useState(""); + + useEffect(() => { + nodePsdList(organization, workspace, nodeName).then((res) => { + setPsdName(res.data[0].name); + const psdNamed = res.data[0].name; + psdLayerList(organization, workspace, nodeName, psdNamed).then((res) => { + console.log(res.data); + const filteredData = res.data.filter((item: any) => item.folderYn === "N"); + setFilteredData( + filteredData.map((item: any, index: any) => ( + + + {item.name} + + )), + ); + setPsdImg( + `${API_URL}/v2/cloud/pull/image/preview/${organization}/${workspace}/${nodeName}/${psdNamed}`, + ); + }); + }); + }, []); + + const handleCompareClick = () => { + setCompareModalVisible(true); + }; + return (
-
- - -
-
-
-
-
-
-
+ + + + Compare + + + {nodeName} + {nodeComment} + + user + + + + Layers + {filteredData} + + + {compareModalVisible && ( + setCompareModalVisible(false)} + Name={nodeName} + psdName={psdName} + /> + )}
); }; diff --git a/src/components/PsdNodeModal/style.ts b/src/components/PsdNodeModal/style.ts index be5bbf2..be84bbe 100644 --- a/src/components/PsdNodeModal/style.ts +++ b/src/components/PsdNodeModal/style.ts @@ -1,8 +1,131 @@ import styled from "styled-components"; export const MainBox = styled.div` + display: flex; + flex-direction: row; + width: 100%; + height: 100%; +`; + +export const LeftBox = styled.div` display: flex; flex-direction: column; + text-align: center; + align-items: center; + width: 50%; + flex: 1; + padding: 20px; +`; + +export const imgBox = styled.div` + position: relative; +`; + +export const compareButton = styled.button` + position: absolute; + width: 100px; + height: 40px; + border-radius: 10px; + border: none; + background-color: #316ae2; + color: white; + + right: 25px; + bottom: 25px; + cursor: pointer; + margin-top: 10px; +`; + +export const nodeName = styled.div` + width: 100% - 10px; + font-size: 20px; + font-weight: bold; + padding-left: 10px; + text-align: left; +`; + +export const nodeInfo = styled.div` + width: 100% - 10px; + height: 150px; + font-size: 15px; + text-align: left; + padding-left: 10px; + word-break: keep-all; +`; + +export const Texts = styled.div` + margin-top: 20px; width: 100%; +`; + +export const userEmail = styled.div` + width: 100%; + text-align: left; + padding-left: 10px; + font-size: 15px; +`; + +export const RightBox = styled.div` + display: flex; + flex-direction: column; + width: 50%; height: 100%; + flex: 1; +`; + +export const Img = styled.img` + border-radius: 20px; + width: 100%; + height: 300px; + object-fit: contain; + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); +`; + +export const RightTextBox = styled.div` + margin-top: 30px; + width: 100%; + height: 50px; + flex: 1; +`; + +export const RightText = styled.div` + font-family: Pretendard; + font-size: 25px; + font-style: normal; + font-weight: 400; + line-height: normal; +`; + +export const Layers = styled.div` + display: flex; + flex-direction: column; + + overflow: auto; +`; + +export const Layer = styled.div` + display: flex; + width: 80%; + border-radius: 10px; + flex-direction: row; + margin-top: 10px; + padding: 10px; + border: 1px solid #e9e9e7; +`; + +export const LayerImg = styled.img` + width: 40px; + height: 40px; + margin-right: 10px; + border-radius: 5px; + box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); +`; + +export const LayerName = styled.div` + margin: auto 0; + font-family: Pretendard; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: normal; `; diff --git a/src/components/SideBar/SideBarFooter/style.ts b/src/components/SideBar/SideBarFooter/style.ts index f0f006a..927d7d6 100644 --- a/src/components/SideBar/SideBarFooter/style.ts +++ b/src/components/SideBar/SideBarFooter/style.ts @@ -16,7 +16,7 @@ export const FooterIcon = styled.img` export const FooterText = styled.div` grid-area: text; font-family: Pretendard; - font-size: 20px; + font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; diff --git a/src/components/SideBar/SideBars/MainSideBar/index.tsx b/src/components/SideBar/SideBars/MainSideBar/index.tsx index 8e7fb23..93ed4f9 100644 --- a/src/components/SideBar/SideBars/MainSideBar/index.tsx +++ b/src/components/SideBar/SideBars/MainSideBar/index.tsx @@ -88,7 +88,7 @@ export const MainSideBar = (props: any) => { { navigate("/organization/create"); }} diff --git a/src/components/SideBar/SideBars/OrganizationSideBar/index.tsx b/src/components/SideBar/SideBars/OrganizationSideBar/index.tsx index 5f11b25..7182754 100644 --- a/src/components/SideBar/SideBars/OrganizationSideBar/index.tsx +++ b/src/components/SideBar/SideBars/OrganizationSideBar/index.tsx @@ -2,7 +2,7 @@ import { SidebarHeader } from "@components/SideBar/SideBarHeader"; import { Typography } from "@components/SideBar/Typography"; import React, { useEffect, useState } from "react"; import { Sidebar } from "react-pro-sidebar"; -import { useNavigate, useParams } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import * as S from "./style"; import addMemberBtn from "@assets/addMemberBtn.png"; @@ -13,7 +13,6 @@ 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>([]); @@ -21,10 +20,10 @@ export const OrganizationSideBar = (props: any) => { const { onRecentsListGet } = useWorkspaceList(); useEffect(() => { - serchOrganizationMoreInfo(organization).then((res) => { + serchOrganizationMoreInfo(props.name).then((res) => { setOrganizationInfo(res.data); }); - serchOrganizationMamber(organization).then((res) => { + serchOrganizationMamber(props.name).then((res) => { setOrganizationMember( res.data.map((list: any) => ( { ToastError("PSD 업로드에 실패했습니다."); } }; - return { uploadPsd }; + + const nodePsdList = async (OrgName: any, WokName: any, nodeName: any) => { + try { + const API = `${API_URL}/v2/cloud/info/psd/list/${OrgName}/${WokName}/${nodeName}`; + const response = await axios.get(API, { + withCredentials: true, + }); + return response.data; + } catch (error) { + console.log(error); + } + }; + + const psdLayerList = async (OrgName: any, WokName: any, nodeName: any, psdName: any) => { + try { + const API = `${API_URL}/v2/cloud/info/layer/${OrgName}/${WokName}/${nodeName}/${psdName}`; + const response = await axios.get(API, { + withCredentials: true, + }); + return response.data; + } catch (error) { + console.log(error); + } + }; + + const psdCompare = async ( + OrgName: any, + WokName: any, + befnodeName: any, + aftnodeName: any, + psdName1: any, + psdName2: any, + ) => { + try { + const API = `${API_URL}/v2/cloud/info/compare/${OrgName}/${WokName}?before_node=${befnodeName}&after_node=${aftnodeName}&before_time=${psdName1}&after_time=${psdName2}`; + const response = await axios.get(API, { + withCredentials: true, + }); + return response.data; + } catch (error) { + console.log(error); + } + }; + + return { uploadPsd, nodePsdList, psdLayerList, psdCompare }; }; diff --git a/src/pages/CreateNode/index.tsx b/src/pages/CreateNode/index.tsx index 4158f11..a66f806 100644 --- a/src/pages/CreateNode/index.tsx +++ b/src/pages/CreateNode/index.tsx @@ -2,6 +2,8 @@ import { useGitgraph } from "@hooks/useGitgraph"; import React, { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; +import * as S from "./style"; + export const CreateNode = () => { const { organization, workspace } = useParams(); const { drawNodeTree } = useGitgraph(); @@ -24,32 +26,67 @@ export const CreateNode = () => { return (
- - - - - - - + + + Name + + + + + Comment + + + + + Parent Node + + + ==Select Option== + + {names.map((name) => ( + + {name} + + ))} + + + + + + + + + + + PSD Name + + + + + + onNodeSubmit(organization, workspace)}> + Complete + +
); }; diff --git a/src/pages/CreateNode/style.ts b/src/pages/CreateNode/style.ts new file mode 100644 index 0000000..0042875 --- /dev/null +++ b/src/pages/CreateNode/style.ts @@ -0,0 +1,97 @@ +import styled from "styled-components"; + +export const InputBoxs = styled.div` + display: flex; + flex-direction: column; + float: left; +`; + +export const InputBox = styled.div` + position: relative; + width: 300px; + margin-top: 30px; + flex-direction: column; +`; + +export const PsdBoxs = styled.div` + position: relative; + width: 300px; + margin-top: 30px; + margin-left: 20px; + float: left; +`; + +export const InputText = styled.div` + position: absolute; + left: 10px; +`; + +export const Input = styled.input` + width: 270px; + height: 40px; + border-radius: 10px; + border: none; + margin-bottom: 10px; + padding-left: 10px; + padding-right: 10px; + background-color: #e9e9e7; + + font-family: "pretendard"; + font-weight: 600; +`; + +export const SelectParent = styled.select` + width: 270px; + height: 40px; + border-radius: 10px; + border: none; + margin-bottom: 10px; + /* padding-left: 10px; + padding-right: 10px; */ + background-color: #e9e9e7; + + &:focus { + background-color: #e4ecff; + } +`; + +export const OptionParent = 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 ButtonBox = styled.div` + width: 100%; + height: 70px; +`; + +export const CompleteBtn = styled.button` + width: 100px; + height: 50px; + border-radius: 10px; + border: none; + margin-top: 10px; + background-color: #316ae2; + color: white; + font-family: "pretendard"; + font-weight: 600; + cursor: pointer; + @media screen { + @media (max-width: 599px) { + float: none; + margin-right: 0px; + margin-left: 0px; + width: 290px; + } + } + :active { + background-color: #252525; + } +`; diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index f986d71..ae79555 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -5,7 +5,7 @@ import * as S from "./style"; import Profile from "@assets/Login-Logo.svg"; import Serch from "@assets/search.svg"; -import Banner from "@assets/banner.svg"; +import Banner from "@assets/banner.png"; import { WorkspaceList } from "@components/WorkspaceList/MainWorkspaceList"; import { useGetProfile } from "@hooks/useGetProfile"; import { MainSideBar } from "@components/SideBar/SideBars/MainSideBar"; diff --git a/src/pages/Home/style.ts b/src/pages/Home/style.ts index 8ca712b..8f23591 100644 --- a/src/pages/Home/style.ts +++ b/src/pages/Home/style.ts @@ -92,6 +92,7 @@ export const InputBox = styled.div` grid-area: serch; margin-top: 50px; width: 400px; + height: 100px; margin-right: 40px; @media (max-width: 1040px) { width: 100%; @@ -106,9 +107,12 @@ export const InputButton = styled.img` export const Banner = styled.img` grid-area: banner; - width: 100%; + width: 80%; height: auto; + border-radius: 10px; max-height: 250px; + margin-left: 10%; + margin-top: 0; `; export const Main = styled.div` diff --git a/src/pages/MakeWorkSpace/index.tsx b/src/pages/MakeWorkSpace/index.tsx index e794f8e..c820b12 100644 --- a/src/pages/MakeWorkSpace/index.tsx +++ b/src/pages/MakeWorkSpace/index.tsx @@ -19,10 +19,6 @@ export const MakeWorkSpace = () => {

Workspace

- diff --git a/src/pages/Organization/index.tsx b/src/pages/Organization/index.tsx index b04e318..90bc164 100644 --- a/src/pages/Organization/index.tsx +++ b/src/pages/Organization/index.tsx @@ -1,15 +1,25 @@ +import { OrganizationInfo } from "@components/OrganizationInfo"; import { OrganizationWorkspaceList } from "@components/WorkspaceList/OrganizationWorkspaceList"; import Wrapper from "@components/Wrapper"; +import { OrganizationSideBar } from "@components/SideBar/SideBars/OrganizationSideBar"; import React from "react"; import { useParams } from "react-router-dom"; +import * as S from "./style"; +import { OrganizationManupulate } from "@components/OrganizationManipulate"; + export const Organization = () => { - const { name } = useParams(); + const { organization } = useParams(); return (
- + + + + + +
); diff --git a/src/pages/Organization/style.ts b/src/pages/Organization/style.ts new file mode 100644 index 0000000..4ffbbab --- /dev/null +++ b/src/pages/Organization/style.ts @@ -0,0 +1,5 @@ +import styled from "styled-components"; + +export const FloatBox = styled.div` + float: left; +`; diff --git a/src/pages/Profile/style.ts b/src/pages/Profile/style.ts index b75fe59..61ada57 100644 --- a/src/pages/Profile/style.ts +++ b/src/pages/Profile/style.ts @@ -165,7 +165,7 @@ export const LogoutText = styled.div` color: #7a7a7a; font-family: "pretendard"; font-weight: 600; - font-size: 20px; + font-size: 16px; text-decoration: underline; cursor: pointer; @media screen { diff --git a/src/pages/Workspace/index.tsx b/src/pages/Workspace/index.tsx index fe2039a..4248130 100644 --- a/src/pages/Workspace/index.tsx +++ b/src/pages/Workspace/index.tsx @@ -6,13 +6,16 @@ import Chart from "@components/Organization/Chart"; import { GitGraph } from "@components/GitGraph"; import { OrganizationSideBar } from "@components/SideBar/SideBars/OrganizationSideBar"; import Wrapper from "@components/Wrapper"; +import { useParams } from "react-router-dom"; export const Workspace = () => { + const { organization } = useParams(); + return (
- + diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 3e87642..b72bc31 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -30,7 +30,7 @@ export const Router = () => { } /> {/* } /> */} - } /> + } /> } /> } /> } /> @@ -38,7 +38,7 @@ export const Router = () => { {/* */} {/* } /> */} } /> - } /> + } /> } /> } />