Merge branch 'dev'

Author: gs0428

apps/web/src/components/topic/content-list.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from "react";
 import Link from "next/link";
 
 import { CONTENT_TYPE_OPTIONS, type ContentTypeOptions } from "@/constants/content";
+import { useDebounce } from "@/hooks/use-debounce";
 import { useCreateContent } from "@/lib/tanstack/mutation/topic-content";
 import { useGetAllContents } from "@/lib/tanstack/query/topic";
 import { TopicNodeProps } from "@/types/topic";
@@ -33,6 +34,8 @@ export default function ContentList({
 }: ContentListProps) {
   const [searchQuery, setSearchQuery] = useState("");
 
+  const debouncedSearchQuery = useDebounce(searchQuery, 300);
+
   const {
     data: contents,
     isLoading,
@@ -43,8 +46,13 @@ export default function ContentList({
   const { mutateAsync: createContent, isPending } = useCreateContent(id);
 
   const filteredContents = useMemo(() => {
-    return contents?.filter((content) => !nodes.some((node) => node.data.item.id === content.id));
-  }, [contents, nodes]);
+    const filteredBySearch = contents?.filter((content) =>
+      content.title.toLowerCase().includes(debouncedSearchQuery.toLowerCase())
+    );
+    return filteredBySearch?.filter(
+      (content) => !nodes.some((node) => node.data.item.id === content.id)
+    );
+  }, [contents, nodes, debouncedSearchQuery]);
 
   const onSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(event.target.value);

apps/web/src/components/topic/custom-node.tsx

@@ -144,6 +144,8 @@ export default function CustomNode(props: CustomNodeProps) {
         minHeight={220}
         lineClassName="opacity-0"
         handleClassName="opacity-0"
+        lineStyle={{ borderWidth: "10px" }}
+        handleStyle={{ borderWidth: "10px" }}
       />
 
       {/* Source Handles - 연결 시작점 */}

apps/web/src/components/topic/user-sticker.tsx

@@ -61,7 +61,7 @@ export default function UserSticker({ item, topicId }: { item: TopicDTO; topicId
         <h2 className="mb-3 line-clamp-1 text-2xl leading-tight font-bold text-gray-800">
           {item.title}
         </h2>
-        <div className="prose" dangerouslySetInnerHTML={{ __html: renderContent(item.content) }} />
+        <div dangerouslySetInnerHTML={{ __html: renderContent(item.content) }} />
       </div>
     </div>
   );