From 0edd8d58ca4f60683ebde508e87cf65775f0ded9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=98=81=EC=9A=B0?= <zestlee1106@gmail.com>
Date: Tue, 26 Dec 2023 22:12:14 +0900
Subject: [PATCH] =?UTF-8?q?[fix]=20location=20=EC=9D=84=20api=20=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EA=B0=80=EC=A0=B8=EC=98=A4=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/room/add/step1.tsx | 68 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 64 insertions(+), 4 deletions(-)

diff --git a/pages/room/add/step1.tsx b/pages/room/add/step1.tsx
index b577ee9..6a5f623 100644
--- a/pages/room/add/step1.tsx
+++ b/pages/room/add/step1.tsx
@@ -8,7 +8,7 @@ import toast from 'react-hot-toast';
 import MultiButton from '@/components/MultiButton/MultiButton';
 import { useRouter } from 'next/router';
 import { formatDateForAPI } from '@/utils/transform';
-import { fetchFurnishings } from '@/api/room';
+import { fetchFurnishings, getLocations } from '@/api/room';
 import styles from './add.module.scss';
 
 interface GuDong {
@@ -46,10 +46,16 @@ const INCLUDE_OPTIONS = [
   },
 ];
 
+interface DongOption extends Option {
+  upperLocationId: number;
+}
+
 export default function AddRoom() {
   const { register, handleSubmit, watch, setValue } = useForm({ mode: 'onChange' });
   const [selectedLocations, setSelectedLocations] = useState<GuDong[]>([]);
   const router = useRouter();
+  const [gus, setGus] = useState<Option[]>([]);
+  const [dongs, setDongs] = useState<DongOption[]>([]);
 
   const onSubmit: SubmitHandler<FieldValues> = (data) => {
     const params = {
@@ -106,8 +112,8 @@ export default function AddRoom() {
       return [];
     }
 
-    return DongList.filter((v) => v.gu === gu.value);
-  }, [gu]);
+    return dongs.filter((v) => v.upperLocationId === gu.value);
+  }, [gu, dongs]);
 
   useEffect(() => {
     if (monthPrice > 20000000) {
@@ -139,6 +145,60 @@ export default function AddRoom() {
     }
   }, [noDeposit, setValue]);
 
+  const fetchLocations = async () => {
+    try {
+      if (sessionStorage.getItem('gu') && sessionStorage.getItem('dong')) {
+        return;
+      }
+
+      const data = await getLocations();
+
+      if (!data) {
+        return;
+      }
+
+      const gusData = data
+        .filter((location) => location.locationType === 'GU')
+        .map((location) => {
+          return {
+            id: location.id,
+            value: location.id,
+            label: `${location.name}-gu`,
+          };
+        });
+      setGus(gusData);
+      sessionStorage.setItem('gu', JSON.stringify(gusData));
+
+      const dongsData = data
+        .filter((location) => location.locationType === 'DONG')
+        .map((location) => {
+          return {
+            id: location.id,
+            value: location.id,
+            label: `${location.name}-dong`,
+            upperLocationId: location.upperLocation.id,
+          };
+        });
+      setDongs(dongsData);
+      sessionStorage.setItem('dong', JSON.stringify(dongsData));
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  useEffect(() => {
+    (async () => {
+      await fetchLocations();
+      if (sessionStorage.getItem('gu')) {
+        setGus(JSON.parse(sessionStorage.getItem('gu') || '[]'));
+      }
+
+      if (sessionStorage.getItem('dong')) {
+        setDongs(JSON.parse(sessionStorage.getItem('dong') || '[]'));
+      }
+    })();
+  }, []);
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <Stepper step={1} totalStep={3} />
@@ -152,7 +212,7 @@ export default function AddRoom() {
           <div className={styles['sub-header']}>Location</div>
         </div>
         <div className="grid grid-flow-row gap-[8px]">
-          <Select options={GuList} register={register('gu')} placeholder="Gu" />
+          <Select options={gus} register={register('gu')} placeholder="Gu" />
           <Select options={filteredDongList} register={register('dong')} placeholder="Dong" disabled={!watch('gu')} />
         </div>
       </div>