fix: fix 'npm run lint' error (#187)

.eslintrc.js

@@ -4,19 +4,29 @@ const baseStyleRules = require('eslint-config-airbnb-base/rules/style').rules;
 
 const dangleRules = baseStyleRules['no-underscore-dangle'];
 module.exports = {
-  plugins: ['react'],
+  plugins: ['@typescript-eslint', 'react'],
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
-    parser: 'babel-eslint',
+    parser: 'babel-parser',
     sourceType: 'module',
     allowImportExportEverywhere: true,
     ecmaVersion: 2017,
   },
   env: {
     es6: true,
   },
+  extends: ['plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended'],
+  parser: '@typescript-eslint/parser',
+  overrides: [
+    {
+      files: ['*.js', '*.jsx'],
+      rules: {
+        '@typescript-eslint/explicit-function-return-type': 'off',
+      },
+    },
+  ],
   // View link below for react rules documentation
   // https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules
   rules: {

package.json

@@ -35,7 +35,9 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "prepare": "rm -rf dist && mkdir dist && tsc && husky install",
-    "semantic-release": "semantic-release"
+    "semantic-release": "semantic-release",
+    "lint": "eslint src --ext .ts",
+    "lint:fix": "npm run lint -- --fix"
   },
   "eslintConfig": {
     "extends": [
@@ -86,7 +88,7 @@
     "@types/tapable": "^2.2.2",
     "@types/webpack": "^5.28.0",
     "@typescript-eslint/eslint-plugin": "^5.16.0",
-    "@typescript-eslint/parser": "^5.16.0",
+    "@typescript-eslint/parser": "^5.39.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-styled-components": "^2.0.6",
     "commitizen": "^4.2.5",

src/lib/common/hooks/useInterval.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
-const useInterval = (callback: Function, delay: number, deps?: any[]) => {
-  const autoPlayRef = useRef<any>(null);
+const useInterval = (callback: () => void, delay: number, deps?: unknown[]) => {
+  const autoPlayRef = useRef<NodeJS.Timeout>();
 
   function resetTimeout() {
     if (autoPlayRef.current) {

src/lib/common/types/ComponentTypes/Header/SideBar/SideBarItemsType.ts

@@ -1,5 +1,5 @@
 export interface SideBarItemsPropsType {
-  sideBarItems: any[];
+  sideBarItems: SideBarItemsElementType[];
   setIsClickedSideBarIcon: (isClickedSideBarIcon: boolean) => void;
 }
 

src/lib/common/types/ComponentTypes/Header/SideBar/SideBarType.ts

@@ -29,4 +29,4 @@ export interface SideBarStyledPropsType extends ClickValidationType {
   backgroundColor?: string;
   mainTitleBorderColor?: string;
 }
-export interface SideBarBackgroundStyledPropsType extends ClickValidationType {}
+export type SideBarBackgroundStyledPropsType = ClickValidationType

src/lib/common/types/ComponentTypes/TechStack/TechStackType.ts

@@ -30,4 +30,4 @@ export interface TechStackPropsType extends TechStackPropsGapType {
   progressBarOption: ProgressBarPropsType;
 }
 
-export interface TechStackStyledPropsType extends TechStackPropsGapType {}
+export type TechStackStyledPropsType = TechStackPropsGapType

src/lib/components/Carousel/Carousel.tsx

@@ -73,7 +73,7 @@ const Carousel = ({
       <Container len={itemLength} transition={transitionTime} showIndex={showIndex} slideToShow={slideToShow}>
         <div className="carousel-wrapper">
           <div className="carousel-container">
-            {itemList.map((child, index) => {
+            {itemList.map((child) => {
               return (
                 <ChildrenWrapper len={itemLength} slideToShow={slideToShow} key={uuidv4()}>
                   {child}

src/lib/components/Carousel/hooks.tsx

@@ -9,7 +9,7 @@ const useCarousel = ({
   autoplaySpeed = 3000,
   isAutoplay = false,
 }: useCarouselPropsType) => {
-  const [itemList, setItemList] = useState<any[]>([]);
+  const [itemList, setItemList] = useState<React.ReactNode[]>([]);
   const [coordinateX, setCoordinateX] = useState(0);
   const [autoPlayStatus, setAutoPlayStatus] = useState<boolean>(isAutoplay);
   const [transitionTime, setTransitionTime] = useState(0);
@@ -167,7 +167,7 @@ const setNextItem = ({
   slideToShow,
   showIndex,
 }: {
-  prevList: any[];
+  prevList: React.ReactNode[];
   childrenLength: number;
   slideToShow: number;
   showIndex: number;
@@ -203,7 +203,7 @@ const setPreviousItem = ({
   slideToShow,
   showIndex,
 }: {
-  prevList: any[];
+  prevList: React.ReactNode[];
   childrenLength: number;
   slideToShow: number;
   showIndex: number;

src/lib/components/Channels/Channels.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { ChannelsPropsType, ChannelType, ChannelStyledType } from '../../common/types/ComponentTypes/ChannelType';
+import { ChannelsPropsType, ChannelType } from '../../common/types/ComponentTypes/ChannelType';
 import { uuidv4 } from '../../common/utils';
 import Channel from './Channel';
 
@@ -16,7 +16,7 @@ import Channel from './Channel';
 const Channels = ({ channels }: ChannelsPropsType) => {
   return (
     <Container>
-      {channels?.map(({ redirectUrl, name, color, size, margin }: ChannelType, idx: number) => (
+      {channels?.map(({ redirectUrl, name, color, size, margin }: ChannelType) => (
         <Channel key={uuidv4()} redirectUrl={redirectUrl} name={name} color={color} size={size} margin={margin} />
       ))}
     </Container>

src/lib/components/Contact/AboutMe.tsx

@@ -2,10 +2,10 @@ import styled from 'styled-components';
 import { AboutMeInfoPropsType } from '../../common/types/ComponentTypes/Contact/AboutMeInfoType';
 import { uuidv4 } from '../../common/utils';
 
-const AboutMe = ({ aboutMeInfos }: any) => {
+const AboutMe = ({ aboutMeInfos }: { aboutMeInfos: AboutMeInfoPropsType[] }) => {
   return (
     <Container>
-      {aboutMeInfos.map(({ title, titleColor, description, descriptionColor }: AboutMeInfoPropsType, idx: number) => (
+      {aboutMeInfos.map(({ title, titleColor, description, descriptionColor }: AboutMeInfoPropsType) => (
         <AboutMeEachContainer key={uuidv4()}>
           <AboutMeTitle titleColor={titleColor}>{title}</AboutMeTitle>
           <AboutMeDescription descriptionColor={descriptionColor}>{description}</AboutMeDescription>

src/lib/components/Contact/Contact.tsx

@@ -55,7 +55,7 @@ const Contact = ({
         buttonBorderColor={buttonBorderColor}
         channels={channels}
       />
-      <AboutMe aboutMeInfos={aboutMeInfos} />
+      {aboutMeInfos && <AboutMe aboutMeInfos={aboutMeInfos} />}
     </Container>
   );
 };

src/lib/components/Experience/Experience.tsx

@@ -43,7 +43,7 @@ const Experience = (props: ExperiencePropsType) => {
       <div className="title">{title}</div>
       <hr />
       <ChildWrap theme={theme}>
-        {historyList?.map((elements, idx) => (
+        {historyList?.map((elements) => (
           <History
             key={uuidv4()}
             {...elements}

src/lib/components/Header/SideContainer.tsx

@@ -7,6 +7,7 @@ import { SideContainerPropsType } from '../../common/types/ComponentTypes/Header
 import { SideBarOptionPropsType } from '../../common/types/ComponentTypes/Header/SideBar/SideBarType';
 import { createPortal } from 'react-dom';
 import { MAIN } from '../../common/theme';
+import { SideBarItemsElementType } from '../../common/types/ComponentTypes/Header/SideBar/SideBarItemsType';
 
 const SideContainer = ({ channels, sideBarOption = {} }: SideContainerPropsType) => {
   // Default value of sideBarOption
@@ -28,10 +29,11 @@ const SideContainer = ({ channels, sideBarOption = {} }: SideContainerPropsType)
   }: SideBarOptionPropsType = sideBarOption;
 
   const [isClickedSideBarIcon, setIsClickedSideBarIcon] = useState(false);
-  const [sideBarItems, setSideBarItems] = useState([{}]);
+  const [sideBarItems, setSideBarItems] = useState<SideBarItemsElementType[]>();
 
   const onClickSideBarIconHandler = () => {
-    const $tags: any = document.querySelector('.App')?.childNodes;
+    const $tags: NodeListOf<ChildNode> | undefined = document.querySelector('.App')?.childNodes;
+    if (!$tags) return;
 
     setSideBarItems(
       Array.from($tags).reduce((result: any[], $tag: any) => {
@@ -90,7 +92,7 @@ const SideContainer = ({ channels, sideBarOption = {} }: SideContainerPropsType)
             mainTitleColor={mainTitleColor}
             mainTitleAlign={mainTitleAlign}
             mainTitleBorderColor={mainTitleBorderColor}
-            sideBarItems={sideBarItems}
+            sideBarItems={sideBarItems || []}
             isClickedSideBarIcon={isClickedSideBarIcon}
             backgroundColor={backgroundColor}
             setIsClickedSideBarIcon={setIsClickedSideBarIcon}

src/lib/components/Header/SideContainer/SideBar.tsx

@@ -24,7 +24,7 @@ const SideBar = ({
           {mainTitle}
         </MainTitle>
         <Line mainTitleBorderColor={mainTitleBorderColor} />
-        <SideBarItems setIsClickedSideBarIcon={setIsClickedSideBarIcon} sideBarItems={sideBarItems} />
+        {sideBarItems && <SideBarItems setIsClickedSideBarIcon={setIsClickedSideBarIcon} sideBarItems={sideBarItems} />}
       </Container>
       <Background
         isClickedSideBarIcon={isClickedSideBarIcon}