From 97a263ddaf98e8b53098eedacd3cf88c865fd81f Mon Sep 17 00:00:00 2001
From: 0ev <andyye.jongcye@gmail.com>
Date: Sun, 2 Apr 2023 22:33:58 +0900
Subject: [PATCH] Add: useLocationSearch

---
 src/hooks/useLocationSearch.tsx | 17 +++++++++++++++++
 src/pages/Addroom/index.tsx     | 32 ++++++++++++++++++++++++++++++++
 src/pages/Search/SideResult.jsx |  5 ++++-
 3 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/useLocationSearch.tsx

diff --git a/src/hooks/useLocationSearch.tsx b/src/hooks/useLocationSearch.tsx
new file mode 100644
index 000000000..5add88bb6
--- /dev/null
+++ b/src/hooks/useLocationSearch.tsx
@@ -0,0 +1,17 @@
+import { useLocation } from "react-router-dom";
+import { useMemo } from "react";
+
+interface ReadOnlyURLSearchParams extends URLSearchParams {
+  append: never;
+  delete: never;
+  sort: never;
+}
+
+export default function useLocationSearch() {
+  const { search } = useLocation();
+
+  return useMemo(
+    () => new URLSearchParams(search) as ReadOnlyURLSearchParams,
+    [search]
+  );
+}
diff --git a/src/pages/Addroom/index.tsx b/src/pages/Addroom/index.tsx
index 16f171d71..8c80046d2 100644
--- a/src/pages/Addroom/index.tsx
+++ b/src/pages/Addroom/index.tsx
@@ -26,6 +26,7 @@ import { date2str, getToday, getToday10 } from "tools/moment";
 import theme from "tools/theme";
 
 import randomRoomName from "static/randomRoomName";
+import useLocationSearch from "hooks/useLocationSearch";
 
 const AddRoom = () => {
   const axios = useAxios();
@@ -51,6 +52,37 @@ const AddRoom = () => {
   const setAlert = useSetRecoilState(alertAtom);
   const [myRoom, setMyRoom] = useRecoilState(myRoomAtom);
 
+  const locationSearch = useLocationSearch();
+
+  useEffect(() => {
+    if (locationSearch.get("from") && locationSearch.get("to")) {
+      setPlace([locationSearch.get("from")!, locationSearch.get("to")!]);
+    }
+    if (locationSearch.get("name")) {
+      setName(locationSearch.get("name")!);
+    }
+    if (locationSearch.get("date")) {
+      const date = locationSearch.get("date")!.split("-");
+      setDate([Number(date[0]), Number(date[1]), Number(date[2])]);
+    }
+    if (locationSearch.get("time")) {
+      const time = locationSearch.get("time")!.split(":");
+      setTime([Number(time[0]), Number(time[1])]);
+    }
+    if (locationSearch.get("maxPeople")) {
+      setMaxPeople(Number(locationSearch.get("maxPeople")!));
+    }
+  }, [locationSearch]);
+
+  useEffect(() => {
+    locationSearch.set("from", valuePlace[0] || "");
+    locationSearch.set("to", valuePlace[1] || "");
+    locationSearch.set("name", valueName);
+    locationSearch.set("date", date2str(valueDate));
+    locationSearch.set("time", valueTime.join(":"));
+    locationSearch.set("maxPeople", valueMaxPeople.toString());
+  }, [valueName, valuePlace, valueDate, valueTime, valueMaxPeople]);
+
   useEffect(() => {
     const expirationDate = new Date();
     expirationDate.setFullYear(expirationDate.getFullYear() + 10);
diff --git a/src/pages/Search/SideResult.jsx b/src/pages/Search/SideResult.jsx
index c65531081..a1c64e40e 100644
--- a/src/pages/Search/SideResult.jsx
+++ b/src/pages/Search/SideResult.jsx
@@ -181,7 +181,10 @@ const SideResult = (props) => {
           />
           <DottedLine direction="row" />
           {rooms.length == 0 ? (
-            <Empty screen="pc">검색 결과가 없습니다</Empty>
+            <Empty screen="pc">
+              <div>검색 결과가 없습니다</div>
+              {/* <div></div> */}
+            </Empty>
           ) : (
             <>
               {rooms