From 057d1657960ae95b8e8709004b25b1afafc0e06f Mon Sep 17 00:00:00 2001
From: Sinji <sinzi031012@naver.com>
Date: Mon, 9 Oct 2023 17:38:50 +0900
Subject: [PATCH] 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",
 }));