Merge pull request #48 from 4bujak-4bujak/feature/meetingroomQA

[feat] 미팅룸 추가작업
4bujak-4bujak · Jun 10, 2024 · 05569b4 · 05569b4
2 parents 5d99c79 + 3ad8dda
commit 05569b4
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 50 deletions.
diff --git a/src/api/reservation/getBranchesByDistance.ts b/src/api/reservation/getBranchesByDistance.ts
@@ -0,0 +1,37 @@
+import { BranchDistanceResponse } from "../types/branch";
+
+export const getBranchesByDistance = async (latitude: number, longitude: 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 token = document.cookie.replace(/(?:(?:^|.*;\s*)token\s*=\s*([^;]*).*$)|^.*$/, "$1");
+
+  if (!token) {
+    throw new Error('No access token found');
+  }
+
+  const response = await fetch(url.toString(), {
+    method: 'GET',
+    headers: {
+      'Authorization': `Bearer ${token}`,
+      'Content-Type': 'application/json'
+    },
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Error fetching branches by distance: ${response.status} ${response.statusText} - ${errorText}`);
+  }
+
+  const data: { status: string; errorCode: string | null; data: BranchDistanceResponse[] } = await response.json();
+
+  if (data.status !== 'SUCCESS') {
+    throw new Error(`API Error: ${data.errorCode}`);
+  }
+
+  return data.data;
+};
diff --git a/src/api/reservation/getMeetingRoom.ts b/src/api/reservation/getMeetingRoom.ts
@@ -1,29 +1,14 @@
-// import { AxiosRequestConfig } from 'axios';
-// import { getRequest } from '../request';
-// import { MeetingRoom, GetMeetingRoomsParams } from '../types/room';
-// import { getCookie } from '@/utils/cookies';
-
-// export const getMeetingRooms = async (params: GetMeetingRoomsParams): Promise<MeetingRoom[]> => {
-//   const config: AxiosRequestConfig = {
-//     params,
-//     headers: {
-//       'Authorization': `Bearer ${getCookie('token')}`,
-//     },
-//   };
-
-//   const response = await getRequest<{ status: string; errorCode: string | null; data: MeetingRoom[] }>(
-//     'spaces/meeting-rooms',
-//     config
-//   );
-//   return response.data;
-// };
-
 import { GetMeetingRoomsParams, MeetingRoomsResponse } from '../types/room';
 
 export const getMeetingRooms = async (params: GetMeetingRoomsParams): Promise<MeetingRoomsResponse> => {
   const backendUrl = process.env.NEXT_PUBLIC_BASE_URL;
   const url = new URL(`${backendUrl}spaces/meeting-rooms`);
 
+  // If meetingRoomTypes is empty, include all types
+  if (!params.meetingRoomTypes || params.meetingRoomTypes.length === 0) {
+    params.meetingRoomTypes = ['MINI', 'STANDARD', 'MEDIUM', 'STATE'];
+  }
+
   Object.keys(params).forEach(key => {
     const value = params[key as keyof GetMeetingRoomsParams];
     if (Array.isArray(value)) {
@@ -59,4 +44,4 @@ export const getMeetingRooms = async (params: GetMeetingRoomsParams): Promise<Me
   }
 
   return data.data;
-};
+};
diff --git a/src/api/types/branch.ts b/src/api/types/branch.ts
@@ -60,4 +60,10 @@ export interface OfficeRoomCounts {
   rechargingRoomCount: number;
   standardRoomCount: number;
   stateRoomCount: number;
-}
+}
+
+export interface BranchDistanceResponse {
+  branchId: number;
+  branchName: string;
+  distance: number;
+}
diff --git a/src/components/reservation/meetingRoom/DatePickerModal.tsx b/src/components/reservation/meetingRoom/DatePickerModal.tsx
@@ -98,7 +98,7 @@ const DatePickerModal: React.FC<DatePickerModalProps> = ({
     onConfirm(startDateTime, endDateTime, {
       meetingRoomTypes:
         selectedMeetingRoomTypes.length === 0
-          ? ['MINI', 'STANDARD', 'MEDIUM', 'STATE']
+          ? []
           : selectedMeetingRoomTypes,
       projectorExists,
       canVideoConference,

diff --git a/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx b/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx
@@ -6,6 +6,7 @@ import Image from 'next/image';
 import DatePickerModal from './DatePickerModal';
 import { useRouter } from 'next/router';
 import { useBranchStore } from '@/store/branch.store';
+import { getBranchesByDistance } from '@/api/reservation/getBranchesByDistance';
 
 const formatDateToCustomString = (date: Date): string => {
   const year = date.getFullYear();
@@ -148,6 +149,7 @@ const MeetingRoomIndex: React.FC = () => {
 
   useEffect(() => {
   }, [meetingRooms]);
+
 
   const roomTypeMap: { [key: string]: string } = {
     'MINI': '미니(1-4인)',
@@ -184,11 +186,18 @@ const MeetingRoomIndex: React.FC = () => {
     setEndTime(endDate);
 
     const selectedCount = options.meetingRoomTypes.length;
-    const displayTypes = selectedCount > 1 
-      ? `${roomTypeMap[options.meetingRoomTypes[0]]}외 ${selectedCount - 1}` 
-      : roomTypeMap[options.meetingRoomTypes[0]];
+    console.log(selectedCount);
+    let displayTypes;
+    if (selectedCount === 0) {
+      displayTypes = '인원 수';
+    } else if (selectedCount === 1) {
+      displayTypes = roomTypeMap[options.meetingRoomTypes[0]];
+    } else {
+      displayTypes = `${roomTypeMap[options.meetingRoomTypes[0]]}외 ${selectedCount - 1}`;
+    }
     setSelectedMeetingRoomTypes(displayTypes);
-
+    console.log(selectedMeetingRoomTypes);
+
     const equipmentArray = [];
     if (options.projectorExists) equipmentArray.push('프로젝터');
     if (options.canVideoConference) equipmentArray.push('화상 회의');
@@ -256,25 +265,25 @@ const MeetingRoomIndex: React.FC = () => {
     setActiveTabState(tab);
     setShowModal(true);
   };
-
-  const getCapacityText = (capacity: number) => {
-    if (capacity === 1 || capacity === 5 || capacity === 9 || capacity === 13) {
-      return `${capacity}명`;
-    }
-    if (capacity > 1 && capacity < 5) {
-      return `1~${capacity}명`;
-    }
-    if (capacity > 5 && capacity < 9) {
-      return `5~${capacity}명`;
-    }
-    if (capacity > 9 && capacity < 13) {
-      return `9~${capacity}명`;
-    }
-    if (capacity === 14 || capacity === 15) {
-      return `13~${capacity}명`;
+
+  const fetchBranchesByDistance = async (latitude: number, longitude: number) => {
+    try {
+      const branches = await getBranchesByDistance(latitude, longitude);
+      console.log('Branches by distance:', branches);
+    } catch (error) {
+      console.error('Error fetching branches by distance:', error);
     }
-    return `${capacity}명`;
   };
+
+  useEffect(() => {
+    if (meetingRooms.length === 0) {
+      const latitude = currentBranch!.branchLatitude
+      const longitude = currentBranch!.branchLongitude
+      fetchBranchesByDistance(latitude, longitude);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [meetingRooms]); 
+
 
   return (
     <div className="p-4 h-screen">
@@ -310,11 +319,7 @@ const MeetingRoomIndex: React.FC = () => {
         </div>
       </div>
       <div className='flex mb-2'>
-      {meetingRooms.length === 0 ? (
-        <><div className="text-indigo-700 text-lg font-bold font-['Pretendard']">바로예약</div><div className="text-black text-lg font-medium font-['Pretendard'] ml-[5px]">불가능</div></>
-      ) : (
         <><div className="text-indigo-700 text-lg font-bold font-['Pretendard']">바로예약</div><div className="text-black text-lg font-medium font-['Pretendard'] ml-[5px]">가능</div></>
-      )}
       </div>
       <div className="flex mb-2 w-full items-center">
         <div className="">총 {meetingRooms.length}개의 공간</div>
@@ -414,7 +419,7 @@ const MeetingRoomIndex: React.FC = () => {
                     {room.meetingRoomFloor < 0 ? `B${Math.abs(room.meetingRoomFloor)}` : `${room.meetingRoomFloor}`}층
                   </div>
                   <Image src={'/capacity.svg'} width={14} height={14} alt="capacity" className="mr-[6px]" />
-                  <div className="text-stone-500 text-xs font-normal font-['Pretendard']">{getCapacityText(room.meetingRoomCapacity)}</div>
+                  <div className="text-stone-500 text-xs font-normal font-['Pretendard']">최대 {room.meetingRoomCapacity}명</div>
                 </div>
               </div>
             </div>

diff --git a/src/components/reservation/meetingRoom/MeetingRoomInfo.tsx b/src/components/reservation/meetingRoom/MeetingRoomInfo.tsx
@@ -240,7 +240,7 @@ const MeetingRoomInfo = () => {
                     </div>
                     <Image src={'/capacity.svg'} width={14} height={14} alt="capacity" className="mr-[6px]" />
                     <div className="text-stone-500 text-xs font-normal font-['Pretendard'] mr-[12px] mt-[2px]">
-                        1~{meetingRoom.meetingRoomCapacity}명
+                        최대 {meetingRoom.meetingRoomCapacity}명
                     </div>
                     <Image src={'/check.svg'} width={14} height={14} alt="check" className="mr-[6px]" />
                     <div className="text-stone-500 text-xs font-normal font-['Pretendard'] mt-[2px]">