[Refactor] Change CSS sort order

src/components/auth/AuthForm.jsx

@@ -1,73 +1,74 @@
 import React from 'react';
 
-import styled from '@emotion/styled';
-
 import { Link } from 'react-router-dom';
 
+import styled from '@emotion/styled';
+
 import Responsive from '../../styles/Responsive';
 import palette from '../../styles/palette';
 import Button from '../../styles/Button';
 
 const AuthFormWrapper = styled(Responsive)`
-  height: 400px;
-  width: 400px;
   display: flex;
-  justify-items: center;
   align-items: center;
+  justify-items: center;
   flex-direction: column;
-  background: ${palette.gray[1]};
+  width: 400px;
+  height: 400px;
+  padding: 3rem;
   border-radius: 1rem;
   box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 16px 0px;
-  padding: 3rem;
-  h2{
+  background: ${palette.gray[1]};
+
+  h2 {
+    font-size: 2rem;
+    font-weight: bold;
     margin-top: 0;
     color: black;
-    font-weight: bold;
-    font-size: 2rem;
   }
 `;
 
 const FormWrapper = styled.form`
-  margin-top: 32px;
   display: grid;
-  grid-template-rows: repeat(1,1fr);
+  margin-top: 32px;
   grid-row-gap: 1rem;
+  grid-template-rows: repeat(1,1fr);
 `;
 
 const ErrorWrapper = styled.div`
-  font-weight: bold;
   font-size: 0.8rem;
-  color: ${palette.warn[2]};
+  font-weight: bold;
   text-align: center;
+  color: ${palette.warn[2]};
 `;
 
 const InputWrapper = styled.input`
-  background: white;
-  height: 40px;
-  border-radius: 0.25rem;
   font-size: 1rem;
   line-height: 24px;
-  color: #5f5f5f;
-  box-shadow: none;
+  height: 40px;
+  width: 400px;
   border: 0;
+  box-shadow: none;
+  border: 2px solid #D7E2EB;
+  padding: 8px 12px;
+  border-radius: 0.25rem;
+  color: #5f5f5f;
+  background: white;
   transition-duration: 0.08s;
   transition-property: all;
   transition-timing-function: ease-in-out;
   transition-delay: initial;
-  padding: 8px 12px;
-  border: 2px solid #D7E2EB;
   &:focus, &.hover {
     border: 2px solid ${palette.teal[5]};
   }
-  width: 400px;
 `;
 
 const Footer = styled.div`
+  display: flex;
+  justify-content: flex-end;
   margin-top: 1.5rem;
   border-top: 1px solid ${palette.gray[4]};
   padding-top: 20px;
-  display: flex;
-  justify-content: flex-end;
 
   a {
     font-weight: bold;
@@ -79,8 +80,8 @@ const Footer = styled.div`
 
   span {
     font-weight: lighter;
-    color: ${palette.gray[6]};
     margin-right: 0.75rem;
+    color: ${palette.gray[6]};
   }
 `;
 

src/components/common/Header.jsx

@@ -11,16 +11,16 @@ import Button from '../../styles/Button';
 const HeaderWrapper = styled.div`
   position: fixed;
   width: 100%;
-  background: ${palette.gray[1]};
-  box-shadow: 0px 2px 4px ${palette.gray[4]};
   z-index: 100;
+  box-shadow: 0px 2px 4px ${palette.gray[4]};
+  background: ${palette.gray[1]};
 `;
 
 const Wrapper = styled(Responsive)`
-  height: 5rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  height: 5rem;
 `;
 
 const UserStatusWrapper = styled.div`
@@ -30,8 +30,8 @@ const UserStatusWrapper = styled.div`
 `;
 
 const TitleWrapper = styled(Link)`
-  font-family: 'Jua', sans-serif;
   font-size: 2.3rem;
+  font-family: 'Jua', sans-serif;
 `;
 
 const Spacer = styled.div`

src/components/common/ModalWindow.jsx

@@ -1,28 +1,27 @@
 import React from 'react';
 
 import styled from '@emotion/styled';
-
 import { css } from '@emotion/react';
 
 import Button from '../../styles/Button';
 
 const ModalWindowWrapper = styled.div`
-  position: fixed;
-  z-index: 101;
   top: 0;
   left: 0;
+  position: fixed;
+  z-index: 101;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.25);
-  display: flex;
-  justify-content: center;
-  align-items: center;
 
   ${(props) => props.visible && css`
     &.animation {
       animation-name: fade-in;
-      animation-fill-mode: both;
       animation-duration: 0.3s;
+      animation-fill-mode: both;
     }
 
     @keyframes fade-in {
@@ -40,17 +39,20 @@ const ModalBoxWrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 320px;
-  background: white;
   padding: 1.5rem;
   border-radius: 6px;
   box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.125);
+  background: white;
+
   h2 {
     margin-top: 0;
     margin-bottom: 1rem;
   }
+
   p {
     margin-bottom: 2rem;
   }
+
   .buttons {
     display: flex;
     justify-content: flex-end;

src/components/common/Tags.jsx

@@ -12,17 +12,18 @@ const TagsWrapper = styled.div`
 `;
 
 const TagStyledWrapper = ({ div }) => css`
+  font-size: .8em;
+  font-weight: bold;
   display: inline-flex;
   align-items: center;
+  margin-right: 0.5rem;
   padding-left: 1em;
   padding-right: 1em;
-  height: 3em;
-  font-weight: bold;
-  font-size: .8em;
   border-radius: .8em;
-  margin-right: 0.5rem;
+  height: 3em;
   color: ${palette.teal[7]};
   background:${palette.gray[2]};
+
   &:hover {
     color: ${palette.teal[5]};
   }
@@ -31,8 +32,9 @@ const TagStyledWrapper = ({ div }) => css`
     height: 2.5em;
     border-radius: .5em;
     margin-right: 0.3rem;
+
     &:hover {
-    color: ${palette.teal[7]};
+      color: ${palette.teal[7]};
     }
   `};
 `;
@@ -43,11 +45,12 @@ const TagWrapper = styled.div`
 `;
 
 const TagSpanWrapper = styled.span`
+  font-weight: bold;
   height: 2.4em;
   margin-right: .5rem;
-  font-weight: bold;
-  color: ${palette.warn[2]};
   cursor: pointer;
+  color: ${palette.warn[2]};
+
   &:hover {
     color: ${palette.warn[0]};
   }

src/components/introduce/ApplyStatusButton.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import ApproveStatus from '../../styles/ApproveStatus';
-
 import StyledApplyStatusButton from '../../styles/StyledApplyStatusButton';
 
 const checkConfirm = (user) => user.confirm && user.confirm === true;

src/components/introduce/IntroduceForm.jsx

@@ -1,48 +1,53 @@
 import React from 'react';
 
-import styled from '@emotion/styled';
-
 import Moment from 'react-moment';
 
+import styled from '@emotion/styled';
+
 import { authorizedUsersNumber, changeDateToTime } from '../../util/utils';
 
 import Tags from '../common/Tags';
 import palette from '../../styles/palette';
 import DateTimeChange from '../common/DateTimeChange';
 
 const IntroduceReferenceWrapper = styled.div`
+  font-size: 1.1rem;
   display: flex;
   justify-content: space-evenly;
+  margin-bottom: 1.5rem;
   padding: 1rem;
   border-radius: 0.75rem;
   background-color: ${palette.gray[1]};
-  margin-bottom: 1.5rem;
-  font-size: 1.1rem;
+
   label {
-    line-height: 3rem;
     font-weight: bold;
+    line-height: 3rem;
     margin-right: .7rem;
   }
+
   @media (max-width: 1024px) {
-    padding: 0.5rem;
     font-size: 1rem;
+    padding: 0.5rem;
     width: auto;
   }
+
   @media (max-width: 768px) {
     width: 100%;
   }
 `;
 
 const ModeratorWrapper = styled.div`
+  font-size: 1.2rem;
+  font-weight: bold;
   display: flex;
   justify-content: space-between;
   margin-bottom: 1.5rem;
-  font-size: 1.2rem;
-  font-weight: bold;
   color: ${palette.gray[6]};
+
   span {
     margin-right: 1rem;
   }
+
   time {
     font-size: 1rem;
     font-weight: normal;
@@ -56,14 +61,14 @@ const IntroduceReference = styled.div`
 `;
 
 const IntroduceContentTitle = styled.div`
-  padding: 7px 2rem 7px 2rem;
-  width: 17%;
-  text-align: center;
+  font-size: 1.4rem;
   font-weight: bold;
+  text-align: center;
   margin-bottom: 0;
   margin-top: 1rem;
+  padding: 7px 2rem 7px 2rem;
   border-bottom: 2px solid ${palette.violet[3]};
-  font-size: 1.4rem;
+  width: 17%;
 `;
 
 const IntroduceContent = styled.div`

src/components/introduce/IntroduceHeader.jsx

@@ -5,16 +5,16 @@ import styled from '@emotion/styled';
 import palette from '../../styles/palette';
 
 const IntroduceHeaderWrapper = styled.div`
-  border-bottom: 2px solid ${palette.gray[4]};
-  padding-bottom: 1.5rem;
-  margin-bottom: 2rem;
   display: flex;
   justify-content: space-between;
+  margin-bottom: 2rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 2px solid ${palette.gray[4]};
 
   h1 {
     font-size: 2.3rem;
-    line-height: 1.5;
     margin: 0;
+    line-height: 1.5;
   }
 `;