Update linting policy

Author: junekimdev

.eslintrc.js

@@ -27,6 +27,14 @@ module.exports = {
     'no-mixed-spaces-and-tabs': 'warn',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-member-accessibility': 'off',
+    'react-hooks/exhaustive-deps': 'off',
+    'no-unused-vars': [
+      'error',
+      {
+        varsIgnorePattern: '^_',
+        argsIgnorePattern: '^_',
+      },
+    ],
   },
   globals: {
     Atomics: 'readonly',

components/errors/errorsPresenter.tsx

@@ -1,11 +1,11 @@
 import Link from 'next/link';
 import styles from './errors.module.scss';
-import Image from './errorsViewImage';
+import ErrorImage from './errorsViewImage';
 
 const Presenter = () => {
   return (
     <section className={styles.container}>
-      <Image />
+      <ErrorImage />
       <Link href="/">
         <div className={styles.btnBackToHome}>Back to Home</div>
       </Link>

components/meta/gtm.tsx

@@ -8,12 +8,12 @@ export const useGTM = () => {
     (function (w, d, s, l, i) {
       w[l] = w[l] || [];
       w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
-      var f = d.getElementsByTagName(s)[0],
+      const f = d.getElementsByTagName(s)[0],
         j = d.createElement(s),
-        dl = l != 'dataLayer' ? '&l=' + l : '';
+        dl = l !== 'dataLayer' ? '&l=' + l : '';
       j.async = true;
       j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
       f.parentNode.insertBefore(j, f);
     })(window, document, 'script', 'dataLayer', GTM_ID);
-  }, []);
+  }, [GTM_ID]);
 };

components/meta/meta.tsx

@@ -41,8 +41,8 @@ const Meta = (props: TMPropsMeta) => {
       <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
       <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
       <link rel="manifest" href="/site.webmanifest" />
-      <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"/ >
-      <meta name="msapplication-TileColor" content="#ffc40d"/ >
+      <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+      <meta name="msapplication-TileColor" content="#ffc40d" />
       <meta name="theme-color" content="#ffffff" />
       {props.children}
     </Head>

pages/_app.tsx

@@ -11,9 +11,9 @@ function MyApp({ Component, pageProps }: AppProps) {
   return (
     <RecoilRoot>
       <QueryClientProvider client={queryClient}>
-        <HydrationBoundary  state={pageProps.dehydratedState}>
+        <HydrationBoundary state={pageProps.dehydratedState}>
           <Component {...pageProps} />
-        </HydrationBoundary >
+        </HydrationBoundary>
         <ReactQueryDevtools initialIsOpen={false} />
       </QueryClientProvider>
     </RecoilRoot>