Merge pull request #283 from ODOICHON/feat/#281

feat: 농가 거래 페이지 검색 필터에서 새로운 유형 타입 추가 & 기존 유형 타입을 거래 타입으로 변경
ODOICHON · Aug 18, 2024 · bc1def8 · bc1def8
2 parents 0f33cf9 + 2fef03f
commit bc1def8
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 10 deletions.
diff --git a/src/components/Trade/Dropdown/index.tsx b/src/components/Trade/Dropdown/index.tsx
@@ -1,11 +1,15 @@
 import { motion } from 'framer-motion';
 import { MenuType } from '@/types/Board/tradeType';
-import { TradeCategoryType, TradeCityType } from '@/constants/trade';
+import {
+  TradeCategoryType,
+  TradeCityType,
+  TradeHouseType,
+} from '@/constants/trade';
 import { tradeDropdownVariants } from '@/constants/variants';
 import styles from './styles.module.scss';
 
 type DropdownProps = {
-  menu: TradeCategoryType[] | TradeCityType[];
+  menu: TradeHouseType[] | TradeCategoryType[] | TradeCityType[];
   setMenu: React.Dispatch<React.SetStateAction<string>>;
   setSelectedMenu: React.Dispatch<React.SetStateAction<MenuType>>;
 };

diff --git a/src/components/Trade/SearchBar/index.tsx b/src/components/Trade/SearchBar/index.tsx
@@ -1,16 +1,18 @@
 import { useEffect, useRef, useState } from 'react';
 import { GoTriangleDown } from 'react-icons/go';
 import { AnimatePresence } from 'framer-motion';
-import { MenuType, RentalType } from '@/types/Board/tradeType';
-import { convertRentalTypeName } from '@/utils/utils';
-import { tradeCategory, tradeCity } from '@/constants/trade';
+import { HouseType, MenuType, RentalType } from '@/types/Board/tradeType';
+import { convertHouseTypeName, convertRentalTypeName } from '@/utils/utils';
+import { houseCategory, tradeCategory, tradeCity } from '@/constants/trade';
 import styles from './styles.module.scss';
 import Dropdown from '../Dropdown';
 
 type SearchBarProps = {
+  houseType: string;
   rentalType: string;
   city: string;
   search: string;
+  setHouseType: React.Dispatch<React.SetStateAction<string>>;
   setRentalType: React.Dispatch<React.SetStateAction<string>>;
   setCity: React.Dispatch<React.SetStateAction<string>>;
   setSearch: React.Dispatch<React.SetStateAction<string>>;
@@ -19,9 +21,11 @@ type SearchBarProps = {
 };
 
 export default function SearchBar({
+  houseType,
   rentalType,
   city,
   search,
+  setHouseType,
   setRentalType,
   setCity,
   setSearch,
@@ -60,8 +64,38 @@ export default function SearchBar({
       <section
         ref={dropdownRef}
         className={styles.selectItem}
-        style={{ flexGrow: '2' }}
+        style={{ flexGrow: '1' }}
       >
+        <span
+          role="presentation"
+          className={
+            selectedMenu === 'houseType'
+              ? styles.selectedSearchItem
+              : styles.searchItem
+          }
+          onClick={() => setSelectedMenu('houseType')}
+        >
+          <div>
+            <p style={{ color: houseType !== '' ? 'black' : '' }}>
+              {houseType === ''
+                ? '유형'
+                : convertHouseTypeName(houseType as HouseType)}
+            </p>
+            <GoTriangleDown color="#d9d9d9" size="1.25rem" />
+          </div>
+          <AnimatePresence>
+            {selectedMenu === 'houseType' && (
+              <Dropdown
+                menu={houseCategory}
+                setMenu={setHouseType}
+                setSelectedMenu={setSelectedMenu}
+              />
+            )}
+          </AnimatePresence>
+        </span>
+
+        <div className={styles.divider} />
+
         <span
           role="presentation"
           className={
@@ -74,7 +108,7 @@ export default function SearchBar({
           <div>
             <p style={{ color: rentalType !== '' ? 'black' : '' }}>
               {rentalType === ''
-                ? '유형'
+                ? '거래'
                 : convertRentalTypeName(rentalType as RentalType)}
             </p>
             <GoTriangleDown color="#d9d9d9" size="1.25rem" />
@@ -126,7 +160,7 @@ export default function SearchBar({
             ? styles.selectedSearchItem
             : styles.searchItem
         }
-        style={{ flexGrow: '3' }}
+        style={{ flexGrow: '1' }}
         onClick={() => setSelectedMenu('search')}
       >
         <form onSubmit={handleSubmit}>

diff --git a/src/constants/trade.ts b/src/constants/trade.ts
@@ -1,10 +1,26 @@
-import { RecommendedTagType, RentalType } from '@/types/Board/tradeType';
+import {
+  HouseType,
+  RecommendedTagType,
+  RentalType,
+} from '@/types/Board/tradeType';
 
 export type TradeCategoryType = {
   content: string;
   type: RentalType | '';
 };
 
+export type TradeHouseType = {
+  content: string;
+  type: HouseType | '';
+};
+
+export const houseCategory: TradeHouseType[] = [
+  { content: '전체', type: '' },
+  { content: '토지', type: 'LAND' },
+  { content: '주택', type: 'HOUSE' },
+  { content: '농가', type: 'FARM_HOUSE' },
+];
+
 export const tradeCategory: TradeCategoryType[] = [
   { content: '전체', type: '' },
   { content: '매매', type: 'SALE' },

diff --git a/src/pages/Trade/index.tsx b/src/pages/Trade/index.tsx
@@ -27,6 +27,7 @@ export default function TradePage() {
   const [currentPage, setCurrentPage] = useState(0);
   const [isLastPage, setIsLastPage] = useState(false);
 
+  const [houseType, setHouseType] = useState('');
   const [rentalType, setRentalType] = useState('');
   const [city, setCity] = useState('');
   const [search, setSearch] = useState('');
@@ -98,9 +99,11 @@ export default function TradePage() {
       </section>
       <section className={styles.contentWrapper}>
         <SearchBar
+          houseType={houseType}
           rentalType={rentalType}
           city={city}
           search={search}
+          setHouseType={setHouseType}
           setRentalType={setRentalType}
           setCity={setCity}
           setSearch={setSearch}

diff --git a/src/types/Board/tradeType.ts b/src/types/Board/tradeType.ts
@@ -7,9 +7,11 @@ export type RecommendedTagType =
   | 'WANT_TO_LOOK_A_GOOD_VIEW'
   | 'WANT_TO_FARM';
 
+export type HouseType = 'LAND' | 'HOUSE' | 'FARM_HOUSE';
+
 export type RentalType = 'SALE' | 'JEONSE' | 'MONTHLYRENT';
 
-export type MenuType = 'none' | 'rentalType' | 'city' | 'search';
+export type MenuType = 'none' | 'houseType' | 'rentalType' | 'city' | 'search';
 
 export type DealStateType = 'APPLYING' | 'ONGOING' | 'COMPLETED';
 

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -1,6 +1,7 @@
 import axios from 'axios';
 import {
   DealStateType,
+  HouseType,
   RecommendedTagType,
   RentalType,
   TradeBoardForm,
@@ -271,6 +272,12 @@ export const convertRentalTypeName = (typeName: RentalType) => {
   if (typeName === 'MONTHLYRENT') return '월세';
 };
 
+export const convertHouseTypeName = (typeName: HouseType) => {
+  if (typeName === 'LAND') return '토지';
+  if (typeName === 'HOUSE') return '주택';
+  if (typeName === 'FARM_HOUSE') return '농가';
+};
+
 // 문자가 자음이거나 모음인지 확인하는 함수
 export const isConsonant = (char: string) => {
   const pattern = /[ㄱ-ㅎ|ㅏ-ㅣ]/;