feat: P1 번들 최적화 - Shiki dynamic import 및 Barrel imports 제거

src/app/_components/Cards/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React from "react";
-import { PostType } from "@/types";
+import { PostType } from "@/types/apiResponseType";
 import Image from "next/image";
 import { Card } from "@/app/_components/Cards/Card";
 import { devideCategoryObject } from "@/utils/getCategoryLink";

src/app/_components/HeadingIndexNav/TOCList.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { HeadingType } from "@/types";
+import { HeadingType } from "@/types/headingType";
 import { useTOCHighlight } from "./useTOCHighlight";
 import styles from "./TOCList.module.scss";
 import Link from "next/link";

src/app/_components/HeadingIndexNav/useTOCHighlight.ts

@@ -1,6 +1,6 @@
 "use client";
 import { useState, useEffect } from "react";
-import { HeadingType } from "@/types";
+import { HeadingType } from "@/types/headingType";
 
 export const useTOCHighlight = (headings: HeadingType[]) => {
   const [activeId, setActiveId] = useState<string | null>(null);

src/app/_components/Posts/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styles from "./index.module.scss";
 import Cards from "@/app/_components/Cards";
 // import { Pagination } from "@/app/_components/Pagination";
-import { PostWithoutMarkdownType } from "@/types";
+import { PostWithoutMarkdownType } from "@/types/apiResponseType";
 
 // ** pagination으로 바꿀때 주석 해제 **//
 

src/app/_components/PostsWithSearch/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { PostWithoutMarkdownType } from "@/types";
+import { PostWithoutMarkdownType } from "@/types/apiResponseType";
 import { Posts } from "@/app/_components/Posts";
 import { Search } from "@/app/_components/Search";
 

src/app/_components/Search/index.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo } from "react";
 import Fuse from "fuse.js";
-import { PostWithoutMarkdownType } from "@/types";
+import { PostWithoutMarkdownType } from "@/types/apiResponseType";
 import styles from "./index.module.scss";
 import { useDebounce } from "@/utils/hooks/useDebounce";
 

src/app/_components/Sidebar/index.tsx

@@ -16,7 +16,7 @@ import styles from "./index.module.scss";
 import { SidebarBtn } from "@/app/_components/Sidebar/SidebarBtn";
 import { useSidebarStore } from "@/app/_components/Sidebar/index.store";
 import { Menu } from "react-feather";
-import { PostWithoutMarkdownType } from "@/types";
+import { PostWithoutMarkdownType } from "@/types/apiResponseType";
 import { getPublishedSubCategories } from "@/app/_components/SidebarWrapper/utils";
 export interface SidebarProps {
   categories: {

src/app/_components/SidebarWrapper/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PostWithoutMarkdownType } from "@/types";
+import { PostWithoutMarkdownType } from "@/types/apiResponseType";
 import { getCategories } from "@/app/api/dato/getCategories";
 
 import { formatSidebarData } from "@/app/_components/SidebarWrapper/utils";

src/app/_components/SidebarWrapper/utils/sidebar.tsx

@@ -1,4 +1,4 @@
-import { PostWithoutMarkdownType } from "@/types";
+import { PostWithoutMarkdownType } from "@/types/apiResponseType";
 import { devideCategoryObject } from "@/utils/getCategoryLink";
 import { CategoryType, LinkType, SubCategoryType } from "junyeol-components";
 import Link from "next/link";

src/app/about/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from "next";
 import { getPostById } from "@/app/api/dato/getPostById";
-import { PostType } from "@/types";
+import { PostType } from "@/types/apiResponseType";
 import Markdown from "@/app/post/[id]/Markdown";
 
 export default async function About() {

src/app/post/[id]/Markdown/_components/Code.tsx

@@ -1,6 +1,5 @@
 "use client";
 import React, { PropsWithChildren, useEffect, useState } from "react";
-import { codeToHtml } from "shiki";
 import styles from "./Code.module.scss";
 
 interface CodeProps extends PropsWithChildren {
@@ -14,6 +13,7 @@ export default function Code({ match, children }: CodeProps) {
 
   useEffect(() => {
     const highlight = async () => {
+      const { codeToHtml } = await import("shiki");
       const result = await codeToHtml(code, {
         lang: language,
         theme: "github-dark",

src/app/post/[id]/Markdown/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 "use client";
 
-import { PostType } from "@/types";
+import { PostType } from "@/types/apiResponseType";
 import "github-markdown-css/github-markdown-light.css";
 import MarkdownLibrary from "react-markdown";
 import remarkGfm from "remark-gfm";

src/app/post/[id]/page.tsx

@@ -4,7 +4,7 @@ import { HeadingIndexNav } from "@/app/_components/HeadingIndexNav";
 import Markdown from "@/app/post/[id]/Markdown";
 import MixpanelPageView from "@/app/post/[id]/MixpanelPageView";
 import WebVitalsTracker from "@/app/post/[id]/WebVitalsTracker";
-import { PostType } from "@/types";
+import { PostType } from "@/types/apiResponseType";
 import { Metadata } from "next";
 import styles from "./index.module.scss";
 

src/app/posts/[category]/[subCategory]/page.tsx

@@ -1,6 +1,7 @@
 import { Posts } from "@/app/_components/Posts";
 import { getPosts } from "@/app/api/dato/getPosts";
-import { PostWithoutMarkdownType, SearchParamsType } from "@/types";
+import { PostWithoutMarkdownType } from "@/types/apiResponseType";
+import { SearchParamsType } from "@/types/nextSegmentType";
 import { CategoryType } from "junyeol-components";
 import { Metadata } from "next";
 import React from "react";

src/app/posts/[category]/page.tsx

@@ -1,6 +1,7 @@
 import { Posts } from "@/app/_components/Posts";
 import { getPosts } from "@/app/api/dato/getPosts";
-import { PostWithoutMarkdownType, SearchParamsType } from "@/types";
+import { PostWithoutMarkdownType } from "@/types/apiResponseType";
+import { SearchParamsType } from "@/types/nextSegmentType";
 import { CategoryType } from "junyeol-components";
 import { Metadata } from "next";
 import React from "react";

src/app/posts/page.tsx

@@ -1,6 +1,7 @@
 import { getPosts } from "@/app/api/dato/getPosts";
 import { Metadata } from "next";
-import { PostType, PostWithoutMarkdownType, SearchParamsType } from "@/types";
+import { PostType, PostWithoutMarkdownType } from "@/types/apiResponseType";
+import { SearchParamsType } from "@/types/nextSegmentType";
 import { PostsWithSearch } from "@/app/_components/PostsWithSearch";
 import styles from "./page.module.scss";
 // ** pagination으로 바꿀때 주석 해제 **//

src/app/rss.xml/generateRss.ts

@@ -1,5 +1,5 @@
 import { getPosts } from "@/app/api/dato/getPosts";
-import { PostType } from "@/types";
+import { PostType } from "@/types/apiResponseType";
 import { BASE_URL } from "@/utils/constant";
 import Rss from "rss";
 

src/app/sitemap.ts

@@ -1,6 +1,6 @@
 import { getPostIds } from "@/app/api/dato/getPostIds";
 import { getPosts } from "@/app/api/dato/getPosts";
-import { PostType } from "@/types";
+import { PostType } from "@/types/apiResponseType";
 import { BASE_URL } from "@/utils/constant";
 import { MetadataRoute } from "next";
 

src/libs/paginate.ts

@@ -1,4 +1,4 @@
-import { PostType } from "@/types";
+import { PostType } from "@/types/apiResponseType";
 
 interface PaginateParams {
   posts: PostType[];

src/utils/extractHeadings.ts

@@ -1,4 +1,4 @@
-import { HeadingType } from "@/types";
+import { HeadingType } from "@/types/headingType";
 
 export const extractHeadings = (markdown: string): HeadingType[] => {
   const regex = /^(#{2,5})\s+(.*)$/gm;

todolist.md

@@ -26,24 +26,29 @@ export const getPosts = cache(_getPosts);
 
 ### P1 - High (1주 내 적용)
 
-- [ ] **Shiki dynamic import 적용** (`bundle-dynamic-imports`)
-  - 파일: `src/app/post/[id]/Markdown/_components/Code.tsx`
-  - 문제: shiki는 번들 사이즈가 큰 라이브러리
-  - 개선: dynamic import로 코드 스플리팅
+- [x] **Shiki dynamic import 적용** (`bundle-dynamic-imports`) ✅ 완료
+  - ✅ `src/app/post/[id]/Markdown/_components/Code.tsx` - dynamic import 적용
+  - 효과: shiki 라이브러리 코드 스플리팅으로 초기 번들 사이즈 감소
 
 ```typescript
-const highlightCode = async (code: string, language: string) => {
+// 적용된 코드
+const highlight = async () => {
   const { codeToHtml } = await import("shiki");
-  return codeToHtml(code, { lang: language, theme: "github-dark" });
+  const result = await codeToHtml(code, {
+    lang: language,
+    theme: "github-dark",
+  });
+  setHtml(result);
 };
 ```
 
-- [ ] **Barrel imports 제거** (`bundle-barrel-imports`)
-  - 파일: `src/types/index.ts`
-  - 문제: `export * from` 패턴이 tree-shaking 방해
-  - 개선: 직접 import 사용
-    - Before: `import { PostType } from "@/types"`
-    - After: `import { PostType } from "@/types/apiResponseType"`
+- [x] **Barrel imports 제거** (`bundle-barrel-imports`) ✅ 완료
+  - ✅ `src/types/index.ts` 삭제
+  - ✅ 19개 파일 직접 import로 변경
+  - 효과: Tree-shaking 최적화 활성화
+    - `HeadingType` → `@/types/headingType`
+    - `PostType`, `PostWithoutMarkdownType` → `@/types/apiResponseType`
+    - `SearchParamsType` → `@/types/nextSegmentType`
 
 ### P2 - Medium (2주 내 적용)
 
@@ -156,4 +161,4 @@ posts/page.tsx (Server Component)
 
 ---
 
-*Last Updated: 2026-01-18*
+*Last Updated: 2026-01-18 (P0, P1 완료)*