refactor(TIL): detail page 리팩토링 (#633)

* refactor: detail page내  <PostDetail /> <WeeklyTop5 /> 컴포넌트 suspense + errorboundary 추가

- 기존에는 상위에서 api를 호출해서 내려주는 방식으로 되있었는데, 이를 PostDetail 내부에서 하도록 처리
- loading, error props을 받아서 이를 분기로 렌더링해주고있었어서, 컴포넌트 return에 도달하는 인지 시간이 길었었음. 그래서, 이를 usesuspensequery로 바꿔주고 에러바운더리랑 서스펜스를 분리해줘서 관심사 분리를 해줌

* refactor: PostDetail 컴포넌트 내부 1차 리팩토링 할 것들 정리
- 디테일 페이지에 들어오면 왼쪽 오른쪽 섹션이 있고, 왼쪽 섹션에서는 본문 댓글입력, 댓글들 이렇게 파트들이 나눠져있음 => 이에 대한 UI가 코드에도 보이도록 리팩토링 게획 세우기

* wip

* refactor: 디테일 페이지내 컴포넌트 각각 분리

* refactor: ContentBody 컴포넌트 리팩토링
- 영역별로 컴포넌트 나눠줘서 화면과 1대1 매칭 해주기

* feat: divider 복원

* refactor: lint:fix

* fix: prettier

Author: al-bur

.pnp.cjs

@@ -24,6 +24,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "es-toolkit": "^1.41.0",
     "lucide-react": "^0.525.0",
     "overlay-kit": "^1.8.4",
     "react": "^18.2.0",

fundamentals/today-i-learned/package.json

@@ -2,6 +2,7 @@ import { useAuth } from "@/contexts/AuthContext";
 import { ENV_CONFIG } from "@/utils/env";
 import {
   useInfiniteQuery,
+  useSuspenseQuery,
   useMutation,
   useQuery,
   useQueryClient
@@ -123,12 +124,11 @@ export function useInfiniteDiscussions({
 export function useWeeklyTopDiscussions({
   owner = ENV_CONFIG.GITHUB_OWNER,
   repo = ENV_CONFIG.GITHUB_REPO,
-  limit,
-  enabled = true
+  limit
 }: Omit<UseDiscussionsParams, "categoryName"> & { limit?: number } = {}) {
   const { user } = useAuth();
 
-  return useQuery({
+  return useSuspenseQuery({
     queryKey: DISCUSSIONS_QUERY_KEYS.weekly(),
     queryFn: async () => {
       const discussions = await fetchWeeklyTopDiscussions({
@@ -138,7 +138,6 @@ export function useWeeklyTopDiscussions({
       });
       return limit ? discussions.slice(0, limit) : discussions;
     },
-    enabled,
     staleTime: 1000 * 60 * 30, // 30분
     gcTime: 1000 * 60 * 60, // 1시간
     retry: 1
@@ -245,14 +244,13 @@ export function useMyContributions({
 export function useDiscussionDetail(id: string) {
   const { user } = useAuth();
 
-  return useQuery({
+  return useSuspenseQuery({
     queryKey: DISCUSSIONS_QUERY_KEYS.detail(id),
     queryFn: () =>
       fetchDiscussionDetail({
         id,
         accessToken: user?.accessToken
       }),
-    enabled: !!id,
     staleTime: 1000 * 60 * 5, // 5분
     gcTime: 1000 * 60 * 30, // 30분
     retry: 2