Merge pull request #286 from ODOICHON/feat/#285

농가 거래 상세 페이지에서 유형 정보 추가 및 게시글 제목 말머리에 유형 추가

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/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 } from '@/utils/utils';
 import styles from './styles.module.scss';
 
 // TODO: undefined 처리하기
@@ -12,28 +12,13 @@ function TradeBoardInfo({ info }: TradeBoardInfoProps) {
   return (
     <section className={styles.infoContainer}>
       <article>
-        <span>기본정보</span>
-        <div>
-          위치 <p>{info?.city}</p>
-        </div>
-        <div>
-          면적{' '}
-          <p>
-            {info?.size}m<sup>2</sup>
-          </p>
-        </div>
-        <div>
-          용도 <p>{info?.purpose}</p>
-        </div>
+        <span>임대정보 및 판매자 정보</span>
         <div>
-          준공연도 <p>{dayjs(info?.createdDate).format('YYYY')}년</p>
+          유형 <p>{info?.houseType && getHouseName(info?.houseType)}</p>
         </div>
         <div>
-          층수 <p>{info?.floorNum === 0 ? '-' : `${info?.floorNum}층`}</p>
+          위치 <p>{info?.city}</p>
         </div>
-      </article>
-      <article>
-        <span>임대정보 및 판매자 정보</span>
         <div>
           가격{' '}
           <p>
@@ -50,6 +35,18 @@ function TradeBoardInfo({ info }: TradeBoardInfoProps) {
           </div>
         )}
       </article>
+      <article>
+        <span>기본정보</span>
+        <div>
+          면적 <p>{info?.size}㎡</p>
+        </div>
+        <div>
+          준공연도 <p>{dayjs(info?.createdDate).format('YYYY')}년</p>
+        </div>
+        <div>
+          용도 <p>{info?.purpose}</p>
+        </div>
+      </article>
     </section>
   );
 }

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

src/pages/Trade/index.tsx

@@ -124,6 +124,7 @@ export default function TradePage() {
               <TradeBoard
                 key={content.houseId}
                 houseId={content.houseId}
+                houseType={content.houseType}
                 rentalType={content.rentalType}
                 city={content.city}
                 price={content.price}

src/types/Board/tradeType.ts

@@ -38,6 +38,7 @@ export type TradeBoardForm = {
 
 export type TradeBoardType = {
   houseId: number;
+  houseType: HouseType;
   rentalType: RentalType;
   city: string;
   price: number;

src/utils/utils.ts

@@ -49,6 +49,20 @@ export const getPrefixCategoryName = (category: string) => {
   }
 };
 
+// 매매 타입 이름 가져오기
+export const getHouseName = (house: HouseType) => {
+  switch (house) {
+    case 'LAND':
+      return '토지';
+    case 'HOUSE':
+      return '주택';
+    case 'FARM_HOUSE':
+      return '농가';
+    default:
+      return '';
+  }
+};
+
 // 매매 타입 이름 가져오기
 export const getRentalName = (rental: RentalType) => {
   switch (rental) {