모바일 추천상품 해결

client/src/Components/ListCard.js

@@ -15,9 +15,9 @@ function ListCard(props) {
         )
     } else if (props.status === 'recommend') {
         return (
-            <Card id={props.id} className="mx-1" style={{ width: "10rem" }}>
+            <Card id={props.id} className="mx-2" style={{ width: "10rem" }}>
                 <Card.Img variant="top" src={props.main_img && `/images/${props.main_img}`} style={{ objectFit: "contain" }} />
-                <Card.Body className="px-0">
+                <Card.Body className="px-2">
                     <Card.Title style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{props.name}</Card.Title>
                     <Card.Text>{props.price} 원</Card.Text>
                 </Card.Body>

client/src/Pages/Product.js

@@ -274,7 +274,7 @@ 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-center mx-0" style={{ flexWrap: "nowrap", width: "100%", overflowX: "auto" }}>
+                    <Row className="justify-content-lg-center mx-auto" style={{ flexWrap: "nowrap", width: "100%", overflowX: "auto" }}>
                         {productList.map(pro => (
                             <Link to={{
                                 pathname: `/product/${pro._id}`,