Chore: 프로젝트 기초 환경 설정을 완료합니다. (#21)

* chore: 타입스크립트 종속성을 추가하고 기본 tsconfig.json을 설정합니다.

* chore: eslint, prettier를 설정합니다.

* chore: commit message template을 추가합니다.

.exlintrc.js

@@ -0,0 +1,203 @@
+module.exports = {
+  // `extends`를 생략해도 이 파일이 있는 위치까지만 부모 eslintrc를 찾도록 제한함
+  env: {
+    es6: true,
+    node: true,
+  },
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'eslint:recommended',
+    'plugin:@next/next/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'eslint-config-prettier',
+    // "plugin:storybook/recommended",
+  ],
+  plugins: ['@typescript-eslint', 'import', 'prettier', 'react', 'react-hooks', 'jsx-a11y'],
+  settings: {
+    'import/resolver': {
+      typescript: {},
+    },
+  },
+  rules: {
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
+    'react-hooks/exhaustive-deps': 'error',
+    'no-implicit-coercion': 'error',
+    // TypeScript에서 이미 잡고 있는 문제이기 때문에 + location, document 등의 global variable도 잡아서
+    'no-undef': 'off',
+    // 아래 3개의 경우, Prettier가 이미 잘 해 주고 있는 부분이기 때문에
+    indent: 'off',
+    '@typescript-eslint/indent': 'off',
+    semi: 'off',
+    // 이미 널리 쓰이고 있어 에러 수가 감당이 되지 않아 잠시 꺼둡니다.
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    // Strict-boolean-expression을 사용할지 아직 결론이 나지 않아서
+    'no-extra-boolean-cast': 'off',
+    // union type을 받는 함수에서 모든 경우의 수에 대해 return 해도 eslint가 추론하지 못하고 있어서 warn만 하고 있음
+    'getter-return': 'warn',
+    // 대부분의 경우 필요가 없어서
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    // Hoisting을 전략적으로 사용한 경우가 많아서
+    '@typescript-eslint/no-use-before-define': 'off',
+    // 모델 정의 부분에서 class와 interface를 합치기 위해 사용하는 용법도 잡고 있어서
+    '@typescript-eslint/no-empty-interface': 'off',
+    // 모델 정의 부분에서 파라미터 프로퍼티를 잘 쓰고 있어서
+    '@typescript-eslint/no-parameter-properties': 'off',
+    // TypeScript에서 이미 잘 해주고 있어서
+    'react/prop-types': 'off',
+    // React.memo, React.forwardRef에서 사용하는 경우도 막고 있어서
+    'react/display-name': 'off',
+    // 탭내빙 어택 방지
+    'react/jsx-no-target-blank': 'error',
+    // 불필요한 Fragment 방지
+    'react/jsx-no-useless-fragment': 'warn',
+    'no-async-promise-executor': 'warn',
+    '@typescript-eslint/prefer-as-const': 'warn',
+    '@typescript-eslint/no-non-null-asserted-optional-chain': 'warn',
+    '@typescript-eslint/ban-types': 'warn',
+    '@typescript-eslint/no-inferrable-types': 'warn',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
+        selector: 'variable',
+        leadingUnderscore: 'allow',
+      },
+      {
+        format: ['camelCase', 'PascalCase'],
+        selector: 'function',
+        filter: {
+          regex: '[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]',
+          match: false,
+        },
+      },
+      {
+        format: ['PascalCase'],
+        selector: 'interface',
+        filter: {
+          regex: '[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]',
+          match: false,
+        },
+      },
+      {
+        format: ['PascalCase'],
+        selector: 'typeAlias',
+        filter: {
+          regex: '[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]',
+          match: false,
+        },
+      },
+    ],
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/array-type': [
+      'error',
+      {
+        default: 'array-simple',
+      },
+    ],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        ignoreRestSiblings: true,
+      },
+    ],
+    '@typescript-eslint/member-ordering': [
+      'error',
+      {
+        default: [
+          'public-static-field',
+          'private-static-field',
+          'public-instance-field',
+          'private-instance-field',
+          'public-constructor',
+          'private-constructor',
+          'public-instance-method',
+          'private-instance-method',
+        ],
+      },
+    ],
+    'object-shorthand': ['error', 'always'],
+    'prefer-const': 'error',
+    'no-var': 'error',
+    curly: ['error', 'all'],
+    eqeqeq: [
+      'error',
+      'always',
+      {
+        null: 'ignore',
+      },
+    ],
+    'import/no-duplicates': 'error',
+    'import/order': [
+      'error',
+      {
+        groups: ['builtin', 'external', 'internal', ['index', 'sibling', 'parent'], 'object'],
+        // Import 구문 순서 정하고 싶으면 추가
+        pathGroups: [],
+        pathGroupsExcludedImportTypes: ['builtin'],
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+      },
+    ],
+    'sort-imports': [
+      'error',
+      {
+        ignoreDeclarationSort: true,
+        ignoreMemberSort: false,
+      },
+    ],
+    'import/newline-after-import': ['error'],
+    'react-hooks/rules-of-hooks': 'error',
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-key': 'warn',
+    // 접근성, 충분히 잡히면 error로 올릴 예정
+    'jsx-a11y/alt-text': [
+      'warn',
+      {
+        img: ['Image', 'Dialog.Image'],
+      },
+    ],
+    'jsx-a11y/aria-props': 'error',
+    // 제대로된 aria-* 이름인지 확인
+    'jsx-a11y/aria-proptypes': 'error',
+    // 제대로된 aria-*의 value 인지 검사
+    /**
+     * 일부 속성은 aria 표준이 아니지만 사용중이기 때문에 warn 처리
+     * eg. role="text" 같은 경우 aria 표준은 아니지만 널리 사용되고 있습니다.
+     *
+     * FIXME: 아래 이슈 해결후 error로 격상 하기
+     * https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/792
+     */
+    'jsx-a11y/aria-role': 'warn',
+    // 표준 role 값인지 확인하는 룰
+    'jsx-a11y/role-supports-aria-props': 'warn',
+    // 서로 같이 쓰면 안되는 aria-* 가 있는지 확인하는룰
+    'jsx-a11y/aria-unsupported-elements': 'warn',
+    // 해당 element에서 미지원하는 aria가 들어있는지 확인하는 룰
+    'jsx-a11y/img-redundant-alt': [
+      'warn',
+      {
+        components: ['Image', 'Dialog.Image'],
+        words: ['사진', '이미지'],
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['**/*.js', 'scripts/**/*.ts'],
+      rules: {
+        '@typescript-eslint/no-var-requires': 'warn',
+      },
+    },
+  ],
+};

.gitmessage

@@ -0,0 +1,11 @@
+# [종류]: 제목
+
+# 내용
+
+# feat: new feature
+# fix: bug fix
+# refactor: refactoring production code
+# style: formatting, missing semi colons, etc; no code change
+# docs: changes to documentation
+# test: adding or refactoring tests
+# chore: updating grunt tasks etc

.prettierrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  singleQuote: true,
+  semi: true,
+  useTabs: false,
+  tabWidth: 2,
+  trailingComma: 'all',
+  printWidth: 100,
+  bracketSpacing: true,
+  arrowParens: 'always',
+  endOfLine: 'auto',
+  importOrder: [
+    '^@/*',
+    '^./(.*)',
+    '^types',
+    '^public',
+  ],
+  importOrderSortSpecifiers: true,
+  importOrderGroupNamespaceSpecifiers: true,
+  importOrderCaseInsensitive: true,
+};

package.json

@@ -25,5 +25,19 @@
   "bugs": {
     "url": "https://github.com/pagers-org/react-world/issues"
   },
-  "homepage": "https://github.com/pagers-org/react-world#readme"
+  "homepage": "https://github.com/pagers-org/react-world#readme",
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
+    "eslint": "^8.48.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^3.0.3",
+    "typescript": "^5.2.2"
+  }
 }

tsconfig.json

@@ -0,0 +1,116 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    "incremental": true /* Save .tsbuildinfo files to allow for incremental compilation of projects. */,
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+    /* Language and Environment */
+    "target": "es5" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
+    "jsx": "preserve" /* Specify what JSX code is generated. */,
+    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+    /* Modules */
+    "module": "esnext" /* Specify what module code is generated. */,
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
+    "baseUrl": "." /* Specify the base directory to resolve non-relative module names. */,
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    "typeRoots": ["@types"] /* Specify multiple folders that act like './node_modules/@types'. */,
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+    // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+    // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+    // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+    "resolveJsonModule": true /* Enable importing .json files. */,
+    // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    "allowJs": true /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+    /* Emit */
+    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    "sourceMap": true /* Create source map files for emitted JavaScript files. */,
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    "outDir": "out" /* Specify an output folder for all emitted files. */,
+    "removeComments": true /* Disable emitting comments. */,
+    "noEmit": true /* Disable emitting files from a compilation. */,
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    "preserveConstEnums": true /* Disable erasing 'const enum' declarations in generated code. */,
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+    /* Interop Constraints */
+    "isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */,
+    // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+    "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+    /* Type Checking */
+    "strict": true /* Enable all strict type-checking options. */,
+    "noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
+    "strictNullChecks": true /* When type checking, take into account 'null' and 'undefined'. */,
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    "alwaysStrict": true /* Ensure 'use strict' is always emitted. */,
+    "noUnusedLocals": true /* Enable error reporting when local variables aren't read. */,
+    "noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  },
+  "files": ["y"],
+  "exclude": ["node_modules"],
+  "include": ["**/*.d.ts", "**/*.ts", "**/*.tsx"]
+}