Merge pull request #36 from LinkyBoard/dev

[WEB] 배포 최신화

Author: gs0428

apps/web/src/app/(with-side-bar)/topic/[id]/@modal/(.)sticker/page.tsx

@@ -1,17 +1,14 @@
+import TopicStickerDetailModal from "@/components/(with-side-bar)/topic/sticker/topic-sticker-detail-modal";
+
 interface TopicStickerDetailLayoutProps {
   children: React.ReactNode;
-  modal: React.ReactNode;
 }
 
-export default function TopicStickerDetailLayout({
-  children,
-  modal,
-}: TopicStickerDetailLayoutProps) {
+export default function TopicStickerDetailLayout({ children }: TopicStickerDetailLayoutProps) {
   return (
     <>
       {children}
-      {modal}
-      <div id="modal-root" />
+      <TopicStickerDetailModal />
     </>
   );
 }

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

@@ -26,6 +26,7 @@ div.customHandle {
 /* Tiptap 에디터 */
 .ProseMirror {
   height: 100%;
+  overflow-y: auto;
 }
 
 .tiptap {
@@ -34,7 +35,7 @@ div.customHandle {
 
 /* BlockNote 에디터 */
 .bn-editor {
-  padding: 12px 16px !important;
+  padding: 0 !important;
   background-color: var(--background) !important;
   color: var(--foreground) !important;
   outline: none !important;

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

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 
-import { useDashboardStore } from "@/lib/zustand/dashboard-store";
+import { useDashboardStore } from "@/lib/zustand/dashboard";
 import { cn } from "@linkyboard/utils";
 
 import { Bookmark, Lightbulb, Star } from "lucide-react";

apps/web/src/app/globals.css

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 
 import Logo from "@/assets/logo.svg";
-import { useMobileMenuStore } from "@/lib/zustand/mobile-menu-store";
+import { useMobileMenuStore } from "@/lib/zustand/mobile-menu";
 import { cn } from "@linkyboard/utils";
 
 import type { LucideIcon } from "lucide-react";

apps/web/src/components/(with-side-bar)/dashboard/my-activity.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/navigation";
 
 import SentinelSpinner from "@/components/common/sentinel-spinner";
 import { useGetAllTopics } from "@/lib/tanstack/query/topic";
-import { useDashboardStore } from "@/lib/zustand/dashboard-store";
+import { useDashboardStore } from "@/lib/zustand/dashboard";
 import type { TopicDTO } from "@/models/topic";
 
 import { Loader2 } from "lucide-react";

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

@@ -6,7 +6,7 @@ import { useRouter } from "next/navigation";
 import type { ContentTypeOptions } from "@/constants/content";
 import { CONTENT_TYPE_OPTIONS } from "@/constants/content";
 import { useGetCategoryContentById } from "@/lib/tanstack/query/content";
-import { useContentSidebarStore } from "@/lib/zustand/content-sidebar-store";
+import { useContentSidebarStore } from "@/lib/zustand/content-sidebar";
 import { Button } from "@linkyboard/components";
 import type { CategoryContentDTO } from "@linkyboard/types";
 

apps/web/src/components/(with-side-bar)/layout/recent-topic-list.tsx

@@ -10,8 +10,8 @@ import { invalidateMany } from "@/lib/tanstack";
 import { useRemoveContentById, useUpdateContent } from "@/lib/tanstack/mutation/content";
 import { useGetCategories } from "@/lib/tanstack/query/category";
 import { useGetContentById } from "@/lib/tanstack/query/content";
-import { useContentSidebarStore } from "@/lib/zustand/content-sidebar-store";
-import { useDashboardStore } from "@/lib/zustand/dashboard-store";
+import { useContentSidebarStore } from "@/lib/zustand/content-sidebar";
+import { useDashboardStore } from "@/lib/zustand/dashboard";
 import type { ContentDetailDTO } from "@/models/content";
 import { contentSchema, type ContentSchemaType } from "@/schemas/content";
 import { zodResolver } from "@hookform/resolvers/zod";

apps/web/src/components/(with-side-bar)/library/content-list.tsx

@@ -17,6 +17,7 @@ import {
 import { useRemoveTopic, useUpdateTopic } from "@/lib/tanstack/mutation/topic";
 import { useGetCustomStickerById } from "@/lib/tanstack/query/custom-sticker";
 import { useGetTopicById } from "@/lib/tanstack/query/topic";
+import { useTopicStore } from "@/lib/zustand/topic";
 import { uploadImage } from "@/services/image";
 import { containsMarkdown } from "@/utils/markdown";
 import { revalidatePath } from "@/utils/revalidate";
@@ -33,8 +34,8 @@ import ToggleBlock from "./toggle-block";
 import RemoveDialogContent from "../remove-dialog-content";
 
 interface BlockNoteProps {
-  topicId: string;
-  stickerId: string;
+  topicId: string | null;
+  stickerId: string | null;
 }
 
 const blockNoteSchema = BlockNoteSchema.create({
@@ -58,6 +59,8 @@ export default function BlockNote({ topicId, stickerId }: BlockNoteProps) {
   const { data: customSticker, isLoading: isCustomStickerLoading } =
     useGetCustomStickerById(stickerId);
 
+  const topicStore = useTopicStore();
+
   const [title, setTitle] = useState(topic?.title || customSticker?.title || "");
 
   const editor = useCreateBlockNote({
@@ -86,6 +89,7 @@ export default function BlockNote({ topicId, stickerId }: BlockNoteProps) {
     isDeleteCustomStickerPending;
 
   const onSave = async () => {
+    if (!topicId) return;
     try {
       const content = editor.blocksToHTMLLossy();
       if (!isCustomSticker) {
@@ -98,67 +102,78 @@ export default function BlockNote({ topicId, stickerId }: BlockNoteProps) {
           {
             onSuccess: async () => {
               successToast("토픽이 성공적으로 수정되었어요.");
-              await invalidateMany([
-                [TOPIC.GET_ALL_TOPICS],
-                [TOPIC.GET_TOPIC_BOARD_BY_ID, topicId],
-              ]);
-              router.back();
-            },
-          }
-        );
-      } else {
-        await updateCustomSticker(
-          {
-            customStickerId: stickerId,
-            topicId,
-            title,
-            content,
-          },
-          {
-            onSuccess: async () => {
-              successToast("스티커가 성공적으로 수정되었어요.");
-              await invalidateMany([
-                [TOPIC.GET_TOPIC_BOARD_BY_ID, topicId],
-                [CUSTOM_STICKER.GET_CUSTOM_STICKER_BY_ID, stickerId],
-              ]);
-              router.back();
+              invalidateQueries([TOPIC.GET_ALL_TOPICS]);
+              invalidateQueries([TOPIC.GET_TOPIC_BY_ID, topicId, stickerId]);
+              invalidateQueries([TOPIC.GET_TOPIC_BOARD_BY_ID, topicId]);
+
+              if (!topicStore.isOpen) {
+                router.back();
+              }
+              topicStore.reset();
             },
           }
         );
+        return;
       }
+      if (!stickerId) return;
+      await updateCustomSticker(
+        {
+          customStickerId: stickerId,
+          topicId,
+          title,
+          content,
+        },
+        {
+          onSuccess: async () => {
+            successToast("스티커가 성공적으로 수정되었어요.");
+            invalidateQueries([CUSTOM_STICKER.GET_CUSTOM_STICKER_BY_ID, stickerId]);
+            invalidateQueries([TOPIC.GET_TOPIC_BOARD_BY_ID, topicId]);
+            if (!topicStore.isOpen) {
+              router.back();
+            }
+            topicStore.reset();
+          },
+        }
+      );
     } catch {
       errorToast("토픽 수정에 실패했어요.");
     }
   };
 
   const onDelete = async () => {
-    if (!isCustomSticker) {
+    if (!isCustomSticker && topicId) {
       await removeTopic(topicId, {
         onSuccess: () => {
           successToast("토픽이 성공적으로 삭제되었어요.");
           invalidateQueries([TOPIC.GET_ALL_TOPICS]);
           revalidatePath(`/topic/${topicId}`);
+          revalidatePath(`/topic/${topicId}/sticker`);
           router.push("/topic");
+          topicStore.reset();
         },
         onError: () => {
           errorToast("토픽 삭제에 실패했어요.");
         },
       });
-    } else {
-      await removeCustomSticker(stickerId, {
-        onSuccess: () => {
-          successToast("스티커가 성공적으로 삭제되었어요.");
-          invalidateMany([
-            [TOPIC.GET_TOPIC_BOARD_BY_ID, topicId],
-            [CUSTOM_STICKER.GET_CUSTOM_STICKER_BY_ID, stickerId],
-          ]);
-          router.back();
-        },
-        onError: () => {
-          errorToast("스티커 삭제에 실패했어요.");
-        },
-      });
+      return;
     }
+    if (!stickerId) return;
+    await removeCustomSticker(stickerId, {
+      onSuccess: () => {
+        successToast("스티커가 성공적으로 삭제되었어요.");
+        invalidateMany([
+          [TOPIC.GET_TOPIC_BOARD_BY_ID, topicId],
+          [CUSTOM_STICKER.GET_CUSTOM_STICKER_BY_ID, stickerId],
+        ]);
+        if (!topicStore.isOpen) {
+          router.back();
+        }
+        topicStore.reset();
+      },
+      onError: () => {
+        errorToast("스티커 삭제에 실패했어요.");
+      },
+    });
   };
 
   useEffect(() => {
@@ -197,14 +212,14 @@ export default function BlockNote({ topicId, stickerId }: BlockNoteProps) {
           <Loader2 size={24} className="animate-spin" />
         </div>
       ) : (
-        <>
+        <div className="h-full space-y-2">
           <input
             className="border-border w-full border-b pb-3 text-3xl font-bold outline-none"
             placeholder="제목을 입력해주세요"
             value={title}
             onChange={(e) => setTitle(e.target.value)}
           />
-          <BlockNoteView className="h-[calc(100%-8rem)]" editor={editor} />
+          <BlockNoteView className="h-[calc(100%-9.25rem)]" editor={editor} />
           <div className="flex gap-3">
             <Button
               onClick={onSave}
@@ -237,7 +252,7 @@ export default function BlockNote({ topicId, stickerId }: BlockNoteProps) {
               />
             </Dialog>
           </div>
-        </>
+        </div>
       )}
     </div>
   );