[project] Stylelint 설정

.stylelintrc.json

@@ -0,0 +1,25 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-recess-order"
+  ],
+  "customSyntax": "postcss-styled-syntax",
+  "rules": {
+    "declaration-property-unit-allowed-list": {
+      "/^border/": [
+        "px"
+      ],
+      "unit-allowed-list": [
+        "%",
+        "deg",
+        "px",
+        "rem",
+        "ms",
+        "s",
+        "em",
+        "vw",
+        "vh"
+      ]
+    }
+  }
+}

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "stylelint": "stylelint './src/**/*.{ts,tsx}' --fix"
   },
   "dependencies": {
     "@emotion/react": "^11.11.3",
@@ -26,7 +27,13 @@
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.32",
+    "postcss-styled-syntax": "^0.6.0",
+    "postcss-syntax": "^0.36.2",
+    "stylelint": "^16.1.0",
+    "stylelint-config-recess-order": "^4.4.0",
+    "stylelint-config-standard": "^36.0.0",
     "typescript": "^5.2.2",
     "vite": "^5.0.8"
   }
-}
+}

src/App.tsx

@@ -1,7 +1,7 @@
-import { Global } from "@emotion/react";
+import { Global, ThemeProvider } from "@emotion/react";
 import globalStyles from "./common/styles/globalStyles";
-import { ThemeProvider } from "@emotion/react"
 import { theme } from "./common/styles/theme"
+
 const App = () => {
   return (
     <ThemeProvider theme={theme}>

src/common/styles/globalStyles.ts

@@ -9,13 +9,15 @@ const globalStyles = css`
         padding : 0;
         margin: 0;
       }
+
       html{
         font-size: 62.5%;
       }
+
       button {
         cursor: pointer;
-        border: none;
         background: none;
+        border: none;
       }
 
 `

src/common/styles/reset.ts

@@ -0,0 +1,60 @@
+import { css } from "@emotion/react";
+
+const reset = css`
+/* http://meyerweb.com/eric/tools/css/reset/ 
+  v2.0 | 20110126
+  License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	padding: 0;
+	margin: 0;
+	font-size: 100%;
+	vertical-align: baseline;
+	border: 0;
+
+	/* font: inherit; */
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+
+body {
+	line-height: 1;
+}
+
+ol, ul {
+	list-style: none;
+}
+
+blockquote, q {
+	quotes: none;
+}
+
+blockquote::before, blockquote::after,
+q::before, q::after {
+	content: '';
+	content: none;
+}
+
+table {
+	border-spacing: 0;
+	border-collapse: collapse;
+}
+`
+export default reset

src/common/styles/theme.ts

@@ -30,7 +30,7 @@ const FONT = ({
 
 
 const fonts = {
-   medium: FONT({ family: 'Arial', weight: 500, size: 1, lineHeight: 1.5 }),
+  medium: FONT({ family: 'Arial', weight: 500, size: 1, lineHeight: 1.5 }),
 };
 
 export type ColorsTypes = typeof colors;