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>