From 528f0ace2dc54b967ce0eda91c079e3b4e738689 Mon Sep 17 00:00:00 2001 From: Sinji Date: Mon, 9 Oct 2023 23:45:20 +0900 Subject: [PATCH 01/10] Feat: Create SelectTypePage #103 --- src/pages/SelectTypePage.js | 70 +++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 src/pages/SelectTypePage.js diff --git a/src/pages/SelectTypePage.js b/src/pages/SelectTypePage.js new file mode 100644 index 00000000..e4ee1d7a --- /dev/null +++ b/src/pages/SelectTypePage.js @@ -0,0 +1,70 @@ +import styled from "styled-components"; +import { COLOR } from "../styles/color.js"; +import { useRecoilValue } from "recoil"; +import { Button } from "@mui/material"; +import Stack from "@mui/material/Stack"; +import propTypes from "prop-types"; +import { useNavigate } from "react-router-dom"; + +function SelectTypePage(){ + const navigate = new useNavigate(); + + return( + + + + Create New Repo + navigate("/step1")}> + Choose + + + + Check Open-Source Repo + navigate("/step1")}> + Choose + + + + + ); + +} + +const StSelectTypePage = styled.div` + width: 100%; + height: 100%; +`; + +const CreateBox = styled.div` +display: flex; +flex-direction: row; +width: 45rem; +height: 35rem; +margin: auto; +background-color: red; +`; + +const CheckBox = styled.div` +display: flex; +flex-direction: row; +width: 45rem; +height: 35rem; +margin: auto; +background-color: red; +`; + +const CreateBtn = styled(Button)({ + backgroundColor: `${COLOR.MAIN_PURPLE}`, + "&:hover": { + backgroundColor: `${COLOR.MAIN_PURPLE}`, + }, +}); + +const CheckBtn = styled(Button)({ + backgroundColor: "black", + "&:hover": { + backgroundColor: "black", + }, +}); + +export default SelectTypePage; From 31a78e6b11dec584dac5e71a00537278c217650f Mon Sep 17 00:00:00 2001 From: Sinji Date: Tue, 10 Oct 2023 15:40:05 +0900 Subject: [PATCH 02/10] Chore : Connect Welcome and SelectTypePage #103 --- src/components/main/Welcome.js | 2 +- src/routes/router.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) 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/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 f52326e49f664e649658c68a44cc7d1b296aad6a Mon Sep 17 00:00:00 2001 From: Sinji Date: Tue, 10 Oct 2023 21:44:33 +0900 Subject: [PATCH 03/10] Create: Create SelectType and Connect SelectType and SelectTypePage #103 --- src/components/common/SelectType.js | 83 +++++++++++++++++++++++++++++ src/pages/SelectTypePage.js | 68 +++-------------------- 2 files changed, 89 insertions(+), 62 deletions(-) create mode 100644 src/components/common/SelectType.js diff --git a/src/components/common/SelectType.js b/src/components/common/SelectType.js new file mode 100644 index 00000000..d11db1cb --- /dev/null +++ b/src/components/common/SelectType.js @@ -0,0 +1,83 @@ +import styled from "styled-components"; +import { COLOR } from "../../styles/color.js"; +import { Button } from "@mui/material"; +import Stack from "@mui/material/Stack"; +import { useNavigate } from "react-router-dom"; + +export const SelectType= () =>{ + const navigate = new useNavigate(); + + return( + + + + Create New Repo + navigate("/step1")}> + Choose + + + + Check Open-Source Repo + navigate("/step1")}> + Choose + + + + + ); + +}; + +const StSelectType = styled.div` + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + justify-content: center; + height: 80vh; + background: linear-gradient( + to bottom, + ${COLOR.MAIN_HOVER}, + ${COLOR.MAIN_BACKGROUND} +); +`; + +const CreateBox = styled.div` +display: flex; +flex-direction: row; +width: 100%; +min-width: 50rem; +height: 100%; +min-height: 30rem; +margin: 0 auto; +background-color: red; +`; + +const CheckBox = styled.div` +display: flex; +flex-direction: row; +width: 100%; +min-width: 50rem; +height: 100%; +min-height: 30rem; +margin: 0 auto; +background-color: red; +`; + +const CreateBtn = styled(Button)({ + width: "20%", + height: "15%", + backgroundColor: `${COLOR.MAIN_PURPLE}`, + "&:hover": { + backgroundColor: `${COLOR.MAIN_PURPLE}`, + }, +}); + +const CheckBtn = styled(Button)({ + width: "20%", + height: "15%", + backgroundColor: "black", + "&:hover": { + backgroundColor: "black", + }, +}); diff --git a/src/pages/SelectTypePage.js b/src/pages/SelectTypePage.js index e4ee1d7a..d687f457 100644 --- a/src/pages/SelectTypePage.js +++ b/src/pages/SelectTypePage.js @@ -1,70 +1,14 @@ -import styled from "styled-components"; -import { COLOR } from "../styles/color.js"; -import { useRecoilValue } from "recoil"; -import { Button } from "@mui/material"; -import Stack from "@mui/material/Stack"; -import propTypes from "prop-types"; import { useNavigate } from "react-router-dom"; +import { Header } from "../layout/Header"; +import { SelectType } from "../components/common/SelectType"; +import Footer from "../components/main/Footer"; function SelectTypePage(){ - const navigate = new useNavigate(); - return( - - - - Create New Repo - navigate("/step1")}> - Choose - - - - Check Open-Source Repo - navigate("/step1")}> - Choose - - - - + <>
+ +