css

client/src/Components/Pagination.js

@@ -25,7 +25,7 @@ function Paginations({ index, totalPages, handlePage }) {
                 `}
             </style>
             <Pagination.First onClick={() => handlePage(1)} />
-            {index === 1 ? <Pagination.Prev onClick={()=>handlePage(index)} /> : <Pagination.Prev onClick={()=>handlePage(index - 1)} />}
+            {index === 1 ? <Pagination.Prev disabled /> : <Pagination.Prev onClick={()=>handlePage(index - 1)} />}
             {index === totalPages && index > 4 ? <Pagination.Item onClick={()=>handlePage(index - 4)}>{index - 4}</Pagination.Item> : ""}
             {index > 3 && index >= totalPages-1 ? <Pagination.Item onClick={()=>handlePage(index - 3)}>{index - 3}</Pagination.Item> : ""}
             {index < 3 ? "" : <Pagination.Item onClick={()=>handlePage(index - 2)}>{index - 2}</Pagination.Item>}
@@ -35,9 +35,9 @@ function Paginations({ index, totalPages, handlePage }) {
 
             {index === totalPages ? "" : <Pagination.Item onClick={()=>handlePage(index + 1)}>{index + 1}</Pagination.Item>}
             {index > totalPages-2 ? "" : <Pagination.Item onClick={()=>handlePage(index + 2)}>{index + 2}</Pagination.Item>}
-            {index < totalPages-3 && index >= 1 ? <Pagination.Item onClick={()=>handlePage(index + 3)}>{index + 3}</Pagination.Item> : ""}
-            {index < totalPages-4 && index >= 1 ? <Pagination.Item onClick={()=>handlePage(index + 4)}>{index + 4}</Pagination.Item> : ""}
-            {index === totalPages ? <Pagination.Next onClick={()=>handlePage(index)} /> : <Pagination.Next onClick={()=>handlePage(index + 1)} />}
+            {index <= totalPages-3 && index >= 1 ? <Pagination.Item onClick={()=>handlePage(index + 3)}>{index + 3}</Pagination.Item> : ""}
+            {index <= totalPages-4 && index >= 1 ? <Pagination.Item onClick={()=>handlePage(index + 4)}>{index + 4}</Pagination.Item> : ""}
+            {index === totalPages ? <Pagination.Next disabled /> : <Pagination.Next onClick={()=>handlePage(index + 1)} />}
 
             <Pagination.Last onClick={() =>handlePage(totalPages)} />
         </Pagination>

client/src/Pages/Account.js

@@ -75,7 +75,7 @@ function Account() {
         }
     }
 
-    async function getOrdered({ }) {
+    async function getOrdered() {
         try {
             const response = await axios.post(`/api/users/addorder`, {
                 userId: userId

client/src/Pages/Admin.js

@@ -81,7 +81,7 @@ function Admin() {
                     border-color: #91877F;
                     box-shadow: 0 0 0 0;
                 }
-                .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
+                .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
                     background-color: #91877F;
                     border-color: #91877F;
                 }

client/src/Pages/Product.js

@@ -148,8 +148,16 @@ function Product({ match, location }) {
                     background-color: #CDC5C2;
                     border-color: #CDC5C2;
                 }
-
-                .btn:hover, .btn:active, .btn:focus {
+                .btn:hover {
+                    background-color: #91877F;
+                    border-color: #91877F;
+                }
+                .btn-primary:focus {
+                    background-color: #91877F;
+                    border-color: #91877F;
+                    box-shadow: 0 0 0 0;
+                }
+                .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
                     background-color: #91877F;
                     border-color: #91877F;
                 }
@@ -206,7 +214,7 @@ function Product({ match, location }) {
                             <Col className="text-right">{price}원</Col>
                         </Row>
                         <Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}>
-                            <Button type='button' name="shoppingcart" onClick={addCart} style={{ width: "49%" }}>장바구니</Button>
+                            <Button type='button' name="shoppingcart" onClick={addCart} style={{ width: "49%" }} variant="primary" >장바구니</Button>
                             <Button type='button' name="payment" onClick={addCart} style={{ width: "49%" }}>구매하기</Button>
                         </Row>
                     </Form>
@@ -222,7 +230,6 @@ function Product({ match, location }) {
                             {product.name}
                         </div>
                         <Image src={`/images/${product.main_img}`} className='d-flex justify-content-center p-4' style={{ objectFit: "contain", maxWidth: "100%", margin: 'auto' }} />
-
                         <Card style={{ width: '70%', margin: 'auto' }} className='my-4' >
                             <Card.Header className='text-center' style={{ background: '#CDC5C2' }}>
                                 <h5 className='m-0' style={{ whiteSpace: 'nowrap' }}> [ Description ]</h5>
@@ -244,29 +251,29 @@ function Product({ match, location }) {
                     <h6 style={{ borderBottom: "1px solid", paddingBottom: "5px", marginBottom: "1em" }}>회원님이 선호할만한 상품 추천
                         <a className="close float-right" onClick={(e) => handleClick(e)} style={{ fontSize: "1rem", cursor: "pointer" }}>X</a>
                     </h6>
-                    <Row className="justify-content-space mx-0" style={{ flexWrap: "nowrap", width: "100%", overflowX: "auto" }}>
-                        <Col as={Card} style={{ minWidth: "10rem", marginRight: "1rem" }}>
+                    <Row className="justify-content-evenly mx-0" style={{ flexWrap: "nowrap", width: "100%", overflowX: "auto" }}>
+                        <Col as={Card} style={{ minWidth: "8rem" }}>
                             <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} />
                             <Card.Body className="px-0">
                                 <Card.Title>클로타탄원피스</Card.Title>
                                 <Card.Text>구매자 수: 30</Card.Text>
                             </Card.Body>
                         </Col>
-                        <Col as={Card} style={{ minWidth: "10rem", marginRight: "1rem" }}>
+                        <Col as={Card} style={{ minWidth: "8rem" }}>
                             <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} />
                             <Card.Body className="px-0">
                                 <Card.Title>클로타탄원피스</Card.Title>
                                 <Card.Text>구매자 수: 30</Card.Text>
                             </Card.Body>
                         </Col>
-                        <Col as={Card} style={{ minWidth: "10rem", marginRight: "1rem" }}>
+                        <Col as={Card} style={{ minWidth: "8rem" }}>
                             <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} />
                             <Card.Body className="px-0">
                                 <Card.Title>클로타탄원피스</Card.Title>
                                 <Card.Text>구매자 수: 30</Card.Text>
                             </Card.Body>
                         </Col>
-                        <Col as={Card} style={{ minWidth: "10rem", marginRight: "1rem" }}>
+                        <Col as={Card} style={{ minWidth: "8rem" }}>
                             <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} />
                             <Card.Body className="px-0">
                                 <Card.Title>클로타탄원피스</Card.Title>

client/src/Pages/ProductsList.js

@@ -168,12 +168,12 @@ function ProductsList({ match }) {
                     border-color: #CDC5C2;
                     border-radius: 0;
                 }
-                .btn:hover, .btn:focus {
+                .btn:hover {
                     background-color: #91877F;
                     border-color: #91877F;
                     box-shadow: 0 0 0 0;
                 }
-                .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
+                .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
                     background-color: #91877F;
                     border-color: #91877F;
                 }
@@ -194,20 +194,20 @@ function ProductsList({ match }) {
                     <div className="text-center">
                         <h1 style={{ fontSize: "5.5vmax" }} className="text-center m-1 py-3">{mainCategory}</h1>
                         <ButtonGroup className="mb-3" style={{ display: "inline" }}>
-                            {subCategory.map(el =>(<Button className="m-1" style={{ fontSize: "0.8vw" }} name={el} onClick={handleSubname}>{el}</Button>))}
+                            {subCategory.map(el =>(<Button className="m-1" style={{ fontSize: "1.2vw" }} name={el} onClick={handleSubname}>{el}</Button>))}
                         </ButtonGroup>
                     </div>
                 </Col>
             </Row>
             <Row className="justify-content-end mx-0 mt-5 mb-3">
                 <Form inline onSubmit={handleSearch} className="justify-content-end mx-0 my-2">
-                    <FormControl ref={searchref} type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
-                    <Button type="submit" className="px-2 mr-2">
+                    <FormControl ref={searchref} type="text" onChange={handleChange} placeholder="Search" style={{ width: "12rem" }} />
+                    <Button type="submit" className="px-2 m1-1">
                         <img src="/icon/search.svg" width="20" height="20" />
                     </Button>
                 </Form>
                 <Dropdown className="my-2">
-                    <Dropdown.Toggle className="mx-2">{sortingName}</Dropdown.Toggle>
+                    <Dropdown.Toggle className="mx-1">{sortingName}</Dropdown.Toggle>
                     <Dropdown.Menu>
                         <Dropdown.Item as="button" onClick={() => handleSort('purchase')}>인기상품</Dropdown.Item>
                         <Dropdown.Item as="button" onClick={() => handleSort('newest')}>신상품</Dropdown.Item>