[FE] Feat: 예약 가능여부 확인 기능 추가

frontend/src/api/books.ts

@@ -78,6 +78,9 @@ export const useBooksAPI = () => {
 	const postBookBooking = async (bookId: string | undefined) =>
 		await api.post(`/reservation/${bookId}`);
 
+	// check booking
+	const getCheckBookBooking = async (bookId: number | string | undefined) =>
+		await axiosInstance.get(`/reservation/check/${bookId}`);
 	return {
 		getAllBooksList,
 		getBookDetail,
@@ -86,5 +89,6 @@ export const useBooksAPI = () => {
 		deleteBook,
 		postBookRental,
 		postBookBooking,
+		getCheckBookBooking,
 	};
 };

frontend/src/api/hooks/books/useCheckBooking.ts

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+import { useBooksAPI } from '../../books';
+
+export const useGetCheckBooking = (bookId: number | string | undefined) => {
+	const { getCheckBookBooking } = useBooksAPI();
+	const { data: checkBooking } = useQuery({
+		refetchOnWindowFocus: false,
+		refetchOnMount: false,
+		retry: 0,
+		cacheTime: 0,
+		queryKey: ['bookCheckBooking'],
+		queryFn: () => getCheckBookBooking(bookId).then(res => res.data),
+	});
+	return { checkBooking };
+};

frontend/src/api/hooks/books/useGetBookDetail.ts

@@ -37,7 +37,6 @@ export const useGetBookDetail = (
 	} = useQuery({
 		queryKey: [bookId, 'bookDetail'],
 		queryFn: () => getBookDetail(bookId, isLogin),
-		initialData: initialState,
 	});
 
 	return { bookDetailData, isLoading, refetchBookDetail };

frontend/src/components/Books/BookDetail.tsx

@@ -48,7 +48,6 @@ const BookDetail = ({ book, merchant, refetchBookDetail }: BookDetailProps) => {
 		}
 		if (merchant && book) {
 			axiosCreateRoom(merchant?.merchantId, id, book?.bookId).then(res => {
-				// console.log(res);
 				navigate(`/chats/${res}`);
 			});
 		}
@@ -132,15 +131,12 @@ const BookDetail = ({ book, merchant, refetchBookDetail }: BookDetailProps) => {
 						</MerchantName>
 					</Link>
 					<Chat>
-						{isLogin && merchant?.merchantId !== id ? (
-							<ChatButton isLogin={isLogin} onClick={handleChatClick}>
-								채팅
-							</ChatButton>
-						) : (
-							<ChatButton isLogin={isLogin} onClick={handleChatClick}>
-								채팅
-							</ChatButton>
-						)}
+						<ChatButton
+							isLogin={isLogin}
+							fontSize={'small'}
+							onClick={handleChatClick}>
+							채팅
+						</ChatButton>
 					</Chat>
 				</MerchantInfo>
 			</BookInfo>
@@ -149,7 +145,6 @@ const BookDetail = ({ book, merchant, refetchBookDetail }: BookDetailProps) => {
 				<legend>대여 정보</legend>
 				<BookRentalInfo>
 					<label>대여료: {book?.rentalFee?.toLocaleString()}원</label>
-					{/* <Partition>|</Partition> */}
 					<label>대여기간: 10일</label>
 				</BookRentalInfo>
 			</BookInfo>
@@ -233,15 +228,13 @@ interface ChatButtonProps {
 	isLogin: boolean;
 }
 
-const ChatButton = styled.button<ChatButtonProps>`
+const ChatButton = styled(Button)<ChatButtonProps>`
 	background-color: ${props => (props.isLogin ? '#ffc700' : '#a7a7a7')};
 	color: black;
-	border: none;
 	padding: 0.5rem 1rem;
-	border-radius: 5px;
 	cursor: pointer;
 	:hover {
-		background-color: ${props => (props.isLogin ? '#e8b601' : '#8c8c8c')};
+		background-color: ${props => (props.isLogin ? '#e8b601' : '#a7a7a7')};
 	}
 `;
 

frontend/src/components/Member/ReservationBookList.tsx

@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom';
 
 import Animation from '../Loading/Animation';
 import Button from '../common/Button';
-import ButtonStatus from '../Merchant/ButtonStatus';
 
 import { useGetReservList } from '../../api/hooks/member/useGetReservList';
 import { useDeleteReserv } from '../../api/hooks/books/useDeleteReserv';
@@ -18,18 +17,6 @@ const ReservationBookList = () => {
 		navigate(`/books/${id}`);
 	};
 
-	// const handleClickIcon = (
-	// 	e: React.MouseEvent<HTMLDivElement, MouseEvent>,
-	// 	bookId: number,
-	// ) => {
-	// 	e.stopPropagation();
-	// 	if (window.confirm('정말 취소하시겠습니까?')) {
-	// 		mutate(bookId);
-	// 	} else {
-	// 		return;
-	// 	}
-	// };
-
 	const { deleteMutate } = useDeleteReserv(cancelId);
 
 	const {
@@ -61,7 +48,7 @@ const ReservationBookList = () => {
 		const isTrue = window.confirm(`'${title}' 도서의 예약을 취소하시겠습니까?`);
 		if (!isTrue) return;
 		setCancelId(reservationId);
-		// deleteMutate();
+		deleteMutate();
 	};
 
 	useEffect(() => {
@@ -127,17 +114,12 @@ const ReservationBookList = () => {
 			<ScrollEnd
 				ref={infiniteScrollTarget}
 				className={`${hasNextPage ? '' : 'hidden'}`}>
-				{/* className={`${isFetchingNextPage ? '' : 'hidden'}`}> */}
 				{isFetchingNextPage ? <p>Loading more books ...</p> : ''}
 			</ScrollEnd>
 		</>
 	);
 };
 
-const Box = styled.div`
-	/* padding: 0 1rem; */
-`;
-
 const Container = styled.div`
 	width: 90%;
 	display: flex;
@@ -169,16 +151,13 @@ const InfoWrapped = styled.div`
 	justify-content: space-between;
 	align-items: center;
 	p {
-		/* font-size: ${props => props.theme.fontSizes.paragraph};
-		margin-left: 1rem; */
 		font-size: 13px;
 		margin-left: 1rem;
 		display: flex;
 		flex-direction: column;
 		padding-top: 10px;
 	}
 	.bookname {
-		/* font-size: ${props => props.theme.fontSizes.subtitle}; */
 		font-size: 16px;
 		font-weight: 600;
 		padding-top: 0px;
@@ -193,7 +172,6 @@ const EmptyBox = styled.div`
 	align-items: center;
 	p {
 		font-size: ${props => props.theme.fontSizes.subtitle};
-		/* font-size: 16px; */
 		font-weight: 600;
 	}
 `;

frontend/src/pages/BooksBookingPage.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-import { useLocation, useParams } from 'react-router-dom';
-import { useState } from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
 
 // components
 import {
@@ -17,6 +17,9 @@ import {
 
 import { calcCalendarDate } from 'utils/calcCalendarDate';
 import { usePostBookBooking } from 'api/hooks/books/usePostBookBooking';
+import { useGetCheckBooking } from 'api/hooks/books/useCheckBooking';
+import notify from 'utils/notify';
+import { useDispatch } from 'react-redux';
 
 interface LinkProps {
 	state: {
@@ -33,10 +36,20 @@ const BooksBookingPage = () => {
 
 	const { state } = useLocation() as LinkProps;
 	const { bookId } = useParams();
+	const navigate = useNavigate();
+	const dispatch = useDispatch();
 
 	const { month, day, rentalPeriod } = calcCalendarDate(state.rentalEnd);
 
 	const { mutateBookBooking } = usePostBookBooking(bookId);
+	const { checkBooking } = useGetCheckBooking(bookId);
+
+	useEffect(() => {
+		if (!checkBooking) {
+			notify(dispatch, '해당 도서의 대여자는 예약할 수 없습니다.');
+			navigate(`/books/${bookId}`);
+		}
+	}, []);
 
 	// 예약 요청
 	const handleRentalButton = () => {

frontend/src/redux/slice/notificationSlice.ts

@@ -21,6 +21,10 @@ const notificationSlice = createSlice({
 	initialState,
 	reducers: {
 		enqueueNotification: (state, action: PayloadAction<payloadType>) => {
+			const duplicatedMessage = state.messages.filter(
+				message => message.message === action.payload.message,
+			);
+			if (duplicatedMessage.length) return;
 			state.messages = [...state.messages, action.payload];
 		},
 		dequeueNotification: state => {