Merge branch 'main' of https://github.com/AgainIoT/Open-Set-Go_client …

…into feature/103
AgainIoT · Oct 10, 2023 · 4e94fd9 · 4e94fd9
2 parents 31a78e6 + 2283068
commit 4e94fd9
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 47 deletions.
diff --git a/src/components/common/modal/BaseModal.js b/src/components/common/modal/BaseModal.js
@@ -1,8 +1,8 @@
 import styled from "styled-components";
 import { COLOR } from "../../../styles/color";
 import { useRecoilState } from "recoil";
-import Modal from "@mui/material/Modal";
 import { modalState } from "../../../recoil/commonState";
+import Modal from "@mui/material/Modal";
 
 export const BaseModal = (props) => {
   const handleClose = () => setModalValue(false);
@@ -25,14 +25,14 @@ export const BaseModal = (props) => {
 const StBaseModal = styled(Modal)``;
 const ModalContainer = styled.div`
   display: flex;
+  position: fixed;
+  top: 50%;
+  left: 50%;
   width: 60%;
   height: 70%;
   padding: 2rem;
   margin-top: 1rem;
-  transform: translate(-50%, -50%);
-  position: fixed;
-  top: 50%;
-  left: 50%;
   border-radius: 2rem;
   background-color: ${COLOR.MAIN_WHITE};
+  transform: translate(-50%, -50%);
 `;
diff --git a/src/components/common/modal/templateModal.js b/src/components/common/modal/templateModal.js
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from "react";
+import { useRecoilState, useRecoilValue } from "recoil";
 import { TemplateList } from "../template/TemplateList";
 import TemplateTitle from "../template/TemplateTitle";
 import TemplateBody from "../template/TemplateBody";
-import { useRecoilState, useRecoilValue } from "recoil";
 
 // props -> type(pr, readme, contributing)
 export const TemplateModal = (props) => {

diff --git a/src/components/common/template/TemplateBody.js b/src/components/common/template/TemplateBody.js
@@ -1,17 +1,16 @@
+import { styled } from "styled-components";
 import React, { useState, useEffect } from "react";
-import axios from "axios";
+import { useRecoilState, useRecoilValue } from "recoil";
 import Typography from "@mui/material/Typography";
 import {
   templateContent,
   templatePreviewState,
   templateState,
   templateToModal,
 } from "../../../recoil/templateState";
-import { useRecoilState, useRecoilValue } from "recoil";
-import { styled } from "styled-components";
-import { WidthFull } from "@mui/icons-material";
 import MarkdownPreview from "@uiw/react-markdown-preview";
 
+
 // props -> type(pr, readme, contributing)
 export default function TemplateBody(props) {
   const showValue = useRecoilValue(templatePreviewState(props.type));
@@ -33,9 +32,9 @@ export default function TemplateBody(props) {
 
 const BodyBox = styled.div`
   display: flex;
+  flex-direction: column;
   max-height: 52rem;
   max-width: 65rem;
-  flex-direction: column;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;

diff --git a/src/components/common/template/TemplateList.js b/src/components/common/template/TemplateList.js
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
-import axios from "axios";
-import { PropTypes } from "prop-types";
+import { useRecoilState, useRecoilValue } from "recoil";
 import { styled, alpha } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import InputBase from "@mui/material/InputBase";
@@ -11,15 +10,12 @@ import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
-import { FixedSizeList } from "react-window";
-import { useRecoilState, useRecoilValue } from "recoil";
-import TemplateTitle from "./TemplateTitle";
+import axios from "axios";
 import {
   templateContent,
   templatePreviewState,
   templateSelectState,
 } from "../../../recoil/templateState";
-import { fontSize } from "@mui/system";
 
 // props -> type(pr, readme, contributing)
 export function TemplateList(props) {
@@ -145,36 +141,36 @@ export function TemplateList(props) {
 
 const Search = styled("div")(({ theme }) => ({
   position: "relative",
+  width: "100%",
+  marginLeft: 0,
   borderRadius: theme.shape.borderRadius,
   backgroundColor: alpha(theme.palette.common.white, 0.15),
   "&:hover": {
     backgroundColor: alpha(theme.palette.common.white, 0.25),
   },
-  marginLeft: 0,
-  width: "100%",
   [theme.breakpoints.up("sm")]: {
     marginLeft: theme.spacing(1),
     width: "auto",
   },
 }));
 
 const SearchIconWrapper = styled("div")(({ theme }) => ({
-  padding: theme.spacing(0, 2),
-  height: "100%",
-  position: "absolute",
-  pointerEvents: "none",
   display: "flex",
+  position: "absolute",
+  height: "100%",
+  padding: theme.spacing(0, 2),
   alignItems: "center",
   justifyContent: "center",
+  pointerEvents: "none",
 }));
 
 const StyledInputBase = styled(InputBase)(({ theme }) => ({
   color: "inherit",
   "& .MuiInputBase-input": {
+    width: "100%",
     padding: theme.spacing(1, 1, 1, 0),
     paddingLeft: `calc(1em + ${theme.spacing(4)})`,
     transition: theme.transitions.create("width"),
-    width: "100%",
     [theme.breakpoints.up("sm")]: {
       width: "12ch",
       "&:focus": {
@@ -185,9 +181,9 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
 }));
 
 const Item = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(1),
   backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
   ...theme.typography.body2,
-  padding: theme.spacing(1),
-  textAlign: "center",
   color: theme.palette.text.secondary,
+  textAlign: "center",
 }));
diff --git a/src/components/common/template/TemplateTitle.js b/src/components/common/template/TemplateTitle.js
@@ -1,15 +1,16 @@
+import styled from "styled-components";
+import { useRecoilState, useRecoilValue } from "recoil";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import { useRecoilState, useRecoilValue } from "recoil";
+import LinkIcon from "@mui/icons-material/Link";
 import {
   templateContent,
   templatePreviewState,
   templateSelectState,
 } from "../../../recoil/templateState";
-import styled from "styled-components";
 import { modalState } from "../../../recoil/commonState";
-import LinkIcon from "@mui/icons-material/Link";
+
 
 // props -> type(pr, readme, contributing)
 export default function TemplateTitle(props) {
@@ -71,9 +72,9 @@ export default function TemplateTitle(props) {
 }
 
 const commonStyles = {
-  bgcolor: "background.paper",
-  m: 1,
-  borderColor: "text.secondary",
   width: "100%",
   height: "25%",
+  m: 1,
+  borderColor: "text.secondary",
+  bgcolor: "background.paper",
 };
diff --git a/src/pages/ContributingTemplatePage.js b/src/pages/ContributingTemplatePage.js
@@ -1,13 +1,11 @@
+import { styled } from "styled-components";
 import React, { useEffect } from "react";
-import MDEditor from "@uiw/react-md-editor";
-import Button from "@mui/material/Button";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { templateContent, templateState } from "../recoil/templateState";
+import { eachStepState, modalState } from "../recoil/commonState";
 import { BaseModal } from "../components/common/modal/BaseModal";
 import { TemplateModal } from "../components/common/modal/templateModal";
-import { eachStepState, modalState } from "../recoil/commonState";
 import MarkdownPreview from "../components/common/MarkdownPreview";
-import { styled } from "styled-components";
 
 function ContributingTemplatePage(props) {
   const [modalValue, setModalValue] = useRecoilState(
@@ -20,10 +18,6 @@ function ContributingTemplatePage(props) {
     setStepComplted(true);
   }, []);
 
-  const handlesave = () => {
-    //value 고대로 저장해서 server로 보내야함. 이건 추후에 백엔드랑 회의 후 정해야할 듯
-  };
-
   const handleOpen = () => setModalValue(true);
 
   return (

diff --git a/src/pages/PRTemplatePage.js b/src/pages/PRTemplatePage.js
@@ -1,6 +1,4 @@
 import React, { useState, useEffect } from "react";
-import MDEditor from "@uiw/react-md-editor";
-import Button from "@mui/material/Button";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { templateContent } from "../recoil/templateState";
 import { BaseModal } from "../components/common/modal/BaseModal";

diff --git a/src/pages/ReadmeTemplatePage.js b/src/pages/ReadmeTemplatePage.js
@@ -1,15 +1,14 @@
+import { styled } from "styled-components";
 import React, { useState, useEffect } from "react";
-import MDEditor from "@uiw/react-md-editor";
-import Button from "@mui/material/Button";
 import { useRecoilState, useRecoilValue } from "recoil";
+import Button from "@mui/material/Button";
 import { templateContent, templateState } from "../recoil/templateState";
-
-import { BaseModal } from "../components/common/modal/BaseModal";
 import { eachStepState, modalState } from "../recoil/commonState";
+import { BaseModal } from "../components/common/modal/BaseModal";
 import { TemplateModal } from "../components/common/modal/templateModal";
 import MarkdownPreview from "../components/common/MarkdownPreview";
+import MDEditor from "@uiw/react-md-editor";
 
-import { styled } from "styled-components";
 
 function ReadmeTemplatePage() {
   const [modalValue, setModalValue] = useRecoilState(modalState("readme"));