diff --git a/src/components/auth/AuthForm.jsx b/src/components/auth/AuthForm.jsx
index 28f6a52..4042bdc 100644
--- a/src/components/auth/AuthForm.jsx
+++ b/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]};
   }
 `;
 
diff --git a/src/components/common/Header.jsx b/src/components/common/Header.jsx
index 430ff79..c50b30e 100644
--- a/src/components/common/Header.jsx
+++ b/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`
diff --git a/src/components/common/ModalWindow.jsx b/src/components/common/ModalWindow.jsx
index 0773554..0ff0b09 100644
--- a/src/components/common/ModalWindow.jsx
+++ b/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;
diff --git a/src/components/common/Tags.jsx b/src/components/common/Tags.jsx
index e065860..5d6f95e 100644
--- a/src/components/common/Tags.jsx
+++ b/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]};
   }
diff --git a/src/components/introduce/ApplyStatusButton.jsx b/src/components/introduce/ApplyStatusButton.jsx
index 5609a29..b264050 100644
--- a/src/components/introduce/ApplyStatusButton.jsx
+++ b/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;
diff --git a/src/components/introduce/IntroduceForm.jsx b/src/components/introduce/IntroduceForm.jsx
index 7ddd5bf..3b4f519 100644
--- a/src/components/introduce/IntroduceForm.jsx
+++ b/src/components/introduce/IntroduceForm.jsx
@@ -1,9 +1,9 @@
 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';
@@ -11,38 +11,43 @@ 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`
diff --git a/src/components/introduce/IntroduceHeader.jsx b/src/components/introduce/IntroduceHeader.jsx
index c1fc798..b8295b5 100644
--- a/src/components/introduce/IntroduceHeader.jsx
+++ b/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;
   }
 `;
 
diff --git a/src/components/introduce/modals/ApplicationFormModal.jsx b/src/components/introduce/modals/ApplicationFormModal.jsx
index 9aa16cb..9ce74bd 100644
--- a/src/components/introduce/modals/ApplicationFormModal.jsx
+++ b/src/components/introduce/modals/ApplicationFormModal.jsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 
 import styled from '@emotion/styled';
-
 import { css } from '@emotion/react';
 
 import Button from '../../../styles/Button';
@@ -9,21 +8,21 @@ import palette from '../../../styles/palette';
 
 const ApplicationFormModalWrapper = styled.div`
   position: fixed;
-  z-index: 101;
   top: 0;
   left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
+  z-index: 101;
   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,19 @@ const ApplicationFormModalWrapper = styled.div`
 const ModalBoxWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  height: 575px;
   width: 400px;
-  background: white;
+  height: 575px;
   padding: 1.5rem;
   border-radius: 6px;
   box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.125);
+  background: white;
+
   h2 {
+    text-align: center;
     margin-top: 0;
     margin-bottom: 1rem;
-    text-align: center;
   }
+
   .buttons {
     display: flex;
     justify-content: flex-end;
@@ -66,42 +67,45 @@ const ContentBoxWrapper = styled.div`
     font-size: 1.1rem;
     font-weight: bold;
     margin-bottom: 0.3rem;
+
     ::before {
       content: '*';
-      display: inline-block;
-      vertical-align: top;
       font-weight: 400;
-      color: ${palette.warn[1]};
-      margin: 0 0.125rem 0 0;
       font-size: 1.25rem;
+      display: inline-block;
+      vertical-align: top;
       line-height: 1.25rem;
+      margin: 0 0.125rem 0 0;
+      color: ${palette.warn[1]};
     }
   }
 `;
 
 const ContentTextareaWrapper = styled.textarea`
-  display: block;
-  padding: 5px;
+  font-weight: bold;
   resize: none;
   outline: none;
+  display: block;
+  margin-bottom: 0.7rem;
+  padding: 5px;
   border: 2px solid #D7E2EB;
   border-radius: 3px;
-  font-weight: bold;
   color: rgb(33, 37, 41);
-  margin-bottom: 0.7rem;
-  transition-duration: 0.08s;
   transition-property: all;
-  transition-timing-function: ease-in-out;
   transition-delay: initial;
+  transition-duration: 0.08s;
+  transition-timing-function: ease-in-out;
+
   &:focus {
     border: 2px solid ${palette.teal[5]};
   }
 
   ${({ error }) => error && css`
+    border: 2px solid ${palette.warn[1]};
+
     &::placeholder {
       color: ${palette.warn[1]};
     }
-    border: 2px solid ${palette.warn[1]};
   `};
 `;
 
diff --git a/src/components/introduce/modals/ApplicationViewModal.jsx b/src/components/introduce/modals/ApplicationViewModal.jsx
index 181d076..403e532 100644
--- a/src/components/introduce/modals/ApplicationViewModal.jsx
+++ b/src/components/introduce/modals/ApplicationViewModal.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import styled from '@emotion/styled';
-
 import { css } from '@emotion/react';
 
 import Button from '../../../styles/Button';
@@ -9,21 +8,21 @@ import palette from '../../../styles/palette';
 
 const ApplicationViewModalWrapper = styled.div`
   position: fixed;
-  z-index: 101;
   top: 0;
   left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
+  z-index: 101;
   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,19 @@ const ApplicationViewModalWrapper = styled.div`
 const ModalBoxWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  height: auto;
-  width: 400px;
-  background: white;
   padding: 1.5rem;
   border-radius: 6px;
+  width: 400px;
+  height: auto;
   box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.125);
+  background: white;
+
   h2 {
+    text-align: center;
     margin-top: 0;
     margin-bottom: 1rem;
-    text-align: center;
   }
+
   .buttons {
     display: flex;
     justify-content: flex-end;
@@ -70,20 +71,21 @@ const ContentBoxWrapper = styled.div`
 `;
 
 const ContentViewerWrapper = styled.textarea`
-  display: block;
-  padding: 5px;
+  font-weight: bold;
+  cursor: unset;
   resize: none;
   outline: none;
-  border: 2px solid #D7E2EB;
+  display: block;
+  margin-bottom: 0.7rem;
+  padding: 5px;
   border-radius: 3px;
-  font-weight: bold;
+  border: 2px solid #D7E2EB;
   color: rgb(33, 37, 41);
-  margin-bottom: 0.7rem;
-  transition-duration: 0.08s;
   transition-property: all;
-  transition-timing-function: ease-in-out;
   transition-delay: initial;
-  cursor: unset;
+  transition-duration: 0.08s;
+  transition-timing-function: ease-in-out;
+
   &:focus {
     border: 2px solid ${palette.gray[5]};
   }
diff --git a/src/components/introduce/modals/ParticipantList.jsx b/src/components/introduce/modals/ParticipantList.jsx
index f995ff9..296b190 100644
--- a/src/components/introduce/modals/ParticipantList.jsx
+++ b/src/components/introduce/modals/ParticipantList.jsx
@@ -7,9 +7,9 @@ import ApplicationViewModal from './ApplicationViewModal';
 
 const ParticipantListWrapper = styled.div`
   display: grid;
-  grid-template-columns: 260px 186px 148px;
   justify-items: center;
   align-items: center;
+  grid-template-columns: 260px 186px 148px;
   margin-bottom: 0.7rem;
   min-height: 0;
   min-width: 0;
diff --git a/src/components/introduce/modals/ParticipantListModal.jsx b/src/components/introduce/modals/ParticipantListModal.jsx
index 78cafa0..3606443 100644
--- a/src/components/introduce/modals/ParticipantListModal.jsx
+++ b/src/components/introduce/modals/ParticipantListModal.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import styled from '@emotion/styled';
-
 import { css } from '@emotion/react';
 
 import Button from '../../../styles/Button';
@@ -10,21 +9,21 @@ import ParticipantList from './ParticipantList';
 
 const ParticipantListModalWrapper = styled.div`
   position: fixed;
-  z-index: 101;
   top: 0;
   left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 101;
   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 {
@@ -41,17 +40,19 @@ const ParticipantListModalWrapper = styled.div`
 const ModalBoxWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  height: 550px;
-  width: 600px;
-  background: white;
   padding: 1.5rem;
   border-radius: 6px;
+  height: 550px;
+  width: 600px;
   box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.125);
+  background: white;
+
   h2 {
+    text-align: center;
     margin-top: 0;
     margin-bottom: 1rem;
-    text-align: center;
   }
+
   .buttons {
     display: flex;
     justify-content: flex-end;
@@ -60,9 +61,9 @@ const ModalBoxWrapper = styled.div`
 
 const ParticipantTitleWrapper = styled.div`
   display: grid;
-  grid-template-columns: 260px 190px 145px;
   justify-items: center;
   align-items: center;
+  grid-template-columns: 260px 190px 145px;
   margin: 0.5rem 0 0.3rem 0;
 
   div {
@@ -73,20 +74,20 @@ const ParticipantTitleWrapper = styled.div`
 `;
 
 const ParticipantListWrapper = styled.div`
-  height: 100%;
-  width: 99%;
-  border: 2px solid ${palette.gray[3]};
-  border-radius: 4px;
   margin-bottom: 1rem;
+  border-radius: 4px;
+  border: 2px solid ${palette.gray[3]};
   padding-top: 0.5rem;
+  width: 99%;
+  height: 100%;
   overflow-y: auto;
 `;
 
 const NoExistListWrapper = styled.div`
-  color: ${palette.gray[6]};
+  font-weight: bold;
   font-size: 1.1rem;
   text-align: center;
-  font-weight: bold;
+  color: ${palette.gray[6]};
 `;
 
 const StyledButton = styled(Button)`
diff --git a/src/components/main/StudyGroup.jsx b/src/components/main/StudyGroup.jsx
index c12e664..c3a610a 100644
--- a/src/components/main/StudyGroup.jsx
+++ b/src/components/main/StudyGroup.jsx
@@ -14,29 +14,31 @@ import DateTimeChange from '../common/DateTimeChange';
 
 const StudyGroupWrapper = styled.div`
   display: flex;
-  overflow: hidden;
   flex-direction: column;
-  width: 19rem;
+  overflow: hidden;
   margin: 1rem;
-  border: 2px solid ${palette.gray[4]};
   border-radius: 4px;
-  background: rgb(248, 249, 250);
+  border: 2px solid ${palette.gray[4]};
+  width: 19rem;
   box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 16px 0px;
+  background: rgb(248, 249, 250);
 `;
 
 const HeaderLink = styled(Link)`
   display: block;
   padding: 1.5rem 1.2rem 0.8rem 1rem;
+
   h4 {
+    font-size: 1.7rem;
+    font-family: 'Sunflower', sans-serif;
     text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
     margin: 0px 0px 0.25rem;
     line-height: 1.5;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     overflow: hidden;
     color: ${palette.gray[8]};
-    font-size: 1.7rem;
-    font-family: 'Sunflower', sans-serif;
+
     &:hover {
       color: ${palette.gray[6]};
     }
@@ -54,17 +56,20 @@ const StudyInfoWrapper = styled.div`
   display: flex;
   flex: 1 1 0%;
   flex-direction: column;
+
   .moderator{
-    color: ${palette.gray[5]};
     font-weight: bold;
+    color: ${palette.gray[5]};
   }
 `;
 
 const StudyContentWrapper = styled.div`
-  display: block;
   padding: 0 1rem 0 1rem;
+  display: block;
   flex: 1 1 0%;
+
   p {
+    text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
@@ -73,7 +78,6 @@ const StudyContentWrapper = styled.div`
     line-height: 1.5;
     height: 3rem;
     overflow: hidden;
-    text-overflow: ellipsis;
     color: ${palette.gray[7]};
   }
 `;
diff --git a/src/components/main/StudyGroups.jsx b/src/components/main/StudyGroups.jsx
index 4c1159c..73cdb52 100644
--- a/src/components/main/StudyGroups.jsx
+++ b/src/components/main/StudyGroups.jsx
@@ -13,8 +13,8 @@ const StudyGroupsWrapper = styled.div`
 
 const TitleHeader = styled.div`
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 `;
 
 const StudyGroups = ({ groups, realTime, user }) => (
diff --git a/src/components/write/TagsForm.jsx b/src/components/write/TagsForm.jsx
index deb1646..8369fc0 100644
--- a/src/components/write/TagsForm.jsx
+++ b/src/components/write/TagsForm.jsx
@@ -7,17 +7,18 @@ import palette from '../../styles/palette';
 import TagList from './TagList';
 
 const TagInputWrapper = styled.input`
+  font-size: 1rem;
   height: 30px;
   padding: 5px;
   border-radius: 0.25rem;
-  font-size: 1rem;
+  border: 2px solid #D7E2EB;
   line-height: 20px;
+  width: 220px;
   color: #5f5f5f;
-  border: 2px solid #D7E2EB;
+
   &:focus, &.hover {
     border: 2px solid ${palette.teal[5]};
   }
-  width: 220px;
 `;
 
 const TagsForm = ({ onChange, tags }) => {
diff --git a/src/components/write/WriteButtons.jsx b/src/components/write/WriteButtons.jsx
index 8cf9b1d..386db0f 100644
--- a/src/components/write/WriteButtons.jsx
+++ b/src/components/write/WriteButtons.jsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 
-import sanitize from 'sanitize-html';
-
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 
+import sanitize from 'sanitize-html';
+
 import palette from '../../styles/palette';
 import { ERROR_MESSAGE } from '../../util/messages';
 
@@ -25,9 +25,9 @@ const ButtonWrapper = styled.div`
 `;
 
 const ErrorWrapper = styled.div`
-  margin-top: 2rem;
   font-weight: bold;
   font-size: 1rem;
+  margin-top: 2rem;
   color: ${palette.warn[2]};
 `;
 
@@ -35,6 +35,7 @@ const CancelButton = styled(Button)`
   padding: 0.45rem 1rem;
   background: white;
   color: ${palette.warn[1]};
+  
   &:hover {
     color: white;
     background: ${palette.warn[1]};
diff --git a/src/components/write/WriteEditor.jsx b/src/components/write/WriteEditor.jsx
index 1f0e2c6..ee21813 100644
--- a/src/components/write/WriteEditor.jsx
+++ b/src/components/write/WriteEditor.jsx
@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 
 import styled from '@emotion/styled';
 
-import { EditorState, convertToRaw } from 'draft-js';
 import draftToHtml from 'draftjs-to-html';
 import { Editor } from 'react-draft-wysiwyg';
+import { EditorState, convertToRaw } from 'draft-js';
 
 import palette from '../../styles/palette';
 
@@ -12,6 +12,7 @@ import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 
 const WriteEditorWrapper = styled.div`
   margin-top: 1rem;
+
   .toolbar {
     padding: 6px 5px;
     box-shadow: rgba(0, 0, 0, 0.04) 0px 0px 5px 0px;
@@ -23,12 +24,12 @@ const WriteEditorWrapper = styled.div`
 `;
 
 const SpaceBlock = styled.div`
-  background: ${palette.gray[3]};
-  height: 2px;
   width: 100%;
+  height: 2px;
   margin-top: 1rem;
   margin-bottom: 1rem;
   border-radius: 1px;
+  background: ${palette.gray[3]};
 `;
 
 const WriteEditor = ({ onChange }) => {
diff --git a/src/components/write/WriteForm.jsx b/src/components/write/WriteForm.jsx
index 19d8a59..d420929 100644
--- a/src/components/write/WriteForm.jsx
+++ b/src/components/write/WriteForm.jsx
@@ -10,42 +10,44 @@ const WriteFormWrapper = styled.div`
 `;
 
 const WriteTitleInputWrapper = styled.input`
-  width: 100%;
   font-size: 2.75rem;
   font-weight: bold;
-  color: ${palette.gray[7]};
+  width: 100%;
   line-height: 1.5;
+  color: ${palette.gray[7]};
 `;
 
 const DateInputWrapper = styled.input`
+  font-size: 1rem;
   margin-left: 0.5rem;
   padding: 0.5rem;
   border-bottom: 2px solid ${palette.gray[5]};
-  font-size: 1rem;
   width: fit-content;
-  &:focus, &:hover{
+
+  &:focus, &:hover {
     border-bottom: 2px solid ${palette.gray[7]};
   }
 `;
 
 const NumberInputWrapper = styled.input`
+  font-size: 1rem;
   margin-left: 0.5rem;
   padding: 0.5rem;
   border-bottom: 2px solid ${palette.gray[5]};
-  font-size: 1rem;
   width: 50px;
-  &:focus, &:hover{
+
+  &:focus, &:hover {
     border-bottom: 2px solid ${palette.gray[7]};
   }
 `;
 
 const SpaceWrapper = styled.div`
-  background: ${palette.violet[3]};
-  height: 6px;
   width: 8rem;
+  height: 6px;
   margin-top: 1rem;
   margin-bottom: 1rem;
   border-radius: 1px;
+  background: ${palette.violet[3]};
 `;
 
 const LabelWrapper = styled.label`
@@ -53,15 +55,16 @@ const LabelWrapper = styled.label`
   font-weight: bold;
   margin-right: 1rem;
   color: ${palette.gray[7]};
+
   ::before {
     content: '*';
+    font-weight: 400;
+    font-size: 1.25rem;
     display: inline-block;
     vertical-align: top;
-    font-weight: 400;
-    color: ${palette.warn[1]};
     margin: 0 0.125rem 0 0;
-    font-size: 1.25rem;
     line-height: 1.25rem;
+    color: ${palette.warn[1]};
   }
 `;
 
diff --git a/src/containers/write/WriteButtonsContainer.jsx b/src/containers/write/WriteButtonsContainer.jsx
index 47d4fc0..9a7df93 100644
--- a/src/containers/write/WriteButtonsContainer.jsx
+++ b/src/containers/write/WriteButtonsContainer.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback } from 'react';
 
-import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { getAuth, getGroup } from '../../util/utils';
 import { writeStudyGroup } from '../../reducers/groupSlice';
diff --git a/src/containers/write/WriteFormContainer.jsx b/src/containers/write/WriteFormContainer.jsx
index 777d645..5bf6cd3 100644
--- a/src/containers/write/WriteFormContainer.jsx
+++ b/src/containers/write/WriteFormContainer.jsx
@@ -4,10 +4,10 @@ import { useUnmount } from 'react-use';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { getGroup } from '../../util/utils';
-import WriteForm from '../../components/write/WriteForm';
-
 import { changeWriteField, clearWriteFields } from '../../reducers/groupSlice';
 
+import WriteForm from '../../components/write/WriteForm';
+
 const WriteFormContainer = () => {
   const dispatch = useDispatch();
 
diff --git a/src/index.jsx b/src/index.jsx
index be3f2f9..64e3dac 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -4,12 +4,12 @@ import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 
-import './index.css';
-
 import App from './App';
 
 import store from './reducers/store';
 
+import './index.css';
+
 ReactDOM.render(
   (
     <Provider store={store}>
diff --git a/src/pages/IntroducePage.jsx b/src/pages/IntroducePage.jsx
index 1869bc9..9c31e1a 100644
--- a/src/pages/IntroducePage.jsx
+++ b/src/pages/IntroducePage.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 
-import { useParams } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
+import { useParams } from 'react-router-dom';
 
 import styled from '@emotion/styled';
 
diff --git a/src/styles/ApproveStatus.jsx b/src/styles/ApproveStatus.jsx
index 5de1297..9de0be8 100644
--- a/src/styles/ApproveStatus.jsx
+++ b/src/styles/ApproveStatus.jsx
@@ -9,12 +9,12 @@ import styled from '@emotion/styled';
 import palette from './palette';
 
 const ApproveStatusWrapper = styled.div`
+  font-size: 1rem;
+  font-weight: bold;
   display: inline-flex;
   align-items: center;
-  font-weight: bold;
-  line-height: 0;
-  font-size: 1rem;
   padding: 0.8rem 1rem;
+  line-height: 0;
 
   ${({ load }) => load && css`
     color: ${palette.violet[4]};
@@ -27,18 +27,23 @@ const ApproveStatusWrapper = styled.div`
 
 const LoadingContent = styled.span`
   margin-left: .3rem;
-  width: 12px;
-  height: 12px;
+  border-radius: 100%;
   border-top: 3px solid ${palette.violet[2]};
   border-bottom: 3px solid ${palette.violet[2]};
   border-right: 3px solid ${palette.violet[4]};
   border-left: 3px solid ${palette.violet[4]};
+  width: 12px;
+  height: 12px;
   animation: load  0.75s ease infinite;
-  border-radius: 100%;
 
   @keyframes load {
-    0% { transform: rotate( 0deg ); }
-    100% { transform: rotate(180deg); }
+    0% { 
+      transform: rotate( 0deg ); 
+    }
+    
+    100% { 
+      transform: rotate(180deg); 
+    }
   }
 `;
 
diff --git a/src/styles/Button.jsx b/src/styles/Button.jsx
index ea687ec..d804900 100644
--- a/src/styles/Button.jsx
+++ b/src/styles/Button.jsx
@@ -9,46 +9,49 @@ import { css } from '@emotion/react';
 import palette from './palette';
 
 const ButtonWrapper = ({ warn, success }) => css`
-  border-radius: 4px;
+  cursor: pointer;
   font-size: 1rem;
   font-weight: bold;
   font-family: 'Noto Sans KR', sans-serif;
-  padding: 0.25rem 1rem;
-  color: ${palette.gray[7]};
   outline: none;
-  cursor: pointer;
+  padding: 0.25rem 1rem;
+  border-radius: 4px;
   border: 2px solid ${palette.gray[6]};
   background: white;
+  color: ${palette.gray[7]};
   transition-duration: 0.08s;
   transition-property: all;
   transition-timing-function: ease-in-out;
   transition-delay: initial;
+
   &:hover {
-    color: white;
     border: 2px solid ${palette.gray[7]};
+    color: white;
     background: ${palette.gray[7]};
   }
 
   ${warn && css`
-      color: white;
       padding: 0.15rem 0.9rem;
-      background: ${palette.warn[1]};
       border: 2px solid ${palette.warn[1]};
+      color: white;
+      background: ${palette.warn[1]};
+
       &:hover {
+        border: 2px solid ${palette.warn[1]};
         background: white;
         color: ${palette.warn[1]};
-        border: 2px solid ${palette.warn[1]};
       }
   `}
 
   ${success && css`
+    border: 2px solid ${palette.teal[5]};
     color: white;
     background: ${palette.teal[5]};
-    border: 2px solid ${palette.teal[5]};
+
     &:hover {
+      border: 2px solid ${palette.teal[5]};
       background: white;
       color: ${palette.teal[5]};
-      border: 2px solid ${palette.teal[5]};
     }
   `}
 `;
diff --git a/src/styles/DateTimeStatus.jsx b/src/styles/DateTimeStatus.jsx
index d1c40c5..17253bd 100644
--- a/src/styles/DateTimeStatus.jsx
+++ b/src/styles/DateTimeStatus.jsx
@@ -6,28 +6,30 @@ import { css } from '@emotion/react';
 import palette from './palette';
 
 const DateTimeStatusWrapper = styled.div`
-  margin-left: 1.5rem;
-  font-weight: 600;
   font-size: 1rem;
+  font-weight: 600;
   font-family: 'Gamja Flower', cursive;
-  padding: .2rem .6rem .2rem .6rem;
   display: inline-flex;
-  color: white;
-  border-radius: 0.3rem;
   margin-top: 1rem;
   margin-bottom: 1rem;    
+  margin-left: 1.5rem;
+  padding: .2rem .6rem .2rem .6rem;
+  border-radius: 0.3rem;
+  color: white;
 
-  ${(props) => props.status === 'mainRecruit'
+  ${({ status }) => status === 'mainRecruit'
     && css`
       margin-bottom: 0.5rem;
       background: ${palette.cyan[4]};
       animation: blink-animation 1.5s steps(5, start) infinite;
       -webkit-animation: blink-animation 1.5s steps(5, start) infinite;
+
       @keyframes blink-animation {
         to {
           visibility: hidden;
         }
       }
+
       @-webkit-keyframes blink-animation {
         to {
           visibility: hidden;
@@ -35,29 +37,31 @@ const DateTimeStatusWrapper = styled.div`
       }
   `}
 
-  ${(props) => props.status === 'mainDeadline'
+  ${({ status }) => status === 'mainDeadline'
     && css`
       margin-bottom: 0.5rem;
       background: #ff6b6b;
   `}
 
-  ${(props) => props.status === 'introduceRecruit'
+  ${({ status }) => status === 'introduceRecruit'
     && css`
+      font-size: 1.1rem;
+      align-items: center;
       margin: 0;
       padding: .2rem 40px .2rem 40px;
-      background: white;
-      font-size: 1.1rem;
       border-radius: 0.5rem;
-      align-items: center;
-      color: ${palette.orange[4]};
       border: 1.5px solid ${palette.orange[4]};
+      background: white;
+      color: ${palette.orange[4]};
       animation: blink-animation 1.5s steps(5, start) infinite;
       -webkit-animation: blink-animation 1.5s steps(5, start) infinite;
+
       @keyframes blink-animation {
         to {
           visibility: hidden;
         }
       }
+
       @-webkit-keyframes blink-animation {
         to {
           visibility: hidden;
@@ -65,15 +69,15 @@ const DateTimeStatusWrapper = styled.div`
       }
   `}
 
-  ${(props) => props.status === 'introduceDeadline'
+  ${({ status }) => status === 'introduceDeadline'
     && css`
-      margin: 0;
       font-size: 1.1rem;
-      padding: 0 40px 0 40px;
       align-items: center;
-      background: white;
-      color: #ff6b6b;
+      margin: 0;
+      padding: 0 40px 0 40px;
       border: 1.5px solid #ff6b6b;
+      color: #ff6b6b;
+      background: white;
   `}
 `;
 
diff --git a/src/styles/ParticipantListButton.jsx b/src/styles/ParticipantListButton.jsx
index 4c1e474..30f6923 100644
--- a/src/styles/ParticipantListButton.jsx
+++ b/src/styles/ParticipantListButton.jsx
@@ -7,46 +7,49 @@ import { css } from '@emotion/react';
 import palette from './palette';
 
 const ParticipantListButtonWrapper = styled.button`
-  transition-duration: 0.08s;
-  transition-property: all;
-  transition-timing-function: ease-in-out;
-  transition-delay: initial;
+  cursor: pointer;
   font-size: 0.8rem;
-  padding: 0.15rem 0.7rem;
   font-weight: bold;
+  font-family: 'Noto Sans KR', sans-serif;
   outline: none;
+  padding: 0.15rem 0.7rem;
   border: none;
-  cursor: pointer;
-  background: none;
-  font-family: 'Noto Sans KR', sans-serif;
   border-radius: 4px;
   color: white;
+  background: none;
+  transition-duration: 0.08s;
+  transition-property: all;
+  transition-timing-function: ease-in-out;
+  transition-delay: initial;
 
   ${({ sky }) => sky && css`
-    background: #74c0fc;
     border-bottom: 2px solid #4dabf7;
     box-shadow: 0px 2px 4px #4dabf7;
-    &:hover{
+    background: #74c0fc;
+
+    &:hover {
       box-shadow: none;
       border-bottom: 2px solid #74c0fc;
     }
   `};
 
   ${({ confirm }) => confirm && css`
-    background: ${palette.teal[5]};
     border-bottom: 2px solid ${palette.teal[6]};
     box-shadow: 0px 2px 4px ${palette.teal[6]};
-    &:hover{
+    background: ${palette.teal[5]};
+
+    &:hover {
       box-shadow: none;
       border-bottom: 2px solid ${palette.teal[5]};
     }
   `};
 
   ${({ cancel }) => cancel && css`
-    background: ${palette.warn[1]};
     border-bottom: 2px solid ${palette.warn[2]};
     box-shadow: 0px 2px 4px ${palette.warn[2]};
-    &:hover{
+    background: ${palette.warn[1]};
+
+    &:hover {
       box-shadow: none;
       border-bottom: 2px solid ${palette.warn[1]};
     }
diff --git a/src/styles/Responsive.jsx b/src/styles/Responsive.jsx
index d580c64..416aa55 100644
--- a/src/styles/Responsive.jsx
+++ b/src/styles/Responsive.jsx
@@ -4,14 +4,15 @@ import React from 'react';
 import styled from '@emotion/styled';
 
 const ResponsiveContainer = styled.div`
+  margin: 0 auto;
   padding-left: 1rem;
   padding-right: 1rem;
   width: 1024px;
-  margin: 0 auto;
 
   @media (max-width: 1024px) {
     width: 768px;
   }
+  
   @media (max-width: 768px) {
     width: 100%;
   }
diff --git a/src/styles/StyledApplyStatusButton.jsx b/src/styles/StyledApplyStatusButton.jsx
index 58b4fa3..8e70d5e 100644
--- a/src/styles/StyledApplyStatusButton.jsx
+++ b/src/styles/StyledApplyStatusButton.jsx
@@ -6,57 +6,60 @@ import styled from '@emotion/styled';
 import palette from './palette';
 
 const StyledApplyStatusButtonWrapper = styled.button`
+  font-family: 'Gamja Flower', cursive;
+  font-size: 1.5em;
   display: inline-flex;
   align-items: center;
   margin: .5rem 0 .5rem 0;
   padding: 0.25rem 5rem;
-  font-size: 1.5em;
-  line-height: 0;
-  font-family: 'Gamja Flower', cursive;
-  border-radius: 0.4rem;
   border: none;
+  border-radius: 0.4rem;
   outline: none;
+  line-height: 0;
 
   &.deadline {
     cursor: not-allowed;
-    background: ${palette.gray[3]};
     color: ${palette.gray[5]};
+    background: ${palette.gray[3]};
   }
 
   &.apply-cancel {
     cursor: pointer;
-    background: ${palette.orange[4]};
     color: white;
+    background: ${palette.orange[4]};
+
     &:hover {
       background: ${palette.orange[3]};
     }
   }
 
   &.apply-reject {
-    background: ${palette.gray[1]};
     border: 2px solid ${palette.warn[0]};
     color: ${palette.warn[1]};
+    background: ${palette.gray[1]};
   }
 
   &.apply-complete {
-    background: ${palette.gray[1]};
     border: 2px solid #a5d8ff;
     color: #74c0fc;
+    background: ${palette.gray[1]};
   }
 
   &.apply {
-    color: white;
     cursor: pointer;
+    color: white;
     background: ${palette.teal[5]};
+
     &:hover {
       background: ${palette.teal[4]};
     }
   }
 
   &.confirm {
-    color: white;
     cursor: pointer;
+    color: white;
     background: #4dabf7;
+    
     &:hover {
       background: #74c0fc;
     }