diff --git a/src/components/common/modal/BaseModal.js b/src/components/common/modal/BaseModal.js index bcada39d..41994d3f 100644 --- 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 index 4303a905..13bb03d8 100644 --- 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 index 59c65e3d..c65f2e80 100644 --- a/src/components/common/template/TemplateBody.js +++ b/src/components/common/template/TemplateBody.js @@ -1,5 +1,6 @@ +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, @@ -7,11 +8,9 @@ import { 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 index 5fb99d4e..58c4f29b 100644 --- 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,13 +141,13 @@ 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", @@ -159,22 +155,22 @@ const Search = styled("div")(({ theme }) => ({ })); 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 index 5b8b98c1..7821150e 100644 --- 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 index 8e9260ff..e2590441 100644 --- 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 index 175948e8..6da7d191 100644 --- 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 index 6a808f17..20fd7f8a 100644 --- 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"));