Merge pull request #365 from oduck-team/feat/364

feat: 프로필 링크 복사 구현
oduck-team · Mar 12, 2024 · 76ff953 · 76ff953
2 parents d988904 + f37ae50
commit 76ff953
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
diff --git a/src/__test__/customRender.tsx b/src/__test__/customRender.tsx
@@ -4,6 +4,7 @@ import { RenderOptions, render } from "@testing-library/react";
 import { PropsWithChildren } from "react";
 
 import { OduckApiContext } from "@/contexts/OduckApiContext";
+import { ToastContextProvider } from "@/contexts/ToastContext";
 import { theme } from "@/styles/theme";
 
 export default function customRender(
@@ -23,8 +24,7 @@ export function RenderWithProviders(
     <OduckApiContext.Provider value={oduck}>
       <QueryClientProvider client={testClient}>
         <ThemeProvider theme={theme}>
-          {children}
-          {/* </IconContext.Provider> */}
+          <ToastContextProvider>{children}</ToastContextProvider>
         </ThemeProvider>
       </QueryClientProvider>
     </OduckApiContext.Provider>

diff --git a/src/features/users/components/ProfileImageSection/ProfileSetupButton.tsx b/src/features/users/components/ProfileImageSection/ProfileSetupButton.tsx
@@ -3,6 +3,7 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import BackdropPortal from "@/components/Backdrop/BackdropPortal";
+import useToast from "@/components/Toast/useToast";
 
 import DropDownModal from "../DropDownModal";
 import useDropDownModal from "../DropDownModal/useDropDownModal";
@@ -16,16 +17,27 @@ import {
 
 interface ProfileSetupButtonProps {
   isMine: boolean;
+  userName: string;
 }
 
 export default function ProfileSetupButton({
   isMine,
+  userName,
 }: ProfileSetupButtonProps) {
   const { isDropDownModalOpen, handleDropDownModalToggle } = useDropDownModal();
   const [isReportModalOpen, setIsReportModalOpen] = useState(false);
   const handleReportModalToggle = () => setIsReportModalOpen((prev) => !prev);
   const navigate = useNavigate();
+  const toast = useToast();
   const handleLinkToEditClick = () => navigate("/profile/edit");
+  const handleProfileLinkCopyClick = () => {
+    window.navigator.clipboard //
+      .writeText(`https://oduck.io/users/${userName}`)
+      .then(
+        () => toast.success({ message: "링크가 복사되었어요." }),
+        () => toast.error({ message: "링크 복사에 실패했어요." }),
+      );
+  };
   const handleReportClick = () => {
     handleDropDownModalToggle();
     handleReportModalToggle();
@@ -60,6 +72,7 @@ export default function ProfileSetupButton({
               size="lg"
               variant="solid"
               color="neutral"
+              onClick={handleProfileLinkCopyClick}
             >
               프로필 링크 복사
             </DropDownModal.Button>

diff --git a/src/features/users/components/ProfileImageSection/tests/ProfileSetupButton.test.tsx b/src/features/users/components/ProfileImageSection/tests/ProfileSetupButton.test.tsx
@@ -14,7 +14,10 @@ describe("ProfileSetupButton", () => {
       customRender(
         <MemoryRouter>
           <ProfileImageSection>
-            <ProfileImageSection.ProfileSetupButton isMine={true} />
+            <ProfileImageSection.ProfileSetupButton
+              isMine={true}
+              userName="testUser"
+            />
           </ProfileImageSection>
         </MemoryRouter>,
       );
@@ -38,7 +41,10 @@ describe("ProfileSetupButton", () => {
               path="/"
               element={
                 <ProfileImageSection>
-                  <ProfileImageSection.ProfileSetupButton isMine={true} />
+                  <ProfileImageSection.ProfileSetupButton
+                    isMine={true}
+                    userName="testUser"
+                  />
                 </ProfileImageSection>
               }
             />
@@ -61,7 +67,10 @@ describe("ProfileSetupButton", () => {
     customRender(
       <MemoryRouter>
         <ProfileImageSection>
-          <ProfileImageSection.ProfileSetupButton isMine={false} />
+          <ProfileImageSection.ProfileSetupButton
+            isMine={false}
+            userName="testUser"
+          />
         </ProfileImageSection>
       </MemoryRouter>,
     );

diff --git a/src/features/users/routes/Profile/AboutMe/index.tsx b/src/features/users/routes/Profile/AboutMe/index.tsx
@@ -33,7 +33,10 @@ export default function AboutMe({
     <>
       <ProfileImageSection>
         <ProfileImageSection.Art src={backgroundImage} userName={name} />
-        <ProfileImageSection.ProfileSetupButton isMine={isMine} />
+        <ProfileImageSection.ProfileSetupButton
+          isMine={isMine}
+          userName={name}
+        />
         <ProfileImageSection.ProfileAvatar>
           <ProfileAvatar.Avatar src={thumbnail} userName={name} size="xl" />
         </ProfileImageSection.ProfileAvatar>