✨ Feat, 💄 Design : 예약 ON_HOLD, PAYMENT_FAIL처리, paymentsucces page 수정,…

… 헤더 hr 위치 조정

✨ Feat, 💄 Design : 예약 ON_HOLD, PAYMENT_FAIL처리, paymentsucces page 수정, 헤더 hr 위치 조정

src/apis/reservation.ts

@@ -36,7 +36,7 @@ export const getLatestReservation = async (): Promise<Reservation> => {
 };
 
 // 사업자의 예약자 조회
-export const getAllReserver = async (): Promise<ReserverInfo> => {
+export const getAllReserver = async (): Promise<ReserverInfo[]> => {
   const response = await authInstance.get('/api/v1/reservations/all/workplace');
   return response.data;
 };

src/components/LogoAndNotification.tsx

@@ -2,6 +2,7 @@ import Logo from '@assets/images/roomit_logo.png';
 import { RiNotification3Line } from 'react-icons/ri';
 import { Link, useNavigate } from 'react-router-dom';
 import { getRole } from '@utils/auth';
+// import useNotificationStore from '@store/notificationStore';
 
 interface HeaderProps {
   isLogin: boolean;
@@ -10,6 +11,7 @@ interface HeaderProps {
 const LogoAndNotification = ({ isLogin }: HeaderProps) => {
   const navigate = useNavigate();
   const role = getRole();
+  // const { activeNoti } = useNotificationStore();
 
   const handleMoveToNotiPageClick = () => {
     if (role === 'ROLE_USER') {

src/pages/HostNotiPage/components/HostNotiList.tsx

@@ -13,19 +13,24 @@ const HostNotiList = () => {
     <>
       {sortedNotification && sortedNotification.length > 0 ? (
         <div className='mt-4 flex w-[375px] flex-col justify-center gap-[13px] pb-24'>
-          {sortedNotification.map((item) => {
+          {sortedNotification.map((item, index) => {
+            const uniqueKey =
+              item.notificationType === 'REVIEW_CREATED'
+                ? `review-${item.reviewId || index}`
+                : `reservation-${item.reservationId || index}`;
+
             if (item.notificationType === 'REVIEW_CREATED') {
               return (
                 <HostReviewNotiCard
-                  key={item.alrimId}
+                  key={uniqueKey}
                   item={item}
                 />
               );
             }
 
             return (
               <HostReservationNotiCard
-                key={item.alrimId}
+                key={uniqueKey}
                 item={item}
               />
             );

src/pages/ManagementReserverPage/components/ReserverList.tsx

@@ -10,20 +10,19 @@ const ReserverList = () => {
     );
   });
 
+  console.log(reserverList);
+
   return (
     <>
       {reserverList.length > 0 ? (
         <div className='mt-[6px] flex w-[375px] flex-col justify-center pb-24'>
           {sortedReserverList.map((item) => {
-            if (item.reservationState !== 'ON_HOLD') {
-              return (
-                <ReserverCard
-                  key={item.reservationId}
-                  item={item}
-                />
-              );
-            }
-            return null;
+            return (
+              <ReserverCard
+                key={item.reservationId}
+                item={item}
+              />
+            );
           })}
         </div>
       ) : (

src/pages/ManagementReserverPage/hooks/useGetReserver.ts

@@ -1,13 +1,21 @@
 import { getAllReserver } from '@apis/reservation';
 import { useQuery } from '@tanstack/react-query';
-import { ReserverInfo } from '@typings/types';
 
 const useGetReserver = () => {
   const { data } = useQuery({
     queryKey: ['reserver'],
-    queryFn: () => getAllReserver(),
+    queryFn: async () => {
+      const reserverList = await getAllReserver();
+      const filteredReserverList = reserverList.filter(
+        (item) =>
+          item.reservationState !== 'ON_HOLD' &&
+          item.reservationState !== 'PAYMENT_FAIL',
+      );
+
+      return filteredReserverList;
+    },
   });
-  return { reserverList: (data ?? []) as ReserverInfo[] };
+  return { reserverList: data ?? [] };
 };
 
 export default useGetReserver;

src/pages/ModifySpace/index.tsx

@@ -117,7 +117,7 @@ const ModifySpace = () => {
       ) : (
         <HeaderOnlyTitle title='공간 등록 수정' />
       )}
-      <hr className='fixed top-[93px] mx-[22.5px] h-0.5 w-custom border-0 bg-black' />
+      <hr className='fixed top-[70px] mx-[22.5px] h-0.5 w-custom border-0 bg-black' />
       {selectedRoomId ? (
         <RoomModify
           room={spaceFormData.rooms.find(({ id }) => id === selectedRoomId)!}

src/pages/PaymentPage/PaymentSuccessPage.tsx

@@ -8,7 +8,7 @@ const PaymentSuccessPage = () => {
 
   const { orderName, totalAmount } = responseData;
 
-  const formattedAmount = `${totalAmount.toLocaleString('ko-KR')}원`;
+  const formattedAmount = `${totalAmount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}원`;
 
   return (
     <MainLayout>

src/pages/RegisterSpace/index.tsx

@@ -72,7 +72,7 @@ const RegisterSpace = () => {
       ) : (
         <HeaderOnlyTitle title='공간 등록' />
       )}
-      <hr className='fixed top-[93px] mx-[22.5px] h-0.5 w-custom border-0 bg-black' />
+      <hr className='fixed top-[70px] mx-[22.5px] h-0.5 w-custom border-0 bg-black' />
       {selectedRoomId ? (
         <RoomForm
           room={spaceFormData.rooms.find(({ id }) => id === selectedRoomId)!}

src/pages/ReservationListPage/components/ReservationDetailCard.tsx

@@ -154,7 +154,7 @@ const ReservationDetailCard = ({ item }: { item: Reservation }) => {
                     결제 취소된 예약입니다.
                   </span>
                 ))}
-              {buttonText === 'review' && (
+              {buttonText === 'review' && state !== 'CANCELLED' && (
                 <ButtonInCard
                   name='리뷰 작성'
                   onClickFunction={handleReviewButton}

src/pages/ReservationListPage/hooks/useGetAllMyReservations.ts

@@ -5,7 +5,14 @@ import { useQuery } from '@tanstack/react-query';
 const useGetAllMyReservations = () => {
   const { data } = useQuery({
     queryKey: ['myReservationList'],
-    queryFn: () => getAllReservation(),
+    queryFn: async () => {
+      const reservationList = await getAllReservation();
+      const filteredReservation = reservationList.filter(
+        (item) => item.state !== 'ON_HOLD' && item.state !== 'PAYMENT_FAIL',
+      );
+
+      return filteredReservation;
+    },
   });
 
   return { reservationList: data ?? [] };

src/pages/UserMypage/hooks/useGetLatestReservation.ts

@@ -4,7 +4,17 @@ import { useQuery } from '@tanstack/react-query';
 const useGetLatestReservation = () => {
   const { data } = useQuery({
     queryKey: ['latestReservation'],
-    queryFn: () => getLatestReservation(),
+    queryFn: async () => {
+      const latestReservation = await getLatestReservation();
+      if (
+        latestReservation.state === 'ON_HOLD' ||
+        latestReservation.state === 'PAYMENT_FAIL'
+      ) {
+        return null;
+      }
+
+      return latestReservation;
+    },
   });
   return { latestReservation: data };
 };

src/pages/WriteReviewPage/index.tsx

@@ -23,7 +23,7 @@ const WriteReviewPage = () => {
   return (
     <MainLayout>
       <HeaderOnlyTitle title='리뷰 작성' />
-      <hr className='fixed top-[93px] mx-[22.5px] h-0.5 w-custom border-0 bg-black' />
+      <hr className='fixed top-[70px] mx-[22.5px] h-0.5 w-custom border-0 bg-black' />
       <ReservationInfo item={reservationInfo} />
       <hr className='mx-[22.5px] w-custom border-[0.5px] border-dashed' />
       <WriteReview

src/store/notificationStore.ts

@@ -9,6 +9,7 @@ interface NotificationState {
   connect: () => void;
   disconnect: () => void;
   state: boolean;
+  activeNoti: boolean;
 }
 
 const EventSource = EventSourcePolyfill || NativeEventSource;
@@ -21,6 +22,7 @@ const useNotificationStore = create<NotificationState>((set) => ({
   message: null,
   state: true,
   link: '/',
+  activeNoti: false,
 
   connect: () => {
     const token = getAuthToken() || '';
@@ -39,7 +41,6 @@ const useNotificationStore = create<NotificationState>((set) => ({
 
     eventSource.onmessage = (event) => {
       const newMessage: BusinessNotification = JSON.parse(event.data);
-      console.log(newMessage);
 
       if (
         newMessage.content === 'connected!' ||
@@ -60,6 +61,8 @@ const useNotificationStore = create<NotificationState>((set) => ({
             ? '새 리뷰가 등록되었습니다.'
             : '새로운 예약이 등록되었습니다.';
 
+        set(() => ({ activeNoti: true }));
+
         set((state) => {
           if (state.message === newText) {
             return state;

src/typings/types.ts

@@ -53,7 +53,8 @@ export interface Business {
 
 // 사업자 알림
 export interface BusinessNotification {
-  alrimId: number;
+  reviewId?: number;
+  reservationId?: number;
   content: string;
   createdAt: string;
   workplaceId: number;