Merge branch 'React-김수영' into React-김수영-sprint7

src/pages/AddItem/components/ProductDescription/ProductDescription.css

@@ -16,6 +16,7 @@
     border-radius: 12px;
     background: var(--Cool-Gray-100, #F3F4F6);
     resize:none;
+
 }
 .description-input::placeholder {
     color: var(--Secondary-400, #9CA3AF);

src/pages/Market/components/AllItem.jsx

@@ -1,87 +1,87 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import SearchIcon from '../../../assets/images/searchicon.png';
-import { Link } from 'react-router-dom';
-import ItemCard from './ItemCard';
-import { getProducts } from '../../../api/itemApi';
-import styles from '../Market.module.css';
+import React, { useEffect, useState } from 'react'
+import Header from '../../components/Header/Header';
+import './AddItem.css';
+import ProductImg from './components/ProductImg/ProductImg';
+import ProductName from './components/ProductName/ProductName';
+import ProductDescription from './components/ProductDescription/ProductDescription';
+import ProductPrice from './components/ProductPrice/ProductPrice';
+import ProductTag from './components/ProductTag/ProductTag';
 
-const getPageSize = () => {
-    const width = window.innerWidth;
-    if (width < 767) {
-        return 4;
-    } else if (width < 1280) {
-        return 6;
-    } else {
-        return 10;
+function AddItem() {
+  const [isValid, setIsValid] = useState(false);
+  const [values, setValues] = useState({
+    imgFile:null,
+    name:'',
+    description:'',
+    price:'',
+    tags:[],
+  })
+
+  const isFormValid  = (values) => {
+    return (values.name.trim() !== '' &&
+            values.description.trim() !== '' &&
+            values.price > 0 && 
+            values.tags.length > 0);
+  } 
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if(!isFormValid(values)){
+      return;
     }
-};
+    console.log(values);
+  }
+  const handleChange = (name, value) => {
+      setValues((prevValues) => ({
+        ...prevValues,
+        [name]: value,
+      }));
+  };
 
-function AllItem() {
-    const [itemList, setItemList] = useState([]);
-    const [pageSize, setPageSize] = useState(getPageSize());
-    const [order, setOrder] = useState('recent');
-    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-
-    const handleNewestClick = () => {
-        setOrder('recent');
-        setIsDropdownOpen(false);
-    };
-
-    const handleFavoriteClick = () => {
-        setOrder('favorite');
-        setIsDropdownOpen(false);
-    };
-
-    const fetchSortedData = useCallback(async () => {
-        const products = await getProducts({ orderBy: order, pageSize });
-        setItemList(products.list);
-    }, [order, pageSize]);
-
-    useEffect(() => {
-        const handleResize = () => {
-            setPageSize(getPageSize());
-        };
-        window.addEventListener('resize', handleResize);
-        fetchSortedData();
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, [fetchSortedData]);
-
-    const toggleDropdown = () => {
-        setIsDropdownOpen(!isDropdownOpen);
-    };
-
-    return (
-        <div className={styles.allItem}>
-            <div className={styles.allItemContainer}>
-                <div className={styles.allItemHeader}>
-                    <h3 className={styles.listTitle}>전체 상품</h3>
-                    <div className={styles.allItemHeaderRight}>
-                        <div className={styles.searchContainer}>
-                            <img className={styles.searchIcon} src={SearchIcon} alt="검색" />
-                            <input className={styles.searchInput} placeholder="검색할 상품을 입력해주세요" />
-                        </div>
-                        <Link className={styles.addItemButton} to="/addItem">상품 등록하기</Link>
-                        <div className={styles.dropdownContainer}>
-                            <button className={styles.dropdownButton} onClick={toggleDropdown}>
-                                {order === 'recent' ? '최신순' : '인기순'} <span className={styles.dropdownArrow}>▼</span>
-                            </button>
-                            <ul className={`${styles.dropdownMenu} ${isDropdownOpen ? styles.show : ''}`}>
-                                <li className={styles.dropdownOption} onClick={handleNewestClick}>최신순</li>
-                                <li className={styles.dropdownOption} onClick={handleFavoriteClick}>좋아요순</li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <div className={styles.cardList}>
-                    {itemList?.map((item) => (
-                        <ItemCard key={item.id} item={item} />
-                    ))}
-                </div>
-            </div>
+  useEffect(() => {
+    setIsValid(isFormValid(values));
+  },[values]);
+
+  return (
+    <>
+      <Header />
+      <div className="addItem">
+        <div className="content-container">
+          <form onSubmit={handleSubmit}>
+          <div className="title-container">
+            <div className="title">상품 등록하기</div>
+            <button type="submit" className="submit-button" disabled={!isValid}>등록</button>
+          </div>
+            <ProductImg
+                name="imgFile"
+                value={values.imgFile}
+                onChange={handleChange} 
+            />
+            <ProductName 
+                name="name"
+                value={values.name}
+                onChange={handleChange}
+            />
+            <ProductDescription 
+                name="description"
+                value={values.description}
+                onChange={handleChange}
+            />
+            <ProductPrice 
+                name="price"
+                value={values.price}
+                onChange={handleChange}
+            />
+            <ProductTag 
+                name="tags"
+                value={values.tags}
+                onChange={handleChange}
+            />
+        </form>
         </div>
-    );
+      </div>
+    </>
+
+  )
 }
 
-export default AllItem;
+export default AddItem;