Refactoring for code convention

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,17 +89,17 @@ const AutocompleteWrapper = styled(Autocomplete)`
     transform: none;
   }
   & .MuiAutocomplete-endAdornment {
-    margin-right: 0.7rem;
     float: center;
+    margin-right: 0.7rem;
   }
 `;
 const AutocompleteTextField = styled(TextField)`
   font-size: 1.6rem;
 
   & .MuiFormLabel-root {
     padding-left: 0.3rem;
-    line-height: 3rem;
     font-size: 1.4rem;
+    line-height: 3rem;
   }
   & .MuiAutocomplete-input {
     font-size: 1.4rem;

src/components/common/InputComponent.js

@@ -1,30 +1,26 @@
 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("");
   const [inputValue, setInputValue] = useRecoilState(
     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;
   }
 `;

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)`

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,18 +83,18 @@ 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};
 
   & .MuiChip-root {
     padding: 0;
   }
   & .MuiChip-label {
-    font-size: 1.1rem;
     color: ${(props) => props.labelcolor};
+    font-size: 1.1rem;
   }
   & .MuiChip-deleteIcon {
     color: white;

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,33 +102,33 @@ 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(
       .Mui-disabled,
       .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;
   }
 `;