add place region filter option

PoApper · Dec 24, 2023 · d270799 · d270799
1 parent e3b25ed
commit d270799
Showing 1 changed file with 28 additions and 6 deletions.
diff --git a/pages/place/index.jsx b/pages/place/index.jsx
@@ -1,25 +1,47 @@
 import React from 'react'
 import Link from 'next/link'
-import { Button } from 'semantic-ui-react'
+import { Button, Select } from 'semantic-ui-react'
 
 import ReservationLayout from '@/components/reservation/reservation.layout'
 import PlaceTable from '@/components/place/place.table'
 import { PoPoAxios } from "@/utils/axios.instance";
+import { RegionOptions } from '@/assets/region.options'
+
+const PlaceRegionOptions = [
+  { key: 'ALL', value: 'ALL', text: '전체' },
+  ...RegionOptions,
+]
 
 const PlacePage = ({ placeList }) => {
+  const [selectedRegion, setSelectedRegion] = React.useState('ALL');
+
+  const filteredPlaceList = React.useMemo(() => {
+    if (selectedRegion === 'ALL') return placeList;
+    return placeList.filter(place => place.region === selectedRegion);
+  }, [selectedRegion, placeList]);
+
   return (
     <ReservationLayout>
       <h3>장소 목록</h3>
-      <div style={{ marginBottom: '1rem' }}>
-        <Link href={'/place/create'}>
-          <Button>장소 생성</Button>
-        </Link>
+      <div style={{ marginBottom: '1rem', display: 'flex', justifyContent: 'space-between' }}>
+        <div>
+          <Link href={'/place/create'}>
+            <Button>장소 생성</Button>
+          </Link>
+        </div>
+        <div>
+          <Select
+            value={selectedRegion}
+            options={PlaceRegionOptions}
+            onChange={(e, { value }) => setSelectedRegion(value)}
+          />
+        </div>
       </div>
       <p>
         장소는 마지막 수정일 순서로 정렬되어 표시됩니다!
       </p>
       <div>
-        <PlaceTable placeList={placeList}/>
+        <PlaceTable placeList={filteredPlaceList}/>
       </div>
     </ReservationLayout>
   )