Merge branch 'develop' into feat/#17-organization

CNU-OOHub · Oct 30, 2022 · eecafd0 · eecafd0
2 parents ecdb275 + b3a4958
commit eecafd0
Show file tree

Hide file tree

Showing 20 changed files with 717 additions and 27 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "react-icons": "^4.6.0",
     "react-router-dom": "^6.4.1",
     "react-scripts": "5.0.1",
+    "react-switch": "^7.0.0",
     "recoil": "^0.7.5",
     "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4"

diff --git a/src/api.jsx b/src/api.jsx
@@ -30,7 +30,9 @@ export const authUser = async (userInfo) => {
       alert("로그인 되었습니다");
     }
   } catch (error) {
-    console.log(error);
+    if (error.response.status === 404) {
+      alert("존재하지 않는 id입니다");
+    }
     throw new Error("sign in user error");
   }
 };
@@ -83,9 +85,16 @@ export const addWorkspace = async (workspaceInfo) => {
 };
 
 // workspace 사용량 조회
+export const useWorkspaceUsage = () => {
+  return useQuery(['usage'], () => getWorkspaceUsage(),{
+    staleTime: 5000,
+    cacheTime: Infinity
+  })
+}
+
 export const getWorkspaceUsage = async () => {
   try {
-    const { data } = await axios.get(`${SERVER}/api/v1/workspace/storage`, {});
+    const { data } = await axios.get(`${SERVER}/api/v1/workspace/storage`, {headers: {Authorization: "Bearer "+sessionStorage.getItem("accessToken")}});
     return data;
   } catch (err) {
     throw new Error("fetch worksapce usage error");
@@ -243,6 +252,7 @@ export const useGetOrganizationMemberList = (organizationName) => {
       initialData: [],
     }
   );
+
 };
 
 //////////////////////공유 파일/////////////////////////
@@ -305,3 +315,100 @@ export const deleteSharedFile = async (organizationName, fileName) => {
     throw new Error("delete shared file error");
   }
 };
+
+
+// 파일로 실행 
+export const runFile = async (userInfo) => {
+  try {
+    var formData = new FormData();
+    var imagefile = document.querySelector('#file'); // 수정 필요 -> 실제 파일로 
+    formData.append("file",imagefile)
+    const response = await axios.post(`${SERVER}/run/file`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    });
+    if (response.status === 200) {
+      // TODO()
+    }
+  } catch (error) {
+    throw new Error("execute error");
+  }
+};
+
+// 코드 한줄 실행 
+export const runLine = async (commandInfo) => {
+  try {
+    const response = await axios.post(`${SERVER}/run/line`, commandInfo);
+    if (response.status === 200) {
+      // TODO()
+    }
+  } catch (error) {
+    throw new Error("execute error");
+  }
+};
+
+// 파일 조회 
+export const useGetFile = () => {
+  return useQuery(['file'], () => getFile(),{
+    staleTime: 5000,
+    cacheTime: Infinity
+  })
+}
+
+export const getFile = async () => {
+  try {
+      const response = await axios.get(`${SERVER}/api/v1/files`, {});
+      return response;
+  } catch (err) {
+      throw new Error('read file error');
+  }
+};
+
+// 파일 전체 조회 
+export const useGetFiles = () => {
+  return useQuery(['files'], () => getAllFile(),{
+    staleTime: 5000,
+    cacheTime: Infinity
+  })
+}
+
+export const getAllFile = async () => {
+  try {
+      const response = await axios.get(`${SERVER}/api/v1/files/all`, {});
+      return response;
+  } catch (err) {
+      throw new Error('read all file error');
+  }
+};
+
+// 파일 저장 
+export const addFile = async (fileInfo) => {
+  try {
+    const response = await axios.post(`${SERVER}/api/v1/files`, fileInfo);
+    if (response.status === 200) {
+      alert("파일이 저장되었습니다.");
+    }
+  } catch (error) {
+    throw new Error("sign up user error");
+  }
+};
+
+// resource monitoring 
+export const useGetResources = () => {
+  return useQuery(['resources'], () => getAllResource(),{
+    staleTime: 5000,
+    cacheTime: Infinity
+  })
+}
+
+export const getAllResource = async () => {
+  try {
+      const response = await axios.get(`${SERVER}/api/v1/monitoring/resources`, {});
+      return response;
+  } catch (err) {
+      throw new Error('read all file error');
+  }
+};
+
+
diff --git a/src/atom.jsx b/src/atom.jsx
@@ -3,3 +3,21 @@ import { atom } from "recoil";
 export const loginState = atom({ key: "login", default: false });
 
 export const adminState = atom({ key: "admin", default: true });
+
+export const adminCategoryModalVisibleState = atom({
+  key: "adminCategoryModal",
+  default: false,
+});
+
+export const adminPageState = atom({
+  key: "adminPage",
+  default: "Authorization Area",
+});
+
+export const fileShareState = atom({
+  key: "fileShare",
+  default: {
+    available: false,
+    fileName: "",
+  },
+});
diff --git a/src/components/atoms/body.jsx b/src/components/atoms/body.jsx
@@ -3,10 +3,24 @@ import styled from "styled-components";
 
 const BodyStyle = styled.div`
   height: ${(props) => `${props.height}vh`};
+  background-color: ${(props) => props.backgroundColor};
 `;
 
-const Body = ({ children, height = 92 }) => {
-  return <BodyStyle height={height}>{children}</BodyStyle>;
+const Body = ({
+  children,
+  height = 92,
+  backgroundColor = "white",
+  onClick,
+}) => {
+  return (
+    <BodyStyle
+      height={height}
+      backgroundColor={backgroundColor}
+      onClick={onClick}
+    >
+      {children}
+    </BodyStyle>
+  );
 };
 
 export default Body;
diff --git a/src/components/atoms/button.jsx b/src/components/atoms/button.jsx
@@ -3,6 +3,8 @@ import styled, { css } from "styled-components";
 import theme from "../../styles/theme";
 
 const CustomButton = styled.button`
+  padding: ${(props) => `${props.padding}rem`};
+  margin-right: ${(props) => `${props.marginRight}rem`};
   text-align: center;
   vertical-align: center;
   width: ${(props) => `${props.width}%`};
@@ -12,7 +14,7 @@ const CustomButton = styled.button`
   font-size: ${(props) => `${props.fontSize}rem`};
   font-weight: ${(props) => props.fontWeight};
   //border: ${(props) => props.border};
-  margin-bottom: ${(props) => `${props.marginTop}rem`};
+  margin-top: ${(props) => `${props.marginTop}rem`};
   ${(props) =>
     props.hoverEvent &&
     css`
@@ -21,11 +23,14 @@ const CustomButton = styled.button`
         transition: 0.4s;
       }
     `}
+  border-bottom: ${(props) => props.borderBottom};
 `;
 
 const Button = ({
   children,
   onClick,
+  padding = 0,
+  marginRight = 0,
   width,
   height,
   bgColor = theme.primaryColor,
@@ -35,10 +40,13 @@ const Button = ({
   border = "none",
   hoverEvent = false,
   marginTop = "0",
+  borderBottom,
 }) => {
   return (
     <CustomButton
       onClick={onClick}
+      padding={padding}
+      marginRight={marginRight}
       width={width}
       height={height}
       bgColor={bgColor}
@@ -48,6 +56,7 @@ const Button = ({
       border={border}
       hoverEvent={hoverEvent}
       marginTop={marginTop}
+      borderBottom={borderBottom}
       type="button"
     >
       {children}

diff --git a/src/components/atoms/dropdown.jsx b/src/components/atoms/dropdown.jsx
@@ -1,21 +1,41 @@
 import React from "react";
 import styled from "styled-components";
+import theme from "../../styles/theme";
 
 const DropDownBox = styled.select`
-  width: 100%;
+  width: ${(props) => `${props.width}%`};
   height: ${(props) => `${props.height}rem`};
+  background-color: ${(props) => props.backgroundColor};
+  color: ${(props) => props.color};
+  font-size: ${(props) => `${props.fontSize}rem`};
 `;
 
-const DropDown = ({ options, onChange, placeholder, height = 3 }) => {
+const DropDown = ({
+  options,
+  onChange,
+  placeholder,
+  height = 3,
+  width = 100,
+  backgroundColor = "white",
+  color = "black",
+  fontSize = 1.1,
+}) => {
   return (
-    <DropDownBox onChange={onChange} height={height}>
-      <option value={placeholder} hidden color="grey">
+    <DropDownBox
+      onChange={onChange}
+      height={height}
+      width={width}
+      backgroundColor={backgroundColor}
+      color={color}
+      fontSize={fontSize}
+    >
+      <option value={placeholder} hidden color={color}>
         {placeholder}
       </option>
 
       {options.map((value) => {
         return (
-          <option color="black" key={value}>
+          <option color={color} key={value}>
             {value}
           </option>
         );

diff --git a/src/components/atoms/input.jsx b/src/components/atoms/input.jsx
@@ -5,7 +5,10 @@ const Input = ({
   inputType,
   placeholder,
   height = 3.5,
+  width,
   onChange,
+  fontSize,
+  backgroundColor = "white",
 }) => {
   switch (type) {
     case "text":
@@ -14,7 +17,13 @@ const Input = ({
           type={inputType}
           placeholder={placeholder}
           onChange={onChange}
-          style={{ height: `${height}rem`, paddingLeft: "5px" }}
+          style={{
+            height: `${height}rem`,
+            paddingLeft: "5px",
+            width: `${width}%`,
+            backgroundColor: backgroundColor,
+            fontSize: fontSize,
+          }}
         />
       );
     default: