feat: 가격 input 천단위 콤마 추가

Author: sinyroom

src/components/pages/AddItemPage/AddItemPage.jsx

@@ -4,12 +4,13 @@ import { useState } from 'react';
 import InputField from '../../UI/InputField';
 import ImageUpload from '../../UI/ImageUpload';
 import TagInput from '../../UI/Taginput';
+import useFormatNumber from '../../../hooks/useFormatNumber';
 import { ColorTypes } from '../../../styles/theme';
 
 function AddItemPage() {
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
-  const [price, setPrice] = useState('');
+  const [price, handlePriceChange] = useFormatNumber('');
   const [tags, setTags] = useState([]);
 
   const isDisabled = name.trim() && description.trim() && price.trim() && tags.length > 0;
@@ -47,11 +48,11 @@ function AddItemPage() {
         />
         <InputField
           label="판매 가격"
-          type="number"
+          type="text"
           placeholder="판매 가격을 입력해주세요"
           isTextArea={false}
           value={price}
-          onChange={(e) => setPrice(e.target.value)}
+          onChange={handlePriceChange}
         />
         <TagInput
           tags={tags}

src/hooks/useFormatNumber.js

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+
+export default function useFormatNumber(initialValue = '') {
+  const [value, setValue] = useState(initialValue);
+
+  // 천단위 콤마 함수
+  const formatNumber = (value) => {
+    const onlyNumber = value.replace(/[^0-9]/g, '');
+    return onlyNumber.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  };
+
+  const handleChange = (e) => {
+    setValue(formatNumber(e.target.value));
+  };
+
+  return [value, handleChange];
+}

src/styles/GlobalStyle.js

@@ -79,12 +79,6 @@ const GlobalStyle = createGlobalStyle`
   textarea {
     resize: none;
   }
-
-  input[type='number']::-webkit-outer-spin-button,
-  input[type='number']::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
 `;
 
 export default GlobalStyle;