Merge pull request #99 from official-Trippy/feature/#87

feat: ootd 삭제 기능 추가
official-Trippy · Aug 8, 2024 · 016b8ce · 016b8ce
2 parents 68076ff + 0d8d0d5
commit 016b8ce
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 7 deletions.
diff --git a/public/icon_cabap.svg b/public/icon_cabap.svg
diff --git a/src/components/ootd/OotdDetail.tsx b/src/components/ootd/OotdDetail.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import { useQuery } from "react-query";
 import Slider from "react-slick";
-import { fetchOotdPostDetail } from "@/services/ootd.ts/ootdGet";
+import { deleteOotdPost, fetchOotdPostDetail } from "@/services/ootd.ts/ootdGet";
 import { OotdDetailGetResponse } from "@/types/ootd";
 import { useUserStore } from "@/store/useUserStore";
 import "slick-carousel/slick/slick.css";
@@ -18,6 +18,8 @@ import { getWeatherStatusInKorean } from "@/constants/weatherTransition";
 import { useRouter } from "next/navigation";
 import FollowButton from "../followControl/followButton";
 import Cookies from "js-cookie";
+import CabapIcon from "../../../public/icon_cabap.svg";
+import Swal from "sweetalert2";
 
 interface OotdDetailProps {
   id: number;
@@ -35,6 +37,12 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
 
   const userMemberId = userInfo?.memberId;
 
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const handleCabapIconClick = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
   const router = useRouter();
 
   const handleProfileClick = () => {
@@ -49,6 +57,56 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
     }
   };
 
+  const handleDeleteClick = async () => {
+    if (!data || !data.result) {
+      await Swal.fire(
+        '오류 발생',
+        '게시물 데이터를 불러오는 중 문제가 발생했습니다. 다시 시도해주세요.',
+        'error'
+      );
+      return;
+    }
+
+    const result = await Swal.fire({
+      title: '정말 삭제하시겠습니까?',
+      icon: 'warning',
+      iconColor: '#FB3463', 
+      showCancelButton: true,
+      confirmButtonText: '네',
+      cancelButtonText: '아니오',
+      confirmButtonColor: '#FB3463', 
+      customClass: {
+        popup: 'swal-custom-popup',
+        icon: 'swal-custom-icon'
+      }
+    });
+
+    if (result.isConfirmed) {
+      try {
+        await deleteOotdPost(data.result.post.id);
+        await Swal.fire({
+          icon: 'success',
+          title: '게시글을 삭제하였습니다.',
+          confirmButtonText: '확인',
+          confirmButtonColor: '#FB3463', 
+          customClass: {
+            popup: 'swal-custom-popup',
+            icon: 'swal-custom-icon'
+          }
+        }    
+        );
+        router.push('/ootd');
+      } catch (error) {
+        await Swal.fire(
+          '오류 발생',
+          '삭제하는 중 문제가 발생했습니다. 다시 시도해주세요.',
+          'error'
+        );
+      }
+    }
+  };
+
+
   if (isLoading) {
     return null;
   }
@@ -63,6 +121,7 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
 
   const ootdItem = data.result;
 
+
   const SampleNextArrow = (props: any) => {
     const { className, style, onClick, currentSlide, slideCount } = props;
     return (
@@ -108,9 +167,9 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
     <>
       <div className="container mx-auto p-4">
         <div className="w-full max-w-6xl mx-auto">
-          <div className="py-12 flex items-center justify-between">
+          <div className="py-12 flex items-center">
             <div className="flex items-center">
-            <div className="relative w-[68px] h-[68px]">
+            <div className="relative w-[50px] h-[50px]">
                 <Image
                   src={ootdItem.member.profileUrl}
                   alt="사용자 프로필"
@@ -121,7 +180,7 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
                 />
               </div>
               <div className="h-[48px] ml-4">
-                <span className="block font-bold text-[24px] ml-[2px]">
+                <span className="block font-bold text-[20px] ml-[2px]">
                   {ootdItem.member.nickName}
                 </span>
                 <div className="flex items-center gap-2">
@@ -139,15 +198,46 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
                 </div>
               </div>
             </div>
+            <div className="ml-auto flex">
             <div className="flex items-center space-x-2">
               <FollowButton
                 postMemberId={data.result.member.memberId}
                 userMemberId={userMemberId}
               />
-
               <i className="far fa-bookmark text-xl"></i>
               <i className="fas fa-ellipsis-h text-xl"></i>
             </div>
+            {userMemberId === data.result.member.memberId && (
+          <div className="relative my-auto">
+            <Image
+              src={CabapIcon}
+              alt="cabap"
+              width={24}
+              height={24}
+              onClick={handleCabapIconClick}
+              className="cursor-pointer"
+            />
+            {isMenuOpen && (
+              <div className="absolute top-full right-4 mt-4 w-32 bg-white rounded shadow-lg z-10">
+                <div
+                  className="py-4 px-8 text-[#ff4f4f] hover:bg-gray-100 cursor-pointer text-center"
+                  onClick={handleDeleteClick}
+                >
+                  삭제
+                </div>
+                <hr/>
+                <div
+                  className="py-4 px-8 text-black hover:bg-gray-100 cursor-pointer text-center"
+                  onClick={() => {
+                  }}
+                >
+                  수정
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+            </div>
           </div>
           <div className="relative">
           <Slider {...settings}>

diff --git a/src/services/ootd.ts/ootdGet.ts b/src/services/ootd.ts/ootdGet.ts
@@ -61,6 +61,22 @@ export const fetchOotdPostDetail = async (id: number): Promise<OotdDetailGetResp
   }
 };
 
+export const deleteOotdPost = async (postId: number): Promise<void> => {
+  try {
+    const response = await axios.delete(`${backendUrl}/api/post/${postId}`);
+    console.log(response.data);
+
+    if (response.data.isSuccess) {
+      return response.data.result;
+    } else {
+      throw new Error(response.data.message);
+    }
+  } catch (error) {
+    console.error(`게시물을 삭제하는 중 오류가 발생했습니다: ${error}`);
+    throw error;
+  }
+};
+
 
 export const fetchAllOotdPosts = async (page?: number, size?: number, orderType: string = 'LATEST'): Promise<OotdGetResponse> => {
   try {
@@ -92,6 +108,7 @@ export const fetchUserProfile = (memberId: string) => {
 };
 
 
+
 axios.interceptors.request.use(
   async (config) => {
     const accessToken = Cookies.get('accessToken');
@@ -103,4 +120,4 @@ axios.interceptors.request.use(
   (error) => {
     return Promise.reject(error);
   }
-);
+);
diff --git a/src/services/ootd.ts/ootdPost.ts b/src/services/ootd.ts/ootdPost.ts
@@ -10,3 +10,11 @@ export const createPost = async (postRequest: PostRequest, ootdRequest: OotdRequ
   });
   return response.data;
 };
+
+export const updatePost = async (id: number, postRequest: PostRequest, ootdRequest: OotdRequest) => {
+  const response = await axios.patch(`/api/ootd`, {
+    id,
+    ...ootdRequest,
+  });
+  return response.data;
+};