Merge branch 'develop' of https://github.com/4bujak-4bujak/frontend i…

…nto develop
4bujak-4bujak · Jun 11, 2024 · 74c3757 · 74c3757
2 parents 83ffe31 + 459391d
commit 74c3757
Show file tree

Hide file tree

Showing 20 changed files with 673 additions and 124 deletions.
diff --git a/src/api/reservation/getBranchesByDistance.ts b/src/api/reservation/getBranchesByDistance.ts
@@ -1,12 +1,8 @@
 import { BranchDistanceResponse } from "../types/branch";
 
-export const getBranchesByDistance = async (latitude: number, longitude: number): Promise<BranchDistanceResponse[]> => {
+export const getBranchesByDistance = async (branchId: number): Promise<BranchDistanceResponse[]> => {
   const backendUrl = process.env.NEXT_PUBLIC_BASE_URL;
-  const url = new URL(`${backendUrl}branches/distance`);
-
-  // Add latitude and longitude as query parameters
-  url.searchParams.append('latitude', String(latitude));
-  url.searchParams.append('longitude', String(longitude));
+  const url = new URL(`${backendUrl}branches/${branchId}/near`);
 
   const token = document.cookie.replace(/(?:(?:^|.*;\s*)token\s*=\s*([^;]*).*$)|^.*$/, "$1");
 
@@ -34,4 +30,4 @@ export const getBranchesByDistance = async (latitude: number, longitude: number)
   }
 
   return data.data;
-};
+};
diff --git a/src/api/types/branch.ts b/src/api/types/branch.ts
@@ -4,7 +4,7 @@ export interface Branch {
   branchAddress: string;
   branchLatitude: number;
   branchLongitude: number;
-  branchId?: number;
+  branchId: number;
 }
 
 export interface ModalProps {

diff --git a/src/components/home/AvailableRoom.tsx b/src/components/home/AvailableRoom.tsx
@@ -1,9 +1,27 @@
 'use client';
+import { useBranchStore } from '@/store/branch.store';
 import { format } from 'date-fns';
 import React, { useEffect, useState } from 'react';
+import { useQuery, useQueryClient } from 'react-query';
+import { getAllAvailableCount } from './remote/mainReservation';
+import { useRouter } from 'next/router';
+import { getSelectedOfficeInfo } from '@/api/map/getSelectedOffice';
+import { useBranchStore2 } from '@/store/reserve.store';
 
 const AvailableRoom = () => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
   const [currentTime, setCurrentTime] = useState(format(new Date(), 'HH:mm'));
+  const selectedBranch = useBranchStore((state) => state.selectedBranch);
+  const { setReservedBranch } = useBranchStore2();
+
+  const { data } = useQuery(
+    ['AllAvailableCount', selectedBranch?.branchId],
+    () => getAllAvailableCount(selectedBranch?.branchId as number),
+    {
+      enabled: !!selectedBranch?.branchId
+    }
+  );
 
   useEffect(() => {
     const handleVisibilityChange = () => {
@@ -17,6 +35,24 @@ const AvailableRoom = () => {
     };
   }, []);
 
+  const handleGoToReservation = async () => {
+    try {
+      const data = await getSelectedOfficeInfo(selectedBranch!.branchName);
+      if (data.data) {
+        setReservedBranch(data?.data, Date.now());
+        router.push({
+          pathname: '/reservation',
+        });
+      }
+    } catch (error) {
+      console.error('Error updating selected branch:', error);
+    }
+  };
+
+  if (!data) {
+    return null;
+  }
+
   return (
     <div className="pb-10">
       {/* 상단 */}
@@ -26,7 +62,13 @@ const AvailableRoom = () => {
           <div>{currentTime} 기준</div>
           <div
             className="cursor-pointer"
-            onClick={() => setCurrentTime(format(new Date(), 'HH:mm'))}>
+            onClick={() => {
+              queryClient.invalidateQueries([
+                'AllAvailableCount',
+                selectedBranch?.branchId
+              ]);
+              setCurrentTime(format(new Date(), 'HH:mm'));
+            }}>
             <img src="/home/refresh.svg" alt="" />
           </div>
         </div>
@@ -41,12 +83,16 @@ const AvailableRoom = () => {
           <div className="text-gray-600 text-sm font-normal ">미팅룸</div>
           <div className="flex justify-center items-center gap-1">
             <div>
-              <span className="text-space-purple text-[26px] font-medium">1</span>
+              <span className="text-space-purple text-[26px] font-medium">
+                {data?.availableMeetingRoomCount}
+              </span>
             </div>
             <div>
               <img src="/home/slash.svg" alt="" />
             </div>
-            <div className="text-gray-400 font-medium text-base">30</div>
+            <div className="text-gray-400 font-medium text-base">
+              {data?.totalMeetingRoomCount}
+            </div>
           </div>
         </div>
 
@@ -57,12 +103,16 @@ const AvailableRoom = () => {
           <div className="text-gray-600 text-sm font-normal ">리차징룸</div>
           <div className="flex justify-center items-center gap-1">
             <div>
-              <span className="text-space-purple text-[26px] font-medium">1</span>
+              <span className="text-space-purple text-[26px] font-medium">
+                {data?.availableRechargingRoomCount}
+              </span>
             </div>
             <div>
               <img src="/home/slash.svg" alt="" />
             </div>
-            <div className="text-gray-400 font-medium text-base">30</div>
+            <div className="text-gray-400 font-medium text-base">
+              {data?.totalRechargingRoomCount}
+            </div>
           </div>
         </div>
 
@@ -73,18 +123,23 @@ const AvailableRoom = () => {
           <div className="text-gray-600 text-sm font-normal ">포커스존</div>
           <div className="flex justify-center items-center gap-1">
             <div>
-              <span className="text-space-purple text-[26px] font-medium">1</span>
+              <span className="text-space-purple text-[26px] font-medium">
+                {data?.availableFocusDeskCount}
+              </span>
             </div>
             <div>
               <img src="/home/slash.svg" alt="" />
             </div>
-            <div className="text-gray-400 font-medium text-base">30</div>
+            <div className="text-gray-400 font-medium text-base">
+              {data?.totalFocusDeskCount}
+            </div>
           </div>
         </div>
       </div>
 
       {/* 하단 */}
-      <div className="cursor-pointer mt-8 rounded-lg w-full h-12 border-2 border-space-purple flex justify-center items-center text-space-purple text-[15px] font-semibold">
+      <div
+        className="cursor-pointer mt-8 rounded-lg w-full h-12 border-2 border-space-purple flex justify-center items-center text-space-purple text-[15px] font-semibold" onClick={handleGoToReservation}>
         예약하기
       </div>
     </div>

diff --git a/src/components/home/CurrentOffice.tsx b/src/components/home/CurrentOffice.tsx
@@ -13,7 +13,6 @@ const CurrentOffice = () => {
   const setSelectedBranch = useBranchStore((state) => state.setSelectedBranch);
   const [isHydrated, setIsHydrated] = useState(false);
   const { isCurrent } = useIsCurrentBranch();
-  console.log(!isCurrent);
 
   const initialBranch: Branch = {
     branchId: 27,
@@ -31,10 +30,6 @@ const CurrentOffice = () => {
     }
   }, [selectedBranch, setSelectedBranch]);
 
-  useEffect(() => {
-    console.log('Current selectedBranch:', selectedBranch);
-  }, [selectedBranch]);
-
   const handleBranchSelect = (branch: Branch) => {
     setSelectedBranch(branch, Date.now());
     setShowSearchModal(false);
@@ -70,10 +65,10 @@ const CurrentOffice = () => {
 
         {!isCurrent ? (
           <div className="absolute z-50 top-6 right-20">
-            <div className="ml-[22px] opacity-85 ">
+            <div className="ml-[22px] opacity-95 ">
               <img src="/home/triangle.svg" alt="" />
             </div>
-            <div className="border-t border-space-purple-dark-active p-2 opacity-85 bg-space-purple-dark-active rounded text-white text-sm font-normal">
+            <div className="border-t border-space-purple-dark-active p-2 opacity-95 bg-space-purple-dark-active rounded text-white text-sm font-normal">
               이 지점이 맞나요?
             </div>
           </div>

diff --git a/src/components/home/MainPageIndex.tsx b/src/components/home/MainPageIndex.tsx
@@ -8,8 +8,11 @@ import UserInfo from './UserInfo';
 import OfficeInfo from './OfficeInfo';
 import WeekSchedule from './weekSchedule/WeekSchedule';
 import AvailableRoom from './AvailableRoom';
+import { useReservationStore } from '@/store/reservationModal.store';
+import OfficeDeleteModal from './officeInfo/OfficeDeleteModal';
 
 const MainPageIndex = () => {
+  const { deleteOpen, deleteDeskId } = useReservationStore();
   return (
     <div className="mb-[100px]">
       <BgPurpleLayout>
@@ -24,6 +27,7 @@ const MainPageIndex = () => {
         <WeekSchedule />
         <AvailableRoom />
       </div>
+      {deleteOpen && deleteDeskId !== null && <OfficeDeleteModal />}
     </div>
   );
 };

diff --git a/src/components/home/OfficeInfo.tsx b/src/components/home/OfficeInfo.tsx
@@ -26,6 +26,9 @@ const OfficeInfo = () => {
         setIsCurrent(true);
       }
     }
+    if (data?.length == 0) {
+      setIsCurrent(true);
+    }
   }, [selectedBranch, setIsCurrent, data]);
 
   if (!data) {

diff --git a/src/components/home/OfficeNotice.tsx b/src/components/home/OfficeNotice.tsx
@@ -1,18 +1,39 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useNotices } from '@/hook/useNotices';
+import { getSelectedOfficeInfo } from '@/api/map/getSelectedOffice';
+import { useBranchStore } from '@/store/branch.store';
+import { useRouter } from 'next/router';
 
 const OfficeNotice: React.FC = () => {
   const { urgentNoticeTitle, urgentNoticeContent } = useNotices();
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const selectedBranch = useBranchStore((state) => state.selectedBranch);
 
-  const handleModalOpen = () => {
-    setIsModalOpen(true);
-  };
+  const router = useRouter();
 
-  const handleModalClose = () => {
-    setIsModalOpen(false);
+  const handleOfficeInfo = async () => {
+    try {
+      const data = await getSelectedOfficeInfo(selectedBranch!.branchName);
+      const officeInfo = data.data;
+      console.log(officeInfo);
+      router.push({
+        pathname: `/branches/${encodeURIComponent(selectedBranch!.branchName)}`,
+        query: {
+          name: selectedBranch!.branchName,
+          urgentNoticeTitle,
+          urgentNoticeContent,
+          address: officeInfo.branchAddress,
+          branchPhoneNumber: officeInfo.branchPhoneNumber,
+          roadFromStation: officeInfo.roadFromStation,
+          stationToBranch: officeInfo.stationToBranch.join(','),
+          branchId: officeInfo.branchId as number,
+          scrollToOffice: true
+        }
+      }, `/branches/${encodeURIComponent(selectedBranch!.branchName)}`);
+    } catch (error) {
+      console.error('Error fetching office info:', error);
+    }
   };
-
+  
   return (
     <>
       <div className="w-full h-12 mt-7 bg-gray-200 flex items-center gap-[13px] px-[13px] py-[14px] rounded shadow border border-gray-200">
@@ -25,30 +46,12 @@ const OfficeNotice: React.FC = () => {
             {urgentNoticeTitle ? urgentNoticeTitle : '긴급 공지가 없습니다.'}
           </div>
           {urgentNoticeContent && (
-            <div onClick={handleModalOpen} className="cursor-pointer">
+            <div onClick={handleOfficeInfo} className="cursor-pointer">
               <img src="/home/toNext.svg" alt="" />
             </div>
           )}
         </div>
       </div>
-      {isModalOpen && (
-        <div className="fixed w-full inset-0 flex items-center justify-center z-[99999]">
-          <div
-            className="fixed inset-0 bg-black opacity-50"
-            onClick={handleModalClose}></div>
-          <div className="bg-white p-6 rounded shadow-lg z-50 max-w-[393px] mx-[20px] px-[20px]">
-            <h2 className="text-center text-xl font-semibold mb-4">긴급 공지</h2>
-            <p>{urgentNoticeContent}</p>
-            <div className="w-full">
-              <button
-                onClick={handleModalClose}
-                className="flex mx-auto mt-4 w-[163px] h-[36px] bg-[#EDEBF8] text-[#3B268C] px-4 py-[6px] rounded-md justify-center items-center">
-                닫기
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
     </>
   );
 };

diff --git a/src/components/home/model/mainReservation.ts b/src/components/home/model/mainReservation.ts
@@ -0,0 +1,12 @@
+import { ICommon } from '@/api/types/common';
+
+export interface AllAvailableCountData {
+  totalMeetingRoomCount: number;
+  availableMeetingRoomCount: number;
+  totalRechargingRoomCount: number;
+  availableRechargingRoomCount: number;
+  totalFocusDeskCount: number;
+  availableFocusDeskCount: number;
+}
+
+export type AllAvailableCountType = ICommon<AllAvailableCountData>;