Merge pull request #36 from mbti-nf-team/chore/stylelint-setting

chore: stylelint 세팅 적용

.stylelintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  extends: [
+    '@nf-team/stylelint-config',
+  ]
+};

next.config.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 const isProd = process.env.NODE_ENV === 'production';
 
 /** @type {import('next').NextConfig} */
@@ -12,6 +14,9 @@ const nextConfig = {
     typedRoutes: true,
     esmExternals: 'loose',
   },
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'styles')],
+  },
   compiler: {
     reactRemoveProperties: isProd && {
       properties: ['^data-test'],

package.json

@@ -45,6 +45,7 @@
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.0.3",
     "@nf-team/eslint-config": "^2.1.0",
+    "@nf-team/stylelint-config": "^1.1.1",
     "@tanstack/react-query-devtools": "^5.4.3",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
@@ -75,6 +76,7 @@
     "react-test-renderer": "^18.2.0",
     "sass": "^1.66.1",
     "start-server-and-test": "^1.14.0",
+    "stylelint": "^15.10.0",
     "typescript": "^5.1.6"
   },
   "packageManager": "[email protected]"

src/app/index.module.scss

@@ -1,14 +1,14 @@
-@import "/src/styles/main.scss";
+@import "/src/styles/main";
 
 .mainWrapper {
   display: flex;
   gap: 20px;
   flex-direction: column;
   align-items: center;
-  padding: 0px;
+  padding: 0;
 
   @include desktop {
-    padding: 48px 80px 80px 80px;
+    padding: 48px 80px 80px;
   }
 
   .title {

src/components/Footer/index.module.scss

@@ -1,4 +1,4 @@
-@import "/src/styles/main.scss";
+@import "/src/styles/main";
 
 .footerWrapper {
   display: flex;
@@ -15,13 +15,14 @@
   @include desktop {
     position: initial;
     max-width: auto;
-    margin: 0px 0px -64px 0px;
+    margin: 0 0 -64px;
   }
 
   .footerItem {
     @include text("Body", "scale-gray-800");
+
     display: flex;
-    padding: 8px 0px;
+    padding: 8px 0;
     justify-content: center;
     align-items: center;
     background-color: color("scale-gray-500");

src/components/Layout/index.module.scss

@@ -1,4 +1,4 @@
-@import "/src/styles/main.scss";
+@import "/src/styles/main";
 
 .layoutWrapper {
   padding: 0;
@@ -19,7 +19,7 @@
     position: relative;
     width: 100%;
     height: 100%;
-    padding: 0px;
+    padding: 0;
 
     @include desktop {
       width: 640px;
@@ -31,10 +31,7 @@
       position: absolute;
       height: 100%;
       width: 100%;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
+      inset: 0;
       display: none;
 
       @include desktop {
@@ -52,7 +49,7 @@
       padding: 80px 20px;
 
       @include desktop {
-        padding: 0px;
+        padding: 0;
         border: 8px solid color("scale-black");
         border-radius: 4px;
         overflow-y: auto;

src/components/common/Button/index.module.scss

@@ -1,7 +1,8 @@
-@import "/src/styles/main.scss";
+@import "/src/styles/main";
 
 .buttonWrapper {
   @include text("Body");
+
   position: relative;
   transform: translate(0, 0);
   user-select: none;
@@ -14,40 +15,11 @@
   align-items: center;
   justify-content: center;
   text-align: center;
-  padding: 5px 1rem 7px 1rem;
+  padding: 5px 1rem 7px;
   border: 2px solid;
   width: 100%;
 
-  &:disabled {
-    color: color("scale-gray-700");
-    background-color: color("scale-gray-500");
-    border-top-color: color("scale-white");
-    border-left-color: color("scale-white");
-    border-bottom-color: color("scale-gray-700");
-    border-right-color: color("scale-gray-700");
-  }
-
-  &:not(:disabled):not(.disabled):active {
-    &.primary {
-      color: color("scale-cyan-300");
-      background-color: color("scale-cyan-700");
-      border-bottom-color: color("scale-white");
-      border-right-color: color("scale-white");
-      border-top-color: color("scale-cyan-800");
-      border-left-color: color("scale-cyan-800");
-    }
-
-    &.secondary {
-      color: color("scale-yellow");
-      background-color: color("scale-gray-600");
-      border-bottom-color: color("scale-white");
-      border-right-color: color("scale-white");
-      border-top-color: color("scale-gray-800");
-      border-left-color: color("scale-gray-800");
-    }
-  }
-
-  &:not(:disabled):not(.disabled) {
+  &:not(:disabled, .disabled) {
     border-top-color: color("scale-white");
     border-left-color: color("scale-white");
 
@@ -65,4 +37,24 @@
       border-right-color: color("scale-gray-800");
     }
   }
+
+  &:disabled {
+    color: color("scale-gray-700");
+    background-color: color("scale-gray-500");
+    border-color: color("scale-white") color("scale-gray-700") color("scale-gray-700") color("scale-white");
+  }
+
+  &:not(:disabled, .disabled):active {
+    &.primary {
+      color: color("scale-cyan-300");
+      background-color: color("scale-cyan-700");
+      border-color: color("scale-cyan-800") color("scale-white") color("scale-white") color("scale-cyan-800");
+    }
+
+    &.secondary {
+      color: color("scale-yellow");
+      background-color: color("scale-gray-600");
+      border-color: color("scale-gray-800") color("scale-white") color("scale-white") color("scale-gray-800");
+    }
+  }
 }

src/components/common/FrameTitle/index.module.scss

@@ -1,4 +1,4 @@
-@import "/src/styles/main.scss";
+@import "/src/styles/main";
 
 .frameTitleWrapper {
   display: flex;
@@ -7,11 +7,22 @@
   align-items: center;
   align-self: stretch;
 
+  .title {
+    display: flex;
+    padding: 0.75rem;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    flex: 1 0 0;
+    text-align: center;
+  }
+
   &.default {
     background-color: color("scale-ivory");
 
     .title {
       border: 2px solid color("scale-gray-900");
+
       @include text("Body", "scale-gray-900");
     }
   }
@@ -21,6 +32,7 @@
 
     .title {
       border: 2px solid color("scale-gray-900");
+
       @include text("Body", "scale-gray-900");
     }
   }
@@ -30,17 +42,8 @@
 
     .title {
       border: 2px solid color("scale-white");
+
       @include text("Body", "scale-white");
     }
   }
-
-  .title {
-    display: flex;
-    padding: 0.75rem;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    flex: 1 0 0;
-    text-align: center;
-  }
 }

src/components/common/ProgressBar/index.module.scss

@@ -1,4 +1,4 @@
-@import "/src/styles/main.scss";
+@import "/src/styles/main";
 
 .progressContainer {
   display: flex;
@@ -10,6 +10,7 @@
 
   .progressText {
     @include text("Body", "scale-gray-400");
+
     display: flex;
     flex-direction: row;
     align-items: flex-start;

src/components/common/SelectBox/index.module.scss

@@ -1,4 +1,4 @@
-@import "/src/styles/main.scss";
+@import "/src/styles/main";
 
 .selectBoxWrapper {
   width: 100%;
@@ -25,6 +25,7 @@
 
   .selectWrapper {
     @include text("Body");
+
     position: relative;
     transform: translate(0, 0);
     user-select: none;
@@ -38,41 +39,12 @@
     justify-content: center;
     text-align: left;
     outline: none;
-    border-radius: 0px;
-    padding: 5px 1rem 7px 1rem;
+    border-radius: 0;
+    padding: 5px 1rem 7px;
     border: 2px solid;
     width: 100%;
 
-    &:disabled {
-      color: color("scale-gray-700");
-      background-color: color("scale-gray-500");
-      border-top-color: color("scale-white");
-      border-left-color: color("scale-white");
-      border-bottom-color: color("scale-gray-700");
-      border-right-color: color("scale-gray-700");
-    }
-
-    &:not(:disabled):not(.disabled):focus {
-      &.primary {
-        color: color("scale-cyan-300");
-        background-color: color("scale-cyan-700");
-        border-bottom-color: color("scale-white");
-        border-right-color: color("scale-white");
-        border-top-color: color("scale-cyan-800");
-        border-left-color: color("scale-cyan-800");
-      }
-
-      &.secondary {
-        color: color("scale-yellow");
-        background-color: color("scale-gray-600");
-        border-bottom-color: color("scale-white");
-        border-right-color: color("scale-white");
-        border-top-color: color("scale-gray-800");
-        border-left-color: color("scale-gray-800");
-      }
-    }
-
-    &:not(:disabled):not(.disabled) {
+    &:not(:disabled, .disabled) {
       cursor: pointer;
       border-top-color: color("scale-white");
       border-left-color: color("scale-white");
@@ -91,5 +63,25 @@
         border-right-color: color("scale-gray-800");
       }
     }
+
+    &:disabled {
+      color: color("scale-gray-700");
+      background-color: color("scale-gray-500");
+      border-color: color("scale-white") color("scale-gray-700") color("scale-gray-700") color("scale-white");
+    }
+
+    &:not(:disabled, .disabled):focus {
+      &.primary {
+        color: color("scale-cyan-300");
+        background-color: color("scale-cyan-700");
+        border-color: color("scale-cyan-800") color("scale-white") color("scale-white") color("scale-cyan-800");
+      }
+
+      &.secondary {
+        color: color("scale-yellow");
+        background-color: color("scale-gray-600");
+        border-color: color("scale-gray-800") color("scale-white") color("scale-white") color("scale-gray-800");
+      }
+    }
   }
 }

src/components/common/Toast/index.module.scss

@@ -1,4 +1,4 @@
-@import "/src/styles/main.scss";
+@import "/src/styles/main";
 
 .toastContainer {
   position: fixed;
@@ -51,6 +51,7 @@
 
     .title {
       @include text("Body", "scale-white");
+
       background-color: color("scale-black");
       padding: 0.125rem 0.375rem;
       overflow-wrap: break-word;