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

client/src/Components/MainNav.js

@@ -9,17 +9,19 @@ function MainNav() {
     return (
         <Navbar sticky="top" style={{ background: "#CDC5C2" }}>
             <Navbar.Brand href="/home" className="text-light">
-                <img alt="로고" src="/icon/footprint.svg" width="24" height="24" />
+                <img alt="로고" src="/icon/footprint.svg" width="18" height="18" />
                 {' '}KU#
             </Navbar.Brand>
-            <Nav className="ml-auto">
-                {user ? <> <Nav.Link className="text-light" onClick={() => handleLogout()}>Logout</Nav.Link>
-                    <Nav.Link className="text-light" href="/account"> Mypage </Nav.Link>
-                    <Nav.Link href="/shoppingcart">
-                        <img alt="카트" src="/icon/cart.svg" width="30" height="30" />
-                    </Nav.Link>
-                </>
-                    : (
+            <Nav className="ml-auto d-flex align-items-center">
+                {user ?
+                    <>
+                        <Nav.Link className="text-light" onClick={() => handleLogout()}>Logout</Nav.Link>
+                        <Nav.Link className="text-light" href="/account"> Mypage </Nav.Link>
+                        <Nav.Link href="/shoppingcart">
+                            <img alt="카트" src="/icon/cart.svg" width="30" height="30" />
+                        </Nav.Link>
+                    </>
+                    : ( 
                         <>
                             <Nav.Link className="text-light" href='/login'>Login</Nav.Link>
                             <Nav.Link className="text-light" href='/signup'>Sign Up</Nav.Link>

client/src/Components/SubNav.js

@@ -15,8 +15,8 @@ function SubNav() {
             Object.keys(response.data[0]).forEach((ele) => {
                 const url = ele.toLowerCase()
                 list.push(
-                    <Nav.Link as={Link} to={`/categories/${url}`}>{ele}</Nav.Link>
-                    //categories/${SubNav.url}/&{url}
+                    <Nav.Link href={`/categories/${url}`}>{ele}                   
+                    </Nav.Link>
                 )
             })
             setCategoriesDiv(list)

client/src/Pages/Account.js

@@ -17,6 +17,7 @@ function Account() {
     const [error, setError] = useState("")
     const userId = isAuthenticated()
     const [ordered, setOrdered] = useState('')
+    
 
     async function getUsername(user) {
         try {
@@ -87,6 +88,7 @@ function Account() {
         }
     }
 
+    
     return (
         <Container className="px-3">
             <style type="text/css">

client/src/Pages/Product.js

@@ -14,7 +14,13 @@ function Product({ match, location }) {
     const [selected, setSelected] = useState({ sizes: false, colors: false })
     const [count, setCount] = useState(1)
     const [price, setPrice] = useState(0)
-    // let price = 0
+
+    const replace = product.description.replaceAll('\n', '<br />')
+    // const replace = product.description.replaceAll('\n', '<br />')
+    // const replace = product.description.replaceAll(/\n/, '<br />')
+    
+
+    console.log("objectasdasd", replace)
 
     useEffect(() => {
         if (size && color) {
@@ -166,20 +172,20 @@ function Product({ match, location }) {
                     <h3 style={{ borderBottom: "1px solid #91877F", paddingBottom: "5px", marginBottom: "1em" }} className="p-3">
                         설명
                         </h3>
-                    <Col className='m-3 text-center d-flex justify-content-center'>
-                        <div style={{ wordBreak: 'break-all', wordWrap: 'break-word', fontFamily: "맑은 고딕" }} className="p-3">
-                            <h1 className='m-3'>{product.name} </h1>
+                    <Col className='justify-content-center '>
+                            <h2 className='p-2 text-center border' style={{background : '#CDC5C2'}}>{product.name} </h2>
                             <>
-                            <Image src={`/images/${product.main_img}`} style={{ objectFit: "contain", width: '100%'}} />
+                            <Image src={`/images/${product.main_img}`} style={{ objectFit: "contain", maxWidth: "100%"}} />
                             </>
                             <Card className='m-3 d-flex justify-content-center'>
-                                <Card.Body>
-                                    {product.description}
+                                <Card.Body className='text-center'>
+                                    {replace}
                                 </Card.Body>
                             </Card>
-                            <h3 className='mt-5'>[ Detail Images ]</h3>
-                            <Image src={`/images/${product.detail_imgs}`} style={{ objectFit: "contain"}} className='m-3' />
-                        </div>
+                            <>
+                            <h4 className='my-4 text-center'>[ Detail Images ]</h4>
+                            <Image src={`/images/${product.detail_imgs}`} style={{ objectFit: "contain",  maxWidth: "100%"}}/>
+                            </>
                     </Col>
                 </Col>
             </Row>

client/src/Pages/ProductRegist.js

@@ -182,15 +182,15 @@ function ProductsRegist() {
                         <Form.Group>
                             <Form.Label>분류</Form.Label>
                             <Row>
-                                <Col md={4}>
-                                    <Form.Control as="select" name="main_category" onChange={handleCategory} disabled={product["sub_category"].length > 0}>
+                                <Col md={4} className="mb-1">
+                                    <Form.Control as="select" name="main_category" onChange={handleCategory} disabled={product["sub_category"].length > 0} >
                                         <option value="" >상위분류</option>
                                         {categories[0].map((main) => (
                                             <option value={main}>{main}</option>
                                         ))}
                                     </Form.Control>
                                 </Col>
-                                <Col md={6}>
+                                <Col md={6} className="mb-2">
                                     <Form.Control as="select" ref={selectRef} name="sub_category" onChange={handleCategory}>
                                         <option value="" >하위분류</option>
                                         {(categoryNum === '') ? '' : (categories[1][categoryNum].map((sub) => (
@@ -206,7 +206,7 @@ function ProductsRegist() {
                         </Form.Group>
                         <Form.Group>
                             <Form.Label>사이즈</Form.Label>
-                            <Row>
+                            <Row className="px-3">
                                 <Col>
                                     <Form.Check type="checkbox" name="sizes" label="210" value="210" onChange={handleCheckBox} />
                                     <Form.Check type="checkbox" name="sizes" label="215" value="215" onChange={handleCheckBox} />
@@ -235,10 +235,10 @@ function ProductsRegist() {
                         <Form.Group>
                             <Form.Label>색상</Form.Label>
                             <Row>
-                                <Col md={10}>
+                                <Col md={9} xs={9} className="pr-1">
                                     <Form.Control as="input" ref={colorRef} name="colors" placeholder="색상" onChange={handleColor} />
                                 </Col>
-                                <Col>
+                                <Col className="pl-1">
                                     <Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addColor}>추가</Button>
                                 </Col>
                             </Row>

client/src/Pages/ProductsList.js

@@ -4,7 +4,7 @@ import ListCard from '../Components/ListCard';
 import Pagination from "../Components/Pagination";
 import axios from 'axios';
 import catchError from '../utils/catchErrors';
-import { Container, Row, Col, Form, FormControl, Button, Dropdown, ButtonGroup } from 'react-bootstrap';
+import { Container, Row, Col, Form, FormControl, Button, Dropdown, ButtonGroup, Image } from 'react-bootstrap';
 
 function ProductsList({ match }) {
     const [search, setSearch] = useState({ word: '' })
@@ -61,7 +61,6 @@ function ProductsList({ match }) {
     }
 
     async function getProductlist() {
-        console.log("tlfgpd")
         try {
             const response = await axios.get(`/api/product/getproduct/main/${mainCategory}`)
             setProductlist(response.data)
@@ -79,16 +78,17 @@ function ProductsList({ match }) {
         }
     }
 
+
     async function handleSubname(e) {
         const subname = e.target.name
         console.log("subname=", subname)
         try {
             console.log("first test!!!!!!!!")
-            const response = await axios.get(`/api/product/getproduct/sub/${subname}`)
+            const response = await axios.get(`/api/product/getproduct/sub?subname=${subname}`)
             console.log("subname response data=", response.data)
             setProductlist(response.data)
         } catch (error) {
-            console.log("error22")
+            catchError(error, setError)
         }
     }
 
@@ -115,47 +115,53 @@ function ProductsList({ match }) {
                     <h1 style={{ fontSize: "3rem" }} className="text-center">{mainCategory}</h1>
                     <div className="text-center">
                         <ButtonGroup className="m-3" variant="outline-light secondary" style={{ display: "inline-block" }}>
-                            {subCategory.map(el => (<Button className="m-1" variant="secondary" name={el} onClick={handleSubname}>{el}</Button>))}
+                            {subcategory.map(el => (<Button className="m-1" variant="secondary" name={el} onClick={handleSubname}>{el}</Button>))}
                         </ButtonGroup>
                     </div>
                 </Col>
             </Row>
             <Row className="justify-content-end mx-0 my-5">
                 <Dropdown>
-                    <Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle>
+                    <Dropdown.Toggle variant="secondary" className="mx-2">정렬</Dropdown.Toggle>
                     <Dropdown.Menu>
-                        <Dropdown.Item onClick={() => handleSort('purchase')}>인기상품</Dropdown.Item>
-                        <Dropdown.Item onClick={() => handleSort('newest')}>신상품</Dropdown.Item>
-                        <Dropdown.Item onClick={() => handleSort('lowest')}>낮은가격</Dropdown.Item>
-                        <Dropdown.Item onClick={() => handleSort('highest')}>높은가격</Dropdown.Item>
+                        <Dropdown.Item>인기상품</Dropdown.Item>
+                        <Dropdown.Item>신상품</Dropdown.Item>
+                        <Dropdown.Item>낮은가격</Dropdown.Item>
+                        <Dropdown.Item>높은가격</Dropdown.Item>
                     </Dropdown.Menu>
                 </Dropdown>
-                <Form inline onSubmit={handleSearch} className="justify-content-end mx-0">
-                    <FormControl type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
-                    <Button  type="submit" className="px-2">
+                <Form as={Row} onSubmit={handleSearch} className="justify-content-end mx-0">
+                    <FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
+                    <Button type="submit" className="search px-2" variant="secondary">
                         <img src="/icon/search.svg" width="20" height="20" />
                     </Button>
                 </Form>
             </Row>
             <Row md={8} sm={12} className="justify-content-center m-2">
-                {productlist.map(pro => (
-                    <Link to={{
-                        pathname: `/product/${pro._id}`,
-                        state: {
-                            id: pro._id,
-                            name: pro.pro_name,
-                            price: pro.price,
-                            colors: pro.colors,
-                            sizes: pro.sizes,
-                            description: pro.description,
-                            main_img: pro.main_imgUrl,
-                            detail_imgs: pro.detail_imgUrls
-                        }
-                    }}>
-                        <ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
-                    </Link>
-                ))}
-                {/* <Pagination className="justify-content-center" index={} endPage={} handlePage={}/> */}
+                {productlist.length > 0 ?
+                    productlist.map(pro => (
+                        <Link to={{
+                            pathname: `/product/${pro._id}`,
+                            state: {
+                                id: pro._id,
+                                name: pro.pro_name,
+                                price: pro.price,
+                                colors: pro.colors,
+                                sizes: pro.sizes,
+                                description: pro.description,
+                                main_img: pro.main_imgUrl,
+                                detail_imgs: pro.detail_imgUrls
+                            }
+                        }}>
+                            <ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl}
+                            />
+                        </Link>
+                    ))
+                    : (
+                        <Image src="/sryimready.jpg"
+                            style={{ objectFit: "cover", width: "45 rem", height: "45 rem" }}></Image>
+                    )
+                }
             </Row>
         </Container>
     )

server/controllers/product.controller.js

@@ -59,14 +59,6 @@ const getlist = (req, res) => {
     }
 }
 
-const subname = async (req, res) => {
-    try {
-        console.log("last subname::: LET ME SEE")
-        res.json(req.findsubname)
-    } catch (error) {
-        res.status(500).send('상품을 불러오지 못했습니다.')
-    }
-}
 
 const categoryId = async (req, res, next, category) => {
     const { search } = req.body
@@ -84,22 +76,11 @@ const categoryId = async (req, res, next, category) => {
     }
 }
 
-const subcategoryId = async (req, res, next, subname) => {
+const subname = async (req, res) => {
+    console.log("req.query", req.query)
     try {
-        console.log("Please===>>>", subname)
-        const findSubname = await Product.find({ sub_category: subname })
+        const findSubname = await Product.find({ sub_category: req.query.subname })
         console.log("findSubname111=", findSubname)
-
-        if (!findSubname) {
-            const findSubname = {
-                _id: 'nothing',
-                pro_name: '상품준비중',
-                price: 0,
-                main_imgUrl:''
-            }
-            console.log("findSubname2222=", findSubname)
-            res.send(findSubname)
-        }
         res.send(findSubname)
     } catch (error) {
         res.send('상품을 불러오지 못했습니다.')
@@ -126,4 +107,4 @@ const plusPurchase = async (req, res) => {
     }
 }
 
-export default { imageUpload, regist, getToHome, getAll, categoryId, getlist, subcategoryId, subname, plusPurchase }
+export default { imageUpload, regist, getToHome, getAll, categoryId, getlist, subname, plusPurchase }
\ No newline at end of file

server/routes/product.routes.js

@@ -16,13 +16,13 @@ router.route('/getproduct/all')
 router.route('/getproduct/main/:category')
     .get(productCtrl.getlist)
 
-router.route('/getproduct/sub/:subname')
+router.route('/getproduct/sub')
     .get(productCtrl.subname)
 
 router.route('/pluspurchase')
     .post(productCtrl.plusPurchase)
 
 router.param('category', productCtrl.categoryId)
-router.param('subname',productCtrl.subcategoryId)
+// router.param('subname',productCtrl.subcategoryId)
     
 export default router
\ No newline at end of file