diff --git a/src/components/Trade/Info/index.tsx b/src/components/Trade/Info/index.tsx index 8f1f74e..e1f9096 100644 --- a/src/components/Trade/Info/index.tsx +++ b/src/components/Trade/Info/index.tsx @@ -1,6 +1,6 @@ import dayjs from 'dayjs'; import { TradeBoardDetailType } from '@/types/Board/tradeType'; -import { getHouseName, getRentalName } from '@/utils/utils'; +import { getHouseName, getRentalName, priceCount } from '@/utils/utils'; import styles from './styles.module.scss'; // TODO: undefined 처리하기 @@ -22,18 +22,13 @@ function TradeBoardInfo({ info }: TradeBoardInfoProps) {
가격{' '}

- {info?.rentalType && getRentalName(info?.rentalType)} {info?.price} - 만원 + {info?.rentalType && getRentalName(info?.rentalType)}{' '} + {info?.price && priceCount(info?.price)}

전화번호

{info?.contact}

- {info?.userType === 'AGENT' && ( -
- 공인중개사명

{info?.agentName !== '' ? info?.agentName : 'X'}

-
- )}
기본정보 diff --git a/src/pages/Trade/Board/index.tsx b/src/pages/Trade/Board/index.tsx index 21c6746..8effec8 100644 --- a/src/pages/Trade/Board/index.tsx +++ b/src/pages/Trade/Board/index.tsx @@ -176,6 +176,20 @@ export default function TradeBoardPage() { > + {data?.data.userType === 'AGENT' && ( +
+
+
+ 공인중개사명{' '} +

{data.data.agentName !== '' ? data.data.agentName : 'X'}

+
+
+ 상세 설명{' '} +

{data.data.agentDetail && data.data.agentDetail}

+
+
+
+ )}
매물 특징 diff --git a/src/pages/Trade/Board/styles.module.scss b/src/pages/Trade/Board/styles.module.scss index bc0ad80..f6eb782 100644 --- a/src/pages/Trade/Board/styles.module.scss +++ b/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';