Merge pull request #108 from bsideproject/moon

[feat] RoomList, Filter 우선 커밋...!!
bsideproject · Jul 31, 2023 · 182bece · 182bece
2 parents ab916a9 + 40ff904
commit 182bece
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -9,7 +9,7 @@ import { NextComponentType, NextPage, NextPageContext } from 'next';
 import RoomListLayout from '@/components/layouts/RoomListLayout.tsx';
 import Filter from '@/public/icons/filter.svg';
 import Router, { useRouter, withRouter } from 'next/router';
-import Chip from '@/components/Chip/Chip.tsx';
+import { Chip, Typography } from '@/components/index.tsx';
 import { FilterType } from '@/public/types/filter';
 
 export const getStaticProps = async ({ locale }: GetStaticPropsContext) => ({
@@ -77,10 +77,23 @@ function Home() {
 
   return (
     <div>
-      <Filter className="stroke-g7 stroke-[2] cursor-pointer" onClick={getFilterPage} />
-      {filters.map((label, index) => {
-        return <Chip key={`${label}-${index}`} label={label} onDelete={() => handleOptionRemove(label)} clicked />;
-      })}
+      <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
+        <Filter
+          className="stroke-g7 stroke-[2] cursor-pointer "
+          onClick={getFilterPage}
+          style={{ alignSelf: 'flex-start' }}
+        />
+        {filters.map((label, index) => {
+          return (
+            <div style={{ marginLeft: index === 0 ? '4px' : '0', marginRight: '-4px' }}>
+              <Chip key={`${label}-${index}`} label={label} onDelete={() => handleOptionRemove(label)} clicked />
+            </div>
+          );
+        })}
+      </div>
+      <Typography variant="title" customClassName="text-left text-g0 ">
+        {`There are ${rooms.length} rooms in total!`}
+      </Typography>
       {rooms.map((room, idx) => (
         <RoomCard room={room} key={`room-${idx}`} onClick={() => handleCardClick(idx)} />
       ))}

diff --git a/pages/room/filter.tsx b/pages/room/filter.tsx
@@ -53,6 +53,7 @@ export default function Filter() {
     let monthRent = 'false';
     let deposit = 'false';
     let location = 'false';
+    let dateAvailable = 'false';
 
     // typeofhousing 중 하나라도 체크되면 true
     typeOfHousings.forEach((key) => {
@@ -69,20 +70,24 @@ export default function Filter() {
     });
 
     // monthRent 비용 체크
-    if (data[`${'monthMax'}`] !== '' || data[`${'monthMin'}`] !== '') {
+    if ((data[`${'monthMax'}`] || '') !== '' || (data[`${'monthMin'}`] || '') !== '') {
       monthRent = 'true';
     }
 
     // deposit 비용 체크
-    if (data[`${'depositMax'}`] !== '' || data[`${'depositMin'}`] !== '') {
+    if ((data[`${'depositMax'}`] || '') !== '' || (data[`${'depositMin'}`] || '') !== '') {
       deposit = 'true';
     }
 
     if ((data.gu || '') !== '') {
       location = 'true';
     }
 
-    return { typeOfHousing, furnishing, monthRent, deposit, location };
+    if ((data.dateAvailable || '') !== '') {
+      dateAvailable = 'true';
+    }
+
+    return { typeOfHousing, furnishing, monthRent, deposit, location, dateAvailable };
   };
 
   const onSubmit: SubmitHandler<FieldValues> = (data) => {