refactor: 좋아요 에러 개선 및 공유하기 기능 추가

src/features/projects/hook/useLike.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useParams } from "react-router-dom";
 
 import useProjectLike from "@features/projects/queries/useProjectLike";
 import useProjectUnLike from "@features/projects/queries/useProjectUnLike";
@@ -7,48 +8,43 @@ import { useAuthStore } from "@shared/stores/authStore";
 
 interface LikeResult {
   isLike: boolean;
-  like: () => void;
-  unlike: () => void;
+  likeFn: () => void;
 }
 
-const useLike = ({
-  projectID,
-  likedUsers,
-}: {
-  projectID: string;
-  likedUsers: string[];
-}): LikeResult => {
+const useLike = ({ likedUsers }: { likedUsers: string[] }): LikeResult => {
+  const { id: projectID } = useParams();
   const user = useAuthStore((state) => state.user);
   const { mutate: updateLike, isPending: likePending } = useProjectLike();
   const { mutate: updateUnLike, isPending: unLikePending } = useProjectUnLike();
 
   const initLike = user && likedUsers.includes(user.uid);
   const [isLike, setIsLike] = useState(initLike || false);
 
-  const like = (): void => {
+  const updateLikeStatus = (): void => {
     if (!projectID) return;
-    if (likePending || unLikePending) {
-      alert("동작이 너무 빠릅니다. 잠시 후에 시도해주십시오.");
+
+    if (!user) {
+      alert("로그인 해주세요.");
       return;
     }
-    setIsLike(true);
-    updateLike(projectID);
-  };
 
-  const unlike = (): void => {
-    if (!projectID) return;
     if (likePending || unLikePending) {
       alert("동작이 너무 빠릅니다. 잠시 후에 시도해주십시오.");
       return;
     }
-    setIsLike(false);
-    updateUnLike(projectID);
+
+    if (!isLike) {
+      setIsLike(true);
+      updateLike(projectID);
+    } else {
+      setIsLike(false);
+      updateUnLike(projectID);
+    }
   };
 
   return {
     isLike,
-    like,
-    unlike,
+    likeFn: updateLikeStatus,
   };
 };
 

src/features/projects/ui/ProjectLike.tsx

@@ -3,19 +3,19 @@ import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
 import FavoriteOutlinedIcon from "@mui/icons-material/FavoriteOutlined";
 import ShareIcon from "@mui/icons-material/Share";
 import { Box, styled } from "@mui/material";
-import { useParams } from "react-router-dom";
 
 import useLike from "@features/projects/hook/useLike";
 
-import { getStatusClassname } from "@shared/libs/utils/projectDetail";
+import {
+  getStatusClassname,
+  shareProjectUrl,
+} from "@shared/libs/utils/projectDetail";
 import type { ProjectListRes } from "@shared/types/project";
 
 type ProjectLikeType = Pick<ProjectListRes, "status" | "likedUsers">;
 
 const ProjectLike = ({ values }: { values: ProjectLikeType }): JSX.Element => {
-  const { id } = useParams();
-  const { like, unlike, isLike } = useLike({
-    projectID: id || "",
+  const { likeFn, isLike } = useLike({
     likedUsers: values.likedUsers,
   });
 
@@ -26,14 +26,14 @@ const ProjectLike = ({ values }: { values: ProjectLikeType }): JSX.Element => {
       </StatusBox>
 
       <Box display="flex">
-        <HeadIconBox>
+        <HeadIconBox onClick={likeFn}>
           {isLike ? (
-            <FavoriteOutlinedIcon color="error" onClick={unlike} />
+            <FavoriteOutlinedIcon color="error" />
           ) : (
-            <FavoriteBorderIcon onClick={like} />
+            <FavoriteBorderIcon />
           )}
         </HeadIconBox>
-        <HeadIconBox>
+        <HeadIconBox onClick={shareProjectUrl}>
           <ShareIcon />
         </HeadIconBox>
       </Box>

src/shared/libs/utils/projectDetail.ts

@@ -16,3 +16,10 @@ export const formatDate = (date?: string | Timestamp): string => {
   }
   return date;
 };
+
+export const shareProjectUrl = (): void => {
+  navigator.clipboard
+    .writeText(window.location.href)
+    .then(() => alert("URL이 복사되었습니다."))
+    .catch(() => alert("복사 실패"));
+};