Merge branch 'develop' into init/#20/styleGuideSetting

.github/workflows/labeler.yml

@@ -0,0 +1,31 @@
+name: labeler
+
+on: [pull_request]
+
+jobs:
+  labeler:
+    runs-on: ubuntu-latest
+    name: Label the PR size
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - uses: codelytv/pr-size-labeler@v1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          xs_label: 'size/xs'
+          xs_max_size: '10'
+          s_label: 'size/s'
+          s_max_size: '100'
+          m_label: 'size/m'
+          m_max_size: '500'
+          l_label: 'size/l'
+          l_max_size: '1000'
+          xl_label: 'size/xl'
+          fail_if_xl: 'false'
+          message_if_xl: >
+            This PR exceeds the recommended size of 1000 lines.
+            Please make sure you are NOT addressing multiple issues with one PR.
+            Note this PR might be rejected due to its size.
+          files_to_ignore: 'package-lock.json *.lock'
+

.stylelintrc

@@ -0,0 +1,281 @@
+{
+  "extends": ["stylelint-config-standard"],
+  "plugins": ["stylelint-order"],
+  "customSyntax": "postcss-styled-syntax",
+  "rules": {
+    "declaration-empty-line-before": [
+      "always",
+      {
+        "ignore": ["after-comment", "after-declaration", "inside-single-line-block"]
+      }
+    ],
+    "order/order": ["custom-properties", "declarations"],
+
+    "order/properties-order": [
+      {
+        "groupName": "Positioning",
+        "noEmptyLineBetween": true,
+        "properties": ["position", "top", "right", "bottom", "left", "z-index"]
+      },
+
+      {
+        "groupName": "BoxModel",
+        "emptyLineBefore": "always",
+        "noEmptyLineBetween": true,
+        "properties": [
+          "display",
+          "flex",
+          "flex-basis",
+          "flex-direction",
+          "flex-flow",
+          "flex-grow",
+          "flex-shrink",
+          "flex-wrap",
+          "grid",
+          "grid-area",
+          "grid-auto-rows",
+          "grid-auto-columns",
+          "grid-auto-flow",
+          "grid-gap",
+          "grid-row",
+          "grid-row-start",
+          "grid-row-end",
+          "grid-row-gap",
+          "grid-column",
+          "grid-column-start",
+          "grid-column-end",
+          "grid-column-gap",
+          "grid-template",
+          "grid-template-areas",
+          "grid-template-rows",
+          "grid-template-columns",
+          "gap",
+          "align-content",
+          "align-items",
+          "align-self",
+          "justify-content",
+          "justify-items",
+          "justify-self",
+          "order",
+          "float",
+          "clear",
+          "box-sizing",
+          "width",
+          "min-width",
+          "max-width",
+          "height",
+          "min-height",
+          "max-height",
+          "margin",
+          "margin-top",
+          "margin-right",
+          "margin-bottom",
+          "margin-left",
+          "padding",
+          "padding-top",
+          "padding-right",
+          "padding-bottom",
+          "padding-left",
+          "object-fit",
+          "object-position",
+          "overflow",
+          "overflow-x",
+          "overflow-y"
+        ]
+      },
+      {
+        "groupName": "Typography",
+        "emptyLineBefore": "always",
+        "noEmptyLineBetween": true,
+        "properties": [
+          "color",
+          "font",
+          "font-weight",
+          "font-size",
+          "font-family",
+          "font-style",
+          "font-variant",
+          "font-size-adjust",
+          "font-stretch",
+          "font-effect",
+          "font-emphasize",
+          "font-emphasize-position",
+          "font-emphasize-style",
+          "font-smooth",
+          "line-height",
+          "direction",
+          "letter-spacing",
+          "white-space",
+          "text-align",
+          "text-align-last",
+          "text-transform",
+          "text-decoration",
+          "text-emphasis",
+          "text-emphasis-color",
+          "text-emphasis-style",
+          "text-emphasis-position",
+          "text-indent",
+          "text-justify",
+          "text-outline",
+          "text-wrap",
+          "text-overflow",
+          "text-overflow-ellipsis",
+          "text-overflow-mode",
+          "text-orientation",
+          "text-shadow",
+          "vertical-align",
+          "word-wrap",
+          "word-break",
+          "word-spacing",
+          "overflow-wrap",
+          "tab-size",
+          "hyphens",
+          "unicode-bidi",
+          "columns",
+          "column-count",
+          "column-fill",
+          "column-gap",
+          "column-rule",
+          "column-rule-color",
+          "column-rule-style",
+          "column-rule-width",
+          "column-span",
+          "column-width",
+          "page-break-after",
+          "page-break-before",
+          "page-break-inside",
+          "src"
+        ]
+      },
+      {
+        "groupName": "Visual",
+        "emptyLineBefore": "always",
+        "noEmptyLineBetween": true,
+        "properties": [
+          "list-style",
+          "list-style-position",
+          "list-style-type",
+          "list-style-image",
+          "table-layout",
+          "empty-cells",
+          "caption-side",
+          "background",
+          "background-color",
+          "background-image",
+          "background-repeat",
+          "background-position",
+          "background-position-x",
+          "background-position-y",
+          "background-size",
+          "background-clip",
+          "background-origin",
+          "background-attachment",
+          "background-blend-mode",
+          "outline",
+          "outline-width",
+          "outline-style",
+          "outline-color",
+          "outline-offset",
+          "box-shadow",
+          "box-decoration-break",
+          "transform",
+          "transform-origin",
+          "transform-style",
+          "backface-visibility",
+          "perspective",
+          "perspective-origin",
+          "visibility",
+          "cursor",
+          "opacity",
+          "filter",
+          "isolation",
+          "backdrop-filter",
+          "mix-blend-mode",
+          "border",
+          "border-color",
+          "border-style",
+          "border-width",
+          "border-top",
+          "border-top-color",
+          "border-top-width",
+          "border-top-style",
+          "border-right",
+          "border-right-color",
+          "border-right-width",
+          "border-right-style",
+          "border-bottom",
+          "border-bottom-color",
+          "border-bottom-width",
+          "border-bottom-style",
+          "border-left",
+          "border-left-color",
+          "border-left-width",
+          "border-left-style",
+          "border-radius",
+          "border-top-left-radius",
+          "border-top-right-radius",
+          "border-bottom-right-radius",
+          "border-bottom-left-radius",
+          "border-image",
+          "border-image-source",
+          "border-image-slice",
+          "border-image-width",
+          "border-image-outset",
+          "border-image-repeat",
+          "border-collapse",
+          "border-spacing"
+        ]
+      },
+      {
+        "groupName": "Animation",
+        "emptyLineBefore": "always",
+        "noEmptyLineBetween": true,
+        "properties": [
+          "transition",
+          "transition-delay",
+          "transition-timing-function",
+          "transition-duration",
+          "transition-property",
+          "animation",
+          "animation-name",
+          "animation-duration",
+          "animation-play-state",
+          "animation-timing-function",
+          "animation-delay",
+          "animation-iteration-count",
+          "animation-direction",
+          "animation-fill-mode"
+        ]
+      },
+      {
+        "groupName": "Misc",
+        "emptyLineBefore": "always",
+        "noEmptyLineBetween": true,
+        "properties": [
+          "appearance",
+          "content",
+          "clip",
+          "clip-path",
+          "counter-reset",
+          "counter-increment",
+          "resize",
+          "user-select",
+          "nav-index",
+          "nav-up",
+          "nav-right",
+          "nav-down",
+          "nav-left",
+          "pointer-events",
+          "quotes",
+          "touch-action",
+          "will-change",
+          "zoom",
+          "fill",
+          "fill-rule",
+          "clip-rule",
+          "stroke"
+        ]
+      }
+    ]
+  }
+}

package.json

@@ -8,6 +8,7 @@
     "build": "tsc && vite build",
     "lint": "eslint './**/*.{ts,tsx,js,jsx}'",
     "lint:fix": "eslint --fix './**/*.{ts,tsx,js,jsx}'",
+    "lint:styled": "stylelint './src/**/*.{ts,tsx,js,jsx}' --fix",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -33,8 +34,13 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss-styled-syntax": "^0.6.4",
     "prettier": "3.1.1",
+    "stylelint": "^16.1.0",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-order": "^6.0.4",
     "typescript": "^5.2.2",
-    "vite": "^5.0.8"
+    "vite": "^5.0.8",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }

src/App.tsx

@@ -1,13 +1,18 @@
 import styled from '@emotion/styled';
 
+
+
 const App = () => {
   return (
     <>
       <Header>마일 웨비 화이팅</Header>
+
     </>
   );
 };
 
 export default App;
 
+
 const Header = styled.h1``;
+

src/assets/svgs/index.tsx

@@ -0,0 +1 @@
+export { default as Rect } from './Rectangle 17.svg?react';

tsconfig.json

@@ -18,7 +18,10 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    /* svgr */
+    "types": ["vite-plugin-svgr/client"]
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

vite.config.ts

@@ -1,5 +1,6 @@
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -18,5 +19,6 @@ export default defineConfig({
         ],
       },
     }),
+    svgr(),
   ],
 });