�Chore/#12 Stylelint 설정을 추가합니다. (#13)

* chore: stylelint 설정을 추가한다.

* chore: husky에 Stylelint 자동 수정 명령어를 추가한다.

.husky/pre-commit

@@ -1,5 +1,9 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx pretty-quick --staged && npx lint-staged
+npx pretty-quick --staged 
+
+npx stylelint '**/*.(ts|tsx)' --ignore-path .gitignore --fix
+
+npx lint-staged
 

.stylelintrc.json

@@ -0,0 +1,5 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
+  "plugins": ["stylelint-order"],
+  "customSyntax": "postcss-styled-syntax"
+}

app/(app)/_layout.tsx

@@ -139,14 +139,14 @@ const S = {
     position: absolute;
     bottom: 0;
     flex-direction: row;
-    justify-content: space-between;
     align-items: center;
-    background-color: white;
+    justify-content: space-between;
     padding: 12px 0 24px;
+    background-color: white;
   `,
   TabBarItem: styled.TouchableOpacity`
-    justify-content: center;
-    align-items: center;
     gap: 4px;
+    align-items: center;
+    justify-content: center;
   `,
 };

app/_layout.tsx

@@ -56,11 +56,11 @@ export default function Root() {
 
 const S = {
   Container: styled.View`
-    height: 100dvh;
-    width: 100%;
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100dvh;
   `,
   Layout: styled.View`
     width: 375px;

package.json

@@ -9,6 +9,8 @@
     "web": "expo start --web",
     "test": "jest --watchAll",
     "lint": "expo lint",
+    "lint:css": "stylelint --ignore-path .gitignore '**/*.(ts|tsx)'",
+    "lint:css:fix": "stylelint --ignore-path .gitignore '**/*.(ts|tsx)' --fix",
     "postinstall": "husky",
     "prepack": "pinst --disable",
     "postpack": "pinst --enable",
@@ -80,10 +82,15 @@
     "jest": "^29.2.1",
     "jest-expo": "~51.0.3",
     "lint-staged": "^15.2.7",
+    "postcss-styled-syntax": "^0.6.4",
     "prettier": "^3.3.3",
     "pretty-quick": "^4.0.0",
     "react-test-renderer": "18.2.0",
     "storybook": "^7.6.18",
+    "stylelint": "^16.8.1",
+    "stylelint-config-recess-order": "^5.0.1",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-order": "^6.0.4",
     "typescript": "~5.3.3",
     "typescript-eslint": "^7.16.1"
   },

src/components/common/customButton/index.tsx

@@ -42,11 +42,11 @@ const getButtonStyles = (
   };
 
   return css`
-    padding: 10px;
-    border-radius: 5px;
-    border-width: 1px;
     align-items: center;
     justify-content: center;
+    padding: 10px;
+    border-width: 1px;
+    border-radius: 5px;
     ${variantStyles[variant]}
     ${sizeStyles[size]}
   `;