[ init ] stylelint 설정 및 TEST

.stylelintrc.json

@@ -0,0 +1,19 @@
+{
+  "extends": [
+    "stylelint-config-prettier",
+    "stylelint-config-concentric-order",
+    "stylelint-config-styled-components",
+    "postcss-syntax",
+    "postcss-html"
+  ],
+  "overrides": [
+    {
+      "files": ["**/*.@(ts|tsx)"],
+      "customSyntax": "@stylelint/postcss-css-in-js"
+    },
+    {
+      "files": ["*.html", "**/*.html"],
+      "customSyntax": "postcss-html"
+    }
+  ]
+}

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": true,
+    "source.fixAll.stylelint": true
   },
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "dbaeumer.vscode-eslint",

package.json

@@ -7,9 +7,10 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "yarn run lint-prettier && yarn run lint-eslint",
+    "lint": "yarn run lint-prettier && yarn run lint-eslint && yarn run lint-css",
     "lint-eslint": "eslint --ignore-path .gitignore src/**/*{ts,tsx} --fix",
-    "lint-prettier": "prettier --write \"src/**/*.(ts|tsx)\""
+    "lint-prettier": "prettier --write \"src/**/*.(ts|tsx)\"",
+    "lint-css": "stylelint --ignore-path .gitignore \"src/**/*.(css|tsx)\" --fix"
   },
   "dependencies": {
     "axios": "^0.26.0",
@@ -49,14 +50,14 @@
     ]
   },
   "devDependencies": {
-    "typescript": "^4.5.5",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/styled-components": "^5.1.25",
     "@typescript-eslint/eslint-plugin": "^5.16.0",
     "@typescript-eslint/parser": "^5.16.0",
+    "@stylelint/postcss-css-in-js": "^0.38.0",
     "eslint": "^7.11.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.25.4",
@@ -66,11 +67,21 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "lint-staged": "^12.3.7",
+    "postcss-html": "^1.4.1",
+    "postcss-syntax": "^0.36.2",
+    "stylelint": "^14.9.1",
+    "stylelint-config-recommended": "^8.0.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-processor-styled-components": "^1.10.0",
+    "stylelint-config-concentric-order": "^5.0.0",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^25.0.0",
+    "typescript": "^4.5.5",
+    "msw": "^0.42.1",
     "prettier": "^2.6.0",
-    "webpack": "^5.72.0",
-    "msw": "^0.42.1"
+    "webpack": "^5.72.0"
   },
   "msw": {
     "workerDirectory": "public"
   }
-}
+}

src/index.tsx

@@ -12,13 +12,10 @@ export const GlobalStyle = createGlobalStyle`
     box-sizing: border-box;
   } 
   html {
+    letter-spacing: -0.03rem;
     font-family: sans-serif;
     font-size: 62.5%;
-    letter-spacing: -0.03rem;
     user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
   }
   a {
     text-decoration: none;
@@ -30,12 +27,10 @@ export const GlobalStyle = createGlobalStyle`
     background-color: transparent;
   }
   button {
-    padding: 0;
     cursor: pointer;
+    padding: 0;
   }
   input {
-    -webkit-appearance: none; /* Safari and Chrome */
-    -moz-appearance: none; /* Firefox */
     appearance: none;
     
     &:focus {

src/pages/Main.tsx

@@ -1,3 +1,10 @@
+import styled from "styled-components";
+
 export default function Main() {
-  return <div>Main</div>;
+  return <StMain>Main</StMain>;
 }
+const StMain = styled.div`
+  width: 100%;
+  height: 100%;
+  color: red;
+`;