Merge branch 'develop' of https://github.com/ODOICHON/frontend into fix/

#278

src/components/Common/Footer/index.tsx

@@ -40,7 +40,7 @@ export default function Footer() {
               );
             }}
           >
-            빈집거래 서비스 관련
+            농가거래 서비스 관련
           </button>
         </span>
       </div>

src/components/Common/Navbar/index.tsx

@@ -37,7 +37,7 @@ function DesktopNavbar({
           오도이촌 소개
         </Link>
         <Link className={isFocus('trade')} ref={tradeRef} to="/trade">
-          빈집거래
+          농가거래
         </Link>
         <Link
           className={isFocus('community')}

src/components/Common/ToggleMenu/index.tsx

@@ -43,7 +43,7 @@ export default function ToggleMenu() {
           alt="close"
         />
         <Link to="/introduce">오도이촌 소개</Link>
-        <Link to="/trade">빈집거래</Link>
+        <Link to="/trade">농가거래</Link>
         <Link to="/community/free_board">커뮤니티</Link>
         {token ? <AfterLogin /> : <BeforeLogin />}
       </div>

src/components/Trade/Board/index.tsx

@@ -2,13 +2,14 @@ import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import dayjs from 'dayjs';
 import { RentalType, TradeBoardType } from '@/types/Board/tradeType';
-import { convertRentalTypeName, priceCount } from '@/utils/utils';
+import { convertRentalTypeName, getHouseName, priceCount } from '@/utils/utils';
 import styles from './styles.module.scss';
 
 type TradeBoardProps = Omit<TradeBoardType, 'recommendedTag'>;
 
 export default function TradeBoard({
   houseId,
+  houseType,
   rentalType,
   city,
   price,
@@ -97,7 +98,9 @@ export default function TradeBoard({
         )}
       </div>
       <div className={styles.contentsWrapper}>
-        <h1>{title}</h1>
+        <h1>
+          [{getHouseName(houseType)}] {title}
+        </h1>
         <p>
           <strong>위치</strong> : {city}
         </p>

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>>;
 };

src/components/Trade/Info/index.tsx

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import { TradeBoardDetailType } from '@/types/Board/tradeType';
-import { getRentalName } from '@/utils/utils';
+import { getHouseName, getRentalName, priceCount } from '@/utils/utils';
 import styles from './styles.module.scss';
 
 // TODO: undefined 처리하기
@@ -12,43 +12,35 @@ function TradeBoardInfo({ info }: TradeBoardInfoProps) {
   return (
     <section className={styles.infoContainer}>
       <article>
-        <span>기본정보</span>
+        <span>임대정보 및 판매자 정보</span>
+        <div>
+          유형 <p>{info?.houseType && getHouseName(info?.houseType)}</p>
+        </div>
         <div>
           위치 <p>{info?.city}</p>
         </div>
         <div>
-          면적{' '}
+          가격{' '}
           <p>
-            {info?.size}m<sup>2</sup>
+            {info?.rentalType && getRentalName(info?.rentalType)}{' '}
+            {info?.price && priceCount(info?.price)}
           </p>
         </div>
         <div>
-          용도 <p>{info?.purpose}</p>
-        </div>
-        <div>
-          준공연도 <p>{dayjs(info?.createdDate).format('YYYY')}년</p>
-        </div>
-        <div>
-          층수 <p>{info?.floorNum === 0 ? '-' : `${info?.floorNum}층`}</p>
+          전화번호 <p>{info?.contact}</p>
         </div>
       </article>
       <article>
-        <span>임대정보 및 판매자 정보</span>
+        <span>기본정보</span>
         <div>
-          가격{' '}
-          <p>
-            {info?.rentalType && getRentalName(info?.rentalType)} {info?.price}
-            만원
-          </p>
+          면적 <p>{info?.size}㎡</p>
         </div>
         <div>
-          전화번호 <p>{info?.contact}</p>
+          준공연도 <p>{dayjs(info?.createdDate).format('YYYY')}년</p>
+        </div>
+        <div>
+          용도 <p>{info?.purpose}</p>
         </div>
-        {info?.userType === 'AGENT' && (
-          <div>
-            공인중개사명 <p>{info?.agentName !== '' ? info?.agentName : 'X'}</p>
-          </div>
-        )}
       </article>
     </section>
   );

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}>

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' },

src/pages/MyPage/home/index.tsx

@@ -47,7 +47,7 @@ function MyHomePage() {
         <div className={styles.titleContainer}>
           <h1>
             {user?.nick_name}님의{' '}
-            {user?.userType === 'AGENT' ? '빈집거래 활동' : '마이페이지'}
+            {user?.userType === 'AGENT' ? '농가거래 활동' : '마이페이지'}
           </h1>
         </div>
         {user?.userType === 'AGENT' ? <AgentInfoCard /> : <InfoCard />}

src/pages/Trade/Board/index.tsx

@@ -23,7 +23,7 @@ import { DeleteHouseAPI } from '@/apis/houses';
 import userStore from '@/store/userStore';
 import useModalState from '@/hooks/useModalState';
 import useToastMessageType from '@/hooks/useToastMessageType';
-import { getMoveInType, getUserType } from '@/utils/utils';
+import { getHouseName, getMoveInType, getUserType } from '@/utils/utils';
 import { ApiResponseWithDataType } from '@/types/apiResponseType';
 import { opacityVariants } from '@/constants/variants';
 import styles from './styles.module.scss';
@@ -47,7 +47,7 @@ export default function TradeBoardPage() {
   const ref = useRef<HTMLDivElement>(null);
 
   const handleDeleteButtonClick = async (houseId: number) => {
-    if (houseId === 0) throw new Error('없는 빈집거래 게시물입니다.');
+    if (houseId === 0) throw new Error('없는 농가거래 게시물입니다.');
     await DeleteHouseAPI(houseId);
     handleToastMessageProps('POST_DELETE_SUCCESS', () => {
       handleModalClose();
@@ -104,7 +104,10 @@ export default function TradeBoardPage() {
               {getUserType(data?.data.userType || 'NONE')}
             </li>
           </ul>
-          <h1>{data?.data.title}</h1>
+          <h1>
+            {data?.data.houseType && `[${getHouseName(data?.data.houseType)}]`}{' '}
+            {data?.data.title}
+          </h1>
           <div>
             <p>
               {data?.data.nickName}
@@ -173,6 +176,20 @@ export default function TradeBoardPage() {
         >
           <TradeBoardInfo info={data?.data} />
         </section>
+        {data?.data.userType === 'AGENT' && (
+          <section className={styles.agentInfo}>
+            <article>
+              <div>
+                공인중개사명{' '}
+                <p>{data.data.agentName !== '' ? data.data.agentName : 'X'}</p>
+              </div>
+              <div>
+                상세 설명{' '}
+                <p>{data.data.agentDetail && data.data.agentDetail}</p>
+              </div>
+            </article>
+          </section>
+        )}
         <section className={styles.recommendedTag}>
           <article>
             <span>매물 특징</span>
@@ -197,7 +214,7 @@ export default function TradeBoardPage() {
           <KakaoMapImage address={data?.data.city || ''} />
         </section>
         <section className={styles.process}>
-          <span>빈집거래 프로세스가 궁금하신가요?</span>
+          <span>농가거래 프로세스가 궁금하신가요?</span>
           <button
             type="button"
             onClick={() => {

src/pages/Trade/Board/styles.module.scss

@@ -130,7 +130,7 @@
 }
 
 .infoContainer {
-  margin-bottom: 3rem;
+  margin-bottom: 1.25rem;
 }
 .categoryList {
   display: flex;
@@ -199,12 +199,46 @@
   }
 }
 
+.agentInfo {
+  display: flex;
+  padding: 3.75rem 4.375rem;
+  background-color: transparent;
+  border-radius: 10px;
+  margin-bottom: 1.25rem;
+  border: 1px solid #ced3d6;
+  border-radius: 8px;
+
+  @include mobile {
+    flex-direction: column;
+    gap: 5rem;
+  }
+  & > article {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    font-size: 1.375rem;
+    font-family: 'Pretendard';
+    font-weight: bold;
+    gap: 1.125rem;
+    & > div {
+      display: flex;
+      color: #4d5256;
+      gap: 1rem;
+      & > p {
+        font-weight: normal;
+      }
+    }
+  }
+}
+
 .recommendedTag {
   display: flex;
   padding: 3.75rem 4.375rem;
-  background-color: #f8f8f8;
+  background-color: transparent;
   border-radius: 10px;
   margin-bottom: 6rem;
+  border: 1px solid #ced3d6;
+  border-radius: 8px;
 
   @include mobile {
     flex-direction: column;
@@ -228,7 +262,7 @@
       flex-wrap: wrap;
       gap: 1rem;
 
-      background-color: #f6f7fb;
+      background-color: transparent;
       border-radius: 16px;
       font-size: 1.125rem;
       font-family: 'Pretandard';