[IMPROVE] 전체적으로 dynamic, lazy 적용 (#59)

* feat: dynamic + suspense 구조에서 dynamic 구조로 변경

* refactor: suspense가 필요없는 dynamic은 lazy로 변경

Author: gs0428

apps/web/src/app/(with-side-bar)/topic/[id]/layout.tsx

@@ -1,12 +1,7 @@
-"use client";
+import { lazy } from "react";
 
-import dynamic from "next/dynamic";
-
-const TopicStickerDetailModal = dynamic(
-  () => import("@/components/(with-side-bar)/topic/sticker/topic-sticker-detail-modal"),
-  {
-    ssr: false,
-  }
+const TopicStickerDetailModal = lazy(
+  () => import("@/components/(with-side-bar)/topic/sticker/topic-sticker-detail-modal")
 );
 
 interface TopicBoardLayoutProps {

apps/web/src/components/(with-side-bar)/layout/index.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Suspense } from "react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -95,9 +94,7 @@ export default function Sidebar() {
           <div className="text-muted-foreground mb-4 text-sm font-semibold uppercase tracking-wider">
             나의 토픽
           </div>
-          <Suspense fallback={<Spinner className="mx-auto" />}>
-            <RecentTopicList />
-          </Suspense>
+          <RecentTopicList />
         </div>
       </aside>
 

apps/web/src/components/(with-side-bar)/topic/add-content.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Suspense, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 
@@ -20,15 +20,15 @@ const AddContentList = dynamic(() => import("./add-content-list"), {
   ),
 });
 
-interface AddContentListProps {
+interface AddContentProps {
   type: ContentTypeOptions;
   id: string;
 }
 
 const MIN_WIDTH = 300;
 const MAX_WIDTH = 600;
 
-export default function AddContent({ type, id }: AddContentListProps) {
+export default function AddContent({ type, id }: AddContentProps) {
   const [contentPanelWidth, setContentPanelWidth] = useState(300); // Content Panel 기본 너비
   const [searchQuery, setSearchQuery] = useState("");
 
@@ -90,15 +90,7 @@ export default function AddContent({ type, id }: AddContentListProps) {
             <Link href={`/topic/${id}?type=${CONTENT_TYPE_OPTIONS.YOUTUBE}`}>유튜브</Link>
           </Button>
         </div>
-        <Suspense
-          fallback={
-            <div className="flex justify-center py-2">
-              <Spinner />
-            </div>
-          }
-        >
-          <AddContentList query={debouncedSearchQuery} id={id} type={type} />
-        </Suspense>
+        <AddContentList query={debouncedSearchQuery} id={id} type={type} />
       </div>
       <ResizeBar onMouseMove={onMouseMove} />
     </>