From f9bce9c69233daf3ed4e6924f9f6223d01d0ecf3 Mon Sep 17 00:00:00 2001
From: yurim <yurim@toss.im>
Date: Sat, 30 Aug 2025 13:13:48 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20new-home=EC=9D=84=20=EA=B8=B0=EB=B3=B8?=
 =?UTF-8?q?=ED=99=88(/timline)=EC=9C=BC=EB=A1=9C=20=EB=91=90=EA=B3=A0,=20?=
 =?UTF-8?q?=EA=B8=B0=EC=A1=B4=20=ED=99=88=EC=9D=80=20legacy-timeline=20?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fundamentals/today-i-learned/src/App.tsx      |   6 +-
 .../features/discussions/PostCard.tsx         |   4 +-
 .../src/components/shared/layout/Layout.tsx   |   2 +-
 .../src/components/shared/ui/Avatar.tsx       |   2 +-
 .../src/components/shared/ui/Badge.tsx        |   2 +-
 .../src/components/shared/ui/Button.tsx       |   2 +-
 .../src/components/shared/ui/Card.tsx         |   2 +-
 .../src/components/shared/ui/Input.tsx        |   2 +-
 .../src/components/shared/ui/Select.tsx       |   9 +-
 .../src/components/shared/ui/Skeleton.tsx     |   9 +-
 .../src/{lib/utils => libs}/cn.ts             |   0
 .../pages/legacy-timeline/TimelinePage.tsx    |  66 ++++++
 .../components/CategoryTabs.tsx               |   0
 .../components/CreatePost.tsx                 |   0
 .../components/CreatePostForm.tsx             |   0
 .../legacy-timeline/components/PostList.tsx   | 115 ++++++++++
 .../src/pages/newHome/components/PostList.tsx | 117 ----------
 .../src/pages/newHome/index.tsx               | 179 ----------------
 .../pages/postDetail/components/Comment.tsx   |  45 ++--
 .../postDetail/components/CommentInput.tsx    |  14 +-
 .../postDetail/components/CommentList.tsx     |   4 +-
 .../postDetail/components/PostActions.tsx     |  12 +-
 .../postDetail/components/PostContent.tsx     |  10 +-
 .../postDetail/components/PostHeader.tsx      |  28 ++-
 .../pages/postDetail/hooks/usePostDetail.ts   | 105 ++++-----
 .../src/pages/{newHome => timeline}/README.md |   0
 .../src/pages/timeline/TimelinePage.tsx       | 199 ++++++++++++++----
 .../components/FilterSection.tsx              |   0
 .../components/MonthlyChallenge.tsx           |  18 +-
 .../components/NewHomeHeader.tsx              |   0
 .../components/PostInput.tsx                  |   0
 .../pages/timeline/components/PostList.tsx    | 114 +++++-----
 .../components/PostMoreMenu.tsx               |   0
 .../components/SprintChallenge.tsx            |   0
 .../hooks/useWritePostModal.tsx               |   0
 .../{newHome => timeline}/utils/types.ts      |   0
 36 files changed, 537 insertions(+), 529 deletions(-)
 rename fundamentals/today-i-learned/src/{lib/utils => libs}/cn.ts (100%)
 create mode 100644 fundamentals/today-i-learned/src/pages/legacy-timeline/TimelinePage.tsx
 rename fundamentals/today-i-learned/src/pages/{timeline => legacy-timeline}/components/CategoryTabs.tsx (100%)
 rename fundamentals/today-i-learned/src/pages/{timeline => legacy-timeline}/components/CreatePost.tsx (100%)
 rename fundamentals/today-i-learned/src/pages/{timeline => legacy-timeline}/components/CreatePostForm.tsx (100%)
 create mode 100644 fundamentals/today-i-learned/src/pages/legacy-timeline/components/PostList.tsx
 delete mode 100644 fundamentals/today-i-learned/src/pages/newHome/components/PostList.tsx
 delete mode 100644 fundamentals/today-i-learned/src/pages/newHome/index.tsx
 rename fundamentals/today-i-learned/src/pages/{newHome => timeline}/README.md (100%)
 rename fundamentals/today-i-learned/src/pages/{newHome => timeline}/components/FilterSection.tsx (100%)
 rename fundamentals/today-i-learned/src/pages/{newHome => timeline}/components/MonthlyChallenge.tsx (91%)
 rename fundamentals/today-i-learned/src/pages/{newHome => timeline}/components/NewHomeHeader.tsx (100%)
 rename fundamentals/today-i-learned/src/pages/{newHome => timeline}/components/PostInput.tsx (100%)
 rename fundamentals/today-i-learned/src/pages/{newHome => timeline}/components/PostMoreMenu.tsx (100%)
 rename fundamentals/today-i-learned/src/pages/{newHome => timeline}/components/SprintChallenge.tsx (100%)
 rename fundamentals/today-i-learned/src/pages/{newHome => timeline}/hooks/useWritePostModal.tsx (100%)
 rename fundamentals/today-i-learned/src/pages/{newHome => timeline}/utils/types.ts (100%)

diff --git a/fundamentals/today-i-learned/src/App.tsx b/fundamentals/today-i-learned/src/App.tsx
index 48ba7f64..766ff572 100644
--- a/fundamentals/today-i-learned/src/App.tsx
+++ b/fundamentals/today-i-learned/src/App.tsx
@@ -1,9 +1,9 @@
 import { Route, Routes } from "react-router-dom";
 import { Layout } from "./components/shared/layout/Layout";
-import { NewHomePage } from "./pages/newHome";
+import { LegacyTimelinePage } from "./pages/legacy-timeline/TimelinePage";
+import { PostDetailPage } from "./pages/postDetail/PostDetailPage";
 import { MyPage } from "./pages/profile/MyPage";
 import { TimelinePage } from "./pages/timeline/TimelinePage";
-import { PostDetailPage } from "./pages/postDetail/PostDetailPage";
 
 function App() {
   return (
@@ -11,7 +11,7 @@ function App() {
       <Routes>
         <Route path="/" element={<TimelinePage />} />
         <Route path="/profile" element={<MyPage />} />
-        <Route path="/new-home" element={<NewHomePage />} />
+        <Route path="/legacy-timeline" element={<LegacyTimelinePage />} />
         <Route path="/post/:id" element={<PostDetailPage />} />
       </Routes>
     </Layout>
diff --git a/fundamentals/today-i-learned/src/components/features/discussions/PostCard.tsx b/fundamentals/today-i-learned/src/components/features/discussions/PostCard.tsx
index 43d4766d..e8d05c2d 100644
--- a/fundamentals/today-i-learned/src/components/features/discussions/PostCard.tsx
+++ b/fundamentals/today-i-learned/src/components/features/discussions/PostCard.tsx
@@ -2,8 +2,8 @@ import { Heart, MessageCircle, ChevronUp } from "lucide-react";
 import { useState } from "react";
 import { Avatar } from "@/components/shared/ui/Avatar";
 import { Card } from "@/components/shared/ui/Card";
-import { useWritePostModal } from "../../../pages/newHome/hooks/useWritePostModal";
-import { PostMoreMenu } from "../../../pages/newHome/components/PostMoreMenu";
+import { useWritePostModal } from "../../../pages/timeline/hooks/useWritePostModal";
+import { PostMoreMenu } from "../../../pages/timeline/components/PostMoreMenu";
 import type { GitHubDiscussion } from "@/api/remote/discussions";
 import { PostDetailModal } from "@/components/features/discussions/PostDetailModal";
 
diff --git a/fundamentals/today-i-learned/src/components/shared/layout/Layout.tsx b/fundamentals/today-i-learned/src/components/shared/layout/Layout.tsx
index c2375612..4a1ca98d 100644
--- a/fundamentals/today-i-learned/src/components/shared/layout/Layout.tsx
+++ b/fundamentals/today-i-learned/src/components/shared/layout/Layout.tsx
@@ -1,6 +1,6 @@
 import { useLocation } from "react-router-dom";
 import { OneNavigationReact } from "@shared/components";
-import { NewHomeHeader } from "@/pages/newHome/components/NewHomeHeader";
+import { NewHomeHeader } from "@/pages/timeline/components/NewHomeHeader";
 
 export const Layout: React.FC<{ children: React.ReactNode }> = ({
   children
diff --git a/fundamentals/today-i-learned/src/components/shared/ui/Avatar.tsx b/fundamentals/today-i-learned/src/components/shared/ui/Avatar.tsx
index d5cda22d..db6aa113 100644
--- a/fundamentals/today-i-learned/src/components/shared/ui/Avatar.tsx
+++ b/fundamentals/today-i-learned/src/components/shared/ui/Avatar.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils/cn";
+import { cn } from "@/libs/cn";
 
 const avatarVariants = cva(
   "relative inline-flex shrink-0 overflow-hidden rounded-full bg-gray-100",
diff --git a/fundamentals/today-i-learned/src/components/shared/ui/Badge.tsx b/fundamentals/today-i-learned/src/components/shared/ui/Badge.tsx
index bc0c229a..dbc73f27 100644
--- a/fundamentals/today-i-learned/src/components/shared/ui/Badge.tsx
+++ b/fundamentals/today-i-learned/src/components/shared/ui/Badge.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils/cn";
+import { cn } from "@/libs/cn";
 
 const badgeVariants = cva(
   "inline-flex items-center justify-center px-5 py-4 text-sm font-bold transition-colors outline-none focus:outline-none focus-visible:outline-none active:outline-none rounded-[200px] tracking-tight leading-tight",
diff --git a/fundamentals/today-i-learned/src/components/shared/ui/Button.tsx b/fundamentals/today-i-learned/src/components/shared/ui/Button.tsx
index 625ccb54..3d63fae9 100644
--- a/fundamentals/today-i-learned/src/components/shared/ui/Button.tsx
+++ b/fundamentals/today-i-learned/src/components/shared/ui/Button.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils/cn";
+import { cn } from "@/libs/cn";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full font-bold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
diff --git a/fundamentals/today-i-learned/src/components/shared/ui/Card.tsx b/fundamentals/today-i-learned/src/components/shared/ui/Card.tsx
index 175d263f..41e05744 100644
--- a/fundamentals/today-i-learned/src/components/shared/ui/Card.tsx
+++ b/fundamentals/today-i-learned/src/components/shared/ui/Card.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils/cn";
+import { cn } from "@/libs/cn";
 
 const cardVariants = cva("rounded-2xl border bg-white transition-all", {
   variants: {
diff --git a/fundamentals/today-i-learned/src/components/shared/ui/Input.tsx b/fundamentals/today-i-learned/src/components/shared/ui/Input.tsx
index 517b5eab..85d06c2e 100644
--- a/fundamentals/today-i-learned/src/components/shared/ui/Input.tsx
+++ b/fundamentals/today-i-learned/src/components/shared/ui/Input.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils/cn";
+import { cn } from "@/libs/cn";
 
 const inputVariants = cva(
   "flex w-full border-0 bg-transparent text-base placeholder:text-gray-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
diff --git a/fundamentals/today-i-learned/src/components/shared/ui/Select.tsx b/fundamentals/today-i-learned/src/components/shared/ui/Select.tsx
index c8855ba1..ea550df5 100644
--- a/fundamentals/today-i-learned/src/components/shared/ui/Select.tsx
+++ b/fundamentals/today-i-learned/src/components/shared/ui/Select.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ChevronDown } from "lucide-react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils/cn";
+import { cn } from "@/libs/cn";
 
 const selectVariants = cva(
   "flex items-center justify-center gap-1.5 rounded-lg border border-black/8 bg-white text-sm font-bold transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 tracking-tight leading-[160%]",
@@ -89,7 +89,12 @@ const Select = React.forwardRef<HTMLButtonElement, SelectProps>(
           onClick={handleToggle}
           {...props}
         >
-          <span className={cn("truncate text-black/60", !selectedOption && "text-black/60")}>
+          <span
+            className={cn(
+              "truncate text-black/60",
+              !selectedOption && "text-black/60"
+            )}
+          >
             {displayText}
           </span>
           <ChevronDown
diff --git a/fundamentals/today-i-learned/src/components/shared/ui/Skeleton.tsx b/fundamentals/today-i-learned/src/components/shared/ui/Skeleton.tsx
index eb03ebc8..f0538476 100644
--- a/fundamentals/today-i-learned/src/components/shared/ui/Skeleton.tsx
+++ b/fundamentals/today-i-learned/src/components/shared/ui/Skeleton.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils/cn";
+import { cn } from "@/libs/cn";
 
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   className?: string;
@@ -7,11 +7,8 @@ interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
 export function Skeleton({ className, ...props }: SkeletonProps) {
   return (
     <div
-      className={cn(
-        "animate-pulse rounded-md bg-black/10",
-        className
-      )}
+      className={cn("animate-pulse rounded-md bg-black/10", className)}
       {...props}
     />
   );
-}
\ No newline at end of file
+}
diff --git a/fundamentals/today-i-learned/src/lib/utils/cn.ts b/fundamentals/today-i-learned/src/libs/cn.ts
similarity index 100%
rename from fundamentals/today-i-learned/src/lib/utils/cn.ts
rename to fundamentals/today-i-learned/src/libs/cn.ts
diff --git a/fundamentals/today-i-learned/src/pages/legacy-timeline/TimelinePage.tsx b/fundamentals/today-i-learned/src/pages/legacy-timeline/TimelinePage.tsx
new file mode 100644
index 00000000..1c0713e3
--- /dev/null
+++ b/fundamentals/today-i-learned/src/pages/legacy-timeline/TimelinePage.tsx
@@ -0,0 +1,66 @@
+import { useCallback, useState } from "react";
+import { CreatePost } from "./components/CreatePost";
+import { PostList } from "./components/PostList";
+import { MyStreak } from "../profile/components/MyStreak";
+import { CategoryTabs, TabContent } from "./components/CategoryTabs";
+import { WeeklyTop5 } from "@/components/features/discussions/WeeklyTop5";
+import type { PostCategory } from "@/types";
+import { useCreateDiscussion } from "@/api/hooks/useDiscussions";
+
+export function LegacyTimelinePage() {
+  const [activeTab, setActiveTab] = useState<PostCategory>("latest");
+  const createDiscussionMutation = useCreateDiscussion();
+
+  const handleCreatePost = useCallback(
+    async (title: string, content: string) => {
+      await createDiscussionMutation.mutateAsync({
+        title,
+        body: content
+      });
+    },
+    [createDiscussionMutation]
+  );
+
+  const handleTabChange = useCallback((tab: PostCategory) => {
+    setActiveTab(tab);
+  }, []);
+
+  // 탭별 PostList props 조건부 계산
+  const getPostListProps = () => {
+    switch (activeTab) {
+      case "latest":
+        return { sortBy: "latest" as const };
+      case "weekly":
+        return { sortBy: "popularity" as const };
+      case "hall-of-fame":
+        return {
+          sortBy: "latest" as const,
+          filterBy: { label: "성지 ⛲" }
+        };
+      default:
+        return { sortBy: "latest" as const };
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+      <div className="lg:col-span-2 space-y-10">
+        <MyStreak />
+        <CreatePost
+          onSubmit={handleCreatePost}
+          isLoading={createDiscussionMutation.isPending}
+        />
+        <CategoryTabs activeTab={activeTab} onTabChange={handleTabChange} />
+        <TabContent activeTab={activeTab}>
+          <PostList {...getPostListProps()} />
+        </TabContent>
+      </div>
+
+      <div className="lg:col-span-1">
+        <div className="sticky top-4">
+          <WeeklyTop5 />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/fundamentals/today-i-learned/src/pages/timeline/components/CategoryTabs.tsx b/fundamentals/today-i-learned/src/pages/legacy-timeline/components/CategoryTabs.tsx
similarity index 100%
rename from fundamentals/today-i-learned/src/pages/timeline/components/CategoryTabs.tsx
rename to fundamentals/today-i-learned/src/pages/legacy-timeline/components/CategoryTabs.tsx
diff --git a/fundamentals/today-i-learned/src/pages/timeline/components/CreatePost.tsx b/fundamentals/today-i-learned/src/pages/legacy-timeline/components/CreatePost.tsx
similarity index 100%
rename from fundamentals/today-i-learned/src/pages/timeline/components/CreatePost.tsx
rename to fundamentals/today-i-learned/src/pages/legacy-timeline/components/CreatePost.tsx
diff --git a/fundamentals/today-i-learned/src/pages/timeline/components/CreatePostForm.tsx b/fundamentals/today-i-learned/src/pages/legacy-timeline/components/CreatePostForm.tsx
similarity index 100%
rename from fundamentals/today-i-learned/src/pages/timeline/components/CreatePostForm.tsx
rename to fundamentals/today-i-learned/src/pages/legacy-timeline/components/CreatePostForm.tsx
diff --git a/fundamentals/today-i-learned/src/pages/legacy-timeline/components/PostList.tsx b/fundamentals/today-i-learned/src/pages/legacy-timeline/components/PostList.tsx
new file mode 100644
index 00000000..19fc7fbb
--- /dev/null
+++ b/fundamentals/today-i-learned/src/pages/legacy-timeline/components/PostList.tsx
@@ -0,0 +1,115 @@
+import { useCallback } from "react";
+import { PostCard } from "@/components/features/discussions/LegacyPostCard";
+import { Button } from "@/components/shared/ui/Button";
+import { LoadingSpinner } from "@/components/shared/ui/LoadingSpinner";
+import { useInfiniteDiscussions } from "@/api/hooks/useDiscussions";
+import { useIntersectionObserver } from "@/hooks/useIntersectionObserver";
+
+interface PostListProps {
+  owner?: string;
+  repo?: string;
+  categoryName?: string;
+  sortBy?: "latest" | "lastActivity" | "created" | "popularity";
+  filterBy?: {
+    label?: string;
+  };
+}
+
+export function PostList({
+  owner,
+  repo,
+  categoryName,
+  sortBy = "latest",
+  filterBy
+}: PostListProps) {
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    error,
+    refetch
+  } = useInfiniteDiscussions({ owner, repo, categoryName, sortBy, filterBy });
+
+  const handleLoadMore = useCallback(() => {
+    if (hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  const { elementRef } = useIntersectionObserver({
+    enabled: hasNextPage && !isFetchingNextPage,
+    onIntersect: handleLoadMore,
+    rootMargin: "300px"
+  });
+
+  const handleComment = (id: string) => {
+    // TODO: 댓글 페이지로 이동
+  };
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <LoadingSpinner text="게시물을 불러오는 중..." variant="primary" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-6 text-center">
+        <h3 className="text-lg font-semibold text-red-800 dark:text-red-200 mb-2">
+          게시물을 불러올 수 없습니다
+        </h3>
+        <p className="text-red-600 dark:text-red-400 mb-4">{error.message}</p>
+        <Button onClick={() => refetch()} variant="default">
+          다시 시도
+        </Button>
+      </div>
+    );
+  }
+
+  const allDiscussions = data?.pages.flatMap((page) => page.discussions) ?? [];
+
+  if (allDiscussions.length === 0) {
+    return (
+      <div className="rounded-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-8 text-center">
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+          아직 게시물이 없습니다
+        </h3>
+        <p className="text-gray-600 dark:text-gray-400 mb-4">
+          첫 번째 Today I Learned 게시물을 작성해보세요!
+        </p>
+        <Button variant="default">새 글 작성하기</Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        {allDiscussions.map((discussion, index) => (
+          <PostCard
+            key={discussion.id}
+            discussion={discussion}
+            onComment={handleComment}
+            isLast={index === allDiscussions.length - 1}
+            isLoading={isFetchingNextPage}
+          />
+        ))}
+      </div>
+
+      {hasNextPage && (
+        <div ref={elementRef} className="flex justify-center py-8">
+          {isFetchingNextPage && (
+            <LoadingSpinner
+              text="더 많은 게시물 불러오는 중..."
+              variant="primary"
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/fundamentals/today-i-learned/src/pages/newHome/components/PostList.tsx b/fundamentals/today-i-learned/src/pages/newHome/components/PostList.tsx
deleted file mode 100644
index 32e97fa8..00000000
--- a/fundamentals/today-i-learned/src/pages/newHome/components/PostList.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { useCallback } from "react";
-import {
-  PostCard,
-  PostCardSkeleton
-} from "../../../components/features/discussions/PostCard";
-import { useInfiniteDiscussions } from "@/api/hooks/useDiscussions";
-import { useIntersectionObserver } from "@/hooks/useIntersectionObserver";
-
-interface PostListProps {
-  owner?: string;
-  repo?: string;
-  categoryName?: string;
-  sortBy?: "latest" | "lastActivity" | "created" | "popularity";
-  filterBy?: {
-    label?: string;
-  };
-  onLike: (postId: string) => void;
-  onComment: (postId: string) => void;
-  onUpvote: (postId: string) => void;
-  onDelete?: (postId: string) => void;
-}
-
-export function PostList({
-  owner,
-  repo,
-  categoryName,
-  sortBy = "latest",
-  filterBy,
-  onLike,
-  onComment,
-  onUpvote,
-  onDelete
-}: PostListProps) {
-  const {
-    data: postsData,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage,
-    isLoading
-  } = useInfiniteDiscussions({
-    owner,
-    repo,
-    categoryName,
-    sortBy,
-    filterBy
-  });
-
-  const handleLoadMore = useCallback(() => {
-    if (hasNextPage && !isFetchingNextPage) {
-      fetchNextPage();
-    }
-  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
-
-  const { elementRef } = useIntersectionObserver({
-    enabled: hasNextPage && !isFetchingNextPage,
-    onIntersect: handleLoadMore,
-    rootMargin: "300px"
-  });
-
-  const discussions =
-    postsData?.pages.flatMap((page) => page.discussions) || [];
-  if (isLoading) {
-    return (
-      <div className="w-full">
-        {[...new Array(3)].map((_, index) => (
-          <div key={index} className={index < 2 ? "mb-6" : ""}>
-            <PostCardSkeleton />
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  if (discussions.length === 0) {
-    return (
-      <div className="w-full flex flex-col items-center justify-center py-12 px-4">
-        <div className="text-center space-y-3">
-          <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto">
-            <span className="text-2xl">📝</span>
-          </div>
-          <h3 className="text-lg font-medium text-gray-900">
-            아직 포스트가 없습니다
-          </h3>
-          <p className="text-gray-500 text-sm max-w-md">
-            첫 번째 포스트를 작성해서 오늘 배운 내용을 공유해보세요!
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="w-full">
-      {discussions.map((discussion, index) => (
-        <div
-          key={discussion.id}
-          className={index < discussions.length - 1 ? "mb-6" : ""}
-        >
-          <PostCard
-            discussion={discussion}
-            onLike={onLike}
-            onComment={onComment}
-            onUpvote={onUpvote}
-            onDelete={onDelete}
-          />
-        </div>
-      ))}
-
-      {/* Load more trigger */}
-      {hasNextPage && (
-        <div ref={elementRef} className="w-full py-4 flex justify-center">
-          {isFetchingNextPage ? <PostCardSkeleton /> : null}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/fundamentals/today-i-learned/src/pages/newHome/index.tsx b/fundamentals/today-i-learned/src/pages/newHome/index.tsx
deleted file mode 100644
index 41fb9fa0..00000000
--- a/fundamentals/today-i-learned/src/pages/newHome/index.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import * as React from "react";
-import { PostInput } from "./components/PostInput";
-import { FilterSection } from "./components/FilterSection";
-import { PostList } from "./components/PostList";
-import { WeeklyTop5 } from "@/components/features/discussions/WeeklyTop5";
-import { SprintChallenge } from "./components/SprintChallenge";
-import { useAuth } from "@/contexts/AuthContext";
-import type { SortOption } from "./utils/types";
-import {
-  useCreateDiscussion,
-  useToggleDiscussionReaction
-} from "@/api/hooks/useDiscussions";
-import { useErrorHandler } from "@/hooks/useErrorHandler";
-import { useToast } from "@/components/shared/ui/Toast";
-
-export function NewHomePage() {
-  const { user } = useAuth();
-  const [sortOption, setSortOption] = React.useState<SortOption>("newest");
-
-  const createPostMutation = useCreateDiscussion();
-  const { handleApiError } = useErrorHandler();
-  const { success: showSuccessToast } = useToast();
-
-  // sortOption에 따른 API 파라미터 계산
-  const getPostListProps = () => {
-    switch (sortOption) {
-      case "newest":
-        return {
-          categoryName: "Today I Learned",
-          sortBy: "latest" as const
-        };
-      case "realtime":
-        return {
-          categoryName: "Today I Learned",
-          sortBy: "lastActivity" as const
-        };
-      case "hall-of-fame":
-        return {
-          categoryName: "Today I Learned",
-          sortBy: "latest" as const,
-          filterBy: { label: "성지 ⛲" }
-        };
-      default:
-        return {
-          categoryName: "Today I Learned",
-          sortBy: "latest" as const
-        };
-    }
-  };
-
-  const handlePostSubmit = async (data: { title: string; content: string }) => {
-    try {
-      await createPostMutation.mutateAsync({
-        title: data.title,
-        body: data.content
-      });
-      showSuccessToast(
-        "포스트 작성 완료",
-        "오늘 배운 내용이 성공적으로 게시되었습니다."
-      );
-    } catch (error) {
-      handleApiError(error, "포스트 작성");
-    }
-  };
-
-  const handleSortChange = (option: SortOption) => {
-    setSortOption(option);
-  };
-
-  const toggleReactionMutation = useToggleDiscussionReaction();
-
-  const handleLike = async (postId: string) => {
-    if (!user?.accessToken) return;
-
-    try {
-      await toggleReactionMutation.mutateAsync({
-        subjectId: postId,
-        isReacted: false, // TODO: 현재 반응 상태 확인 로직 필요
-        content: "HEART"
-      });
-    } catch (error) {
-      handleApiError(error, "좋아요");
-    }
-  };
-
-  const handleComment = (postId: string) => {
-    // TODO: 댓글 모달 또는 댓글 입력 영역으로 이동
-    console.log("Comment on post:", postId);
-  };
-
-  const handleUpvote = async (postId: string) => {
-    if (!user?.accessToken) return;
-
-    try {
-      await toggleReactionMutation.mutateAsync({
-        subjectId: postId,
-        isReacted: false, // TODO: 현재 반응 상태 확인 로직 필요
-        content: "THUMBS_UP"
-      });
-    } catch (error) {
-      handleApiError(error, "업보트");
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-white">
-      <div className="max-w-[1440px] mx-auto lg:px-8">
-        {/* 메인 그리드 레이아웃 */}
-        <div className="grid grid-cols-1 lg:grid-cols-[5fr_3fr] gap-8">
-          {/* 왼쪽 컬럼: 메인 피드 */}
-          <div className="flex flex-col lg:border-l lg:border-r border-[rgba(201,201,201,0.4)] lg:min-w-[820px]">
-            {/* 3일 스프린트 챌린지 */}
-            <div className="pt-6 pb-0">
-              <SprintChallenge />
-            </div>
-
-            {/* 구분선 */}
-            <div className="flex flex-col items-start py-4 px-0">
-              <div className="w-full h-0 border-b border-[rgba(201,201,201,0.4)]" />
-            </div>
-
-            {/* 포스트 입력 */}
-            <div className="lg:px-6 pt-6 pb-0">
-              {user ? (
-                <PostInput
-                  user={{
-                    id: user.login,
-                    name: user.name || user.login,
-                    username: user.login,
-                    avatar: user.avatar_url
-                  }}
-                  onSubmit={handlePostSubmit}
-                />
-              ) : (
-                <div className="text-center py-8 text-gray-500">
-                  로그인이 필요합니다.
-                </div>
-              )}
-            </div>
-
-            {/* 구분선 */}
-            <div className="flex flex-col items-start py-4 px-0">
-              <div className="w-full h-0 border-b border-[rgba(201,201,201,0.4)]" />
-            </div>
-
-            {/* 필터 섹션 */}
-            <div className="lg:px-6 pb-4">
-              <FilterSection
-                sortOption={sortOption}
-                onSortChange={handleSortChange}
-              />
-            </div>
-
-            {/* 포스트 리스트 */}
-            <div className="lg:px-6 pb-0">
-              <PostList
-                {...getPostListProps()}
-                onLike={handleLike}
-                onComment={handleComment}
-                onUpvote={handleUpvote}
-                onDelete={(postId) => {
-                  // TODO: 삭제 기능 구현
-                  console.log("Delete post:", postId);
-                }}
-              />
-            </div>
-          </div>
-
-          {/* 오른쪽 컬럼: 사이드바 (1024px 이상에서만 표시) */}
-          <div className="hidden lg:block mt-[24px] lg:min-w-[490px]">
-            <div className="sticky top-4">
-              <WeeklyTop5 />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/fundamentals/today-i-learned/src/pages/postDetail/components/Comment.tsx b/fundamentals/today-i-learned/src/pages/postDetail/components/Comment.tsx
index 025b2144..5aae4383 100644
--- a/fundamentals/today-i-learned/src/pages/postDetail/components/Comment.tsx
+++ b/fundamentals/today-i-learned/src/pages/postDetail/components/Comment.tsx
@@ -2,18 +2,18 @@ import { useState } from "react";
 import { ChevronUp, MessageCircle } from "lucide-react";
 import { Avatar } from "@/components/shared/ui/Avatar";
 import { CommentInput } from "./CommentInput";
-import type { CommentProps } from "../../newHome/utils/types";
+import type { CommentProps } from "../../timeline/utils/types";
 import { formatTimeAgo, formatNumber } from "../utils/formatters";
-function CommentContainer({ 
-  children, 
-  depth = 0 
-}: { 
-  children: React.ReactNode; 
+function CommentContainer({
+  children,
+  depth = 0
+}: {
+  children: React.ReactNode;
   depth?: number;
 }) {
   const indentLevel = Math.min(depth, 3);
   const marginLeft = indentLevel * 48;
-  
+
   return (
     <div style={{ marginLeft: `${marginLeft}px` }}>
       <div className="py-4 border-b border-gray-100 last:border-b-0">
@@ -23,7 +23,7 @@ function CommentContainer({
   );
 }
 
-function CommentHeader({ comment }: { comment: CommentProps['comment'] }) {
+function CommentHeader({ comment }: { comment: CommentProps["comment"] }) {
   return (
     <div className="flex items-center gap-3 mb-3">
       <Avatar
@@ -59,11 +59,11 @@ function CommentBody({ content }: { content: string }) {
   );
 }
 
-function CommentActions({ 
-  upvotes, 
-  replies, 
-  onUpvote, 
-  onReply 
+function CommentActions({
+  upvotes,
+  replies,
+  onUpvote,
+  onReply
 }: {
   upvotes: number;
   replies: number;
@@ -95,17 +95,17 @@ function CommentActions({
   );
 }
 
-function RepliesToggle({ 
-  show, 
-  count, 
-  onToggle 
+function RepliesToggle({
+  show,
+  count,
+  onToggle
 }: {
   show: boolean;
   count: number;
   onToggle: () => void;
 }) {
   if (count === 0) return null;
-  
+
   return (
     <button
       onClick={onToggle}
@@ -133,7 +133,12 @@ function useCommentInteraction(commentId: string) {
   };
 }
 
-export function Comment({ comment, onUpvote, onReply, depth = 0 }: CommentProps) {
+export function Comment({
+  comment,
+  onUpvote,
+  onReply,
+  depth = 0
+}: CommentProps) {
   const {
     showReplyInput,
     showReplies,
@@ -194,4 +199,4 @@ export function Comment({ comment, onUpvote, onReply, depth = 0 }: CommentProps)
       />
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/fundamentals/today-i-learned/src/pages/postDetail/components/CommentInput.tsx b/fundamentals/today-i-learned/src/pages/postDetail/components/CommentInput.tsx
index 5cb4f2b5..ad0b9abc 100644
--- a/fundamentals/today-i-learned/src/pages/postDetail/components/CommentInput.tsx
+++ b/fundamentals/today-i-learned/src/pages/postDetail/components/CommentInput.tsx
@@ -1,12 +1,12 @@
 import { useState } from "react";
 import { Button } from "@/components/shared/ui/Button";
-import type { CommentInputProps } from "../../newHome/utils/types";
+import type { CommentInputProps } from "../../timeline/utils/types";
 
-export function CommentInput({ 
-  onSubmit, 
-  placeholder = "댓글을 작성해보세요...", 
+export function CommentInput({
+  onSubmit,
+  placeholder = "댓글을 작성해보세요...",
   isReply = false,
-  parentId 
+  parentId
 }: CommentInputProps) {
   const [content, setContent] = useState("");
 
@@ -36,7 +36,7 @@ export function CommentInput({
           rows={3}
         />
         <div className="flex justify-end mt-3">
-          <Button 
+          <Button
             onClick={handleSubmit}
             disabled={!content.trim()}
             size="sm"
@@ -48,4 +48,4 @@ export function CommentInput({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/fundamentals/today-i-learned/src/pages/postDetail/components/CommentList.tsx b/fundamentals/today-i-learned/src/pages/postDetail/components/CommentList.tsx
index b339e412..0f2409aa 100644
--- a/fundamentals/today-i-learned/src/pages/postDetail/components/CommentList.tsx
+++ b/fundamentals/today-i-learned/src/pages/postDetail/components/CommentList.tsx
@@ -1,5 +1,5 @@
 import { Comment } from "./Comment";
-import type { CommentListProps } from "../../newHome/utils/types";
+import type { CommentListProps } from "../../timeline/utils/types";
 
 export function CommentList({ comments, onUpvote, onReply }: CommentListProps) {
   if (comments.length === 0) {
@@ -24,4 +24,4 @@ export function CommentList({ comments, onUpvote, onReply }: CommentListProps) {
       ))}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/fundamentals/today-i-learned/src/pages/postDetail/components/PostActions.tsx b/fundamentals/today-i-learned/src/pages/postDetail/components/PostActions.tsx
index 9c787ecb..d26d442b 100644
--- a/fundamentals/today-i-learned/src/pages/postDetail/components/PostActions.tsx
+++ b/fundamentals/today-i-learned/src/pages/postDetail/components/PostActions.tsx
@@ -1,5 +1,5 @@
 import { Heart, MessageCircle, Share, ChevronUp } from "lucide-react";
-import type { Post } from "../../newHome/utils/types";
+import type { Post } from "../../timeline/utils/types";
 
 interface PostActionsProps {
   post: Post;
@@ -19,7 +19,13 @@ function formatNumber(num: number): string {
   return num.toString();
 }
 
-export function PostActions({ post, onLike, onComment, onShare, onUpvote }: PostActionsProps) {
+export function PostActions({
+  post,
+  onLike,
+  onComment,
+  onShare,
+  onUpvote
+}: PostActionsProps) {
   return (
     <div className="flex items-center gap-6 py-4 border-t border-gray-100">
       <button
@@ -71,4 +77,4 @@ export function PostActions({ post, onLike, onComment, onShare, onUpvote }: Post
       </button>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/fundamentals/today-i-learned/src/pages/postDetail/components/PostContent.tsx b/fundamentals/today-i-learned/src/pages/postDetail/components/PostContent.tsx
index eaf2a72d..0b986297 100644
--- a/fundamentals/today-i-learned/src/pages/postDetail/components/PostContent.tsx
+++ b/fundamentals/today-i-learned/src/pages/postDetail/components/PostContent.tsx
@@ -1,4 +1,4 @@
-import type { Post } from "../../newHome/utils/types";
+import type { Post } from "../../timeline/utils/types";
 
 interface PostContentProps {
   post: Post;
@@ -12,12 +12,10 @@ export function PostContent({ post }: PostContentProps) {
       return "bg-[rgba(237,204,248,0.4)] text-[#DA9BEF]";
     if (tagName.includes("가독성"))
       return "bg-[rgba(255,212,214,0.4)] text-[#FB8890]";
-    if (tagName.includes("결합도"))
-      return "bg-green-100 text-green-700";
+    if (tagName.includes("결합도")) return "bg-green-100 text-green-700";
     if (tagName.includes("기여") || tagName.includes("설계"))
       return "bg-orange-100 text-orange-700";
-    if (tagName.includes("Changes"))
-      return "bg-yellow-100 text-yellow-700";
+    if (tagName.includes("Changes")) return "bg-yellow-100 text-yellow-700";
     if (tagName.includes("조건부") || tagName.includes("렌더링"))
       return "bg-blue-100 text-blue-700";
     return "bg-gray-100 text-gray-600";
@@ -57,4 +55,4 @@ export function PostContent({ post }: PostContentProps) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/fundamentals/today-i-learned/src/pages/postDetail/components/PostHeader.tsx b/fundamentals/today-i-learned/src/pages/postDetail/components/PostHeader.tsx
index 00b4ce11..bcd2ee5c 100644
--- a/fundamentals/today-i-learned/src/pages/postDetail/components/PostHeader.tsx
+++ b/fundamentals/today-i-learned/src/pages/postDetail/components/PostHeader.tsx
@@ -2,7 +2,7 @@ import { MoreHorizontal } from "lucide-react";
 import { Avatar } from "@/components/shared/ui/Avatar";
 import { Button } from "@/components/shared/ui/Button";
 import { formatTimeAgo } from "../utils/formatters";
-import type { Post } from "../../newHome/utils/types";
+import type { Post } from "../../timeline/utils/types";
 
 interface PostHeaderProps {
   post: Post;
@@ -10,27 +10,23 @@ interface PostHeaderProps {
 
 function HeaderContainer({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex items-center justify-between mb-6">
-      {children}
-    </div>
+    <div className="flex items-center justify-between mb-6">{children}</div>
   );
 }
 
 function AuthorSection({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex items-center gap-3 min-w-0 flex-1">
-      {children}
-    </div>
+    <div className="flex items-center gap-3 min-w-0 flex-1">{children}</div>
   );
 }
 
-function AuthorInfo({ 
-  name, 
-  username, 
-  createdAt 
-}: { 
-  name: string; 
-  username: string; 
+function AuthorInfo({
+  name,
+  username,
+  createdAt
+}: {
+  name: string;
+  username: string;
   createdAt: string;
 }) {
   return (
@@ -74,7 +70,7 @@ export function PostHeader({ post }: PostHeaderProps) {
           fallback={author.name}
           className="shrink-0"
         />
-        <AuthorInfo 
+        <AuthorInfo
           name={author.name}
           username={author.username}
           createdAt={createdAt}
@@ -84,4 +80,4 @@ export function PostHeader({ post }: PostHeaderProps) {
       {isOwn && <MoreMenu />}
     </HeaderContainer>
   );
-}
\ No newline at end of file
+}
diff --git a/fundamentals/today-i-learned/src/pages/postDetail/hooks/usePostDetail.ts b/fundamentals/today-i-learned/src/pages/postDetail/hooks/usePostDetail.ts
index 195c0295..d4f7cfe7 100644
--- a/fundamentals/today-i-learned/src/pages/postDetail/hooks/usePostDetail.ts
+++ b/fundamentals/today-i-learned/src/pages/postDetail/hooks/usePostDetail.ts
@@ -1,22 +1,25 @@
 import { useState } from "react";
-import { 
-  useDiscussionDetail, 
+import {
+  useDiscussionDetail,
   useWeeklyTopDiscussions,
   useAddDiscussionComment,
   useToggleDiscussionReaction
 } from "@/api/hooks/useDiscussions";
-import type { 
-  GitHubDiscussionDetail, 
-  GitHubComment 
+import type {
+  GitHubDiscussionDetail,
+  GitHubComment
 } from "@/api/remote/discussions";
-import type { Post, Comment, PopularPost } from "../../newHome/utils/types";
+import type { Post, Comment, PopularPost } from "../../timeline/utils/types";
 
 function truncateText(text: string, maxLength: number): string {
   if (text.length <= maxLength) return text;
   return text.slice(0, maxLength) + "...";
 }
 
-function mapGitHubUserToAuthor(githubUser: { login: string; avatarUrl: string }) {
+function mapGitHubUserToAuthor(githubUser: {
+  login: string;
+  avatarUrl: string;
+}) {
   return {
     id: githubUser.login,
     name: githubUser.login,
@@ -35,17 +38,18 @@ function mapGitHubCommentToComment(comment: GitHubComment): Comment {
       upvotes: comment.reactions.totalCount,
       replies: comment.replies?.totalCount || 0
     },
-    replies: comment.replies?.nodes?.map(reply => ({
-      id: reply.id,
-      content: reply.body,
-      author: mapGitHubUserToAuthor(reply.author),
-      createdAt: reply.createdAt,
-      stats: {
-        upvotes: reply.reactions.totalCount,
-        replies: 0
-      },
-      parentId: comment.id
-    })) || []
+    replies:
+      comment.replies?.nodes?.map((reply) => ({
+        id: reply.id,
+        content: reply.body,
+        author: mapGitHubUserToAuthor(reply.author),
+        createdAt: reply.createdAt,
+        stats: {
+          upvotes: reply.reactions.totalCount,
+          replies: 0
+        },
+        parentId: comment.id
+      })) || []
   };
 }
 
@@ -57,7 +61,7 @@ function mapDiscussionToPost(discussion: GitHubDiscussionDetail): Post {
     author: mapGitHubUserToAuthor(discussion.author),
     createdAt: discussion.createdAt,
     category: discussion.category.name,
-    tags: discussion.labels?.nodes?.map(label => label.name) || [],
+    tags: discussion.labels?.nodes?.map((label) => label.name) || [],
     stats: {
       upvotes: discussion.reactions.totalCount,
       hearts: 0,
@@ -69,7 +73,11 @@ function mapDiscussionToPost(discussion: GitHubDiscussionDetail): Post {
 }
 
 export function usePostDetail(postId: string | undefined) {
-  const { data: discussion, isLoading, error } = useDiscussionDetail(postId || "");
+  const {
+    data: discussion,
+    isLoading,
+    error
+  } = useDiscussionDetail(postId || "");
   const { data: weeklyPosts } = useWeeklyTopDiscussions({ limit: 5 });
   const addComment = useAddDiscussionComment();
   const toggleReaction = useToggleDiscussionReaction();
@@ -81,13 +89,13 @@ export function usePostDetail(postId: string | undefined) {
 
   const handleLike = (postId: string) => {
     const isLiked = interactionState.likes.has(postId);
-    toggleReaction.mutate({ 
-      subjectId: postId, 
+    toggleReaction.mutate({
+      subjectId: postId,
       isReacted: isLiked,
       content: "HEART"
     });
-    
-    setInteractionState(prev => {
+
+    setInteractionState((prev) => {
       const newLikes = new Set(prev.likes);
       if (newLikes.has(postId)) {
         newLikes.delete(postId);
@@ -108,13 +116,13 @@ export function usePostDetail(postId: string | undefined) {
 
   const handleUpvote = (postId: string) => {
     const isUpvoted = interactionState.upvotes.has(postId);
-    toggleReaction.mutate({ 
-      subjectId: postId, 
+    toggleReaction.mutate({
+      subjectId: postId,
       isReacted: isUpvoted,
       content: "THUMBS_UP"
     });
-    
-    setInteractionState(prev => {
+
+    setInteractionState((prev) => {
       const newUpvotes = new Set(prev.upvotes);
       if (newUpvotes.has(postId)) {
         newUpvotes.delete(postId);
@@ -126,8 +134,8 @@ export function usePostDetail(postId: string | undefined) {
   };
 
   const handleCommentUpvote = (commentId: string) => {
-    toggleReaction.mutate({ 
-      subjectId: commentId, 
+    toggleReaction.mutate({
+      subjectId: commentId,
       isReacted: false,
       content: "THUMBS_UP"
     });
@@ -135,12 +143,12 @@ export function usePostDetail(postId: string | undefined) {
 
   const handleReply = (commentId: string, content: string) => {
     if (!discussion?.id || !content.trim()) return;
-    
-    const parentComment = comments.find(comment => comment.id === commentId);
-    const replyPrefix = parentComment 
+
+    const parentComment = comments.find((comment) => comment.id === commentId);
+    const replyPrefix = parentComment
       ? `> @${parentComment.author.name}: ${content}\n\n`
       : `> ${content}\n\n`;
-    
+
     addComment.mutate({
       discussionId: discussion.id,
       body: `${replyPrefix}답글 내용을 입력하세요.`
@@ -149,7 +157,7 @@ export function usePostDetail(postId: string | undefined) {
 
   const handleNewComment = (content: string) => {
     if (!discussion?.id || !content.trim()) return;
-    
+
     addComment.mutate({
       discussionId: discussion.id,
       body: content
@@ -157,17 +165,20 @@ export function usePostDetail(postId: string | undefined) {
   };
 
   const postData = discussion ? mapDiscussionToPost(discussion) : null;
-  
-  const comments = discussion?.comments.nodes.map(mapGitHubCommentToComment) || [];
+
+  const comments =
+    discussion?.comments.nodes.map(mapGitHubCommentToComment) || [];
 
   const weeklyTop5Data = {
-    posts: (weeklyPosts || []).map((post, index): PopularPost => ({
-      id: post.id,
-      title: post.title,
-      author: mapGitHubUserToAuthor(post.author),
-      excerpt: truncateText(post.body.replace(/[#*`\n]/g, " ").trim(), 80),
-      rank: index + 1
-    })),
+    posts: (weeklyPosts || []).map(
+      (post, index): PopularPost => ({
+        id: post.id,
+        title: post.title,
+        author: mapGitHubUserToAuthor(post.author),
+        excerpt: truncateText(post.body.replace(/[#*`\n]/g, " ").trim(), 80),
+        rank: index + 1
+      })
+    ),
     weekInfo: "이번 주 인기글"
   };
 
@@ -175,11 +186,11 @@ export function usePostDetail(postId: string | undefined) {
     postId,
     isLoading,
     error,
-    
+
     postData,
     comments,
     weeklyTop5Data,
-    
+
     handlers: {
       handleLike,
       handleComment,
@@ -190,4 +201,4 @@ export function usePostDetail(postId: string | undefined) {
       handleNewComment
     }
   };
-}
\ No newline at end of file
+}
diff --git a/fundamentals/today-i-learned/src/pages/newHome/README.md b/fundamentals/today-i-learned/src/pages/timeline/README.md
similarity index 100%
rename from fundamentals/today-i-learned/src/pages/newHome/README.md
rename to fundamentals/today-i-learned/src/pages/timeline/README.md
diff --git a/fundamentals/today-i-learned/src/pages/timeline/TimelinePage.tsx b/fundamentals/today-i-learned/src/pages/timeline/TimelinePage.tsx
index 6eebdff1..479387f4 100644
--- a/fundamentals/today-i-learned/src/pages/timeline/TimelinePage.tsx
+++ b/fundamentals/today-i-learned/src/pages/timeline/TimelinePage.tsx
@@ -1,64 +1,177 @@
-import { useCallback, useState } from "react";
-import { CreatePost } from "./components/CreatePost";
+import * as React from "react";
+import { PostInput } from "./components/PostInput";
+import { FilterSection } from "./components/FilterSection";
 import { PostList } from "./components/PostList";
-import { MyStreak } from "../profile/components/MyStreak";
-import { CategoryTabs, TabContent } from "./components/CategoryTabs";
 import { WeeklyTop5 } from "@/components/features/discussions/WeeklyTop5";
-import type { PostCategory } from "@/types";
-import { useCreateDiscussion } from "@/api/hooks/useDiscussions";
+import { SprintChallenge } from "./components/SprintChallenge";
+import { useAuth } from "@/contexts/AuthContext";
+import type { SortOption } from "./utils/types";
+import {
+  useCreateDiscussion,
+  useToggleDiscussionReaction
+} from "@/api/hooks/useDiscussions";
+import { useErrorHandler } from "@/hooks/useErrorHandler";
+import { useToast } from "@/components/shared/ui/Toast";
 
 export function TimelinePage() {
-  const [activeTab, setActiveTab] = useState<PostCategory>("latest");
-  const createDiscussionMutation = useCreateDiscussion();
-
-  const handleCreatePost = useCallback(
-    async (title: string, content: string) => {
-      await createDiscussionMutation.mutateAsync({
-        title,
-        body: content
-      });
-    },
-    [createDiscussionMutation]
-  );
+  const { user } = useAuth();
+  const [sortOption, setSortOption] = React.useState<SortOption>("newest");
 
-  const handleTabChange = useCallback((tab: PostCategory) => {
-    setActiveTab(tab);
-  }, []);
+  const createPostMutation = useCreateDiscussion();
+  const { handleApiError } = useErrorHandler();
+  const { success: showSuccessToast } = useToast();
 
-  // 탭별 PostList props 조건부 계산
+  // sortOption에 따른 API 파라미터 계산
   const getPostListProps = () => {
-    switch (activeTab) {
-      case "latest":
-        return { sortBy: "latest" as const };
-      case "weekly":
-        return { sortBy: "popularity" as const };
+    switch (sortOption) {
+      case "newest":
+        return {
+          categoryName: "Today I Learned",
+          sortBy: "latest" as const
+        };
+      case "realtime":
+        return {
+          categoryName: "Today I Learned",
+          sortBy: "lastActivity" as const
+        };
       case "hall-of-fame":
         return {
+          categoryName: "Today I Learned",
           sortBy: "latest" as const,
           filterBy: { label: "성지 ⛲" }
         };
       default:
-        return { sortBy: "latest" as const };
+        return {
+          categoryName: "Today I Learned",
+          sortBy: "latest" as const
+        };
+    }
+  };
+
+  const handlePostSubmit = async (data: { title: string; content: string }) => {
+    try {
+      await createPostMutation.mutateAsync({
+        title: data.title,
+        body: data.content
+      });
+      showSuccessToast(
+        "포스트 작성 완료",
+        "오늘 배운 내용이 성공적으로 게시되었습니다."
+      );
+    } catch (error) {
+      handleApiError(error, "포스트 작성");
+    }
+  };
+
+  const handleSortChange = (option: SortOption) => {
+    setSortOption(option);
+  };
+
+  const toggleReactionMutation = useToggleDiscussionReaction();
+
+  const handleLike = async (postId: string) => {
+    if (!user?.accessToken) return;
+
+    try {
+      await toggleReactionMutation.mutateAsync({
+        subjectId: postId,
+        isReacted: false, // TODO: 현재 반응 상태 확인 로직 필요
+        content: "HEART"
+      });
+    } catch (error) {
+      handleApiError(error, "좋아요");
+    }
+  };
+
+  const handleComment = (postId: string) => {
+    // TODO: 댓글 모달 또는 댓글 입력 영역으로 이동
+    console.log("Comment on post:", postId);
+  };
+
+  const handleUpvote = async (postId: string) => {
+    if (!user?.accessToken) return;
+
+    try {
+      await toggleReactionMutation.mutateAsync({
+        subjectId: postId,
+        isReacted: false, // TODO: 현재 반응 상태 확인 로직 필요
+        content: "THUMBS_UP"
+      });
+    } catch (error) {
+      handleApiError(error, "업보트");
     }
   };
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-      <div className="lg:col-span-2 space-y-10">
-        <MyStreak />
-        <CreatePost
-          onSubmit={handleCreatePost}
-          isLoading={createDiscussionMutation.isPending}
-        />
-        <CategoryTabs activeTab={activeTab} onTabChange={handleTabChange} />
-        <TabContent activeTab={activeTab}>
-          <PostList {...getPostListProps()} />
-        </TabContent>
-      </div>
+    <div className="min-h-screen bg-white">
+      <div className="max-w-[1440px] mx-auto lg:px-8">
+        {/* 메인 그리드 레이아웃 */}
+        <div className="grid grid-cols-1 lg:grid-cols-[5fr_3fr] gap-8">
+          {/* 왼쪽 컬럼: 메인 피드 */}
+          <div className="flex flex-col lg:border-l lg:border-r border-[rgba(201,201,201,0.4)] lg:min-w-[820px]">
+            {/* 3일 스프린트 챌린지 */}
+            <div className="pt-6 pb-0">
+              <SprintChallenge />
+            </div>
+
+            {/* 구분선 */}
+            <div className="flex flex-col items-start py-4 px-0">
+              <div className="w-full h-0 border-b border-[rgba(201,201,201,0.4)]" />
+            </div>
+
+            {/* 포스트 입력 */}
+            <div className="lg:px-6 pt-6 pb-0">
+              {user ? (
+                <PostInput
+                  user={{
+                    id: user.login,
+                    name: user.name || user.login,
+                    username: user.login,
+                    avatar: user.avatar_url
+                  }}
+                  onSubmit={handlePostSubmit}
+                />
+              ) : (
+                <div className="text-center py-8 text-gray-500">
+                  로그인이 필요합니다.
+                </div>
+              )}
+            </div>
+
+            {/* 구분선 */}
+            <div className="flex flex-col items-start py-4 px-0">
+              <div className="w-full h-0 border-b border-[rgba(201,201,201,0.4)]" />
+            </div>
+
+            {/* 필터 섹션 */}
+            <div className="lg:px-6 pb-4">
+              <FilterSection
+                sortOption={sortOption}
+                onSortChange={handleSortChange}
+              />
+            </div>
+
+            {/* 포스트 리스트 */}
+            <div className="lg:px-6 pb-0">
+              <PostList
+                {...getPostListProps()}
+                onLike={handleLike}
+                onComment={handleComment}
+                onUpvote={handleUpvote}
+                onDelete={(postId) => {
+                  // TODO: 삭제 기능 구현
+                  console.log("Delete post:", postId);
+                }}
+              />
+            </div>
+          </div>
 
-      <div className="lg:col-span-1">
-        <div className="sticky top-4">
-          <WeeklyTop5 />
+          {/* 오른쪽 컬럼: 사이드바 (1024px 이상에서만 표시) */}
+          <div className="hidden lg:block mt-[24px] lg:min-w-[490px]">
+            <div className="sticky top-4">
+              <WeeklyTop5 />
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/fundamentals/today-i-learned/src/pages/newHome/components/FilterSection.tsx b/fundamentals/today-i-learned/src/pages/timeline/components/FilterSection.tsx
similarity index 100%
rename from fundamentals/today-i-learned/src/pages/newHome/components/FilterSection.tsx
rename to fundamentals/today-i-learned/src/pages/timeline/components/FilterSection.tsx
diff --git a/fundamentals/today-i-learned/src/pages/newHome/components/MonthlyChallenge.tsx b/fundamentals/today-i-learned/src/pages/timeline/components/MonthlyChallenge.tsx
similarity index 91%
rename from fundamentals/today-i-learned/src/pages/newHome/components/MonthlyChallenge.tsx
rename to fundamentals/today-i-learned/src/pages/timeline/components/MonthlyChallenge.tsx
index 528fadbc..178f1051 100644
--- a/fundamentals/today-i-learned/src/pages/newHome/components/MonthlyChallenge.tsx
+++ b/fundamentals/today-i-learned/src/pages/timeline/components/MonthlyChallenge.tsx
@@ -1,5 +1,5 @@
 import { Card } from "@/components/shared/ui/Card";
-import { cn } from "@/lib/utils/cn";
+import { cn } from "@/libs/cn";
 import type { MonthlyChallengeProps, ChallengeDay } from "../utils/types";
 
 const MONTH_NAMES = [
@@ -17,12 +17,7 @@ const MONTH_NAMES = [
   "12월"
 ];
 
-function ChallengeDayItem({
-  day
-}: {
-  day: ChallengeDay;
-}) {
-
+function ChallengeDayItem({ day }: { day: ChallengeDay }) {
   const getDayStyle = () => {
     switch (day.status) {
       case "completed":
@@ -73,9 +68,7 @@ function ChallengeDayItem({
   );
 }
 
-export function MonthlyChallenge({
-  challenge
-}: MonthlyChallengeProps) {
+export function MonthlyChallenge({ challenge }: MonthlyChallengeProps) {
   const monthName = MONTH_NAMES[challenge.month - 1];
 
   // 7x5 그리드로 배치 (주단위)
@@ -104,10 +97,7 @@ export function MonthlyChallenge({
               className="grid grid-cols-7 gap-4 justify-items-center"
             >
               {week.map((day) => (
-                <ChallengeDayItem
-                  key={day.day}
-                  day={day}
-                />
+                <ChallengeDayItem key={day.day} day={day} />
               ))}
               {/* 빈 칸 채우기 (마지막 주가 7일 미만인 경우) */}
               {week.length < 7 &&
diff --git a/fundamentals/today-i-learned/src/pages/newHome/components/NewHomeHeader.tsx b/fundamentals/today-i-learned/src/pages/timeline/components/NewHomeHeader.tsx
similarity index 100%
rename from fundamentals/today-i-learned/src/pages/newHome/components/NewHomeHeader.tsx
rename to fundamentals/today-i-learned/src/pages/timeline/components/NewHomeHeader.tsx
diff --git a/fundamentals/today-i-learned/src/pages/newHome/components/PostInput.tsx b/fundamentals/today-i-learned/src/pages/timeline/components/PostInput.tsx
similarity index 100%
rename from fundamentals/today-i-learned/src/pages/newHome/components/PostInput.tsx
rename to fundamentals/today-i-learned/src/pages/timeline/components/PostInput.tsx
diff --git a/fundamentals/today-i-learned/src/pages/timeline/components/PostList.tsx b/fundamentals/today-i-learned/src/pages/timeline/components/PostList.tsx
index 19fc7fbb..32e97fa8 100644
--- a/fundamentals/today-i-learned/src/pages/timeline/components/PostList.tsx
+++ b/fundamentals/today-i-learned/src/pages/timeline/components/PostList.tsx
@@ -1,7 +1,8 @@
 import { useCallback } from "react";
-import { PostCard } from "@/components/features/discussions/LegacyPostCard";
-import { Button } from "@/components/shared/ui/Button";
-import { LoadingSpinner } from "@/components/shared/ui/LoadingSpinner";
+import {
+  PostCard,
+  PostCardSkeleton
+} from "../../../components/features/discussions/PostCard";
 import { useInfiniteDiscussions } from "@/api/hooks/useDiscussions";
 import { useIntersectionObserver } from "@/hooks/useIntersectionObserver";
 
@@ -13,6 +14,10 @@ interface PostListProps {
   filterBy?: {
     label?: string;
   };
+  onLike: (postId: string) => void;
+  onComment: (postId: string) => void;
+  onUpvote: (postId: string) => void;
+  onDelete?: (postId: string) => void;
 }
 
 export function PostList({
@@ -20,17 +25,25 @@ export function PostList({
   repo,
   categoryName,
   sortBy = "latest",
-  filterBy
+  filterBy,
+  onLike,
+  onComment,
+  onUpvote,
+  onDelete
 }: PostListProps) {
   const {
-    data,
+    data: postsData,
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
-    isLoading,
-    error,
-    refetch
-  } = useInfiniteDiscussions({ owner, repo, categoryName, sortBy, filterBy });
+    isLoading
+  } = useInfiniteDiscussions({
+    owner,
+    repo,
+    categoryName,
+    sortBy,
+    filterBy
+  });
 
   const handleLoadMore = useCallback(() => {
     if (hasNextPage && !isFetchingNextPage) {
@@ -44,70 +57,59 @@ export function PostList({
     rootMargin: "300px"
   });
 
-  const handleComment = (id: string) => {
-    // TODO: 댓글 페이지로 이동
-  };
-
+  const discussions =
+    postsData?.pages.flatMap((page) => page.discussions) || [];
   if (isLoading) {
     return (
-      <div className="space-y-6">
-        <LoadingSpinner text="게시물을 불러오는 중..." variant="primary" />
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-6 text-center">
-        <h3 className="text-lg font-semibold text-red-800 dark:text-red-200 mb-2">
-          게시물을 불러올 수 없습니다
-        </h3>
-        <p className="text-red-600 dark:text-red-400 mb-4">{error.message}</p>
-        <Button onClick={() => refetch()} variant="default">
-          다시 시도
-        </Button>
+      <div className="w-full">
+        {[...new Array(3)].map((_, index) => (
+          <div key={index} className={index < 2 ? "mb-6" : ""}>
+            <PostCardSkeleton />
+          </div>
+        ))}
       </div>
     );
   }
 
-  const allDiscussions = data?.pages.flatMap((page) => page.discussions) ?? [];
-
-  if (allDiscussions.length === 0) {
+  if (discussions.length === 0) {
     return (
-      <div className="rounded-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-8 text-center">
-        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
-          아직 게시물이 없습니다
-        </h3>
-        <p className="text-gray-600 dark:text-gray-400 mb-4">
-          첫 번째 Today I Learned 게시물을 작성해보세요!
-        </p>
-        <Button variant="default">새 글 작성하기</Button>
+      <div className="w-full flex flex-col items-center justify-center py-12 px-4">
+        <div className="text-center space-y-3">
+          <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto">
+            <span className="text-2xl">📝</span>
+          </div>
+          <h3 className="text-lg font-medium text-gray-900">
+            아직 포스트가 없습니다
+          </h3>
+          <p className="text-gray-500 text-sm max-w-md">
+            첫 번째 포스트를 작성해서 오늘 배운 내용을 공유해보세요!
+          </p>
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="space-y-6">
-      <div className="space-y-4">
-        {allDiscussions.map((discussion, index) => (
+    <div className="w-full">
+      {discussions.map((discussion, index) => (
+        <div
+          key={discussion.id}
+          className={index < discussions.length - 1 ? "mb-6" : ""}
+        >
           <PostCard
-            key={discussion.id}
             discussion={discussion}
-            onComment={handleComment}
-            isLast={index === allDiscussions.length - 1}
-            isLoading={isFetchingNextPage}
+            onLike={onLike}
+            onComment={onComment}
+            onUpvote={onUpvote}
+            onDelete={onDelete}
           />
-        ))}
-      </div>
+        </div>
+      ))}
 
+      {/* Load more trigger */}
       {hasNextPage && (
-        <div ref={elementRef} className="flex justify-center py-8">
-          {isFetchingNextPage && (
-            <LoadingSpinner
-              text="더 많은 게시물 불러오는 중..."
-              variant="primary"
-            />
-          )}
+        <div ref={elementRef} className="w-full py-4 flex justify-center">
+          {isFetchingNextPage ? <PostCardSkeleton /> : null}
         </div>
       )}
     </div>
diff --git a/fundamentals/today-i-learned/src/pages/newHome/components/PostMoreMenu.tsx b/fundamentals/today-i-learned/src/pages/timeline/components/PostMoreMenu.tsx
similarity index 100%
rename from fundamentals/today-i-learned/src/pages/newHome/components/PostMoreMenu.tsx
rename to fundamentals/today-i-learned/src/pages/timeline/components/PostMoreMenu.tsx
diff --git a/fundamentals/today-i-learned/src/pages/newHome/components/SprintChallenge.tsx b/fundamentals/today-i-learned/src/pages/timeline/components/SprintChallenge.tsx
similarity index 100%
rename from fundamentals/today-i-learned/src/pages/newHome/components/SprintChallenge.tsx
rename to fundamentals/today-i-learned/src/pages/timeline/components/SprintChallenge.tsx
diff --git a/fundamentals/today-i-learned/src/pages/newHome/hooks/useWritePostModal.tsx b/fundamentals/today-i-learned/src/pages/timeline/hooks/useWritePostModal.tsx
similarity index 100%
rename from fundamentals/today-i-learned/src/pages/newHome/hooks/useWritePostModal.tsx
rename to fundamentals/today-i-learned/src/pages/timeline/hooks/useWritePostModal.tsx
diff --git a/fundamentals/today-i-learned/src/pages/newHome/utils/types.ts b/fundamentals/today-i-learned/src/pages/timeline/utils/types.ts
similarity index 100%
rename from fundamentals/today-i-learned/src/pages/newHome/utils/types.ts
rename to fundamentals/today-i-learned/src/pages/timeline/utils/types.ts