From 8f6230c283f10016e501ed4814368163db465457 Mon Sep 17 00:00:00 2001
From: ywlee <zestlee1106@gmail.com>
Date: Tue, 17 Oct 2023 22:08:22 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20=ED=95=84=ED=84=B0=20=EC=97=B0?=
 =?UTF-8?q?=EB=8F=99=EC=A4=91...?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/room.ts                  |  4 ++--
 components/Filter/Filter.tsx | 33 +++++++++++++++++++++++++++++----
 pages/index.tsx              |  2 +-
 public/types/room.ts         |  8 +++++++-
 4 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/api/room.ts b/api/room.ts
index 473e8ff..18450e2 100644
--- a/api/room.ts
+++ b/api/room.ts
@@ -25,9 +25,9 @@ export const postRoom = async (room: Room) => {
 };
 
 export const getRooms = async (searchParams: RoomSearchParams) => {
-  const { page } = searchParams;
+  const params = new URLSearchParams(searchParams as Record<string, string>).toString();
 
-  return fetchData<ReturnData<RoomSearch[]>>(`/api/v1/rooms/search?page=${page}`, {
+  return fetchData<ReturnData<RoomSearch[]>>(`/api/v1/rooms/search?${params}`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
diff --git a/components/Filter/Filter.tsx b/components/Filter/Filter.tsx
index 1c93cbf..aed89d2 100644
--- a/components/Filter/Filter.tsx
+++ b/components/Filter/Filter.tsx
@@ -3,8 +3,9 @@ import { Chip, Select, Toggle, Checkbox, Button, Input } from '@/components/inde
 import { FieldValues, SubmitHandler, useForm } from 'react-hook-form';
 import { GuList, DongList } from '@/public/js/guDongList.ts';
 import toast from 'react-hot-toast';
-import { fetchFurnishings } from '@/api/room';
+import { fetchFurnishings, getRooms } from '@/api/room';
 import { ROOM_TYPE, ROOM_TYPE_KEYS, ROOM_TYPE_LABEL } from '@/public/types/room';
+import { formatDateForAPI } from '@/utils/transform';
 import styles from './Filter.module.scss';
 import { Option } from '../Select/Select';
 import Calendar from '../Calendar/Calendar';
@@ -22,14 +23,13 @@ interface GuDong {
 export default function Filter({
   getChildData,
   closeModal,
-  roomsLength,
 }: {
   getChildData: (data: any) => void;
   closeModal: () => void;
-  roomsLength: number;
 }) {
   const { register, handleSubmit, watch, reset } = useForm({ mode: 'onChange' });
   const [selectedLocations, setSelectedLocations] = useState<GuDong[]>([]);
+  const [count, setCount] = useState(0);
 
   const onSubmit: SubmitHandler<FieldValues> = (data) => {
     getChildData(data);
@@ -123,6 +123,31 @@ export default function Filter({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dong]);
 
+  const minDeposit = watch('depositMin');
+  const maxDeposit = watch('depositMax');
+  const minMonthlyRent = watch('monthMin');
+  const maxMonthlyRent = watch('monthMax');
+  const dateAvailable = watch('dateAvailable');
+
+  useEffect(() => {
+    const formattedSelectedLocation = selectedLocations.map((item) => item.dong.value);
+    const fetchData = async () => {
+      const data = await getRooms({
+        locationIds: formattedSelectedLocation.join(', '),
+        minDeposit,
+        maxDeposit,
+        minMonthlyRent,
+        maxMonthlyRent,
+        ...(dateAvailable ? { availableDate: formatDateForAPI(dateAvailable) } : {}),
+      });
+      if (data) {
+        setCount(data.totalElements);
+      }
+    };
+
+    fetchData();
+  }, [selectedLocations, minDeposit, maxDeposit, minMonthlyRent, maxMonthlyRent, dateAvailable]);
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="h-screen overflow-y-scroll font-pretendard">
@@ -267,7 +292,7 @@ export default function Filter({
               </div>
               <div className="w-[70%]">
                 <Button type="submit" size="lg">
-                  Apply {`(${roomsLength} Rooms)`}
+                  Apply {`(${count} Rooms)`}
                 </Button>
               </div>
             </div>
diff --git a/pages/index.tsx b/pages/index.tsx
index d2057c6..172180a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -123,7 +123,7 @@ function Home() {
         custom: true,
         customHeader: false,
       },
-      children: <Filter closeModal={closeModal} getChildData={getChildData} roomsLength={(rooms || []).length} />,
+      children: <Filter closeModal={closeModal} getChildData={getChildData} />,
     });
   };
 
diff --git a/public/types/room.ts b/public/types/room.ts
index a24246b..89b3c8a 100644
--- a/public/types/room.ts
+++ b/public/types/room.ts
@@ -150,5 +150,11 @@ export interface RoomSearch {
 }
 
 export interface RoomSearchParams {
-  page: number;
+  page?: number;
+  locationIds?: string;
+  minDeposit?: string;
+  maxDeposit?: string;
+  minMonthlyRent?: string;
+  maxMonthlyRent?: string;
+  availableDate?: string;
 }