From 829ee6b2a75d0fb17b521b37c22fe323b33cd9de Mon Sep 17 00:00:00 2001 From: Sinji Date: Mon, 9 Oct 2023 16:37:41 +0900 Subject: [PATCH 01/13] Refactor: refactor PRTemplatePage import #84 --- src/pages/PRTemplatePage.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/pages/PRTemplatePage.js b/src/pages/PRTemplatePage.js index 175948e8..f043c768 100644 --- a/src/pages/PRTemplatePage.js +++ b/src/pages/PRTemplatePage.js @@ -1,13 +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 { templateContent } from "../recoil/templateState"; -import { BaseModal } from "../components/common/modal/BaseModal"; import { eachStepState, modalState } from "../recoil/commonState"; +import Button from "@mui/material/Button"; +import { BaseModal } from "../components/common/modal/BaseModal"; import MarkdownPreview from "../components/common/MarkdownPreview"; import { TemplateModal } from "../components/common/modal/templateModal"; -import { styled } from "styled-components"; +import MDEditor from "@uiw/react-md-editor"; + function PRTemplatePage() { const [modalValue, setModalValue] = useRecoilState(modalState("pr")); From 2dec0b3160c9c172a3e764650894785211023028 Mon Sep 17 00:00:00 2001 From: Sinji Date: Mon, 9 Oct 2023 16:59:53 +0900 Subject: [PATCH 02/13] Refactor: refactor PRTemplatePage import #84 --- src/components/common/modal/BaseModal.js | 2 +- src/pages/PRTemplatePage.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/common/modal/BaseModal.js b/src/components/common/modal/BaseModal.js index bcada39d..afeca842 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); diff --git a/src/pages/PRTemplatePage.js b/src/pages/PRTemplatePage.js index f043c768..2d9be0d6 100644 --- a/src/pages/PRTemplatePage.js +++ b/src/pages/PRTemplatePage.js @@ -1,9 +1,9 @@ import { styled } from "styled-components"; import React, { useState, useEffect } from "react"; import { useRecoilState, useRecoilValue } from "recoil"; +import Button from "@mui/material/Button"; import { templateContent } from "../recoil/templateState"; import { eachStepState, modalState } from "../recoil/commonState"; -import Button from "@mui/material/Button"; import { BaseModal } from "../components/common/modal/BaseModal"; import MarkdownPreview from "../components/common/MarkdownPreview"; import { TemplateModal } from "../components/common/modal/templateModal"; From 365da030699d7b57873bb8cba051f76f13226a7c Mon Sep 17 00:00:00 2001 From: Sinji Date: Mon, 9 Oct 2023 17:21:20 +0900 Subject: [PATCH 03/13] Refactor: refactor BaseModal styled-compomemts #84 --- src/components/common/modal/BaseModal.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/common/modal/BaseModal.js b/src/components/common/modal/BaseModal.js index afeca842..41994d3f 100644 --- a/src/components/common/modal/BaseModal.js +++ b/src/components/common/modal/BaseModal.js @@ -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%); `; From c173dcb663771a464ae169567932bc1df70f84d8 Mon Sep 17 00:00:00 2001 From: Sinji Date: Mon, 9 Oct 2023 17:22:20 +0900 Subject: [PATCH 04/13] Refactor: refactor templateModal import #84 --- src/components/common/modal/templateModal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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) => { From 486b4206efb0360d00b48eabbb1f7e610818eaa7 Mon Sep 17 00:00:00 2001 From: Sinji Date: Mon, 9 Oct 2023 17:26:17 +0900 Subject: [PATCH 05/13] Refactor: refactor TemplateTitle import and styled-components #84 --- src/components/common/template/TemplateTitle.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) 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", }; From a4fa07cfc449d34e6a4235cf604be6164b53932f Mon Sep 17 00:00:00 2001 From: Sinji Date: Mon, 9 Oct 2023 17:31:03 +0900 Subject: [PATCH 06/13] Refactor: refactor TemplateBody import and styled-components #84 --- src/components/common/template/TemplateBody.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/common/template/TemplateBody.js b/src/components/common/template/TemplateBody.js index 59c65e3d..739e5e88 100644 --- a/src/components/common/template/TemplateBody.js +++ b/src/components/common/template/TemplateBody.js @@ -1,16 +1,17 @@ +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 { WidthFull } from "@mui/icons-material"; 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"; +import axios from "axios"; + // props -> type(pr, readme, contributing) export default function TemplateBody(props) { @@ -33,9 +34,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; From 057d1657960ae95b8e8709004b25b1afafc0e06f Mon Sep 17 00:00:00 2001 From: Sinji Date: Mon, 9 Oct 2023 17:38:50 +0900 Subject: [PATCH 07/13] Refactor: refactor TemplateList import and styled-components #84 --- .../common/template/TemplateList.js | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/common/template/TemplateList.js b/src/components/common/template/TemplateList.js index 5fb99d4e..86b644f6 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,16 @@ 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 { fontSize } from "@mui/system"; import { FixedSizeList } from "react-window"; -import { useRecoilState, useRecoilValue } from "recoil"; -import TemplateTitle from "./TemplateTitle"; +import axios from "axios"; +import { PropTypes } from "prop-types"; import { templateContent, templatePreviewState, templateSelectState, } from "../../../recoil/templateState"; -import { fontSize } from "@mui/system"; +import TemplateTitle from "./TemplateTitle"; // props -> type(pr, readme, contributing) export function TemplateList(props) { @@ -145,13 +145,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 +159,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 +185,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", })); From fb267a4da4b91612109483d88e732382cfc04149 Mon Sep 17 00:00:00 2001 From: Sinji Date: Mon, 9 Oct 2023 18:46:47 +0900 Subject: [PATCH 08/13] Refactor: refactor ReadmeTemplatePage import #84 --- src/pages/ReadmeTemplatePage.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) 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")); From 90099fea7b93a216ad18a2398f4786c9d697bd50 Mon Sep 17 00:00:00 2001 From: Sinji Date: Mon, 9 Oct 2023 18:49:11 +0900 Subject: [PATCH 09/13] Refactor: refactor ContributingTemplatePage import #84 --- src/pages/ContributingTemplatePage.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/pages/ContributingTemplatePage.js b/src/pages/ContributingTemplatePage.js index 8e9260ff..4e7d7946 100644 --- a/src/pages/ContributingTemplatePage.js +++ b/src/pages/ContributingTemplatePage.js @@ -1,13 +1,13 @@ +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 Button from "@mui/material/Button"; 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"; +import MDEditor from "@uiw/react-md-editor"; function ContributingTemplatePage(props) { const [modalValue, setModalValue] = useRecoilState( @@ -21,7 +21,6 @@ function ContributingTemplatePage(props) { }, []); const handlesave = () => { - //value 고대로 저장해서 server로 보내야함. 이건 추후에 백엔드랑 회의 후 정해야할 듯 }; const handleOpen = () => setModalValue(true); From 4b99bfdf4016c04e08f99fd4c44a83d44d4fab93 Mon Sep 17 00:00:00 2001 From: Sinji Date: Mon, 9 Oct 2023 21:51:49 +0900 Subject: [PATCH 10/13] Refactor: Delete unnecessary code #84 --- src/components/common/template/TemplateBody.js | 2 -- src/components/common/template/TemplateList.js | 4 ---- src/pages/ContributingTemplatePage.js | 5 ----- src/pages/PRTemplatePage.js | 7 ++----- src/pages/SelectTypePage.js | 8 ++++++++ 5 files changed, 10 insertions(+), 16 deletions(-) create mode 100644 src/pages/SelectTypePage.js diff --git a/src/components/common/template/TemplateBody.js b/src/components/common/template/TemplateBody.js index 739e5e88..c65f2e80 100644 --- a/src/components/common/template/TemplateBody.js +++ b/src/components/common/template/TemplateBody.js @@ -2,7 +2,6 @@ import { styled } from "styled-components"; import React, { useState, useEffect } from "react"; import { useRecoilState, useRecoilValue } from "recoil"; import Typography from "@mui/material/Typography"; -import { WidthFull } from "@mui/icons-material"; import { templateContent, templatePreviewState, @@ -10,7 +9,6 @@ import { templateToModal, } from "../../../recoil/templateState"; import MarkdownPreview from "@uiw/react-markdown-preview"; -import axios from "axios"; // props -> type(pr, readme, contributing) diff --git a/src/components/common/template/TemplateList.js b/src/components/common/template/TemplateList.js index 86b644f6..58c4f29b 100644 --- a/src/components/common/template/TemplateList.js +++ b/src/components/common/template/TemplateList.js @@ -10,16 +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 { fontSize } from "@mui/system"; -import { FixedSizeList } from "react-window"; import axios from "axios"; -import { PropTypes } from "prop-types"; import { templateContent, templatePreviewState, templateSelectState, } from "../../../recoil/templateState"; -import TemplateTitle from "./TemplateTitle"; // props -> type(pr, readme, contributing) export function TemplateList(props) { diff --git a/src/pages/ContributingTemplatePage.js b/src/pages/ContributingTemplatePage.js index 4e7d7946..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 { useRecoilState, useRecoilValue } from "recoil"; -import Button from "@mui/material/Button"; 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 MarkdownPreview from "../components/common/MarkdownPreview"; -import MDEditor from "@uiw/react-md-editor"; function ContributingTemplatePage(props) { const [modalValue, setModalValue] = useRecoilState( @@ -20,9 +18,6 @@ function ContributingTemplatePage(props) { setStepComplted(true); }, []); - const handlesave = () => { - }; - const handleOpen = () => setModalValue(true); return ( diff --git a/src/pages/PRTemplatePage.js b/src/pages/PRTemplatePage.js index 2d9be0d6..6da7d191 100644 --- a/src/pages/PRTemplatePage.js +++ b/src/pages/PRTemplatePage.js @@ -1,14 +1,11 @@ -import { styled } from "styled-components"; import React, { useState, useEffect } from "react"; import { useRecoilState, useRecoilValue } from "recoil"; -import Button from "@mui/material/Button"; import { templateContent } from "../recoil/templateState"; -import { eachStepState, modalState } from "../recoil/commonState"; import { BaseModal } from "../components/common/modal/BaseModal"; +import { eachStepState, modalState } from "../recoil/commonState"; import MarkdownPreview from "../components/common/MarkdownPreview"; import { TemplateModal } from "../components/common/modal/templateModal"; -import MDEditor from "@uiw/react-md-editor"; - +import { styled } from "styled-components"; function PRTemplatePage() { const [modalValue, setModalValue] = useRecoilState(modalState("pr")); diff --git a/src/pages/SelectTypePage.js b/src/pages/SelectTypePage.js new file mode 100644 index 00000000..f33d8306 --- /dev/null +++ b/src/pages/SelectTypePage.js @@ -0,0 +1,8 @@ +import styled from "styled-components"; +import { COLOR } from "../styles/color.js"; +import { useRecoilValue } from "recoil"; +import { Button } from "@mui/material"; +import propTypes from "prop-types"; +import { useNavigate } from "react-router-dom"; +import { isLogin } from "../../recoil/authorize"; + From e9dc8d65f960104fb6fa876ba3c8c2239f7cb208 Mon Sep 17 00:00:00 2001 From: Sinji Date: Mon, 9 Oct 2023 23:39:44 +0900 Subject: [PATCH 11/13] Fix: Fixing Branch Related Errors #84 --- src/pages/SelectTypePage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/SelectTypePage.js b/src/pages/SelectTypePage.js index f33d8306..2ae9a424 100644 --- a/src/pages/SelectTypePage.js +++ b/src/pages/SelectTypePage.js @@ -5,4 +5,3 @@ import { Button } from "@mui/material"; import propTypes from "prop-types"; import { useNavigate } from "react-router-dom"; import { isLogin } from "../../recoil/authorize"; - From 149b9034d6608dc45c9d5ebef97f5e7e0c289d96 Mon Sep 17 00:00:00 2001 From: Sinji Date: Mon, 9 Oct 2023 23:47:27 +0900 Subject: [PATCH 12/13] Fix: Delete SelectTypePage --- src/components/main/Welcome.js | 2 +- src/pages/SelectTypePage.js | 7 ------- src/routes/router.js | 2 ++ 3 files changed, 3 insertions(+), 8 deletions(-) delete mode 100644 src/pages/SelectTypePage.js diff --git a/src/components/main/Welcome.js b/src/components/main/Welcome.js index 44d305ef..a6647d0d 100644 --- a/src/components/main/Welcome.js +++ b/src/components/main/Welcome.js @@ -32,7 +32,7 @@ export const Welcome = (ref) => { learn more {Logined === true ? ( - navigate("/step1")}> + navigate("/select")}> get started ) : ( diff --git a/src/pages/SelectTypePage.js b/src/pages/SelectTypePage.js deleted file mode 100644 index 2ae9a424..00000000 --- a/src/pages/SelectTypePage.js +++ /dev/null @@ -1,7 +0,0 @@ -import styled from "styled-components"; -import { COLOR } from "../styles/color.js"; -import { useRecoilValue } from "recoil"; -import { Button } from "@mui/material"; -import propTypes from "prop-types"; -import { useNavigate } from "react-router-dom"; -import { isLogin } from "../../recoil/authorize"; diff --git a/src/routes/router.js b/src/routes/router.js index 974b1533..22e161b6 100644 --- a/src/routes/router.js +++ b/src/routes/router.js @@ -1,6 +1,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom"; import MainPage from "../pages/MainPage"; import LoginPage from "../pages/Login"; +import SelectTypePage from "../pages/SelectTypePage"; import PRTemplatePage from "../pages/PRTemplatePage"; import { Layout } from "../layout/Layout"; import CreateRepo from "../pages/CreateRepoPage"; @@ -14,6 +15,7 @@ const Router = () => { } /> } /> + } /> }> } /> } /> From 76a324990aacbb3c7bd466628a8715277a04866b Mon Sep 17 00:00:00 2001 From: Sinji Date: Mon, 9 Oct 2023 23:48:38 +0900 Subject: [PATCH 13/13] Chore: navigate select to step1 --- src/components/main/Welcome.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/main/Welcome.js b/src/components/main/Welcome.js index a6647d0d..44d305ef 100644 --- a/src/components/main/Welcome.js +++ b/src/components/main/Welcome.js @@ -32,7 +32,7 @@ export const Welcome = (ref) => { learn more {Logined === true ? ( - navigate("/select")}> + navigate("/step1")}> get started ) : (