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?.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';