feat: eslint 룰 추가

.eslintrc.json

@@ -5,11 +5,13 @@
     "plugin:storybook/recommended",
     "plugin:prettier/recommended"
   ],
+  "plugins": ["@typescript-eslint"],
   "rules": {
     "react/react-in-jsx-scope": "off",
     "no-unused-vars": "off",
     "react/prop-types": "off",
     "no-undef": "off",
+    "no-duplicate-imports": "error",
     "import/order": [
       "error",
       {
@@ -35,6 +37,7 @@
         "newlines-between": "always"
       }
     ],
+    "@typescript-eslint/consistent-type-imports": "error",
     "react/button-has-type": "warn",
     "react/self-closing-comp": [
       "error",

package.json

@@ -69,6 +69,7 @@
     "@types/mapbox-gl": "^2.7.10",
     "@types/qs": "^6.9.7",
     "@types/react-lottie": "^1.2.6",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
     "babel-loader": "^8.3.0",
     "css-loader": "^6.7.3",
     "eslint": "^8.33.0",

src/features/home/components/DoughnutChart/DoughnutChart.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import DoughnutChart from './DoughnutChart';
 

src/features/home/components/DrawerContents/DrawerContents.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import DrawerContents from './DrawerContents';
 

src/features/home/components/DrawerContents/DrawerContents.tsx

@@ -6,7 +6,7 @@ import { deleteUser } from '@/shared/apis/auth/delete';
 import { Button } from '@/shared/components';
 import useAuth from '@/shared/hooks/useAuth';
 import useConfirm from '@/shared/hooks/useConfirm';
-import { Statistics } from '@/shared/types/record/statistics';
+import type { Statistics } from '@/shared/types/record/statistics';
 
 import styles from './DrawerContents.module.scss';
 

src/features/home/components/Map/Map.tsx

@@ -1,10 +1,15 @@
 import classNames from 'classnames/bind';
-import { GeoJSONSource } from 'mapbox-gl';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import ReactMapGL, { Layer, MapRef, Source, useMap } from 'react-map-gl';
+import ReactMapGL, {
+  Layer,
+  Source,
+  useMap,
+  type GeoJSONSource,
+  type MapRef,
+} from 'react-map-gl';
 
 import 'mapbox-gl/dist/mapbox-gl.css';
-import { Experience } from '@/shared/types/Experience';
+import type { Experience } from '@/shared/types/Experience';
 
 import Slider from '../Slider';
 

src/features/home/components/Slider/Slider.tsx

@@ -6,7 +6,7 @@ import 'swiper/css';
 import AlcoholPreview from '@/features/alcohol/components/AlcoholPreview';
 import Chip from '@/shared/components/Chip';
 import Icon from '@/shared/components/Icon';
-import { Experience } from '@/shared/types/Experience';
+import type { Experience } from '@/shared/types/Experience';
 
 import styles from './Slider.module.scss';
 

src/features/record/components/AlcoholPercentFeelingInput/AlcoholPercentFeelingInput.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames/bind';
-import { ForwardedRef, forwardRef } from 'react';
+import { forwardRef, type ForwardedRef } from 'react';
 
 import Chip from '@/shared/components/Chip';
-import { AlcoholPercentFeeling } from '@/shared/types/record/alcoholPercentFeeling';
+import type { AlcoholPercentFeeling } from '@/shared/types/record/alcoholPercentFeeling';
 
 import { getAlcoholPercentFeelingLabel } from '../../utils/getAlcoholPercentFeelingLabel';
 

src/features/record/components/DetailFlavorInput/DetailFlavorInput.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
-import { FlavorTag } from '@/shared/types/record/flavorTag';
+import type { FlavorTag } from '@/shared/types/record/flavorTag';
 
 import DetailFlavorInput from './DetailFlavorInput';
 

src/features/record/components/DetailFlavorInput/DetailFlavorInput.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames/bind';
-import { ForwardedRef, forwardRef } from 'react';
+import { forwardRef, type ForwardedRef } from 'react';
 
 import Accordion from '@/shared/components/Accordion';
 import Chip from '@/shared/components/Chip';
-import { FlavorTag } from '@/shared/types/record/flavorTag';
+import type { FlavorTag } from '@/shared/types/record/flavorTag';
 
 import styles from './DetailFlavorInput.module.scss';
 import { flavorTagOptions } from './flavorTagOptions';

src/features/record/components/DetailFlavorInput/flavorTagOptions.ts

@@ -1,5 +1,5 @@
 import { FLAVOR_TAGS } from '@/shared/constants/flavorTags';
-import { DetailTag, MajorTag } from '@/shared/types/record/flavorTag';
+import type { DetailTag, MajorTag } from '@/shared/types/record/flavorTag';
 
 import {
   getDetailFlavorTagLabel,

src/features/record/components/FlavorSliderGroup/FlavorSliderGroup.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames/bind';
-import { ForwardedRef, forwardRef, useEffect, useState } from 'react';
+import { forwardRef, type ForwardedRef } from 'react';
 
 import Slider from '@/shared/components/Slider';
-import { Record } from '@/shared/types/record';
+import type { Record } from '@/shared/types/record';
 
 import styles from './FlavorSliderGroup.module.scss';
 

src/features/record/components/ImageSwiper/ImageSwiper.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames/bind';
-import { useEffect, useState, ChangeEvent } from 'react';
+import { useEffect, useState, type ChangeEvent } from 'react';
 import { Pagination } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 

src/features/record/components/Rating/Rating.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames/bind';
 import { isNil } from 'lodash-es';
-import { ForwardedRef, forwardRef, useCallback, useState } from 'react';
+import { forwardRef, useCallback, type ForwardedRef } from 'react';
 
 import Icon from '@/shared/components/Icon';
 

src/features/record/hooks/useCreateRecordForm.ts

@@ -1,10 +1,14 @@
 import dayjs from 'dayjs';
 import { useRouter } from 'next/router';
-import { useForm, SubmitHandler, SubmitErrorHandler } from 'react-hook-form';
+import {
+  useForm,
+  type SubmitHandler,
+  type SubmitErrorHandler,
+} from 'react-hook-form';
 
 import { useCreateRecord } from '@/shared/apis/records/createRecord';
-import { Alcohol } from '@/shared/types/alcohol';
-import { Record } from '@/shared/types/record';
+import type { Alcohol } from '@/shared/types/alcohol';
+import type { Record } from '@/shared/types/record';
 
 import { FLAVOR_SLIDER_GROUP_DEFAULT_VALUE } from '../components/FlavorSliderGroup/FlavorSliderGroup';
 

src/features/record/utils/getAlcoholPercentFeelingLabel.ts

@@ -1,4 +1,4 @@
-import { AlcoholPercentFeeling } from '@/shared/types/record/alcoholPercentFeeling';
+import type { AlcoholPercentFeeling } from '@/shared/types/record/alcoholPercentFeeling';
 
 const alcoholPercentFeelingAlias: Record<AlcoholPercentFeeling, string> = {
   MILD: '연하다',

src/features/record/utils/getFlavorTagLabel.ts

@@ -1,4 +1,4 @@
-import { DetailTag, MajorTag } from '@/shared/types/record/flavorTag';
+import type { DetailTag, MajorTag } from '@/shared/types/record/flavorTag';
 
 /**
  * 맛 종류 문서: https://docs.google.com/spreadsheets/d/1HItKDWkbNg2vsrbqpdfcDhMcNnKmKkCouMeYWX3v7Bk/edit#gid=0

src/features/search/components/AlcoholCategoryTab/AlcoholCategoryTab.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames/bind';
-import { Dispatch, SetStateAction } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
 
 import AlcoholCategoryTabItem from '@/features/search/components/AlcoholCategoryTabItem';
 import { ALCOHOL_CATEGORIES } from '@/shared/constants/alcohol';
-import { AlcoholTag } from '@/shared/types/alcohol';
+import type { AlcoholTag } from '@/shared/types/alcohol';
 
 import styles from './AlcoholCategoryTab.module.scss';
 

src/features/search/components/SearchBar/SearchBar.tsx

@@ -1,11 +1,11 @@
 import classNames from 'classnames/bind';
 import { debounce } from 'lodash-es';
 import {
-  KeyboardEventHandler,
   useCallback,
   useEffect,
   useMemo,
   useState,
+  type KeyboardEventHandler,
 } from 'react';
 
 import Icon from '@/shared/components/Icon';

src/pages/_app.tsx

@@ -1,8 +1,7 @@
 import { Hydrate, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { NextPageContext } from 'next';
-import App from 'next/app';
-import type { AppContext, AppProps } from 'next/app';
+import type { NextPageContext } from 'next';
+import App, { type AppContext, type AppProps } from 'next/app';
 import dynamic from 'next/dynamic';
 import Script from 'next/script';
 import { useEffect, useState } from 'react';

src/pages/api/logout.ts

@@ -1,4 +1,4 @@
-import { NextApiRequest, NextApiResponse } from 'next';
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 import { deleteAccessToken, deleteRefreshToken } from '@/shared/utils/auth';
 

src/pages/api/redirect/apple.ts

@@ -1,8 +1,11 @@
 import axios from 'axios';
-import { NextApiRequest, NextApiResponse } from 'next';
+import type { NextApiRequest, NextApiResponse } from 'next';
 
-import { NEXT_PUBLIC_API_BASE_URI } from '@/shared/constants';
-import { ACCESS_TOKEN_KEY, REFRESH_TOKEN_KEY } from '@/shared/constants';
+import {
+  NEXT_PUBLIC_API_BASE_URI,
+  ACCESS_TOKEN_KEY,
+  REFRESH_TOKEN_KEY,
+} from '@/shared/constants';
 import { setAccessToken, setRefreshToken } from '@/shared/utils/auth';
 import { generateUrl } from '@/shared/utils/generateUrl';
 

src/pages/api/redirect/kakao.ts

@@ -1,8 +1,11 @@
 import axios from 'axios';
-import { NextApiRequest, NextApiResponse } from 'next';
+import type { NextApiRequest, NextApiResponse } from 'next';
 
-import { NEXT_PUBLIC_API_BASE_URI } from '@/shared/constants';
-import { ACCESS_TOKEN_KEY, REFRESH_TOKEN_KEY } from '@/shared/constants';
+import {
+  NEXT_PUBLIC_API_BASE_URI,
+  ACCESS_TOKEN_KEY,
+  REFRESH_TOKEN_KEY,
+} from '@/shared/constants';
 import { setAccessToken, setRefreshToken } from '@/shared/utils/auth';
 import { generateUrl } from '@/shared/utils/generateUrl';
 

src/pages/api/refresh.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { NextApiRequest, NextApiResponse } from 'next';
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 import {
   ACCESS_TOKEN_KEY,

src/pages/feed/index.tsx

@@ -1,6 +1,10 @@
-import { dehydrate, DehydratedState, QueryClient } from '@tanstack/react-query';
+import {
+  dehydrate,
+  QueryClient,
+  type DehydratedState,
+} from '@tanstack/react-query';
 import classNames from 'classnames/bind';
-import { GetServerSideProps } from 'next';
+import type { GetServerSideProps } from 'next';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 
@@ -11,7 +15,7 @@ import PageLayout from '@/shared/components/PageLayout';
 import Skeleton from '@/shared/components/Skeleton';
 import TopNavigator from '@/shared/components/TopNavigator';
 import useIntersect from '@/shared/hooks/useIntersect';
-import { Feed } from '@/shared/types/feed';
+import type { Feed } from '@/shared/types/feed';
 
 import styles from './index.module.scss';
 

src/pages/index.tsx

@@ -1,8 +1,8 @@
 import { dehydrate, QueryClient } from '@tanstack/react-query';
 import classNames from 'classnames/bind';
-import { GetServerSideProps } from 'next';
+import type { GetServerSideProps } from 'next';
 import dynamic from 'next/dynamic';
-import { MouseEvent, useMemo, useState } from 'react';
+import { useMemo, useState, type MouseEvent } from 'react';
 
 import Map from '@/features/home/components/Map';
 import AlcoholCategoryFilter from '@/features/search/components/AlcoholCategoryFilter';

src/pages/records/[id]/index.tsx

@@ -1,8 +1,12 @@
-import { dehydrate, DehydratedState, QueryClient } from '@tanstack/react-query';
+import {
+  dehydrate,
+  QueryClient,
+  type DehydratedState,
+} from '@tanstack/react-query';
 import classNames from 'classnames/bind';
 import dayjs from 'dayjs';
 import { isNil } from 'lodash-es';
-import { GetServerSideProps } from 'next';
+import type { GetServerSideProps } from 'next';
 import { useCallback } from 'react';
 
 import FlavorSliderGroup from '@/features/record/components/FlavorSliderGroup';
@@ -15,9 +19,9 @@ import Icon from '@/shared/components/Icon';
 import PageLayout from '@/shared/components/PageLayout';
 import TopNavigator from '@/shared/components/TopNavigator';
 import useConfirm from '@/shared/hooks/useConfirm';
-import { Alcohol } from '@/shared/types/alcohol';
-import { Record } from '@/shared/types/record';
-import { FlavorTag } from '@/shared/types/record/flavorTag';
+import type { Alcohol } from '@/shared/types/alcohol';
+import type { Record } from '@/shared/types/record';
+import type { FlavorTag } from '@/shared/types/record/flavorTag';
 
 import styles from './index.module.scss';
 

src/pages/records/create/index.tsx

@@ -1,6 +1,10 @@
-import { dehydrate, DehydratedState, QueryClient } from '@tanstack/react-query';
+import {
+  type DehydratedState,
+  dehydrate,
+  QueryClient,
+} from '@tanstack/react-query';
 import classNames from 'classnames/bind';
-import { GetServerSideProps } from 'next';
+import type { GetServerSideProps } from 'next';
 import { useRouter } from 'next/router';
 import { Controller } from 'react-hook-form';
 

src/shared/apis/alcohols/getAlcohol.ts

@@ -1,6 +1,6 @@
 import { createQuery } from 'react-query-kit';
 
-import { Alcohol } from '@/shared/types/alcohol';
+import type { Alcohol } from '@/shared/types/alcohol';
 import { request } from '@/shared/utils/request';
 
 type Variables = Pick<Alcohol, 'alcoholId'>;

src/shared/apis/alcohols/searchAlcohol.ts

@@ -1,7 +1,7 @@
 import { createInfiniteQuery, createQuery } from 'react-query-kit';
 
-import { Alcohol } from '@/shared/types/alcohol';
-import { PagingInfo } from '@/shared/types/paging';
+import type { Alcohol } from '@/shared/types/alcohol';
+import type { PagingInfo } from '@/shared/types/paging';
 import { request } from '@/shared/utils/request';
 
 type Variables = { keyword: string } & PagingInfo;

src/shared/apis/feed/getFeed.ts

@@ -1,7 +1,7 @@
 import { createInfiniteQuery } from 'react-query-kit';
 
-import { Feed } from '@/shared/types/feed';
-import { PagingInfo } from '@/shared/types/paging';
+import type { Feed } from '@/shared/types/feed';
+import type { PagingInfo } from '@/shared/types/paging';
 import { request } from '@/shared/utils/request';
 
 type Response = {

src/shared/apis/records/createRecord.ts

@@ -1,7 +1,7 @@
 import { createMutation } from 'react-query-kit';
 
-import { Alcohol } from '@/shared/types/alcohol';
-import { Record } from '@/shared/types/record';
+import type { Alcohol } from '@/shared/types/alcohol';
+import type { Record } from '@/shared/types/record';
 import { request } from '@/shared/utils/request';
 
 type Variables = {

src/shared/apis/records/getMyRecords.ts

@@ -1,6 +1,6 @@
 import { createQuery } from 'react-query-kit';
 
-import { Experience } from '@/shared/types/Experience';
+import type { Experience } from '@/shared/types/Experience';
 import { request } from '@/shared/utils/request';
 
 type Response = Experience[];

src/shared/apis/records/getRecord.ts

@@ -1,7 +1,7 @@
 import { createQuery } from 'react-query-kit';
 
-import { Alcohol } from '@/shared/types/alcohol';
-import { Record } from '@/shared/types/record';
+import type { Alcohol } from '@/shared/types/alcohol';
+import type { Record } from '@/shared/types/record';
 import { request } from '@/shared/utils/request';
 
 type Variables = Pick<Record, 'recordId'>;

src/shared/apis/records/getStatistics.ts

@@ -1,6 +1,6 @@
 import { createQuery } from 'react-query-kit';
 
-import { Statistics } from '@/shared/types/record/statistics';
+import type { Statistics } from '@/shared/types/record/statistics';
 import { request } from '@/shared/utils/request';
 
 const getStatistics = () => {