diff --git a/.eslintrc.json b/.eslintrc.json
index 957cd1545e..514c2e323f 100644
--- a/.eslintrc.json
+++ b/.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
+        }
+      }
+    ]
+  }
 }
diff --git a/src/apis/notion-client/getPosts.ts b/src/apis/notion-client/getPosts.ts
index a0fcd644d0..c2bd3c0751 100644
--- a/src/apis/notion-client/getPosts.ts
+++ b/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
diff --git a/src/components/Category/index.tsx b/src/components/Category/index.tsx
index 579cf4acf4..dd185e10bd 100644
--- a/src/components/Category/index.tsx
+++ b/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 {
diff --git a/src/components/Emoji.tsx b/src/components/Emoji.tsx
index 8dcf2f822d..b8e9707188 100644
--- a/src/components/Emoji.tsx
+++ b/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"],
diff --git a/src/components/MetaConfig/index.tsx b/src/components/MetaConfig/index.tsx
index 6ac3839754..2df658a987 100644
--- a/src/components/MetaConfig/index.tsx
+++ b/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
diff --git a/src/hooks/useCategoriesQuery.ts b/src/hooks/useCategoriesQuery.ts
index 26319b29a2..fd46635dc8 100644
--- a/src/hooks/useCategoriesQuery.ts
+++ b/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()
diff --git a/src/hooks/useDropdown.ts b/src/hooks/useDropdown.ts
index a82773e5c8..e6a150f71f 100644
--- a/src/hooks/useDropdown.ts
+++ b/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]
diff --git a/src/hooks/usePostQuery.ts b/src/hooks/usePostQuery.ts
index c396baf254..c2b62b325d 100644
--- a/src/hooks/usePostQuery.ts
+++ b/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()
diff --git a/src/hooks/usePostsQuery.ts b/src/hooks/usePostsQuery.ts
index 37a04ae2b1..4d2c48ffd1 100644
--- a/src/hooks/usePostsQuery.ts
+++ b/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({
diff --git a/src/hooks/useScheme.ts b/src/hooks/useScheme.ts
index 461c6d45ed..0aa76334e8 100644
--- a/src/hooks/useScheme.ts
+++ b/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
diff --git a/src/hooks/useTagsQuery.ts b/src/hooks/useTagsQuery.ts
index 2535ec5e97..b40e85550b 100644
--- a/src/hooks/useTagsQuery.ts
+++ b/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()
diff --git a/src/layouts/RootLayout/Header/Logo.tsx b/src/layouts/RootLayout/Header/Logo.tsx
index cc8a9b8a96..3d09ee2d2f 100644
--- a/src/layouts/RootLayout/Header/Logo.tsx
+++ b/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 (
diff --git a/src/layouts/RootLayout/Header/ThemeToggle.tsx b/src/layouts/RootLayout/Header/ThemeToggle.tsx
index 2e5701d412..a6389f4e1b 100644
--- a/src/layouts/RootLayout/Header/ThemeToggle.tsx
+++ b/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 = {}
 
diff --git a/src/layouts/RootLayout/Header/index.tsx b/src/layouts/RootLayout/Header/index.tsx
index 16f93d90f7..47938c7446 100644
--- a/src/layouts/RootLayout/Header/index.tsx
+++ b/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
diff --git a/src/layouts/RootLayout/Scripts.tsx b/src/layouts/RootLayout/Scripts.tsx
index 80033abd06..ac2382dbcc 100644
--- a/src/layouts/RootLayout/Scripts.tsx
+++ b/src/layouts/RootLayout/Scripts.tsx
@@ -1,4 +1,5 @@
 import Script from "next/script"
+
 import { CONFIG } from "site.config"
 
 const Scripts: React.FC = () => (
diff --git a/src/layouts/RootLayout/ThemeProvider/Global/index.tsx b/src/layouts/RootLayout/ThemeProvider/Global/index.tsx
index 63c3cfe61e..691d6ad418 100644
--- a/src/layouts/RootLayout/ThemeProvider/Global/index.tsx
+++ b/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()
diff --git a/src/layouts/RootLayout/ThemeProvider/index.tsx b/src/layouts/RootLayout/ThemeProvider/index.tsx
index 2306af5944..e830bd3407 100644
--- a/src/layouts/RootLayout/ThemeProvider/index.tsx
+++ b/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
diff --git a/src/layouts/RootLayout/index.tsx b/src/layouts/RootLayout/index.tsx
index da50df4aac..de4cfe512a 100644
--- a/src/layouts/RootLayout/index.tsx
+++ b/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 = {
diff --git a/src/layouts/RootLayout/useGtagEffect.ts b/src/layouts/RootLayout/useGtagEffect.ts
index 335db293e8..3655c2627d 100644
--- a/src/layouts/RootLayout/useGtagEffect.ts
+++ b/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 = () => {
diff --git a/src/libs/utils/notion/filterPosts.ts b/src/libs/utils/notion/filterPosts.ts
index f13d200ac2..17928fd58a 100644
--- a/src/libs/utils/notion/filterPosts.ts
+++ b/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[]
diff --git a/src/libs/utils/notion/getAllPageIds.ts b/src/libs/utils/notion/getAllPageIds.ts
index 3946cf497d..2eccc198f1 100644
--- a/src/libs/utils/notion/getAllPageIds.ts
+++ b/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]
 
diff --git a/src/libs/utils/notion/getAllSelectItemsFromPosts.ts b/src/libs/utils/notion/getAllSelectItemsFromPosts.ts
index 27fcddb1bb..3f096284d5 100644
--- a/src/libs/utils/notion/getAllSelectItemsFromPosts.ts
+++ b/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",
diff --git a/src/libs/utils/notion/getMetadata.ts b/src/libs/utils/notion/getMetadata.ts
index 15ebaccde2..b51b569840 100644
--- a/src/libs/utils/notion/getMetadata.ts
+++ b/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,
diff --git a/src/libs/utils/notion/getPageProperties.ts b/src/libs/utils/notion/getPageProperties.ts
index 20e2f74c57..a62fd0b551 100644
--- a/src/libs/utils/notion/getPageProperties.ts
+++ b/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 }
diff --git a/src/libs/utils/notion/index.ts b/src/libs/utils/notion/index.ts
index b4e5a5d92c..8fd978af75 100644
--- a/src/libs/utils/notion/index.ts
+++ b/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"
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index ddeeb7a785..b3ba1416b0 100644
--- a/src/pages/404.tsx
+++ b/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
diff --git a/src/pages/[slug].tsx b/src/pages/[slug].tsx
index 26a181a4b2..4709ac41e7 100644
--- a/src/pages/[slug].tsx
+++ b/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"],
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 4d11dcc608..4bc460682f 100644
--- a/src/pages/_app.tsx
+++ b/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)
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index f85d377b26..ee60e6d9c9 100644
--- a/src/pages/_document.tsx
+++ b/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 {
diff --git a/src/pages/api/revalidate.ts b/src/pages/api/revalidate.ts
index 4a5721a33e..d757c66f96 100644
--- a/src/pages/api/revalidate.ts
+++ b/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>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 328b466bfc..24f20aba8a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,13 +1,15 @@
-import Feed from "src/routes/Feed"
-import { CONFIG } from "../../site.config"
-import { NextPageWithLayout } from "../types"
-import { getPosts } from "../apis"
-import MetaConfig from "src/components/MetaConfig"
-import { queryClient } from "src/libs/react-query"
-import { queryKey } from "src/constants/queryKey"
 import { GetStaticProps } from "next"
+
 import { dehydrate } from "@tanstack/react-query"
-import { filterPosts } from "src/libs/utils/notion"
+
+import { getPosts } from "@/apis"
+import MetaConfig from "@/components/MetaConfig"
+import { queryKey } from "@/constants/queryKey"
+import { queryClient } from "@/libs/react-query"
+import { filterPosts } from "@/libs/utils/notion"
+import Feed from "@/routes/Feed"
+import { NextPageWithLayout } from "@/types"
+import { CONFIG } from "site.config"
 
 export const getStaticProps: GetStaticProps = async () => {
   const posts = filterPosts(await getPosts())
diff --git a/src/routes/Detail/PageDetail/index.tsx b/src/routes/Detail/PageDetail/index.tsx
index 74fe5c6123..52446d7c31 100644
--- a/src/routes/Detail/PageDetail/index.tsx
+++ b/src/routes/Detail/PageDetail/index.tsx
@@ -1,7 +1,9 @@
-import React from "react"
 import styled from "@emotion/styled"
-import NotionRenderer from "../components/NotionRenderer"
-import usePostQuery from "src/hooks/usePostQuery"
+import React from "react"
+
+import usePostQuery from "@/hooks/usePostQuery"
+import NotionRenderer from "@/routes/Detail/components/NotionRenderer"
+
 type Props = {}
 
 const PageDetail: React.FC<Props> = () => {
diff --git a/src/routes/Detail/PostDetail/CommentBox/Cusdis.tsx b/src/routes/Detail/PostDetail/CommentBox/Cusdis.tsx
index daab573e4c..6c4fa55e18 100644
--- a/src/routes/Detail/PostDetail/CommentBox/Cusdis.tsx
+++ b/src/routes/Detail/PostDetail/CommentBox/Cusdis.tsx
@@ -1,9 +1,10 @@
-import { CONFIG } from "site.config"
-import { ReactCusdis } from "react-cusdis"
-import { useCallback, useEffect, useState } from "react"
 import styled from "@emotion/styled"
-import useScheme from "src/hooks/useScheme"
 import { useRouter } from "next/router"
+import { useCallback, useEffect, useState } from "react"
+import { ReactCusdis } from "react-cusdis"
+
+import useScheme from "@/hooks/useScheme"
+import { CONFIG } from "site.config"
 
 type Props = {
   id: string
diff --git a/src/routes/Detail/PostDetail/CommentBox/Utterances.tsx b/src/routes/Detail/PostDetail/CommentBox/Utterances.tsx
index 6827f1d4f3..64db09d9b7 100644
--- a/src/routes/Detail/PostDetail/CommentBox/Utterances.tsx
+++ b/src/routes/Detail/PostDetail/CommentBox/Utterances.tsx
@@ -1,8 +1,9 @@
-import { CONFIG } from "site.config"
-import { useEffect } from "react"
 import styled from "@emotion/styled"
-import useScheme from "src/hooks/useScheme"
 import { useRouter } from "next/router"
+import { useEffect } from "react"
+
+import useScheme from "@/hooks/useScheme"
+import { CONFIG } from "site.config"
 
 //TODO: useRef?
 
diff --git a/src/routes/Detail/PostDetail/CommentBox/index.tsx b/src/routes/Detail/PostDetail/CommentBox/index.tsx
index 3ae505e502..6ee685a299 100644
--- a/src/routes/Detail/PostDetail/CommentBox/index.tsx
+++ b/src/routes/Detail/PostDetail/CommentBox/index.tsx
@@ -1,7 +1,8 @@
-import { TPost } from "src/types"
-import { CONFIG } from "site.config"
 import dynamic from "next/dynamic"
 
+import { TPost } from "@/types"
+import { CONFIG } from "site.config"
+
 const UtterancesComponent = dynamic(
   () => {
     return import("./Utterances")
diff --git a/src/routes/Detail/PostDetail/PostHeader.tsx b/src/routes/Detail/PostDetail/PostHeader.tsx
index 85485f4c95..921bf6a9c4 100644
--- a/src/routes/Detail/PostDetail/PostHeader.tsx
+++ b/src/routes/Detail/PostDetail/PostHeader.tsx
@@ -1,10 +1,11 @@
-import { CONFIG } from "site.config"
-import Tag from "src/components/Tag"
-import { TPost } from "src/types"
-import { formatDate } from "src/libs/utils"
+import styled from "@emotion/styled"
 import Image from "next/image"
 import React from "react"
-import styled from "@emotion/styled"
+
+import Tag from "@/components/Tag"
+import { formatDate } from "@/libs/utils"
+import { TPost } from "@/types"
+import { CONFIG } from "site.config"
 
 type Props = {
   data: TPost
diff --git a/src/routes/Detail/PostDetail/index.tsx b/src/routes/Detail/PostDetail/index.tsx
index b6a75e0de4..3f75903d87 100644
--- a/src/routes/Detail/PostDetail/index.tsx
+++ b/src/routes/Detail/PostDetail/index.tsx
@@ -1,11 +1,13 @@
+import styled from "@emotion/styled"
 import React from "react"
-import PostHeader from "./PostHeader"
-import Footer from "./PostFooter"
+
+import Category from "@/components/Category"
+import usePostQuery from "@/hooks/usePostQuery"
+import NotionRenderer from "@/routes/Detail/components/NotionRenderer"
+
 import CommentBox from "./CommentBox"
-import Category from "src/components/Category"
-import styled from "@emotion/styled"
-import NotionRenderer from "../components/NotionRenderer"
-import usePostQuery from "src/hooks/usePostQuery"
+import Footer from "./PostFooter"
+import PostHeader from "./PostHeader"
 
 type Props = {}
 
diff --git a/src/routes/Detail/components/NotionRenderer/index.tsx b/src/routes/Detail/components/NotionRenderer/index.tsx
index ce47d3a35c..4c8492cbe8 100644
--- a/src/routes/Detail/components/NotionRenderer/index.tsx
+++ b/src/routes/Detail/components/NotionRenderer/index.tsx
@@ -1,8 +1,11 @@
+import styled from "@emotion/styled"
 import dynamic from "next/dynamic"
 import Image from "next/image"
 import Link from "next/link"
 import { ExtendedRecordMap } from "notion-types"
-import useScheme from "src/hooks/useScheme"
+import { FC } from "react"
+
+import useScheme from "@/hooks/useScheme"
 
 // core styles shared by all of react-notion-x (required)
 import "react-notion-x/src/styles.css"
@@ -13,8 +16,6 @@ import "prismjs/themes/prism-tomorrow.css"
 // used for rendering equations (optional)
 
 import "katex/dist/katex.min.css"
-import { FC } from "react"
-import styled from "@emotion/styled"
 
 const _NotionRenderer = dynamic(
   () => import("react-notion-x").then((m) => m.NotionRenderer),
diff --git a/src/routes/Detail/hooks/useMermaidEffect.ts b/src/routes/Detail/hooks/useMermaidEffect.ts
index b18840d0e2..4e8453b8dd 100644
--- a/src/routes/Detail/hooks/useMermaidEffect.ts
+++ b/src/routes/Detail/hooks/useMermaidEffect.ts
@@ -1,5 +1,5 @@
-import { useEffect } from "react"
 import mermaid from "mermaid"
+import { useEffect } from "react"
 
 const useMermaidEffect = () => {
   useEffect(() => {
diff --git a/src/routes/Detail/index.tsx b/src/routes/Detail/index.tsx
index 45aebea5b1..6c8d2b84c7 100644
--- a/src/routes/Detail/index.tsx
+++ b/src/routes/Detail/index.tsx
@@ -1,8 +1,10 @@
-import useMermaidEffect from "./hooks/useMermaidEffect"
-import PostDetail from "./PostDetail"
-import PageDetail from "./PageDetail"
 import styled from "@emotion/styled"
-import usePostQuery from "src/hooks/usePostQuery"
+
+import usePostQuery from "@/hooks/usePostQuery"
+import useMermaidEffect from "@/routes/Detail/hooks/useMermaidEffect"
+
+import PageDetail from "./PageDetail"
+import PostDetail from "./PostDetail"
 
 type Props = {}
 
diff --git a/src/routes/Error/index.tsx b/src/routes/Error/index.tsx
index 9e984db64e..8e2e22d4bb 100644
--- a/src/routes/Error/index.tsx
+++ b/src/routes/Error/index.tsx
@@ -1,6 +1,7 @@
 import styled from "@emotion/styled"
 import React from "react"
-import { Emoji } from "src/components/Emoji"
+
+import { Emoji } from "@/components/Emoji"
 
 type Props = {}
 
diff --git a/src/routes/Feed/ContactCard.tsx b/src/routes/Feed/ContactCard.tsx
index 4718f66213..cd27e647cf 100644
--- a/src/routes/Feed/ContactCard.tsx
+++ b/src/routes/Feed/ContactCard.tsx
@@ -1,12 +1,13 @@
-import { CONFIG } from "site.config"
+import styled from "@emotion/styled"
 import React from "react"
 import {
-  AiOutlineInstagram,
+  AiFillLinkedin,
   AiOutlineGithub,
+  AiOutlineInstagram,
   AiOutlineMail,
-  AiFillLinkedin,
 } from "react-icons/ai"
-import styled from "@emotion/styled"
+
+import { CONFIG } from "site.config"
 
 const ContactCard: React.FC = () => {
   return (
diff --git a/src/routes/Feed/FeedHeader/CategorySelect.tsx b/src/routes/Feed/FeedHeader/CategorySelect.tsx
index f51d49c2d9..31d74b6081 100644
--- a/src/routes/Feed/FeedHeader/CategorySelect.tsx
+++ b/src/routes/Feed/FeedHeader/CategorySelect.tsx
@@ -1,10 +1,11 @@
-import useDropdown from "src/hooks/useDropdown"
+import styled from "@emotion/styled"
 import { useRouter } from "next/router"
 import React from "react"
 import { MdExpandMore } from "react-icons/md"
-import { DEFAULT_CATEGORY } from "src/constants"
-import styled from "@emotion/styled"
-import { useCategoriesQuery } from "src/hooks/useCategoriesQuery"
+
+import { DEFAULT_CATEGORY } from "@/constants"
+import { useCategoriesQuery } from "@/hooks/useCategoriesQuery"
+import useDropdown from "@/hooks/useDropdown"
 
 type Props = {}
 
diff --git a/src/routes/Feed/FeedHeader/FeedHeader.tsx b/src/routes/Feed/FeedHeader/FeedHeader.tsx
index 97e1c584a1..f7eb09d997 100644
--- a/src/routes/Feed/FeedHeader/FeedHeader.tsx
+++ b/src/routes/Feed/FeedHeader/FeedHeader.tsx
@@ -1,8 +1,8 @@
-import { TCategories } from "src/types"
+import styled from "@emotion/styled"
 import React from "react"
+
 import CategorySelect from "./CategorySelect"
 import OrderButtons from "./OrderButtons"
-import styled from "@emotion/styled"
 
 type Props = {}
 
diff --git a/src/routes/Feed/Footer.tsx b/src/routes/Feed/Footer.tsx
index e6feac6ba0..2547a7ed29 100644
--- a/src/routes/Feed/Footer.tsx
+++ b/src/routes/Feed/Footer.tsx
@@ -1,6 +1,7 @@
-import { CONFIG } from "site.config"
-import React from "react"
 import styled from "@emotion/styled"
+import React from "react"
+
+import { CONFIG } from "site.config"
 
 const d = new Date()
 const y = d.getFullYear()
diff --git a/src/routes/Feed/MobileProfileCard.tsx b/src/routes/Feed/MobileProfileCard.tsx
index 8c5f3c0340..8af621809c 100644
--- a/src/routes/Feed/MobileProfileCard.tsx
+++ b/src/routes/Feed/MobileProfileCard.tsx
@@ -1,7 +1,8 @@
-import { CONFIG } from "site.config"
+import styled from "@emotion/styled"
 import Image from "next/image"
 import React from "react"
-import styled from "@emotion/styled"
+
+import { CONFIG } from "site.config"
 
 type Props = {
   className?: string
diff --git a/src/routes/Feed/PostList/PostCard.tsx b/src/routes/Feed/PostList/PostCard.tsx
index ec96b1767e..261458b387 100644
--- a/src/routes/Feed/PostList/PostCard.tsx
+++ b/src/routes/Feed/PostList/PostCard.tsx
@@ -1,11 +1,12 @@
+import styled from "@emotion/styled"
+import Image from "next/image"
 import Link from "next/link"
+
+import Category from "@/components/Category"
+import Tag from "@/components/Tag"
+import { formatDate } from "@/libs/utils"
+import { TPost } from "@/types"
 import { CONFIG } from "site.config"
-import { formatDate } from "src/libs/utils"
-import Tag from "../../../components/Tag"
-import { TPost } from "../../../types"
-import Image from "next/image"
-import Category from "../../../components/Category"
-import styled from "@emotion/styled"
 
 type Props = {
   data: TPost
diff --git a/src/routes/Feed/PostList/index.tsx b/src/routes/Feed/PostList/index.tsx
index 45c0699666..487c808f4e 100644
--- a/src/routes/Feed/PostList/index.tsx
+++ b/src/routes/Feed/PostList/index.tsx
@@ -1,8 +1,9 @@
 import { useRouter } from "next/router"
 import React, { useEffect, useState } from "react"
-import PostCard from "src/routes/Feed/PostList/PostCard"
-import { DEFAULT_CATEGORY } from "src/constants"
-import usePostsQuery from "src/hooks/usePostsQuery"
+
+import { DEFAULT_CATEGORY } from "@/constants"
+import usePostsQuery from "@/hooks/usePostsQuery"
+import PostCard from "@/routes/Feed/PostList/PostCard"
 
 type Props = {
   q: string
diff --git a/src/routes/Feed/ProfileCard.tsx b/src/routes/Feed/ProfileCard.tsx
index 22791fccb5..7f19450fa2 100644
--- a/src/routes/Feed/ProfileCard.tsx
+++ b/src/routes/Feed/ProfileCard.tsx
@@ -1,8 +1,9 @@
-import { CONFIG } from "site.config"
+import styled from "@emotion/styled"
 import Image from "next/image"
 import React from "react"
-import styled from "@emotion/styled"
-import { Emoji } from "src/components/Emoji"
+
+import { Emoji } from "@/components/Emoji"
+import { CONFIG } from "site.config"
 
 type Props = {}
 
diff --git a/src/routes/Feed/SearchInput.tsx b/src/routes/Feed/SearchInput.tsx
index 71413dbf81..b156fac0c3 100644
--- a/src/routes/Feed/SearchInput.tsx
+++ b/src/routes/Feed/SearchInput.tsx
@@ -1,6 +1,7 @@
 import styled from "@emotion/styled"
-import React, { InputHTMLAttributes, ReactNode } from "react"
-import { Emoji } from "src/components/Emoji"
+import React, { InputHTMLAttributes } from "react"
+
+import { Emoji } from "@/components/Emoji"
 
 interface Props extends InputHTMLAttributes<HTMLInputElement> {}
 
diff --git a/src/routes/Feed/ServiceCard.tsx b/src/routes/Feed/ServiceCard.tsx
index c2171b25e2..af7f8738b1 100644
--- a/src/routes/Feed/ServiceCard.tsx
+++ b/src/routes/Feed/ServiceCard.tsx
@@ -1,8 +1,9 @@
-import { CONFIG } from "site.config"
+import styled from "@emotion/styled"
 import React from "react"
 import { AiFillCodeSandboxCircle } from "react-icons/ai"
-import styled from "@emotion/styled"
-import { Emoji } from "src/components/Emoji"
+
+import { Emoji } from "@/components/Emoji"
+import { CONFIG } from "site.config"
 
 const ServiceCard: React.FC = () => {
   if (!CONFIG.projects) return null
diff --git a/src/routes/Feed/TagList.tsx b/src/routes/Feed/TagList.tsx
index 5b01dfe8dc..537088493a 100644
--- a/src/routes/Feed/TagList.tsx
+++ b/src/routes/Feed/TagList.tsx
@@ -1,8 +1,9 @@
 import styled from "@emotion/styled"
 import { useRouter } from "next/router"
 import React from "react"
-import { Emoji } from "src/components/Emoji"
-import { useTagsQuery } from "src/hooks/useTagsQuery"
+
+import { Emoji } from "@/components/Emoji"
+import { useTagsQuery } from "@/hooks/useTagsQuery"
 
 type Props = {}
 
diff --git a/src/routes/Feed/index.tsx b/src/routes/Feed/index.tsx
index bfa4fa6dad..87523c37c7 100644
--- a/src/routes/Feed/index.tsx
+++ b/src/routes/Feed/index.tsx
@@ -1,15 +1,15 @@
+import styled from "@emotion/styled"
 import { useState } from "react"
 
-import SearchInput from "./SearchInput"
+import ContactCard from "./ContactCard"
 import { FeedHeader } from "./FeedHeader"
 import Footer from "./Footer"
-import styled from "@emotion/styled"
-import TagList from "./TagList"
 import MobileProfileCard from "./MobileProfileCard"
+import PostList from "./PostList"
 import ProfileCard from "./ProfileCard"
+import SearchInput from "./SearchInput"
 import ServiceCard from "./ServiceCard"
-import ContactCard from "./ContactCard"
-import PostList from "./PostList"
+import TagList from "./TagList"
 
 const HEADER_HEIGHT = 73
 
diff --git a/src/styles/colors.ts b/src/styles/colors.ts
index 4dfbce217c..9eeb92167a 100644
--- a/src/styles/colors.ts
+++ b/src/styles/colors.ts
@@ -1,14 +1,14 @@
 import {
-  gray,
   blue,
-  red,
-  green,
-  grayDark,
   blueDark,
-  redDark,
+  gray,
+  grayDark,
+  green,
   greenDark,
   indigo,
   indigoDark,
+  red,
+  redDark,
 } from "@radix-ui/colors"
 
 export type Colors = typeof colors.light & typeof colors.dark
diff --git a/src/styles/media.ts b/src/styles/media.ts
index d6e7a0b13d..8b96acb0d4 100644
--- a/src/styles/media.ts
+++ b/src/styles/media.ts
@@ -1,3 +1,3 @@
-import { variables } from './variables'
+import { variables } from "./variables"
 
 export const respondMobile = `@media (max-width: ${variables.breakpoint}px)`
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index 8b0a605156..48b633a585 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -1,4 +1,5 @@
 import { Theme } from "@emotion/react"
+
 import { Colors, colors } from "./colors"
 import { variables } from "./variables"
 import { zIndexes } from "./zIndexes"
diff --git a/src/types/index.ts b/src/types/index.ts
index 859d083182..d78d63dc5b 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,4 +1,5 @@
 import { NextPage } from "next"
+
 import { AppProps } from "next/app"
 import { ExtendedRecordMap } from "notion-types"
 import { ReactElement, ReactNode } from "react"
diff --git a/tsconfig.json b/tsconfig.json
index bcb518fba8..516481c5b9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,10 @@
     "jsx": "preserve",
     "jsxImportSource": "@emotion/react",
     "incremental": true,
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "site.config.js"],
   "exclude": ["node_modules"]