Merge pull request #308 from ODOICHON/feat/#307

농가 거래 게시글 작성 시 설명 추가
ODOICHON · Sep 23, 2024 · 58f893d · 58f893d
2 parents 6d73230 + 0788c04
commit 58f893d
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 23 deletions.
diff --git a/src/components/Trade/Info/index.tsx b/src/components/Trade/Info/index.tsx
@@ -33,7 +33,12 @@ function TradeBoardInfo({ info }: TradeBoardInfoProps) {
       <article>
         <span>기본정보</span>
         <div>
-          면적 <p>{info?.size}㎡</p>
+          면적{' '}
+          <p>
+            {info?.size}㎡
+            {info?.size &&
+              `(약 ${parseFloat((Number(info?.size) / 3.3).toFixed(1))}평)`}
+          </p>
         </div>
         <div>
           준공연도{' '}

diff --git a/src/pages/Trade/Write/index.tsx b/src/pages/Trade/Write/index.tsx
@@ -388,27 +388,30 @@ export default function TradeWritePage() {
         <span>기본 정보</span>
         <p>*는 필수로 입력해야 하는 값입니다.</p>
         <div>
-          <div>
-            <label htmlFor="매물 면적">
-              매물 면적<span className={styles.essential}>*</span>
-            </label>
-            <input
-              id="매물 면적"
-              type="text"
-              placeholder="㎡ 단위로 표기"
-              name="size"
-              value={form.size}
-              onChange={(event) =>
-                onChangeForm({
-                  ...event,
-                  target: {
-                    ...event.target,
-                    name: 'size',
-                    value: onParsingDecimal(event.target.value),
-                  },
-                })
-              }
-            />
+          <div className={styles.additionalIinfoContainer}>
+            <div>
+              <label htmlFor="매물 면적">
+                매물 면적<span className={styles.essential}>*</span>
+              </label>
+              <input
+                id="매물 면적"
+                type="text"
+                placeholder="㎡ 단위로 표기"
+                name="size"
+                value={form.size}
+                onChange={(event) =>
+                  onChangeForm({
+                    ...event,
+                    target: {
+                      ...event.target,
+                      name: 'size',
+                      value: onParsingDecimal(event.target.value),
+                    },
+                  })
+                }
+              />
+            </div>
+            <p>*1평은 약 3.3제곱미터(㎡)입니다.</p>
           </div>
           <div>
             <label htmlFor="준공연도">준공연도</label>

diff --git a/src/pages/Trade/Write/styles.module.scss b/src/pages/Trade/Write/styles.module.scss
@@ -199,6 +199,44 @@
   }
 }
 
+.additionalIinfoContainer {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  & > div {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    & > label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.375rem;
+      border-radius: 8px;
+      background-color: #d9d9d9;
+      width: 10rem;
+      height: 4rem;
+      & > span {
+        color: #f24147;
+      }
+    }
+
+    & > input {
+      width: 26rem;
+      height: 4rem;
+      border-radius: 8px;
+      border: 1px solid #d9d9d9;
+      padding: 0 1rem;
+      font-size: 1.125rem;
+      font-family: 'NanumSquareAc';
+      outline: none;
+    }
+  }
+  & > p {
+    color: var(--darkgray-color);
+    font-size: 1.2rem;
+  }
+}
+
 .specialInfoContainer {
   display: flex;
   flex-direction: column;
@@ -307,7 +345,7 @@
   border-color: var(--main-color);
 }
 
-.essential{
+.essential {
   color: var(--main-color);
 }