[feat, refactor]: add eslint import order rules, refactor import order

.eslintrc.json

@@ -1,3 +1,48 @@
 {
-  "extends": ["next/core-web-vitals"]
+  "extends": ["next/core-web-vitals"],
+  "plugins": ["import"],
+  "rules": {
+    "sort-imports": [
+      "error",
+      {
+        "ignoreCase": true,
+        "ignoreDeclarationSort": true,
+        "ignoreMemberSort": false,
+        "allowSeparatedGroups": true
+      }
+    ],
+    "import/order": [
+      "error",
+      {
+        "newlines-between": "always",
+        "groups": [
+          ["builtin", "external"],
+          "internal",
+          "parent",
+          "sibling",
+          "index"
+        ],
+        "pathGroups": [
+          {
+            "pattern": "next",
+            "group": "builtin",
+            "position": "before"
+          },
+          {
+            "pattern": "react",
+            "group": "builtin"
+          },
+          {
+            "pattern": "src/**",
+            "group": "internal"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["next", "next/app"],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ]
+  }
 }

src/apis/notion-client/getPosts.ts

@@ -1,10 +1,9 @@
-import { CONFIG } from "site.config"
 import { NotionAPI } from "notion-client"
 import { idToUuid } from "notion-utils"
 
-import getAllPageIds from "src/libs/utils/notion/getAllPageIds"
-import getPageProperties from "src/libs/utils/notion/getPageProperties"
-import { TPosts } from "src/types"
+import { getAllPageIds, getPageProperties } from "@/libs/utils/notion"
+import { TPosts } from "@/types"
+import { CONFIG } from "site.config"
 
 /**
  * @param {{ includePages: boolean }} - false: posts only / true: include pages

src/components/Category/index.tsx

@@ -1,8 +1,10 @@
+import styled from "@emotion/styled"
 import { useRouter } from "next/router"
 import React from "react"
+
+import { colors } from "@/styles"
+
 import { COLOR_SET } from "./constants"
-import styled from "@emotion/styled"
-import { colors } from "src/styles"
 
 export const getColorClassByName = (name: string): string => {
   try {

src/components/Emoji.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from "react"
 import { Noto_Color_Emoji } from "next/font/google"
+import { ReactNode } from "react"
 
 const notoColorEmoji = Noto_Color_Emoji({
   weight: ["400"],

src/components/MetaConfig/index.tsx

@@ -1,6 +1,7 @@
-import { CONFIG } from "site.config"
 import Head from "next/head"
 
+import { CONFIG } from "site.config"
+
 export type MetaConfigProps = {
   title: string
   description: string

src/hooks/useCategoriesQuery.ts

@@ -1,6 +1,7 @@
-import { DEFAULT_CATEGORY } from "src/constants"
+import { DEFAULT_CATEGORY } from "@/constants"
+import { getAllSelectItemsFromPosts } from "@/libs/utils/notion"
+
 import usePostsQuery from "./usePostsQuery"
-import { getAllSelectItemsFromPosts } from "src/libs/utils/notion"
 
 export const useCategoriesQuery = () => {
   const posts = usePostsQuery()

src/hooks/useDropdown.ts

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState } from "react"
 
 type useDropdownType = () => [
   React.RefObject<HTMLDivElement>,
@@ -7,7 +7,7 @@ type useDropdownType = () => [
 ]
 
 function assertIsNode(e: EventTarget | null): asserts e is Node {
-  if (!e || !('nodeType' in e)) {
+  if (!e || !("nodeType" in e)) {
     throw new Error(`Node expected`)
   }
 }
@@ -26,7 +26,7 @@ const useDropdown: useDropdownType = () => {
 
   const onOpenBtn = () => {
     setIsDropdownOpened(true)
-    window.addEventListener('click', handleClick)
+    window.addEventListener("click", handleClick)
   }
 
   return [menuRef, isDropdownOpened, onOpenBtn]

src/hooks/usePostQuery.ts

@@ -1,7 +1,8 @@
 import { useQuery } from "@tanstack/react-query"
 import { useRouter } from "next/router"
-import { queryKey } from "src/constants/queryKey"
-import { PostDetail } from "src/types"
+
+import { queryKey } from "@/constants/queryKey"
+import { PostDetail } from "@/types"
 
 const usePostQuery = () => {
   const router = useRouter()

src/hooks/usePostsQuery.ts

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query"
-import { queryKey } from "src/constants/queryKey"
-import { TPost } from "src/types"
+
+import { queryKey } from "@/constants/queryKey"
+import { TPost } from "@/types"
 
 const usePostsQuery = () => {
   const { data } = useQuery({

src/hooks/useScheme.ts

@@ -1,7 +1,8 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query"
 import { getCookie, setCookie } from "cookies-next"
 import { useEffect } from "react"
-import { queryKey } from "src/constants/queryKey"
+
+import { queryKey } from "@/constants/queryKey"
 
 type Scheme = "light" | "dark"
 type SetScheme = (scheme: Scheme) => void

src/hooks/useTagsQuery.ts

@@ -1,5 +1,6 @@
+import { getAllSelectItemsFromPosts } from "@/libs/utils/notion"
+
 import usePostsQuery from "./usePostsQuery"
-import { getAllSelectItemsFromPosts } from "src/libs/utils/notion"
 
 export const useTagsQuery = () => {
   const posts = usePostsQuery()

src/layouts/RootLayout/Header/Logo.tsx

@@ -1,6 +1,7 @@
+import styled from "@emotion/styled"
 import Link from "next/link"
+
 import { CONFIG } from "site.config"
-import styled from "@emotion/styled"
 
 const Logo = () => {
   return (

src/layouts/RootLayout/Header/ThemeToggle.tsx

@@ -1,7 +1,8 @@
 import styled from "@emotion/styled"
 import React from "react"
-import { Emoji } from "src/components/Emoji"
-import useScheme from "src/hooks/useScheme"
+
+import { Emoji } from "@/components/Emoji"
+import useScheme from "@/hooks/useScheme"
 
 type Props = {}
 

src/layouts/RootLayout/Header/index.tsx

@@ -1,8 +1,10 @@
-import NavBar from "./NavBar"
+import styled from "@emotion/styled"
+
+import { zIndexes } from "@/styles/zIndexes"
+
 import Logo from "./Logo"
+import NavBar from "./NavBar"
 import ThemeToggle from "./ThemeToggle"
-import styled from "@emotion/styled"
-import { zIndexes } from "src/styles/zIndexes"
 
 type Props = {
   fullWidth: boolean

src/layouts/RootLayout/Scripts.tsx

@@ -1,4 +1,5 @@
 import Script from "next/script"
+
 import { CONFIG } from "site.config"
 
 const Scripts: React.FC = () => (

src/layouts/RootLayout/ThemeProvider/Global/index.tsx

@@ -1,7 +1,11 @@
-import { Global as _Global, css, useTheme } from "@emotion/react"
+import {
+  Global as _Global,
+  ThemeProvider as _ThemeProvider,
+  css,
+  useTheme,
+} from "@emotion/react"
 
-import { ThemeProvider as _ThemeProvider } from "@emotion/react"
-import { pretendard } from "src/assets"
+import { pretendard } from "@/assets"
 
 export const Global = () => {
   const theme = useTheme()

src/layouts/RootLayout/ThemeProvider/index.tsx

@@ -1,6 +1,8 @@
 import { ThemeProvider as _ThemeProvider } from "@emotion/react"
+
+import { createTheme } from "@/styles"
+
 import { Global } from "./Global"
-import { createTheme } from "src/styles"
 
 type Props = {
   scheme: string

src/layouts/RootLayout/index.tsx

@@ -1,9 +1,11 @@
-import React, { ReactNode } from "react"
-import { ThemeProvider } from "./ThemeProvider"
-import useScheme from "src/hooks/useScheme"
-import Header from "./Header"
 import styled from "@emotion/styled"
-import Scripts from "src/layouts/RootLayout/Scripts"
+import { ReactNode } from "react"
+
+import useScheme from "@/hooks/useScheme"
+import Scripts from "@/layouts/RootLayout/Scripts"
+
+import Header from "./Header"
+import { ThemeProvider } from "./ThemeProvider"
 import useGtagEffect from "./useGtagEffect"
 
 type Props = {

src/layouts/RootLayout/useGtagEffect.ts

@@ -1,6 +1,7 @@
-import { useEffect } from "react"
 import { useRouter } from "next/router"
-import * as gtag from "src/libs/gtag"
+import { useEffect } from "react"
+
+import * as gtag from "@/libs/gtag"
 import { CONFIG } from "site.config"
 
 const useGtagEffect = () => {

src/libs/utils/notion/filterPosts.ts

@@ -1,4 +1,4 @@
-import { TPosts, TPostStatus, TPostType } from "src/types"
+import { TPosts, TPostStatus, TPostType } from "@/types"
 
 export type FilterPostsOptions = {
   acceptStatus?: TPostStatus[]

src/libs/utils/notion/getAllPageIds.ts

@@ -1,10 +1,7 @@
-import { idToUuid } from "notion-utils"
 import { ExtendedRecordMap, ID } from "notion-types"
+import { idToUuid } from "notion-utils"
 
-export default function getAllPageIds(
-  response: ExtendedRecordMap,
-  viewId?: string
-) {
+export function getAllPageIds(response: ExtendedRecordMap, viewId?: string) {
   const collectionQuery = response.collection_query
   const views = Object.values(collectionQuery)[0]
 

src/libs/utils/notion/getAllSelectItemsFromPosts.ts

@@ -1,4 +1,4 @@
-import { TPosts } from "src/types"
+import { TPosts } from "@/types"
 
 export function getAllSelectItemsFromPosts(
   key: "tags" | "category",

src/libs/utils/notion/getMetadata.ts

@@ -1,4 +1,4 @@
-export default function getMetadata(rawMetadata: any) {
+export function getMetadata(rawMetadata: any) {
   const metadata = {
     locked: rawMetadata?.format?.block_locked,
     page_full_width: rawMetadata?.format?.page_full_width,

src/libs/utils/notion/getPageProperties.ts

@@ -1,9 +1,10 @@
-import { getTextContent, getDateValue } from "notion-utils"
 import { NotionAPI } from "notion-client"
 import { BlockMap, CollectionPropertySchemaMap } from "notion-types"
+import { getDateValue, getTextContent } from "notion-utils"
+
 import { customMapImageUrl } from "./customMapImageUrl"
 
-async function getPageProperties(
+export async function getPageProperties(
   id: string,
   block: BlockMap,
   schema: CollectionPropertySchemaMap
@@ -81,5 +82,3 @@ async function getPageProperties(
   }
   return properties
 }
-
-export { getPageProperties as default }

src/libs/utils/notion/index.ts

@@ -1,2 +1,6 @@
+export { customMapImageUrl } from "./customMapImageUrl"
+export { getAllPageIds } from "./getAllPageIds"
 export { getAllSelectItemsFromPosts } from "./getAllSelectItemsFromPosts"
+export { getMetadata } from "./getMetadata"
+export { getPageProperties } from "./getPageProperties"
 export { filterPosts } from "./filterPosts"

src/pages/404.tsx

@@ -1,7 +1,7 @@
-import { CONFIG } from "../../site.config"
-import { NextPageWithLayout, TPosts, TTags } from "../types"
-import CustomError from "../routes/Error"
-import MetaConfig from "src/components/MetaConfig"
+import MetaConfig from "@/components/MetaConfig"
+import CustomError from "@/routes/Error"
+import { NextPageWithLayout, TPosts, TTags } from "@/types"
+import { CONFIG } from "site.config"
 
 type Props = {
   tags: TTags

src/pages/[slug].tsx

@@ -1,16 +1,18 @@
-import Detail from "src/routes/Detail"
-import { filterPosts } from "src/libs/utils/notion"
-import { CONFIG } from "site.config"
-import { NextPageWithLayout } from "../types"
-import CustomError from "src/routes/Error"
-import { getRecordMap, getPosts } from "src/apis"
-import MetaConfig from "src/components/MetaConfig"
 import { GetStaticProps } from "next"
-import { queryClient } from "src/libs/react-query"
-import { queryKey } from "src/constants/queryKey"
+
 import { dehydrate } from "@tanstack/react-query"
-import usePostQuery from "src/hooks/usePostQuery"
-import { FilterPostsOptions } from "src/libs/utils/notion/filterPosts"
+
+import { getPosts, getRecordMap } from "@/apis"
+import MetaConfig from "@/components/MetaConfig"
+import { queryKey } from "@/constants/queryKey"
+import usePostQuery from "@/hooks/usePostQuery"
+import { queryClient } from "@/libs/react-query"
+import { filterPosts } from "@/libs/utils/notion"
+import { FilterPostsOptions } from "@/libs/utils/notion/filterPosts"
+import Detail from "@/routes/Detail"
+import CustomError from "@/routes/Error"
+import { NextPageWithLayout } from "@/types"
+import { CONFIG } from "site.config"
 
 const filter: FilterPostsOptions = {
   acceptStatus: ["Public", "PublicOnDetail"],

src/pages/_app.tsx

@@ -1,7 +1,8 @@
-import { AppPropsWithLayout } from "../types"
 import { Hydrate, QueryClientProvider } from "@tanstack/react-query"
-import { RootLayout } from "src/layouts"
-import { queryClient } from "src/libs/react-query"
+
+import { RootLayout } from "@/layouts"
+import { queryClient } from "@/libs/react-query"
+import { AppPropsWithLayout } from "@/types"
 
 function App({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout || ((page) => page)

src/pages/_document.tsx

@@ -1,4 +1,5 @@
-import Document, { Html, Head, Main, NextScript } from "next/document"
+import Document, { Head, Html, Main, NextScript } from "next/document"
+
 import { CONFIG } from "site.config"
 
 class MyDocument extends Document {

src/pages/api/revalidate.ts

@@ -1,4 +1,5 @@
 import { NextApiRequest, NextApiResponse } from "next"
+
 import { getPosts } from "../../apis"
 
 // for all path revalidate, https://<your-site.com>/api/revalidate?secret=<token>