절대 경로 설정

app/not-found.tsx

@@ -1,11 +1,11 @@
 import Image from "next/image";
 
-import { getSortedPostsAndProjectsData } from "../common/utils/posts";
+import { getSortedPostsAndProjectsData } from "@/common/utils/posts";
 
-import NotFoundHeader from "../components/NotFound/Header";
-import RecentPosts from "../components/Home/RecentPosts";
+import NotFoundHeader from "@/components/NotFound/Header";
+import RecentPosts from "@/components/Home/RecentPosts";
 
-import styles from "../styles/NotFound.module.css";
+import styles from "@/styles/NotFound.module.css";
 
 const POSTING_VIEW_COUNT = 3;
 

app/page.tsx

@@ -1,7 +1,7 @@
-import Introduce from "../components/Home/Introduce";
-import PostList from "../common/components/PostList";
+import Introduce from "@/components/Home/Introduce";
+import PostList from "@/common/components/PostList";
 
-import { getSortedPostsAndProjectsData } from "../common/utils/posts";
+import { getSortedPostsAndProjectsData } from "@/common/utils/posts";
 
 import type { Metadata } from "next";
 

app/post/[id]/page.tsx

@@ -1,15 +1,15 @@
 import Image from "next/image";
 
-import { getAllPostIds, getPostData } from "../../../common/utils/posts";
+import { getAllPostIds, getPostData } from "@/common/utils/posts";
 
-import MDXRemote from "../../../common/components/MDXRemote";
-import TopScrollButton from "../../../common/components/TopScrollButton";
-import TableOfContents from "../../../common/components/TableOfContents";
+import MDXRemote from "@/common/components/MDXRemote";
+import TopScrollButton from "@/common/components/TopScrollButton";
+import TableOfContents from "@/common/components/TableOfContents";
 
 import styles from "./post.module.css";
 
 import type { Metadata } from "next";
-import type { Params } from "../../../common/types/params";
+import type { Params } from "@/common/types/params";
 
 const getPost = async (params: Params) => {
   const postData = await getPostData({ postType: "posts", id: params.id });

app/posts/page.tsx

@@ -1,6 +1,6 @@
-import PostList from "../../common/components/PostList";
+import PostList from "@/common/components/PostList";
 
-import { getSortedPostsData } from "../../common/utils/posts";
+import { getSortedPostsData } from "@/common/utils/posts";
 
 import type { Metadata } from "next";
 

app/project/[id]/page.tsx

@@ -1,15 +1,15 @@
 import Image from "next/image";
 
-import { getAllPostIds, getPostData } from "../../../common/utils/posts";
+import { getAllPostIds, getPostData } from "@/common/utils/posts";
 
-import MDXRemote from "../../../common/components/MDXRemote";
-import TopScrollButton from "../../../common/components/TopScrollButton";
-import TableOfContents from "../../../common/components/TableOfContents";
+import MDXRemote from "@/common/components/MDXRemote";
+import TopScrollButton from "@/common/components/TopScrollButton";
+import TableOfContents from "@/common/components/TableOfContents";
 
 import styles from "./project.module.css";
 
 import type { Metadata } from "next";
-import type { Params } from "../../../common/types/params";
+import type { Params } from "@/common/types/params";
 
 const getProject = async (params: Params) => {
   const postData = await getPostData({ postType: "projects", id: params.id });

app/projects/page.tsx

@@ -1,8 +1,8 @@
 import Head from "next/head";
 
-import PostList from "../../common/components/PostList";
+import PostList from "@/common/components/PostList";
 
-import { getSortedPostsData } from "../../common/utils/posts";
+import { getSortedPostsData } from "@/common/utils/posts";
 
 import type { Metadata } from "next";
 

common/components/PostList/PostItem/index.tsx

@@ -6,7 +6,7 @@ import Tag from "./Tag";
 import styles from "./PostItem.module.css";
 
 import type { NextPage } from "next";
-import type { PostData } from "../../../utils/posts";
+import type { PostData } from "@/common/utils/posts";
 
 interface PostItemProps {
   href: string;

common/components/PostList/index.tsx

@@ -3,7 +3,7 @@ import PostItem from "./PostItem";
 import styles from "./PostList.module.css";
 
 import type { NextPage } from "next";
-import type { PostData } from "../../utils/posts";
+import type { PostData } from "@/common/utils/posts";
 
 interface PostListProps {
   postList: PostData[];

common/components/TableOfContents/index.tsx

@@ -8,7 +8,7 @@ import type { MouseEvent, CSSProperties } from "react";
 import type {
   TableOfContent as TableOfContentType,
   TableOfContents as TableOfContentsType,
-} from "../../utils/posts";
+} from "@/common/utils/posts";
 
 import styles from "./TableOfContents.module.css";
 

components/Home/RecentPosts/index.tsx

@@ -1,9 +1,9 @@
-import PostList from "../../../common/components/PostList";
+import PostList from "@/common/components/PostList";
 
 import styles from "./RecentPost.module.css";
 
 import type { NextPage } from "next";
-import type { PostData } from "../../../common/utils/posts";
+import type { PostData } from "@/common/utils/posts";
 
 interface RecentPostsProps {
   postList: PostData[];

components/Layout/Container/index.tsx

@@ -6,7 +6,7 @@ import Navigation from "../Navigation";
 import Footer from "../Footer";
 import ThemeButton from "../ThemeButton";
 
-import "../../../styles/globals.css";
+import "@/styles/globals.css";
 import styles from "./Container.module.css";
 
 interface ContainerProps {

components/Layout/Navigation/index.tsx

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
-import navLinks from "../../../common/routes";
+import navLinks from "@/common/routes";
 import ProfileButton from "../ProfileButton";
 
 import styles from "./Navigation.module.css";

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -22,7 +18,13 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/components/*": ["components/*"],
+      "@/common/*": ["common/*"],
+      "@/styles/*": ["styles/*"]
+    }
   },
   "include": [
     "next-env.d.ts",
@@ -31,7 +33,5 @@
     "lib/posts.ts",
     ".next/types/**/*.ts"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }