[FE] Feat #133: bucket 삭제(delete) api 연결 및 수정 버튼 클릭 시 페이지 이동 기능 추가

Change-Id: Ie4ecf3c386603a8e05dabddfb54f15d9d63d6fc0
ggumms · Feb 13, 2024 · 6c2ba48 · 6c2ba48
1 parent 60413c7
commit 6c2ba48
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
diff --git a/frontend/src/pages/Bucket/BucketDetail/api.ts b/frontend/src/pages/Bucket/BucketDetail/api.ts
@@ -4,7 +4,8 @@ import { IBucketInfo, ICommentListInfo, UserInfoType } from '../../../interfaces
 import { IReactionInfo, ReactionType } from '../../../types/bucket'
 // Todo : api 함수 이름들 다 fetch 들어가도록 수정
 
-// :: BucketDetail
+// :: Bucket
+// - Get Detail Request
 interface IGetBucketInfoRes {
 	result: string
 	bucketInfo: IBucketInfo
@@ -26,6 +27,15 @@ export const getBucketDetailInfo = async ({
 	const userRes = await instance.get<IGetUserInfoRes>(`user/${writerId}`)
 	return { bucketInfo: bucketRes.data.bucketInfo, userInfo: userRes.data.userInfo }
 }
+// - Delete Request
+interface IDeleteBucketRes {
+	result: string
+	message: string
+}
+export const deleteBucket = async (id: string): Promise<'success' | 'fail'> => {
+	const deleteRes = await instance.get<IDeleteBucketRes>(`bucket/${id}`)
+	return deleteRes.data.result === 'ok' ? 'success' : 'fail'
+}
 
 // :: Reaction
 // - Get Request

diff --git a/frontend/src/pages/Bucket/BucketDetail/component/BucketMoreButton.tsx b/frontend/src/pages/Bucket/BucketDetail/component/BucketMoreButton.tsx
@@ -1,21 +1,25 @@
 import { Menu, Transition } from '@headlessui/react'
 import { AiOutlineMore } from 'react-icons/ai'
 import { useRouter } from '../../../../hooks/useRouter'
-// import { useParams } from 'react-router'
+import { useParams } from 'react-router'
+import { deleteBucket } from '../api'
 
 const BucketMoreButton = () => {
 	const { routeTo } = useRouter()
-	// const { bucketId } = useParams()
+	const { bucketId } = useParams()
 
 	const handleClickModifyButton = () => {
-		//  수정
+		routeTo(`/bucket/modify/${bucketId}`)
 	}
 
 	const handleClickDeleteButton = async () => {
-		const deleteRes = await 'success'
-		// const deleteRes = await deleteBucket(bucketId)
+		if (!bucketId) {
+			return
+		}
+
+		const deleteRes = await deleteBucket(bucketId)
 		if (deleteRes === 'success') {
-			routeTo('/')
+			routeTo('/mypage')
 		}
 	}
 

diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
@@ -15,7 +15,7 @@ import BucketDetail from './pages/Bucket/BucketDetail'
 import AddBucket from './pages/Bucket/AddBucket'
 import MainInfo from './pages/Bucket/AddBucket/MainInfo/MainInfo'
 import CategoryInfo from './pages/Bucket/AddBucket/CategoryInfo/CategoryInfo'
-import PlaceInfo from './pages/Bucket/AddBucket/PlaceInfo'
+// import PlaceInfo from './pages/Bucket/AddBucket/PlaceInfo'
 import AdditionalInfo from './pages/Bucket/AddBucket/AdditionalInfo/AdditionalInfo'
 import { MultiPageHeaderInfo } from './types/router'
 import NotFoundPage from './pages/NotfoundPage'
@@ -112,7 +112,27 @@ const routerData: RouterElement[] = [
 				label: '카테고리',
 			},
 			{ path: 'main', element: <MainInfo />, label: '꿈내용' },
-			{ path: 'place', element: <PlaceInfo />, label: '장소' },
+			// { path: 'place', element: <PlaceInfo />, label: '장소' },
+			{ path: 'additional', element: <AdditionalInfo />, label: '추가정보' },
+		],
+	},
+	{
+		path: '/bucket/modify/:bucketId',
+		element: <AddBucket />,
+		label: '버킷작성',
+		children: [
+			{
+				path: '',
+				element: <CategoryInfo />,
+				label: '카테고리',
+			},
+			{
+				path: 'category',
+				element: <CategoryInfo />,
+				label: '카테고리',
+			},
+			{ path: 'main', element: <MainInfo />, label: '꿈내용' },
+			// { path: 'place', element: <PlaceInfo />, label: '장소' },
 			{ path: 'additional', element: <AdditionalInfo />, label: '추가정보' },
 		],
 	},