Update stylelint configuration and fix styling issues

.stylelintrc

@@ -1,6 +1,10 @@
 {
+  "plugins": [
+    "stylelint-order"
+  ],
   "extends": [
-    "stylelint-config-standard"
+    "stylelint-config-standard",
+    "stylelint-config-clean-order"
   ],
   "customSyntax": "postcss-styled-syntax"
 }

package.json

@@ -54,7 +54,9 @@
     "prettier": "^3.1.1",
     "storybook": "^8.0.0-alpha.8",
     "stylelint": "^16.2.1",
+    "stylelint-config-clean-order": "^5.4.1",
     "stylelint-config-standard": "^36.0.0",
+    "stylelint-order": "^6.0.4",
     "typescript": "5.3.2",
     "webpack": "^5.89.0"
   },
@@ -66,4 +68,4 @@
       "prettier --write"
     ]
   }
-}
+}

src/components/atoms/Backdrop.tsx

@@ -1,17 +1,17 @@
 import styled from '@emotion/styled';
 
 export const Backdrop = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
   position: fixed;
+  z-index: 100;
   top: 0;
   left: 0;
 
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   width: 100vw;
   height: 100vh;
-  background: rgba(66, 66, 66, 0.4);
 
-  z-index: 100;
+  background: rgb(66 66 66 / 40%);
 `;

src/components/atoms/Button.tsx

@@ -20,36 +20,36 @@ const ButtonSizeCSS = ({ height }: ButtonProps) => {
   switch (height) {
     case '20':
       return css`
-        padding: 0 8px;
         height: 20px;
+        padding: 0 8px;
         font-size: 12px;
         font-weight: 400;
       `;
     case '30':
       return css`
-        padding: 0 24px;
         height: 30px;
+        padding: 0 24px;
         font-size: 12px;
         font-weight: 400;
       `;
     case '50':
       return css`
-        padding: 0 48px;
         height: 50px;
+        padding: 0 48px;
         font-size: 20px;
         font-weight: 500;
       `;
     case '60':
       return css`
-        padding: 0 27px;
         height: 60px;
+        padding: 0 27px;
         font-size: 20px;
         font-weight: 700;
       `;
     case '70':
       return css`
-        padding: 0 37px;
         height: 70px;
+        padding: 0 37px;
         font-size: 20px;
         font-weight: 700;
       `;
@@ -60,18 +60,20 @@ const ButtonColorCSS = ({ variant, color, disabled }: ButtonProps) => {
     switch (color) {
       case 'primary':
         return css`
-          background-color: #ffffff;
           color: #ff706c;
+          background-color: #fff;
           border: 1px solid #ff706c;
+
           &:hover {
             background-color: #ffeae9;
           }
         `;
       case 'secondary':
         return css`
-          background-color: #ffffff;
           color: #bdbdbd;
+          background-color: #fff;
           border: 1px solid #bdbdbd;
+
           &:hover {
             background-color: #fafafa;
           }
@@ -83,6 +85,7 @@ const ButtonColorCSS = ({ variant, color, disabled }: ButtonProps) => {
         return css`
           color: ${disabled ? '#FFC7C6' : '#ffffff'};
           background-color: ${disabled ? '#FFA7A5' : '#ff706c'};
+
           &:hover {
             color: ${disabled ? '#FFC7C6' : '#E0E0E0'};
             background-color: ${disabled ? '#FFA7A5' : '#ee5550'};
@@ -92,6 +95,7 @@ const ButtonColorCSS = ({ variant, color, disabled }: ButtonProps) => {
         return css`
           color: ${disabled ? '#9E9E9E' : '#000000'};
           background-color: ${disabled ? '#EEEEEE' : '#bdbdbd'};
+
           &:hover {
             background-color: ${disabled ? '#EEEEEE' : '#9e9e9e'};
           }
@@ -100,12 +104,13 @@ const ButtonColorCSS = ({ variant, color, disabled }: ButtonProps) => {
   }
 };
 const StyledButton = styled.button<ButtonProps>`
-  border: none;
-  color: #ffffff;
+  color: #fff;
   letter-spacing: -0.6px;
 
-  transition-property: background-color color;
+  border: none;
+
   transition-duration: 0.2s;
+  transition-property: background-color color;
   ${ButtonVariantsCSS}
   ${ButtonSizeCSS}
   ${ButtonColorCSS};

src/components/atoms/CheckBox.tsx

@@ -6,29 +6,31 @@ import styled from '@emotion/styled';
 import { Icons } from '#/components/atoms/Icons';
 
 const StyledIcon = styled(Icons)`
-  display: none;
+  pointer-events: none;
+
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  pointer-events: none;
+
+  display: none;
 
   width: 14px;
   height: 14px;
 `;
 
 const inputColorCSS = css`
+  background-color: #fff;
   border-color: #9e9e9e;
-  background-color: #ffffff;
 
   &:disabled {
-    border-color: #eeeeee;
-    background-color: #ffffff;
+    background-color: #fff;
+    border-color: #eee;
   }
 
   &:checked {
+    background-color: #fff;
     border-color: #ff706c;
-    background-color: #ffffff;
 
     + ${StyledIcon} {
       display: block;
@@ -37,8 +39,8 @@ const inputColorCSS = css`
   }
 
   &:checked:disabled {
+    background-color: #fff;
     border-color: #ffc7c6;
-    background-color: #ffffff;
 
     + ${StyledIcon} {
       display: block;
@@ -48,28 +50,29 @@ const inputColorCSS = css`
 `;
 
 const StyledContainer = styled.div`
-  display: inline-block;
   position: relative;
-  padding: 0;
-  padding-inline: 0;
-  padding-block: 0;
+
+  display: inline-block;
 
   width: 24px;
   height: 24px;
+  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
 `;
 
 const StyledInput = styled.input`
-  appearance: none;
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
 
-  margin: 2px;
+  flex-shrink: 0;
 
   width: 20px;
   height: 20px;
-  flex-shrink: 0;
+  margin: 2px;
 
-  border-width: 1px;
+  appearance: none;
   border-style: solid;
+  border-width: 1px;
   border-radius: 2px;
 
   ${inputColorCSS}