[FEAT] eslint을 커스텀해서 팀 코드 컨벤션 적용

frontend/eslint-plugin-ddangkong/component-folder-match.js

@@ -0,0 +1,42 @@
+const path = require('path');
+const fs = require('fs');
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'components 폴더 안에는 컴포넌트 폴더와 해당 폴더명과 일치하는 tsx 파일이 있어야 한다.',
+      recommended: true,
+    },
+    message: {
+      noMatch: `components 폴더 안에 "{{dirName}}" 폴더와 이에 해당하는 "{{expectedFileName}}" 파일이 있어야 합니다.`,
+    },
+  },
+  create(context) {
+    return {
+      Program(node) {
+        const filePath = context.filename; // 현재 파일의 경로
+        const dirName = path.basename(path.dirname(filePath)); // 현재 파일이 속한 폴더 이름
+        const parentDir = path.dirname(path.dirname(filePath)); // 상위 디렉터리
+
+        // 부모 폴더가 "components"로 끝나는 폴더만 검사
+        if (parentDir.endsWith('components')) {
+          const expectedFileName = `${dirName}.tsx`;
+          const expectedFilePath = path.join(parentDir, dirName, expectedFileName);
+
+          if (!fs.existsSync(expectedFilePath)) {
+            context.report({
+              node,
+              messageId: 'noMatch',
+              data: {
+                dirName,
+                expectedFileName,
+              },
+            });
+          }
+        }
+      },
+    };
+  },
+};

frontend/eslint-plugin-ddangkong/component-props-interface.js

@@ -0,0 +1,79 @@
+module.exports = {
+  meta: {
+    type: 'suggestion', // 규칙의 성격
+    docs: {
+      description: '컴포넌트의 props 타입은 interface로 나타내며 이름은 컴포넌트 명 + props이다.',
+      recommended: true,
+    },
+    messages: {
+      invalidPropsName: "The props interface의'{{actual}}' 이름을 '{{expected}}'로 변경해주세요.",
+    },
+  },
+
+  create(context) {
+    return {
+      ExportDefaultDeclaration(node) {
+        const sourceCode = context.getSourceCode();
+        const filePath = context.getFilename();
+
+        // export default 변수 이름 추출
+        const componentName = node.declaration.name;
+
+        // 컴포넌트 이름이 대문자로 시작하지 않으면 검사하지 않음
+        if (!/^[A-Z]/.test(componentName)) {
+          return;
+        }
+
+        // components 폴더가 아닌 경우 검사하지 않음
+        if (!filePath.includes('components')) {
+          return;
+        }
+
+        // 컴포넌트 이름으로 선언된 변수 찾기
+        const matchingDeclaration = sourceCode.ast.body.find(
+          (item) =>
+            item.type === 'VariableDeclaration' &&
+            item.declarations.some((decl) => decl.id.name === componentName),
+        );
+
+        if (!matchingDeclaration) {
+          return;
+        }
+
+        // 파라미터에 사용된 인터페이스 확인
+        let usedInterface = null;
+
+        matchingDeclaration.declarations.forEach((decl) => {
+          if (decl.init?.type === 'ArrowFunctionExpression' && decl.init.params) {
+            decl.init.params.forEach((param) => {
+              if (param.typeAnnotation?.type === 'TSTypeAnnotation') {
+                const typeNode = param.typeAnnotation.typeAnnotation;
+                if (typeNode.type === 'TSTypeReference') {
+                  const interfaceName = typeNode.typeName.name;
+                  if (interfaceName !== 'PropsWithChildren') {
+                    usedInterface = interfaceName;
+                  }
+                }
+              }
+            });
+          }
+        });
+
+        // 올바른 인터페이스 이름 계산
+        const expectedInterfaceName = `${componentName}Props`;
+
+        // 사용된 인터페이스가 올바르지 않으면 에러 발생
+        if (usedInterface && usedInterface !== expectedInterfaceName) {
+          context.report({
+            node,
+            messageId: 'invalidPropsName',
+            data: {
+              actual: usedInterface,
+              expected: expectedInterfaceName,
+            },
+          });
+        }
+      },
+    };
+  },
+};

frontend/eslint-plugin-ddangkong/enforce-is-boolean.js

@@ -0,0 +1,60 @@
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'boolean 값 또는 boolean을 반환하는 함수는 변수명이 반드시 "is"로 시작해야 합니다.',
+      recommended: true,
+    },
+    messages: {
+      isPrefix: `변수명: "{{name}}". boolean 값 또는 boolean을 반환하는 함수는 "is"로 시작해야 합니다.`,
+    },
+  },
+  create(context) {
+    const isBooleanReturningFunction = (node) => {
+      // 화살표 함수 또는 함수 표현식에서 boolean 반환 여부 확인
+      if (node.type === 'ArrowFunctionExpression' || node.type === 'FunctionExpression') {
+        if (
+          node.body.type === 'Literal' &&
+          typeof node.body.value === 'boolean' // true/false 리터럴 반환
+        ) {
+          return true;
+        }
+        if (
+          node.body.type === 'BinaryExpression' &&
+          ['==', '===', '!=', '!==', '>', '>=', '<', '<='].includes(node.body.operator) // BinaryExpression 반환
+        ) {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    return {
+      VariableDeclarator(node) {
+        const init = node.init;
+        if (!init) return; // 초기화되지 않은 변수는 건너뜀
+
+        if (
+          (init.type === 'Literal' && typeof init.value === 'boolean') || // true/false 리터럴 확인
+          (init.type === 'BinaryExpression' &&
+            ['==', '===', '!=', '!==', '>', '>=', '<', '<='].includes(init.operator)) || // BinaryExpression 결과가 boolean인지 확인
+          isBooleanReturningFunction(init) // boolean을 반환하는 함수 확인
+        ) {
+          const variableName = node.id.name;
+
+          // 변수명이 "is"로 시작하지 않는 경우 에러 발생
+          if (!variableName.startsWith('is')) {
+            context.report({
+              node,
+              messageId: 'isPrefix',
+              data: {
+                name: variableName,
+              },
+            });
+          }
+        }
+      },
+    };
+  },
+};

frontend/eslint-plugin-ddangkong/index.js

@@ -0,0 +1,37 @@
+const enforceIsBoolean = require('./enforce-is-boolean');
+const variableNaming = require('./variable-naming');
+const pageFolderMatch = require('./page-folder-match');
+const componentFolderMatch = require('./component-folder-match');
+const recommendArrowFunction = require('./recommend-arrow-function');
+const componentPropsInterface = require('./component-props-interface');
+
+const plugin = {
+  configs: {
+    recommended: [
+      {
+        plugins: {
+          ddangkong: {
+            rules: {
+              'enforce-is-boolean': enforceIsBoolean,
+              'variable-naming': variableNaming,
+              'page-folder-match': pageFolderMatch,
+              'component-folder-match': componentFolderMatch,
+              'recommend-arrow-function': recommendArrowFunction,
+              'component-props-interface': componentPropsInterface,
+            },
+          },
+        },
+        rules: {
+          'ddangkong/enforce-is-boolean': 'error',
+          'ddangkong/variable-naming': 'error',
+          'ddangkong/page-folder-match': 'error',
+          'ddangkong/component-folder-match': 'error',
+          'ddangkong/component-props-interface': 'error',
+          'ddangkong/recommend-arrow-function': 'warn',
+        },
+      },
+    ],
+  },
+};
+
+module.exports = plugin;

frontend/eslint-plugin-ddangkong/page-folder-match.js

@@ -0,0 +1,42 @@
+const path = require('path');
+const fs = require('fs');
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'pages 폴더 안에는 Page로 끝나는 폴더와 해당 폴더명과 일치하는 tsx 파일이 있어야 한다.',
+      recommended: true,
+    },
+    messages: {
+      noMatch: `pages 폴더 안에 "{{dirName}}" 폴더와 이에 해당하는 "{{expectedFileName}}" 파일이 있어야 합니다.`,
+    },
+  },
+  create(context) {
+    return {
+      Program(node) {
+        const filePath = context.filename; // 현재 파일의 경로
+        const dirName = path.basename(path.dirname(filePath)); // 현재 파일이 속한 폴더 이름
+
+        // "Page"로 끝나는 폴더만 검사
+        if (dirName.endsWith('Page')) {
+          const parentDir = path.dirname(path.dirname(filePath)); // 상위 디렉터리
+          const expectedFileName = `${dirName}.tsx`;
+          const expectedFilePath = path.join(parentDir, dirName, expectedFileName);
+
+          if (!fs.existsSync(expectedFilePath) || !parentDir.endsWith('pages')) {
+            context.report({
+              node,
+              messageId: 'noMatch',
+              data: {
+                dirName,
+                expectedFileName,
+              },
+            });
+          }
+        }
+      },
+    };
+  },
+};

frontend/eslint-plugin-ddangkong/recommend-arrow-function.js

@@ -0,0 +1,44 @@
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: '함수를 선언할 때는 화살표 함수의 사용을 권장합니다.',
+      recommended: true,
+    },
+    messages: {
+      noFunctionKeyword: '{{name}} 함수를 선언할 때는 화살표 함수의 사용을 권장합니다.',
+    },
+  },
+
+  create(context) {
+    return {
+      FunctionDeclaration(node) {
+        // 클래스 메서드는 제외
+        if (node.parent.type === 'ClassBody') return;
+
+        context.report({
+          node,
+          messageId: 'noFunctionKeyword',
+          data: {
+            name: node.id ? node.id.name : 'anonymous',
+          },
+        });
+      },
+      FunctionExpression(node) {
+        // 클래스 메서드는 제외
+        if (node.parent.type === 'MethodDefinition') return;
+
+        // 객체 메서드도 제외
+        if (node.parent.type === 'Property' && node.parent.method === true) return;
+
+        context.report({
+          node,
+          messageId: 'noFunctionKeyword',
+          data: {
+            name: node.id ? node.id.name : 'anonymous',
+          },
+        });
+      },
+    };
+  },
+};