Feat. 좋아요 눌렀을 때 로그인 안했으면 '로그인이 필요합니다.' 문구 출력하도록 기능 추가

Author: HyerimKimm

src/pages/article_page/components/comment/components/comment_item/CommentItem.tsx

@@ -1,6 +1,7 @@
 import dayjs from "dayjs";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
+import { toast } from "react-toastify";
 
 import DeleteIcon from "assets/images/icons/DeleteIcon";
 import EditIcon from "assets/images/icons/EditIcon";
@@ -13,13 +14,16 @@ import useUnLikeComment from "apis/comment_apis/useUnLikeComment";
 import BaseButton from "components/buttons/base_button/BaseButton";
 import TextButton from "components/buttons/text_button/TextButton";
 
+import useIsLogin from "hooks/useIsLogin";
+
 import Reply from "../../../reply/Reply";
 import classes from "./CommentItem.module.scss";
 import EditComment from "./edit_comment/EditComment";
 
 const CommentItem = ({ commentItem }: { commentItem: CommentItemType }) => {
   const articleId = useParams().articleId;
 
+  const { isLogin } = useIsLogin();
   const { mutate: deleteMutate } = useDeleteComment();
   const { mutate: likeMutate } = useLikeComment();
   const { mutate: unLikeMutate } = useUnLikeComment();
@@ -31,6 +35,10 @@ const CommentItem = ({ commentItem }: { commentItem: CommentItemType }) => {
   const [isReplyOpen, setIsReplyOpen] = useState(false);
 
   const handleLikeClick = () => {
+    if (!isLogin) {
+      toast.error("로그인이 필요합니다.");
+      return;
+    }
     if (!isMeLike) {
       likeMutate({
         articleId: Number(articleId),

src/pages/article_page/components/reply/components/reply_input/ReplyInput.tsx

@@ -9,6 +9,8 @@ import useAddReply from "apis/comment_apis/useAddReply";
 import TextButton from "components/buttons/text_button/TextButton";
 import BaseTextarea from "components/inputs/base_textarea/BaseTextarea";
 
+import useIsLogin from "hooks/useIsLogin";
+
 import classes from "./ReplyInput.module.scss";
 
 const ReplyInput = ({ commentId }: { commentId: number }) => {
@@ -22,6 +24,7 @@ const ReplyInput = ({ commentId }: { commentId: number }) => {
   });
 
   const { mutate } = useAddReply();
+  const { isLogin } = useIsLogin();
 
   const onError = (e: FieldErrors) => {
     if (e?.content?.message && typeof e?.content?.message === "string") {
@@ -48,7 +51,16 @@ const ReplyInput = ({ commentId }: { commentId: number }) => {
     <FormProvider {...methods}>
       <form
         className={classes.input_wrap}
-        onSubmit={methods.handleSubmit(onSubmit, onError)}
+        onSubmit={(e: React.FormEvent) => {
+          e.preventDefault();
+
+          if (!isLogin) {
+            toast.error("로그인이 필요합니다.");
+            return;
+          }
+
+          methods.handleSubmit(onSubmit, onError);
+        }}
       >
         <ReplyIcon />
         <div className={classes.input_right}>

src/pages/article_page/components/reply/components/reply_item/ReplyItem.tsx

@@ -1,6 +1,7 @@
 import dayjs from "dayjs";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
+import { toast } from "react-toastify";
 
 import DeleteIcon from "assets/images/icons/DeleteIcon";
 import EditIcon from "assets/images/icons/EditIcon";
@@ -13,6 +14,8 @@ import useUnLikeReply from "apis/comment_apis/useUnLikeReply";
 
 import BaseButton from "components/buttons/base_button/BaseButton";
 
+import useIsLogin from "hooks/useIsLogin";
+
 import classes from "./ReplyItem.module.scss";
 import EditReply from "./edit_reply/EditReply";
 
@@ -25,6 +28,8 @@ const ReplyItem = ({
 }) => {
   const articleId = useParams().articleId;
 
+  const { isLogin } = useIsLogin();
+
   const [isEditMode, setIsEditMode] = useState(false);
 
   const { mutate: deleteMutate } = useDeleteReply();
@@ -44,6 +49,10 @@ const ReplyItem = ({
   };
 
   const handleLikeClick = () => {
+    if (!isLogin) {
+      toast.error("로그인이 필요합니다.");
+      return;
+    }
     if (replyItem.like.isUserLike) {
       unlikeMutate({
         articleId: Number(articleId),

src/pages/my_page/profile_page/components/password_update_modal/PasswordUpdateModal.tsx

@@ -1,5 +1,5 @@
 import { motion } from "framer-motion";
-import { FormProvider, useForm, useFormContext } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 import { toast } from "react-toastify";
 
 import useUpdatePassword from "apis/profile_apis/useUpdatePassword";