diff --git a/src/components/common/Autocomplete.js b/src/components/common/Autocomplete.js index 78409f8c..3cd16aec 100644 --- a/src/components/common/Autocomplete.js +++ b/src/components/common/Autocomplete.js @@ -1,13 +1,11 @@ import styled from "styled-components"; - import { useRecoilState } from "recoil"; -import { repoDataAtomFamily } from "../../recoil/repoData"; +import { Paper } from "@mui/material"; import TextField from "@mui/material/TextField"; import Autocomplete from "@mui/material/Autocomplete"; - -import SearchIcon from "@mui/icons-material/Search"; import { createFilterOptions } from "@mui/material/Autocomplete"; -import { Paper } from "@mui/material"; +import SearchIcon from "@mui/icons-material/Search"; +import { repoDataAtomFamily } from "../../recoil/repoData"; // props -> type(lang/framework), options(for lang->langs/for framework->frameworkOptions), setIsSelectLang(setIsSelectLang), setDisableValue(setDisableValue), disableValue(false/disableValue) export const AutocompleteInput = (props) => { @@ -91,8 +89,8 @@ const AutocompleteWrapper = styled(Autocomplete)` transform: none; } & .MuiAutocomplete-endAdornment { - margin-right: 0.7rem; float: center; + margin-right: 0.7rem; } `; const AutocompleteTextField = styled(TextField)` @@ -100,8 +98,8 @@ const AutocompleteTextField = styled(TextField)` & .MuiFormLabel-root { padding-left: 0.3rem; - line-height: 3rem; font-size: 1.4rem; + line-height: 3rem; } & .MuiAutocomplete-input { font-size: 1.4rem; diff --git a/src/components/common/InputComponent.js b/src/components/common/InputComponent.js index 3ffc0c4f..14ec6f5c 100644 --- a/src/components/common/InputComponent.js +++ b/src/components/common/InputComponent.js @@ -1,22 +1,18 @@ import styled from "styled-components"; -import PropTypes from "prop-types"; +import { COLOR } from "../../styles/color"; import { useRef } from "react"; - +import { useRecoilState } from "recoil"; +import { TextField } from "@mui/material"; import HelpIcon from "@mui/icons-material/Help"; import FormControl from "@mui/material/FormControl"; import FormHelperText from "@mui/material/FormHelperText"; - import InputLabel from "@mui/material/InputLabel"; import IconButton from "@mui/material/IconButton"; import Tooltip from "@mui/material/Tooltip"; - -import { TextField } from "@mui/material"; -import { COLOR } from "../../styles/color"; -import { useRecoilState } from "recoil"; -import { repoDataAtomFamily } from "../../recoil/repoData"; - import CheckCircleIcon from "@mui/icons-material/CheckCircle"; import WarningRoundedIcon from "@mui/icons-material/WarningRounded"; +import { repoDataAtomFamily } from "../../recoil/repoData"; +import PropTypes from "prop-types"; export const TextInputContainer = (props) => { const textRef = useRef(""); @@ -24,7 +20,7 @@ export const TextInputContainer = (props) => { repoDataAtomFamily(props.type), ); - /* GET - check repository is duplicate */ + // GET - check repository is duplicate const handleOnChange = (e) => { setInputValue(e.target.value); @@ -130,28 +126,27 @@ const InputFormControl = styled(FormControl)` const LabelContainer = styled.div` display: flex; - flex-direction: row; align-items: baseline; + flex-direction: row; `; const InputLabelWrapper = styled(InputLabel)` display: flex; - position: static; - height: 100%; align-items: center; + position: static; transform-origin: center left; + height: 100%; gap: 0.5rem; - + color: ${COLOR.MAIN_BLACK}; font-size: 1.8rem; font-weight: 500; text-align: center; - color: ${COLOR.MAIN_BLACK}; & .MuiFormLabel-root { - transform-origin: center left; + justify-content: center; align-items: center; + transform-origin: center left; text-align: center; - justify-content: center; } `; @@ -186,8 +181,8 @@ const InputField = styled(TextField)` // shadow &:focus { - box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.1); outline: none; + box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.1); } &:hover { border: none; @@ -205,12 +200,10 @@ const InputField = styled(TextField)` & .MuiInputBase-input { position: relative; height: 3rem; - + padding: 0; + border: none; border-radius: 0.4rem; - font-size: 1.4rem; - border: none; - padding: 0; &:hover { outline: none; } @@ -236,9 +229,9 @@ const InputField = styled(TextField)` & .MuiInput-root { &:hover { - border-radius: 20rem; - border: none; margin-top: 8rem; + border: none; + border-radius: 20rem; } } @@ -247,17 +240,17 @@ const InputField = styled(TextField)` } &.Mui-error { - border: 1px solid red; + border: 0.1rem solid red; } `; const FormHelperTextWrapper = styled(FormHelperText)` - font-size: 1rem; color: ${(props) => props.textcolor}; + font-size: 1rem; &.MuiFormHelperText-root { display: flex; flex-direction: row; - gap: 0.5rem; margin-left: 0.3rem; + gap: 0.5rem; } `; diff --git a/src/components/common/LoadingCompleted.js b/src/components/common/LoadingCompleted.js index e9ec65a4..197b3c70 100644 --- a/src/components/common/LoadingCompleted.js +++ b/src/components/common/LoadingCompleted.js @@ -1,8 +1,7 @@ import styled from "styled-components"; import { COLOR } from "../../styles/color"; - -import Spinner from "../../assets/images/spinnerEllipsis.gif"; import { Typography } from "@mui/material"; +import Spinner from "../../assets/images/spinnerEllipsis.gif"; export const LoadingCompleted = () => { return ( @@ -17,28 +16,28 @@ export const LoadingCompleted = () => { const Background = styled.div` display: flex; - flex-direction: column; - align-items: center; justify-content: center; + align-items: center; + flex-direction: column; position: absolute; - width: 100vw; - height: 100vh; + z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); + width: 100vw; + height: 100vh; background: ${COLOR.MAIN_WHITE}; opacity: 0.93; - z-index: 999; `; const LoadingText = styled.div` + color: ${COLOR.MAIN_BLACK}; font-family: "SUIT Variable"; font-style: normal; font-weight: 500; font-size: 1.5rem; line-height: 1.9rem; text-align: center; - color: ${COLOR.MAIN_BLACK}; `; const LoadingTitle = styled(Typography)` diff --git a/src/components/common/ReadOnlyAuto.js b/src/components/common/ReadOnlyAuto.js index d6baee0a..292173c9 100644 --- a/src/components/common/ReadOnlyAuto.js +++ b/src/components/common/ReadOnlyAuto.js @@ -1,11 +1,9 @@ import styled from "styled-components"; import { COLOR } from "../../styles/color"; - import { useRecoilValue } from "recoil"; - +import { Chip } from "@mui/material"; import TextField from "@mui/material/TextField"; import Autocomplete from "@mui/material/Autocomplete"; -import { Chip } from "@mui/material"; export const ReadonlyAuto = (props) => { const showData = useRecoilValue(props.data); @@ -49,8 +47,8 @@ const StReadOnlyAuto = styled.div``; const ReadOnlyAutoContainer = styled(Autocomplete)` & .MuiInputBase-root { padding: 0; - background-color: ${COLOR.MAIN_WHITE}; border: none; + background-color: ${COLOR.MAIN_WHITE}; } & .MuiOutlinedInput-notchedOutline { border: none; @@ -75,8 +73,8 @@ const ReadOnlyTextField = styled(TextField)` & .MuiInputLabel-root { display: flex; - font-size: 1.4rem; line-height: 5rem; + font-size: 1.4rem; } & .MuiChip-root { @@ -85,9 +83,9 @@ const ReadOnlyTextField = styled(TextField)` `; const ShowChipItme = styled(Chip)` - margin: 0.2rem; - padding: 0 0 0 0rem; height: 2.8rem; + padding: 0 0 0 0rem; + margin: 0.2rem; border-radius: 1rem; background-color: ${(props) => props.bgcolor}; @@ -95,8 +93,8 @@ const ShowChipItme = styled(Chip)` padding: 0; } & .MuiChip-label { - font-size: 1.1rem; color: ${(props) => props.labelcolor}; + font-size: 1.1rem; } & .MuiChip-deleteIcon { color: white; diff --git a/src/components/common/SearchAuto.js b/src/components/common/SearchAuto.js index db341ffb..35d71284 100644 --- a/src/components/common/SearchAuto.js +++ b/src/components/common/SearchAuto.js @@ -1,12 +1,10 @@ import styled from "styled-components"; import { COLOR } from "../../styles/color"; - import { useRecoilState } from "recoil"; - +import { Autocomplete } from "@mui/material"; import SearchIcon from "@mui/icons-material/Search"; import Checkbox from "@mui/material/Checkbox"; import CheckIcon from "@mui/icons-material/Check"; -import { Autocomplete } from "@mui/material"; export const SearchAuto = (props) => { const [selectValue, setSelectValue] = useRecoilState(props.type); @@ -74,9 +72,9 @@ export const SearchAuto = (props) => { // SearchForm const SharedSearchStyle = ` +display: block; position: absolute; z-index: 2; - display: block; width: 2rem; height: 2rem; line-height: 2.375rem; @@ -89,8 +87,8 @@ const SharedPadding = ` `; const StSearchAuto = styled.div` - margin: 2rem; justify-content: center; + margin: 2rem; `; const SearchAutoForm = styled(Autocomplete)` @@ -104,24 +102,24 @@ const SearchAutoForm = styled(Autocomplete)` & .MuiInput-root { padding-top: 0.2rem; padding-bottom: 0.4rem; - border-radius: 20rem; margin-bottom: 1rem; border: none; + border-radius: 20rem; } & .MuiInputBase-root::before { height: 3rem; - border-radius: 20rem; border: 0.1rem solid lightgray; + border-radius: 20rem; } & .MuiInputBase-root::after { height: 3rem; - border-radius: 20rem; border: none; + border-radius: 20rem; } & .MuiInput-root::after { - border-radius: 20rem; + margin-top: 8rem; border: none; - margin-top: 80px; + border-radius: 20rem; } & .css-q0jhri-MuiInputBase-root-MuiInput-root:hover:not( @@ -129,8 +127,8 @@ const SearchAutoForm = styled(Autocomplete)` .Mui-error ):before { height: 3rem; - border-radius: 20rem; border: none; + border-radius: 20rem; box-shadow: 0.1rem 0.2rem 0.9rem lightgray; } `; @@ -147,31 +145,29 @@ const SearchFormField = styled.div``; const SerachIconWrapper = styled.div` svg { ${SharedSearchStyle} - width: 2rem; height: 2rem; - color: grey; margin-top: 0.4rem; margin-left: 1rem; + color: grey; } `; const SearchInput = styled.input` ${SharedPadding} width:100%; - border: none; + height: 3rem; padding-top: 0.2rem; padding-bottom: 0.4rem; - border-radius: 20rem; margin-bottom: 1rem; - height: 3rem; border: 0.1rem solid lightgray; + border-radius: 20rem; transition: all 0.2s ease-out; &:focus { height: 3rem; + outline: none; border-radius: 20rem; box-shadow: 0.1rem 0.2rem 0.9rem lightgray; - outline: none; } `; diff --git a/src/components/common/SelectAuto.js b/src/components/common/SelectAuto.js index a13ed6bf..216ad320 100644 --- a/src/components/common/SelectAuto.js +++ b/src/components/common/SelectAuto.js @@ -1,6 +1,6 @@ import styled from "styled-components"; import { COLOR } from "../../styles/color"; - +import { useRecoilState } from "recoil"; import { Avatar, FormControl, @@ -10,7 +10,6 @@ import { MenuItem, Select, } from "@mui/material"; -import { useRecoilState } from "recoil"; import { repoDataAtomFamily } from "../../recoil/repoData"; // props -> type(userName) data(userRepoName) labelText(Owner*) @@ -78,22 +77,21 @@ const SelectInputFormControl = styled(FormControl)` const SelectLabelWrapper = styled(InputLabel)` display: flex; - position: static; - height: 100%; align-items: center; transform-origin: center left; + position: static; + height: 100%; gap: 0.5rem; - + color: ${COLOR.MAIN_BLACK}; font-size: 1.8rem; font-weight: 500; text-align: center; - color: ${COLOR.MAIN_BLACK}; & .MuiFormLabel-root { - transform-origin: center left; + justify-content: center; align-items: center; + transform-origin: center left; text-align: center; - justify-content: center; } `; @@ -101,14 +99,14 @@ const SelectContainer = styled(Select)` display: flex; & .MuiSelect-select { - padding: 0.5rem 2rem; width: 100%; height: 4rem; + padding: 0.5rem 2rem; } & .MuiInputBase-input { display: flex; - align-items: center; justify-content: space-between; + align-items: center; } & .MuiList-root { border-radius: 3rem; @@ -133,16 +131,16 @@ const SelectContainer = styled(Select)` `; const MenuOptionItem = styled(MenuItem)` - border-radius: 1rem; padding: 1rem 2.5rem; + border-radius: 1rem; `; const RenderOptionItem = styled.div` display: flex; - flex-direction: row; justify-content: space-between; - min-width: 9rem; + flex-direction: row; width: 100%; + min-width: 9rem; gap: 3rem; `; const OptionItemAvatar = styled(ListItemAvatar)` @@ -158,8 +156,8 @@ const ItmeAvatar = styled(Avatar)` } `; const OPtionItemText = styled(ListItemText)` - margin: 0; width: 50%; + margin: 0; & .MuiTypography-root { font-size: 1.3rem; } diff --git a/src/components/common/SelectChip.js b/src/components/common/SelectChip.js index 6f03146c..d0d6fc85 100644 --- a/src/components/common/SelectChip.js +++ b/src/components/common/SelectChip.js @@ -1,13 +1,11 @@ import styled from "styled-components"; +import { useState } from "react"; import { useRecoilState } from "recoil"; - +import { Box, Stack, Typography } from "@mui/material"; import Accordion from "@mui/material/Accordion"; import AccordionSummary from "@mui/material/AccordionSummary"; -import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; - import Chip from "@mui/material/Chip"; -import { Box, Stack, Typography } from "@mui/material"; -import { useState } from "react"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import CheckIcon from "@mui/icons-material/Check"; //props-> data, type, @@ -108,8 +106,8 @@ export const ChipGroup = (props) => { const StSelectChip = styled(Box)` display: flex; align-items: center; - gap: 1rem; width: 100%; + gap: 1rem; & .css-1elwnq4-MuiPaper-root-MuiAccordion-root { box-shadow: none; } diff --git a/src/components/common/ShowSelect.js b/src/components/common/ShowSelect.js index ff0744ba..1205c6c4 100644 --- a/src/components/common/ShowSelect.js +++ b/src/components/common/ShowSelect.js @@ -1,10 +1,7 @@ import styled from "styled-components"; import { COLOR } from "../../styles/color"; - import { useRecoilState } from "recoil"; - -import Chip from "@mui/material/Chip"; -import { Autocomplete, TextField } from "@mui/material"; +import { Autocomplete, TextField, Chip } from "@mui/material"; import ClearIcon from "@mui/icons-material/Clear"; export const FixedOptionShowSelect = (props) => { @@ -48,8 +45,8 @@ export const FixedOptionShowSelect = (props) => { const StFixedOptionShowSelect = styled.div` display: flex; - margin-top: 2rem; height: 100%; + margin-top: 2rem; `; const SelectContainer = styled(Autocomplete)` @@ -66,9 +63,9 @@ const SelectContainer = styled(Autocomplete)` `; const ShowChipItme = styled(Chip)` - margin: 0.2rem; - padding: 0 0 0 0rem; height: 2.8rem; + padding: 0 0 0 0rem; + margin: 0.2rem; border-radius: 1rem; background-color: ${(props) => props.bgcolor}; @@ -76,8 +73,8 @@ const ShowChipItme = styled(Chip)` padding: 0; } & .MuiChip-label { - font-size: 1.1rem; color: ${(props) => props.labelcolor}; + font-size: 1.1rem; } & .MuiChip-deleteIcon { color: white; diff --git a/src/components/common/modal/BaseDialog.js b/src/components/common/modal/BaseDialog.js index 46b4e5ab..e6151945 100644 --- a/src/components/common/modal/BaseDialog.js +++ b/src/components/common/modal/BaseDialog.js @@ -1,8 +1,8 @@ import styled from "styled-components"; import { COLOR } from "../../../styles/color"; import { useRecoilState } from "recoil"; -import { modalState } from "../../../recoil/commonState"; import { Dialog } from "@mui/material"; +import { modalState } from "../../../recoil/commonState"; export const BaseDialog = (props) => { const handleClose = () => setDialogValue(false); @@ -29,13 +29,13 @@ const StDialog = styled(Dialog)` `; const DialogContainer = styled.div` display: flex; - width: 20%; - height: 50%; - padding: 3.5rem 2rem 2rem 2rem; - transform: translate(-50%, -50%); position: fixed; top: 50%; left: 50%; + transform: translate(-50%, -50%); + width: 20%; + height: 50%; + padding: 3.5rem 2rem 2rem 2rem; border-radius: 1.5rem; background-color: ${COLOR.MAIN_WHITE}; `; diff --git a/src/components/common/modal/BaseModal2.js b/src/components/common/modal/BaseModal2.js index 0afa623d..734b6c40 100644 --- a/src/components/common/modal/BaseModal2.js +++ b/src/components/common/modal/BaseModal2.js @@ -27,14 +27,14 @@ const StBaseModal = styled(Modal)` `; const ModalContainer = styled.div` display: flex; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); width: 55%; height: 60%; padding: 2rem; margin-top: 1rem; - transform: translate(-50%, -50%); - position: fixed; - top: 50%; - left: 50%; border-radius: 2rem; background-color: ${COLOR.MAIN_WHITE}; `; diff --git a/src/components/common/modal/FinishDialog.js b/src/components/common/modal/FinishDialog.js index 3e3a2c94..f178b5c1 100644 --- a/src/components/common/modal/FinishDialog.js +++ b/src/components/common/modal/FinishDialog.js @@ -1,18 +1,17 @@ import styled from "styled-components"; import { COLOR } from "../../../styles/color"; - +import { useState } from "react"; +import { useRecoilState, useRecoilValue } from "recoil"; +import { Box, Button, DialogContent, DialogTitle } from "@mui/material"; +import TaskAltRoundedIcon from "@mui/icons-material/TaskAltRounded"; +import axios from "axios"; import { repoDataAtomFamily, selectGitignoreData, } from "../../../recoil/repoData"; -import { Box, Button, DialogContent, DialogTitle } from "@mui/material"; -import axios from "axios"; -import { useRecoilState, useRecoilValue } from "recoil"; import { templateContent } from "../../../recoil/templateState"; -import { useState } from "react"; -import { LoadingCompleted } from "../LoadingCompleted"; -import TaskAltRoundedIcon from "@mui/icons-material/TaskAltRounded"; import { modalState } from "../../../recoil/commonState"; +import { LoadingCompleted } from "../LoadingCompleted"; export const FinishDialog = (props) => { const [loading, setLoading] = useState(false); @@ -29,7 +28,7 @@ export const FinishDialog = (props) => { const [dialogValue, setDialogValue] = useRecoilState(modalState(props.type)); - /* POST - repo info for create repository */ + // POST - repo info for create repository async function postCreatRepo() { try { const response = await axios.post( @@ -49,7 +48,7 @@ export const FinishDialog = (props) => { } } - /* POST - file for settings */ + // POST - file for settings async function postRepoData() { try { const response = await axios.post( @@ -76,7 +75,7 @@ export const FinishDialog = (props) => { } } - /* POST - email */ + // POST - email async function postEmail() { try { const response = await axios.post( @@ -138,17 +137,17 @@ export const FinishDialog = (props) => { const StFinishDialog = styled.div` display: flex; - flex-direction: column; justify-content: center; align-items: center; + flex-direction: column; width: 100%; height: 100%; overflow-y: scroll; `; const Icon = styled(TaskAltRoundedIcon)` - font-size: 7rem; color: ${COLOR.MAIN_BLUE}; + font-size: 7rem; `; const DialogTitleText = styled(DialogTitle)` @@ -157,15 +156,15 @@ const DialogTitleText = styled(DialogTitle)` `; const DialogContentText = styled(DialogContent)` - font-size: 1.5rem; color: ${COLOR.BORDER_GRAY}; + font-size: 1.5rem; `; const DialogBtnContainer = styled(Box)` display: flex; - flex-direction: column; justify-content: center; align-items: center; + flex-direction: column; width: 100%; row-gap: 1rem; `; @@ -175,6 +174,6 @@ const DialogBtn = styled(Button)` height: 100%; padding: 1rem; border-radius: 2rem; - font-size: 1.5rem; background-color: ${(props) => props.bgcolor}; + font-size: 1.5rem; `; diff --git a/src/components/common/modal/GitignoreModal.js b/src/components/common/modal/GitignoreModal.js index 0a8752e0..9eb32771 100644 --- a/src/components/common/modal/GitignoreModal.js +++ b/src/components/common/modal/GitignoreModal.js @@ -1,13 +1,10 @@ import styled from "styled-components"; - +import { Grid } from "@mui/material"; import { SelectChip } from "../SelectChip"; - -import optionData from "../../../data/optionData.json"; - import { selectGitignoreData } from "../../../recoil/repoData"; import { FixedOptionShowSelect } from "../ShowSelect"; -import { Grid } from "@mui/material"; import { SearchAuto } from "../SearchAuto"; +import optionData from "../../../data/OptionData.json"; export const GitignoreModal = () => { const osOptions = optionData["OS"]; @@ -54,9 +51,9 @@ export const GitignoreModal = () => { }; const StGitIgnoreModal = styled(Grid)` - padding: 1rem; width: 100%; height: 100%; + padding: 1rem; row-gap: 1rem; overflow-y: hidden; `; diff --git a/src/components/step1/GitignoreContainer.js b/src/components/step1/GitignoreContainer.js index e2d14525..28a8e5bb 100644 --- a/src/components/step1/GitignoreContainer.js +++ b/src/components/step1/GitignoreContainer.js @@ -2,19 +2,17 @@ import styled from "styled-components"; import { COLOR } from "../../styles/color"; import { useRecoilState, useRecoilValue } from "recoil"; -import { - repoDataAtomFamily, - showAllGitignoreState, -} from "../../recoil/repoData"; - import { Button, Typography } from "@mui/material"; -import { BaseModal } from "../common/modal/BaseModal"; import { GitignoreModal } from "../common/modal/GitignoreModal"; import { ReadonlyAuto } from "../common/ReadOnlyAuto"; import { modalState } from "../../recoil/commonState"; import { BaseModal2 } from "../common/modal/BaseModal2"; +import { + repoDataAtomFamily, + showAllGitignoreState, +} from "../../recoil/repoData"; -/* for gitignore */ +// for gitignore export const GitIgnoreContainer = () => { const [modalValue, setModalValue] = useRecoilState( modalState("gitignoreModal"), @@ -54,8 +52,8 @@ const StGitIgnoreContainer = styled.div` const Header = styled.div` display: flex; - flex-direction: row; justify-content: space-between; + flex-direction: row; `; const SharedTextStyle = ` diff --git a/src/components/step1/RequiredFieldContainer.js b/src/components/step1/RequiredFieldContainer.js index 1a74fd8d..98524b4a 100644 --- a/src/components/step1/RequiredFieldContainer.js +++ b/src/components/step1/RequiredFieldContainer.js @@ -1,16 +1,15 @@ import styled from "styled-components"; -import { TextInputContainer } from "../common/InputComponent"; -import { useState } from "react"; -import axios from "axios"; -import { useEffect } from "react"; +import { useState, useEffect } from "react"; +import { useRecoilState } from "recoil"; import { Grid } from "@mui/material"; +import axios from "axios"; +import { TextInputContainer } from "../common/InputComponent"; import { SelectAuto } from "../common/SelectAuto"; -import { useRecoilState } from "recoil"; import { repoDataAtomFamily } from "../../recoil/repoData"; -/* for Owner, RepoName, Description */ +// for Owner, RepoName, Description export const RequiredFieldContainer = () => { - /* GET - user repo info */ + // GET - user repo info const [owner, setOwner] = useRecoilState(repoDataAtomFamily("owner")); const [repoName, setRepoName] = useRecoilState( repoDataAtomFamily("repoName"), @@ -53,7 +52,7 @@ export const RequiredFieldContainer = () => { getUserRepoData(); }, []); - /* POST - validate repo name */ + // POST - validate repo name const [validateCheck, setValidateCheck] = useRecoilState( repoDataAtomFamily("dupCheck"), ); diff --git a/src/components/step1/SelectContainer.js b/src/components/step1/SelectContainer.js index 5d4c5900..f6738ed7 100644 --- a/src/components/step1/SelectContainer.js +++ b/src/components/step1/SelectContainer.js @@ -1,15 +1,14 @@ import styled from "styled-components"; -import { useRecoilState } from "recoil"; - import { useEffect, useState } from "react"; +import { useRecoilState } from "recoil"; +import { Grid, Typography } from "@mui/material"; import axios from "axios"; import { AutocompleteInput } from "../common/Autocomplete"; import { repoDataAtomFamily } from "../../recoil/repoData"; -import { Grid, Typography } from "@mui/material"; -/* for select Language & Framework */ +// for select Language & Framework export const SelectContainer = () => { - /* lang/frame */ + // lang/frame const [selectLang, setSelectLang] = useRecoilState( repoDataAtomFamily("lang"), ); @@ -20,7 +19,7 @@ export const SelectContainer = () => { const [isSelectLang, setIsSelectLang] = useState(false); const [disableValue, setDisableValue] = useState(true); - /* GET - Lang/Framework */ + // GET - Lang/Framework const [baseOption, setBaseOption] = useState([ { language: "", frameworks: {} }, ]); diff --git a/src/layout/Layout.js b/src/layout/Layout.js index e2aee76b..22a2a0cc 100644 --- a/src/layout/Layout.js +++ b/src/layout/Layout.js @@ -1,16 +1,15 @@ import styled from "styled-components"; import { COLOR } from "../styles/color"; import { Outlet, useNavigate } from "react-router-dom"; +import { useRecoilState } from "recoil"; import Button from "@mui/material/Button"; import Box from "@mui/material/Box"; -import StepInfo from "../components/common/StepInfo"; import { LinearStepper } from "./Stepper"; import { Header } from "./Header"; - -import { activeState, eachStepState, modalState } from "../recoil/commonState"; -import { useRecoilState } from "recoil"; +import StepInfo from "../components/common/StepInfo"; import { FinishDialog } from "../components/common/modal/FinishDialog"; import { BaseDialog } from "../components/common/modal/BaseDialog"; +import { activeState, eachStepState, modalState } from "../recoil/commonState"; export const Layout = () => { const [activeStep, setActiveState] = useRecoilState(activeState); @@ -76,21 +75,21 @@ export const Layout = () => { const StLayout = styled.div` display: flex; flex-direction: column; - overflow-x: hidden; width: 100vw; height: 100vh; background-color: ${COLOR.MAIN_WHITE}; + overflow-x: hidden; overflow-y: hidden; `; const ContentsContainer = styled.div` display: flex; + justify-content: space-around; flex-direction: column; width: 100vw; height: 100vh; - justify-content: space-around; - margin-left: 2.6rem; padding: 2rem 3rem 0 2rem; + margin-left: 2.6rem; border-top-left-radius: 2rem; background-color: ${COLOR.MAIN_BACKGROUND}; `; @@ -98,34 +97,34 @@ const ContentsContainer = styled.div` const StepContainer = styled.div` display: flex; flex-direction: row; - gap: 2.5rem; width: 100vw; height: 76vh; + gap: 2.5rem; `; const ExplainWrapper = styled.div` display: flex; + justify-content: center; width: 20vw; height: 100vh; - justify-content: center; `; const StepContentsContainer = styled.div` display: flex; - overflow-y: scroll; width: 80%; height: 100%; padding: 3rem; border-top-left-radius: 2rem; background-color: ${COLOR.MAIN_WHITE}; + overflow-y: scroll; `; const BottomContainer = styled.div` display: flex; justify-content: space-between; width: 80%; - margin-left: 20%; padding: 1rem 2rem 1rem 2rem; + margin-left: 20%; `; const ButtonContainer = styled(Box)` diff --git a/src/layout/Stepper.js b/src/layout/Stepper.js index debe0627..c4899caf 100644 --- a/src/layout/Stepper.js +++ b/src/layout/Stepper.js @@ -1,12 +1,9 @@ import styled from "styled-components"; - +import { useRecoilValue } from "recoil"; import Stepper from "@mui/material/Stepper"; import Step from "@mui/material/Step"; import StepLabel from "@mui/material/StepLabel"; - -import { useRecoilValue } from "recoil"; import { activeState } from "../recoil/commonState"; - import StepData from "../data/StepData.json"; export const LinearStepper = () => { diff --git a/src/pages/CreateRepoPage.js b/src/pages/CreateRepoPage.js index 92cf6212..9d6f0455 100644 --- a/src/pages/CreateRepoPage.js +++ b/src/pages/CreateRepoPage.js @@ -1,11 +1,10 @@ import styled from "styled-components"; import { useEffect } from "react"; - +import { useRecoilState, useRecoilValue } from "recoil"; import { Grid } from "@mui/material"; import { GitIgnoreContainer } from "../components/step1/GitignoreContainer"; import { SelectContainer } from "../components/step1/SelectContainer"; import { RequiredFieldContainer } from "../components/step1/RequiredFieldContainer"; -import { useRecoilState, useRecoilValue } from "recoil"; import { eachStepState } from "../recoil/commonState"; import { repoDataAtomFamily } from "../recoil/repoData";