[common/features, apps/cs] feat: 게시물 퍼가기(url 복사) 기능 추가

apps/common/features/package.json

@@ -29,9 +29,11 @@
     "dayjs": "^1.11.13",
     "js-cookie": "^3.0.5",
     "next": "15.3.0",
+    "next-themes": "^0.4.6",
     "react-chartjs-2": "^5.3.0",
     "react-dnd": "^16.0.1",
     "react-hook-form": "^7.54.2",
+    "sonner": "^2.0.1",
     "tailwindcss-animate": "^1.0.7",
     "tus-js-client": "^4.3.1",
     "zod": "^3.24.2",

apps/common/features/src/app/providers/app-provider.tsx

@@ -5,10 +5,11 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ConfirmProvider } from "@frontend-opensource/use-react-hooks";
 import { AuthWrapper } from "@/entities/auth";
 import { MenuWrapper } from "@/entities/menu";
-import { StoreProvider, PromptProvider } from "@/shared/providers";
+import { Toaster } from "@/shared/ui/sonner";
 import { AlertDialog } from "@/shared/ui/alert-dialog";
 import { PromptDialog } from "@/shared/ui/prompt-dialog";
 import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+import { StoreProvider, PromptProvider } from "@/shared/providers";
 
 const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
   const queryClient = new QueryClient();
@@ -22,6 +23,7 @@ const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
               <AlertDialog />
               <PromptDialog />
               <ConfirmDialog />
+              <Toaster position="top-center" />
             </AuthWrapper>
           </ConfirmProvider>
         </PromptProvider>

apps/common/features/src/shared/ui/sonner.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

apps/common/features/src/widgets/post/ui/post-action.tsx

@@ -1,5 +1,7 @@
+import { toast } from "sonner";
+import { useEffect } from "react";
 import { useRouter, usePathname } from "next/navigation";
-import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { useClipboard, useConfirm } from "@frontend-opensource/use-react-hooks";
 import { Button } from "@common/components";
 import { AuthorityButton } from "@/entities/menu-authority";
 import { useMenuStore, useUserStore } from "@/shared/lib";
@@ -13,6 +15,7 @@ type PostActionProps = {
 function PostAction({ registerId, children, handleDelete }: PostActionProps) {
   const router = useRouter();
   const pathname = usePathname();
+  const { copyText, copied } = useClipboard();
   const { confirm } = useConfirm();
   const bbsInfo = useMenuStore((state) => state.bbsInfo);
   const userInfo = useUserStore((state) => state.userInfo);
@@ -37,10 +40,22 @@ function PostAction({ registerId, children, handleDelete }: PostActionProps) {
     return true;
   };
 
+  useEffect(() => {
+    if (copied) toast.success("URL이 클립보드에 복사되었습니다.");
+  }, [copied]);
+
   return (
     <>
       {children}
       <div className="flex justify-center gap-4 pb-12 pt-10">
+        <Button
+          size="lg"
+          color="emerald"
+          type="button"
+          onClick={() => copyText(window.location.href)}
+        >
+          퍼가기
+        </Button>
         <Button
           size="lg"
           color="white"