Merge pull request #302 from ODOICHON/fix/#301

[fix] 농가거래 게시글 input값 수정사항
ODOICHON · Sep 23, 2024 · d750f9d · d750f9d
2 parents 733e240 + 61d7eed
commit d750f9d
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 26 deletions.
diff --git a/src/components/Trade/Info/index.tsx b/src/components/Trade/Info/index.tsx
@@ -36,7 +36,12 @@ function TradeBoardInfo({ info }: TradeBoardInfoProps) {
           면적 <p>{info?.size}㎡</p>
         </div>
         <div>
-          준공연도 <p>{dayjs(info?.createdDate).format('YYYY')}년</p>
+          준공연도{' '}
+          <p>
+            {info?.createdDate
+              ? `${dayjs(info?.createdDate).format('YYYY')}년`
+              : '-'}
+          </p>
         </div>
         <div>
           용도 <p>{info?.purpose}</p>

diff --git a/src/components/Trade/Quill/index.tsx b/src/components/Trade/Quill/index.tsx
@@ -83,8 +83,6 @@ export default function TradeQuill({
 
     const newForm: TradeBoardForm = {
       ...form,
-      contact: form.contact.replace(/\-/g, ''),
-      size: form.size.replace(/m2/g, ''),
       createdDate,
       imageUrls,
       tmpYn: isTempSave,
@@ -123,12 +121,10 @@ export default function TradeQuill({
     const imageUrls = [thumbnail, ...getImageUrls(form.code)];
     const notUsedImageUrls = getNotUsedImageUrl(images, imageUrls);
     const extractedYear = form.createdDate.match(/\d{4}/);
-    const createdDate = extractedYear ? extractedYear[0] : '2002';
+    const createdDate = extractedYear ? extractedYear[0] : '';
 
     const newForm: TradeBoardForm = {
       ...form,
-      contact: form.contact.replace(/\-/g, ''),
-      size: form.size.replace(/m2/g, ''),
       createdDate,
       imageUrls,
       tmpYn: isTempSave,

diff --git a/src/pages/Trade/Write/index.tsx b/src/pages/Trade/Write/index.tsx
@@ -75,9 +75,40 @@ export default function TradeWritePage() {
     }));
   };
 
-  const onChangeForm = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const onChangeForm = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    numValue?: number,
+  ) => {
     const { name, value } = e.target;
-    setForm((prev) => ({ ...prev, [name]: value }));
+    setForm((prev) => ({ ...prev, [name]: numValue ?? value }));
+  };
+
+  const onChangePoints = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    let numValue = Number(value.replace(/[^0-9]/g, ''));
+    if (!numValue) numValue = 0;
+    onChangeForm(e, numValue);
+  };
+
+  const onParsingPhoneNumber = (phoneNum: string) => {
+    return phoneNum
+      .replace(/[^0-9]/g, '')
+      .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
+  };
+
+  const onParsingDecimal = (decimal: string) => {
+    return decimal
+      .replace(/[^0-9.]/g, '')
+      .replace(/^0+(?!\.)/, '')
+      .replace(/(\.\d{2})\d*/, '$1');
+  };
+
+  const addComma = (price: number) => {
+    if (price === 0) return '';
+    const returnString = price
+      ?.toString()
+      .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return returnString;
   };
 
   const thumbnailHandler = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -277,26 +308,26 @@ export default function TradeWritePage() {
             </label>
             <input
               id="임대 가격"
-              type="number"
-              placeholder="만원으로 표기"
+              placeholder="만원 단위로 표기"
               name="price"
-              value={form.price}
-              onChange={onChangeForm}
+              value={addComma(form.price) || ''}
+              onChange={onChangePoints}
             />
           </div>
           <div
             style={{
               display: form.rentalType === 'MONTHLYRENT' ? '' : 'none',
             }}
           >
-            <label htmlFor="월세">월세</label>
+            <label htmlFor="월세">
+              월세<span className={styles.essential}>*</span>
+            </label>
             <input
               id="월세"
-              type="number"
-              placeholder="만원으로 표기"
+              placeholder="만원 단위로 표기"
               name="monthlyPrice"
-              value={form.monthlyPrice}
-              onChange={onChangeForm}
+              value={addComma(form.monthlyPrice) || ''}
+              onChange={onChangePoints}
             />
           </div>
           <div>
@@ -306,10 +337,19 @@ export default function TradeWritePage() {
             <input
               id="전화번호"
               type="text"
-              placeholder="01000000000 표기(매물 관련 연락 가능한 연락처)"
+              placeholder="매물 관련 연락 가능한 연락처"
               name="contact"
               value={form.contact}
-              onChange={onChangeForm}
+              onChange={(event) =>
+                onChangeForm({
+                  ...event,
+                  target: {
+                    ...event.target,
+                    name: 'contact',
+                    value: onParsingPhoneNumber(event.target.value),
+                  },
+                })
+              }
             />
           </div>
           {user?.userType === 'AGENT' && (
@@ -355,10 +395,19 @@ export default function TradeWritePage() {
             <input
               id="매물 면적"
               type="text"
-              placeholder="㎡로 표기"
+              placeholder="㎡ 단위로 표기"
               name="size"
               value={form.size}
-              onChange={onChangeForm}
+              onChange={(event) =>
+                onChangeForm({
+                  ...event,
+                  target: {
+                    ...event.target,
+                    name: 'size',
+                    value: onParsingDecimal(event.target.value),
+                  },
+                })
+              }
             />
           </div>
           <div>

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -149,7 +149,6 @@ export const checkBeforeTradePost = (
     imageUrls,
     city,
     zipCode,
-    detail,
     price,
     monthlyPrice,
     contact,
@@ -173,10 +172,6 @@ export const checkBeforeTradePost = (
     alert('우편번호를 입력해주세요.');
     return false;
   }
-  if (detail === '') {
-    alert('상세주소를 입력해주세요.');
-    return false;
-  }
   if (price === 0) {
     alert('매매가를 입력해주세요.');
     return false;