Merge pull request #293 from ODOICHON/feat/#290

feat: 농가 거래 상세 페이지 UI 수정
ODOICHON · Aug 18, 2024 · 6ee9081 · 6ee9081
2 parents ce5f366 + 6e70130
commit 6ee9081
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 11 deletions.
diff --git 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) {
         <div>
           가격{' '}
           <p>
-            {info?.rentalType && getRentalName(info?.rentalType)} {info?.price}
-            만원
+            {info?.rentalType && getRentalName(info?.rentalType)}{' '}
+            {info?.price && priceCount(info?.price)}
           </p>
         </div>
         <div>
           전화번호 <p>{info?.contact}</p>
         </div>
-        {info?.userType === 'AGENT' && (
-          <div>
-            공인중개사명 <p>{info?.agentName !== '' ? info?.agentName : 'X'}</p>
-          </div>
-        )}
       </article>
       <article>
         <span>기본정보</span>

diff --git a/src/pages/Trade/Board/index.tsx b/src/pages/Trade/Board/index.tsx
@@ -176,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>

diff --git 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';