프로젝트 설정 변경

.env

@@ -0,0 +1 @@
+PUBLIC_URL=""

.eslintrc.js

@@ -0,0 +1,87 @@
+const path = require('path');
+
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'babel'],
+  extends: [
+    'airbnb', // airbnb style guide 적용
+    'airbnb/hooks',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  ignorePatterns: ['stories/', 'node_modules/', 'src/module/'], // lint 적용 제외경로
+  settings: {
+    'import/resolver': {
+      // import path 관련
+      node: {
+        extensions: ['js', '.jsx', '.ts', '.tsx'],
+        moduleDirectory: ['node_modules', 'src/'],
+      },
+    },
+  },
+  rules: {
+    'react/function-component-definition': [
+      2,
+      { namedComponents: ['arrow-function', 'function-declaration'] },
+    ],
+    'import/extensions': [
+      'error',
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
+    'react/jsx-filename-extension': [
+      // tsx 인식
+      1,
+      {
+        extensions: ['.tsx'],
+      },
+    ],
+    'import/no-extraneous-dependencies': [
+      // dependencies 무시
+      'error',
+      {
+        devDependencies: true,
+      },
+    ],
+    'react/jsx-one-expression-per-line': 0,
+    'react/state-in-constructor': 0,
+    'react-hooks/exhaustive-deps': 0, // useEffect의 dependency list에 [] 사용 가능
+    'prettier/prettier': [
+      'error',
+      {
+        // 문자열은 따옴표로 formatting
+        singleQuote: true,
+        // 코드 마지막에 세미콜른이 있게 formatting
+        semi: true,
+        // 탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
+        useTabs: false,
+        // 들여쓰기 너비는 2칸
+        tabWidth: 2,
+        // 자세한 설명은 구글링이 짱이긴하나 객체나 배열 키:값 뒤에 항상 콤마를 붙히도록 formatting
+        trailingComma: 'es5',
+        // 코드 한줄이 maximum 100칸
+        printWidth: 100,
+        // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
+        arrowParens: 'avoid',
+        // "parser": 'typescript',
+        // platform에 따른 line ending sequence 설정 무시
+        endOfLine: 'auto',
+      },
+    ],
+    'no-unused-expressions': 'off',
+    'babel/no-unused-expressions': 'error',
+    'class-methods-use-this': 'off', // class method 에서 this 필수 접근 무시
+    '@typescript-eslint/no-explicit-any': ['error', { ignoreRestArgs: true }], // ...args: any[] 는 무시
+    // eslint/no-shadow 대신 ts eslint 사용
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': ['error'],
+    // eslint/no-use-before-define 대신 ts eslint 사용
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': ['error', { functions: false }],
+  },
+};

.github/workflows/deploy.yml

@@ -8,16 +8,16 @@ jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout 🛎️
+      - name: Checkout ??
         uses: actions/checkout@v2.3.1 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
         with:
           persist-credentials: false
 
-      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
+      - name: Install and Build ? # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
         run: |
           yarn install
           yarn run build
-      - name: Deploy 🚀
+      - name: Deploy ?
         uses: JamesIves/github-pages-deploy-action@3.7.1
         with:
           GITHUB_TOKEN: ${{ secrets.TOKEN }}

.gitignore

@@ -1,108 +1,10 @@
-# Created by https://www.toptal.com/developers/gitignore/api/react,webstorm+all
-# Edit at https://www.toptal.com/developers/gitignore?templates=react,webstorm+all
+# Build and test
+.tmp/
+coverage/
+dist/
 
-### react ###
-.DS_*
-*.log
-logs
-**/*.backup.*
-**/*.back.*
+# Modules
+node_modules/
 
-node_modules
-bower_components
-
-*.sublime*
-
-psd
-thumb
-sketch
-
-### WebStorm+all ###
-# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
-# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
-
-# User-specific stuff
-.idea/**/workspace.xml
-.idea/**/tasks.xml
-.idea/**/usage.statistics.xml
-.idea/**/dictionaries
-.idea/**/shelf
-
-# AWS User-specific
-.idea/**/aws.xml
-
-# Generated files
-.idea/**/contentModel.xml
-
-# Sensitive or high-churn files
-.idea/**/dataSources/
-.idea/**/dataSources.ids
-.idea/**/dataSources.local.xml
-.idea/**/sqlDataSources.xml
-.idea/**/dynamic.xml
-.idea/**/uiDesigner.xml
-.idea/**/dbnavigator.xml
-
-# Gradle
-.idea/**/gradle.xml
-.idea/**/libraries
-
-# Gradle and Maven with auto-import
-# When using Gradle or Maven with auto-import, you should exclude module files,
-# since they will be recreated, and may cause churn.  Uncomment if using
-# auto-import.
-# .idea/artifacts
-# .idea/compiler.xml
-# .idea/jarRepositories.xml
-# .idea/modules.xml
-# .idea/*.iml
-# .idea/modules
-# *.iml
-# *.ipr
-
-# CMake
-cmake-build-*/
-
-# Mongo Explorer plugin
-.idea/**/mongoSettings.xml
-
-# File-based project format
-*.iws
-
-# IntelliJ
-out/
-
-# mpeltonen/sbt-idea plugin
-.idea_modules/
-
-# JIRA plugin
-atlassian-ide-plugin.xml
-
-# Cursive Clojure plugin
-.idea/replstate.xml
-
-# SonarLint plugin
-.idea/sonarlint/
-
-# Crashlytics plugin (for Android Studio and IntelliJ)
-com_crashlytics_export_strings.xml
-crashlytics.properties
-crashlytics-build.properties
-fabric.properties
-
-# Editor-based Rest Client
-.idea/httpRequests
-
-# Android studio 3.1+ serialized cache file
-.idea/caches/build_file_checksums.ser
-
-### WebStorm+all Patch ###
-# Ignore everything but code style settings and run configurations
-# that are supposed to be shared within teams.
-
-.idea/*
-
-!.idea/codeStyles
-!.idea/runConfigurations
-
-# End of https://www.toptal.com/developers/gitignore/api/react,webstorm+all
+# Editors
+.vscode/

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+./hooks/commit-msg $1

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged --config ./conf/lint-staged.conf.js && ./hooks/pre-commit

.husky/pre-push

@@ -0,0 +1,3 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+

.husky/prepare-commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+./hooks/prepare-commit-msg $1 $2 $3

.stylelintrc.json

@@ -0,0 +1,42 @@
+{
+    "extends": "stylelint-config-sass-guidelines",
+    "plugins": [
+        "stylelint-scss"
+    ],
+    "rules": {
+        "function-url-quotes": [
+            "always",
+            {
+                "except": [
+                    "empty"
+                ]
+            }
+        ],
+        "scss/selector-nest-combinators": "always",
+        "scss/selector-no-redundant-nesting-selector": true,
+        "function-parentheses-space-inside": "never-single-line",
+        "max-nesting-depth": [
+            2,
+            {
+                "ignore": [
+                    "pseudo-classes"
+                ]
+            }
+        ],
+        "selector-class-pattern": [
+            "^([l|a|r|w|d|p]|ewr|col|row)-(?:[a-z][a-z0-9]+)*(?:-[a-z0-9][a-z0-9_]+)*?(?:--[a-z0-9-_]+)*?$|^(app|type)-([a|r|w|d|p]|ewr|col|row)-(?:[a-z][a-z0-9]+)*(?:-[a-z0-9][a-z0-9]+)*?--[a-z0-9_]+$",
+            {
+                "message": "Class names should match the SUIT CSS naming convention"
+            }
+        ],
+        "selector-max-universal": 0,
+        "selector-no-qualifying-type": [
+            true,
+            {
+                "ignore": [
+                    "attribute"
+                ]
+            }
+        ]
+    }
+}