Merge remote-tracking branch 'origin/ourMaster' into jaeyeon

.gitignore

-node_modules
\ No newline at end of file

client/src/App.js

@@ -15,10 +15,6 @@ import SubNav from './Components/SubNav';
 
 
 function App() {
-  // const [user,setUser]=useState(null);
-  // const authenticated =user !=null;
-  // const login =({id, password}) => setUser(signIn({id,password}));
-  // const logout=()=>setUser(null);
 
 
   return (
@@ -42,7 +38,6 @@ function App() {
         </Switch>
       </Router>
     </div>
-
   )
 
 

client/src/Components/Card.js

 import React, { useState, useEffect, useRef } from 'react';
 
-function Card() {
-
+function card(props) {
+    const [card, setCard] = useState([...props])
 
     return (
-        <div></div>
-        
+        <Card className="mt-5">
+            <Card.Img varient="top" src={} style={{ objectFit: "contain", height: "22rem" }}></Card.Img>
+            <Card.Body>
+                <Card.Title></Card.Title>
+                <Card.Text></Card.Text>
+                <Card.Text></Card.Text>
+            </Card.Body>
+        </Card>
     )
 }
 
-export default Card
+export default card
\ No newline at end of file

client/src/Components/MainNav.js

 import React from 'react';
 import { Navbar, Nav } from 'react-bootstrap';
-import logo from '../footprint.svg';
-import cart from '../cart.svg';
-import option from '../option.svg';
 import { handleLogout, isAuthenticated } from '../utils/auth'
 
 function MainNav() {
@@ -11,7 +8,7 @@ function MainNav() {
     return (
         <Navbar sticky="top" style={{ background: "#CDC5C2" }}>
             <Navbar.Brand href="/home" className="text-light">
-                <img alt="로고" src={logo} width="24" height="24" />
+                <img alt="로고" src="icon/footprint.svg" width="24" height="24" />
                 {' '}KU#
             </Navbar.Brand>
             <Nav>
@@ -23,10 +20,10 @@ function MainNav() {
                         </>
                     )}
                 <Nav.Link href="/shoppingcart">
-                    <img alt="카트" src={cart} width="30" height="30" />
+                    <img alt="카트" src="icon/cart.svg" width="30" height="30" />
                 </Nav.Link>
                 <Nav.Link href="/admin">
-                    <img alt="관리자" src={option} width="30" height="30" />
+                    <img alt="관리자" src="icon/option.svg" width="30" height="30" />
                 </Nav.Link>
             </Nav>
         </Navbar>

client/src/Pages/Admin.js

 import React, { useState, useEffect, useRef } from 'react';
 import Pagination from '../Components/Pagination';
-import search from '../search.svg';
 import { Row, Form, FormControl, Button, Card, Container } from 'react-bootstrap';
 
 function Admin() {
@@ -33,7 +32,7 @@ function Admin() {
                 <Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5">
                     <FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
                     <Button type="submit" className="px-2">
-                        <img src={search} width="20" height="20" />
+                        <img src="icon/search.svg" width="20" height="20" />
                     </Button>
                     <Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
                 </Row>

client/src/Pages/Home.js

@@ -10,42 +10,42 @@ function Home() {
                     <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2>
                     <Row className="justify-content-center mx-0">
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
@@ -57,42 +57,42 @@ function Home() {
                     <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem", marginTop: "2rem" }}><u>New Arrival</u></h2>
                     <Row className="justify-content-center mx-0">
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>
                             </Card.Body>
                         </Card>
                         <Card className="mx-1 my-2" style={{ width: '18rem' }}>
-                            <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" />
+                            <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" />
                             <Card.Body>
                                 <Card.Title className="font-weight-bold">제품명</Card.Title>
                                 <Card.Text>가격</Card.Text>

client/src/Pages/Payment.js

@@ -254,7 +254,7 @@ function Payment() {
                     <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>결제수단</h5>
                     <div className="text-center mt-5">
                         <Button variant="success" className="align-top" onClick={handleClick} >무통장입금</Button>
-                        <input type="image" alt="카카오페이결제" src="img/payment_icon_yellow_small.png" onClick={kakaopay} />
+                        <input type="image" alt="카카오페이결제" src="icon/payment_icon_yellow_small.png" onClick={kakaopay} />
                     </div>
                     {paymentWay}
                 </div>

client/src/Pages/Product.js

@@ -4,10 +4,23 @@ import { Row, Col, Form, Card, Button } from 'react-bootstrap';
 import catchErrors from '../utils/catchErrors';
 
 function Product() {
+    const [product, setProduct] = useState()
     const [select, setSelect] = useState({ color: "", size: "" })
     const [cart, setCart] = useState()
     const [error, setError] = useState('')
 
+
+    async function getProduct(user){
+        console.log(user)
+        try {
+            const response = await axios.get('/api/product/productone')
+            setProduct(response.data)
+            console.log(response.data)
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
     function handleClick(e) {
         const box = e.target.parentNode.parentNode
         box.style.display = "none"
@@ -73,10 +86,12 @@ function Product() {
 
     useEffect(() => {
         handleCreate()
+        getProduct()
     }, [cart])
 
     return (
         <div>
+            {/* {getProduct} */}
             <style type="text/css">
                 {`
                 .btn {

client/src/Pages/ProductRegist.js

 import React, { useState, useEffect, useRef } from 'react';
-import { Row, Col, Button, Form, Container } from 'react-bootstrap';
+import { Redirect } from 'react-router-dom';
+import { Row, Col, Button, Form, Container, Alert } from 'react-bootstrap';
 import axios from 'axios'
 import catchErrors from '../utils/catchErrors';
-import { Redirect } from 'react-router-dom';
 
 let color = {}
-let colors = []
-let addedcolors = []
+let preColors = []
+let colorHtml = []
 let list = []
 
 function ProductsRegist() {
@@ -16,8 +16,8 @@ function ProductsRegist() {
         stock: 0,
         main_category: '',
         sub_category: [],
-        size: [],
-        color: [],
+        sizes: [],
+        colors: [],
         description: '',
         main_image: [],
         detail_image: []
@@ -61,25 +61,24 @@ function ProductsRegist() {
     }
 
     function addColor() {
-        addedcolors.push(
-            <div>{color["color"]}</div>
+        preColors.push(color["colors"])
+        colorHtml.push(
+            <p>{color["colors"]}</p>
         )
-        if (product.color) {
-            setProduct({ ...product, [color]: colors })
-        } else {
-            setProduct({ ...product, "color": colors })
-
+        setProduct({...product, "colors":preColors})
     }
 
+    function colorChange(e){
+        color[e.target.name]= e.target.value
     }
 
     function handleChange(event) {
-        const { name, value } = event.target
+        const { name, value, files } = event.target
         if (event.target.name === "sub_category") {
             product["sub_category"].push(event.target.value)
-        } else if (event.target.name === "color") {
-            color[event.target.name] = event.target.value
-            // console.log(color)
+        } else if (files) {
+            setProduct({ ...product, [name]: files })
+
         } else {
             setProduct({ ...product, [name]: value })
         }
@@ -96,17 +95,33 @@ function ProductsRegist() {
                 sizes.push(key)
             }
         }
-        product["size"].push(sizes)
+        product["sizes"]=sizes
+        console.log(product)
         const formData = new FormData();
-        for (let key in product) {
+        for (const key in product) {
+            console.log("product[key]=", product[key])
+            if (key == "main_image" || key == "detail_image") {
+                for (const file of product[key]) {
+                    formData.append(key, file)
+                }
+            } else {
                 formData.append(key, product[key])
             }
-        console.log("formData=", formData)
-        console.log(product)
+        }
+        // formData 값 확인용
+        // for (const key of formData.keys()) {
+
+        //     console.log("key=",key);
+
+        //   }
+
+        //   for (const value of formData.values()) {
+
+        //     console.log(value);
+
+        //   }
         try {
-            const response = axios.post('/api/product/regist', { data: formData })
-            setSuccess(true)
-            console.log(response)
+            const response = await axios.post('/api/product/regist', formData)
         } catch (error) {
             catchErrors(error, setError)
         }
@@ -120,6 +135,7 @@ function ProductsRegist() {
             <Container>
                 <Row className="justify-content-md-center">
                     <Col md={8} className="border p-1" style={{ background: '#F7F3F3' }}>
+                    {error && <Alert variant="danger" className="text-center">{error}</Alert>}
                         <h2 className="text-center mt-5 font-weight-bold">상품등록</h2>
                         <Form className="p-5" onSubmit={handleSubmit}>
                             <Form.Group controlId="productNameform">
@@ -161,19 +177,18 @@ function ProductsRegist() {
                             </Form.Group>
                             <Form.Group>
                                 <Form.Label>사이즈</Form.Label>
-                                {/* {console.log(checked)} */}
-                                <Form.Check type="checkbox" name="size" label="Free" value="Free" onChange={handleCheckBox} />
-                                <Form.Check type="checkbox" name="size" label="XL" value="XL" onChange={handleCheckBox} />
-                                <Form.Check type="checkbox" name="size" label="L" value="L" onChange={handleCheckBox} />
-                                <Form.Check type="checkbox" name="size" label="M" value="M" onChange={handleCheckBox} />
-                                <Form.Check type="checkbox" name="size" label="S" value="S" onChange={handleCheckBox} />
-                                <Form.Check type="checkbox" name="size" label="XS" value="XS" onChange={handleCheckBox} />
+                                <Form.Check type="checkbox" name="sizes" label="Free" value="Free" onChange={handleCheckBox} />
+                                <Form.Check type="checkbox" name="sizes" label="XL" value="XL" onChange={handleCheckBox} />
+                                <Form.Check type="checkbox" name="sizes" label="L" value="L" onChange={handleCheckBox} />
+                                <Form.Check type="checkbox" name="sizes" label="M" value="M" onChange={handleCheckBox} />
+                                <Form.Check type="checkbox" name="sizes" label="S" value="S" onChange={handleCheckBox} />
+                                <Form.Check type="checkbox" name="sizes" label="XS" value="XS" onChange={handleCheckBox} />
                             </Form.Group>
                             <Form.Group>
                                 <Form.Label>색상</Form.Label>
                                 <Row>
                                     <Col md={10}>
-                                        <Form.Control as="textarea" rows={1} name="color" placeholder="색상" onChange={handleChange} />
+                                        <Form.Control as="textarea" rows={1} name="colors" placeholder="색상" onChange={colorChange} />
 
                                     </Col>
                                     <Col>
@@ -181,7 +196,7 @@ function ProductsRegist() {
                                         <Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addColor}>추가</Button>
                                     </Col>
                                 </Row>
-                                {addedcolors.map((element) => element)}
+                                {colorHtml.map((element) => element)}
                             </Form.Group>
 
                             <Form.Group controlId="productDescriptionform">

client/src/Pages/ProductsList.js

 import React, { useState, useEffect, useRef } from 'react';
 import Pagination from '../Components/Pagination';
-import search from '../search.svg';
 import { Container, Row, Col, Form, FormControl, Button, Card, Dropdown } from 'react-bootstrap';
 
 function ProductsList() {
     const [sub, setSub] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST'])
 
+    // useEffect(() => {
+    //     getProfile(user)
+    // }, [user])
+
+    // async function getProfile(user){
+    //     console.log(user)
+    //     try {
+    //         const response = await axios.get(`/api/users/profile/${user}`)
+    //         setProfile(response.data)
+    //     } catch (error) {
+    //         catchErrors(error, setError)
+    //     }
+    // }
+
     function handleSubmit(e) {
         e.preventDefault()
     }
@@ -26,11 +39,11 @@ function ProductsList() {
                 `}
             </style>
             <Container>
-                <Row >
-                    <Col sm={10} xs={12}>
+                <Row className="justify-content-center" >
+                    <Col sm={10} xs={12} >
                         <h1 style={{ fontSize: "3rem" }} className="text-center">OUTER</h1>
-                        <div>{sub.map((ele) => (
-                            <Button className="justify-content-center m-1">{ele}</Button>
+                        <div className="text-center">{sub.map((ele) => (
+                            <Button className="m-1">{ele}</Button>
                         ))}</div>
                     </Col>
                 </Row>
@@ -45,11 +58,13 @@ function ProductsList() {
                                 <Dropdown.Item>높은가격</Dropdown.Item>
                             </Dropdown.Menu>
                         </Dropdown>
+                        <Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0">
                             <FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
-                        <Button type="submit" className="search px-2 mb-1 ">
-                            <img src={search} width="20" height="20" />
+                            <Button type="submit" className="search px-2">
+                                <img src="icon/search.svg" width="20" height="20" />
                             </Button>
                         </Form>
+                    </Form>
                 </Row>
                 <Row md={8} sm={12} className="justify-content-start m-2">
                     <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>

client/src/Pages/ShoppingCart.js

@@ -4,7 +4,6 @@ import { Card, Button, Container, Row, Col } from 'react-bootstrap';
 import axios from 'axios';
 
 function ShoppingCart() {
-
     const [num, setNum] = useState(0)
 
     function plusNum() {
@@ -41,7 +40,7 @@ function ShoppingCart() {
                                 <input className="" type="checkbox" id="exampleCheck1" />
                             </Col>
                             <Col className="text-center">
-                                <Card.Img className="img-fluid" variant="top" src="img/asd.jpg" style={{ width: '20rem' }} />
+                                <Card.Img className="img-fluid" variant="top" src="icon/asd.jpg" style={{ width: '20rem' }} />
                             </Col>
                             <Col md={6} className="p-2">
                                 <Card.Body>

client/src/Pages/Signup.js

@@ -14,7 +14,7 @@ const INIT_USER = {
 }
 
 function Signup() {
-    const [user, setUser] = useState(true)
+    const [user, setUser] = useState(INIT_USER)
     const [error, setError] = useState('')
     const [success, setSuccess] = useState(false)
     const [validated, setValidated] = useState(false);
@@ -24,11 +24,9 @@ function Signup() {
         setUser({ ...user, [name]: value })
     }
 
-
     async function handleSubmit(event) {
         event.preventDefault()
         const form = event.currentTarget;
-        console.log(form)
         if (form.checkValidity() === false) {
             event.preventDefault();
             event.stopPropagation();