diff --git a/src/apis/ProductService(MongoDB).js b/src/apis/ProductService(MongoDB).js index 6b873e42..816a8b51 100644 --- a/src/apis/ProductService(MongoDB).js +++ b/src/apis/ProductService(MongoDB).js @@ -24,3 +24,19 @@ export async function getProductList(offset, limit, orderBy, keyword) { console.error("기타 에러:", error); // 서버 등 예측하지 못한 에러 위해 } } + +export async function registerProduct(productData) { + try { + const response = await fetch(BASE_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(productData), + }); + if (!response.ok) { + throw new Error(`등록 실패: ${response.status}`); + } + return await response.json(); + } catch (error) { + console.error("상품 등록 중 오류:", error); + } +} \ No newline at end of file diff --git a/src/pages/Registration.js b/src/pages/Registration.js index ced9f6a8..6d70d235 100644 --- a/src/pages/Registration.js +++ b/src/pages/Registration.js @@ -1,5 +1,6 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import styles from './Registration.module.css'; +import { registerProduct } from '../apis/ProductService(MongoDB)'; function Registration() { const [name, setName] = useState(''); @@ -7,17 +8,34 @@ function Registration() { const [price, setPrice] = useState(''); const [tags, setTags] = useState([]); const [tagInput, setTagInput] = useState(''); + const [isFormValid, setIsFormValid] = useState(false); + const [showErrors, setShowErrors] = useState(false); + const [isPriceValid, setIsPriceValid] = useState(true); + + useEffect(() => { + setIsFormValid(name.trim() && description.trim() && price.trim() && isPriceValid); + }, [name, description, price, isPriceValid]); const handleNameChange = (e) => setName(e.target.value); const handleDescriptionChange = (e) => setDescription(e.target.value); const formatPrice = (value) => { - const number = value.replace(/,/g, ''); // 콤마 제거 - return number.replace(/\B(?=(\d{3})+(?!\d))/g, ','); // 세 자리마다 콤마 추가 + const number = value.replace(/,/g, ''); + return number.replace(/\B(?=(\d{3})+(?!\d))/g, ','); }; const handlePriceChange = (e) => { - const formattedPrice = formatPrice(e.target.value); + const inputValue = e.target.value; + const numericPrice = parseFloat(inputValue.replace(/,/g, '')); + + // 가격 유효성 검사: 숫자 여부와 양수 여부 확인 + if (!isNaN(numericPrice) && numericPrice > 0) { + setIsPriceValid(true); + } else { + setIsPriceValid(false); + } + + const formattedPrice = formatPrice(inputValue); setPrice(formattedPrice); }; @@ -25,7 +43,7 @@ function Registration() { const handleTagInputKeyPress = (e) => { if (e.key === 'Enter' && tagInput.trim()) { - setTags((prevTags) => [...prevTags, `#${tagInput.trim()}`]); + setTags((prevTags) => [...prevTags, tagInput.trim()]); setTagInput(''); e.preventDefault(); } @@ -35,32 +53,57 @@ function Registration() { setTags(tags.filter((_, index) => index !== indexToRemove)); }; - const handleSubmit = () => { - const formattedTags = tags.map(tag => tag.replace(/^#/, '')); // #을 제거 + const handleSubmit = async () => { + setShowErrors(true); + + if (!isFormValid) return; + + const formattedTags = tags.map(tag => tag.replace(/^#/, '')); const productData = { name, description, - price: price.replace(/,/g, ''), // 콤마 제거된 값으로 설정 - tags: formattedTags // # 없는 태그들로 설정 + price: price.replace(/,/g, ''), + tags: formattedTags, }; - console.log('등록할 상품 데이터:', productData); - // 서버로 productData 전송 + try { + const result = await registerProduct(productData); + console.log('등록된 상품:', result); + alert('상품이 성공적으로 등록되었습니다!'); + setName(''); + setDescription(''); + setPrice(''); + setTags([]); + setShowErrors(false); + setIsPriceValid(true); + } catch (error) { + console.error("상품 등록 중 오류:", error); + alert('상품 등록 중 문제가 발생했습니다.'); + } }; return (