Skip to content

GitLab

Commit 49c8863b authored by 박상호's avatar 박상호 🎼
Browse files

css

parent ac80b5b0
Hide whitespace changes
Inline Side-by-side
client/src/Components/MainNav.js
View file @ 49c8863b
...@@ -19,10 +19,13 @@ function MainNav() { ...@@ -19,10 +19,13 @@ function MainNav() {
{admin ? {admin ?
'' ''
: ( : (
<Nav.Link className="text-light" href="/account"> Mypage </Nav.Link>, <>
<Nav.Link href="/shoppingcart"> <Nav.Link className="text-light" href="/account"> Mypage </Nav.Link>
<img alt="카트" src="/icon/cart.svg" width="30" height="30" />
</Nav.Link> <Nav.Link href="/shoppingcart">
<img alt="카트" src="/icon/cart.svg" width="30" height="30" />
</Nav.Link>
</>
)} )}
</> </>
: ( : (
......
client/src/Components/OrderCard.js
View file @ 49c8863b
...@@ -19,20 +19,21 @@ function OrderCard(props) { ...@@ -19,20 +19,21 @@ function OrderCard(props) {
<Card.Header className="font-weight-bold mb-3 text-center" style={{ background: '#F7F3F3' }}> <Card.Header className="font-weight-bold mb-3 text-center" style={{ background: '#F7F3F3' }}>
{e.products[0].productId.pro_name} {e.products[0].productId.pro_name}
</Card.Header>)} </Card.Header>)}
<Card.Text> <Card.Text >
<Col> <Col className='justify-content-center'>
<Row className=''> <Row className='justify-content-center' >
<Col sm={4} xs={4} className='p-1'>주문번호 :</Col> <>
<Col sm={8} xs={8} className='p-1'><strong>{e._id}</strong></Col> <Col sm={3} xs={5} className='p-1'><li>주문번호 :</li></Col>
<Col sm={8} xs={6} className='p-1'><strong>{e._id}</strong></Col>
<Col sm={4} xs={4} className='p-1'>결제금액 :</Col> </>
<Col sm={8} xs={8} className='p-1'><strong>{e.total}원</strong></Col> <Col sm={3} xs={5} className='p-1'><li>결제금액 :</li></Col>
<Col sm={8} xs={6} className='p-1'><strong>{e.total}원</strong></Col>
<Col sm={4} xs={4} className='p-1'>배송지 :</Col>
<Col sm={8} xs={8} className='p-1'><strong> {e.receiverInfo.address} / </strong><strong><small> {e.receiverInfo.address2}</small></strong></Col> <Col sm={3} xs={5} className='p-1'><li>배송지 :</li></Col>
<Col sm={8} xs={6} className='p-1'><strong> {e.receiverInfo.address}</strong> <br />( {e.receiverInfo.address2} )</Col>
<Col sm={4} xs={4} className='p-1'>주문날짜 :</Col>
<Col sm={8} xs={8} className='p-1'><strong>{e.createdAt.substring(0, 10)}</strong></Col> <Col sm={3} xs={5} className='p-1'><li>주문날짜 :</li></Col>
<Col sm={8} xs={6} className='p-1'><strong>{e.createdAt.substring(0, 10)}</strong></Col>
</Row> </Row>
</Col> </Col>
</Card.Text> </Card.Text>
......
client/src/Components/Pagination.js
View file @ 49c8863b
...@@ -7,6 +7,14 @@ function Paginations({ index, totalPages, handlePage }) { ...@@ -7,6 +7,14 @@ function Paginations({ index, totalPages, handlePage }) {
<Pagination className="d-flex justify-content-center"> <Pagination className="d-flex justify-content-center">
<style type="text/css"> <style type="text/css">
{` {`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
.page-link, .page-link:hover { .page-link, .page-link:hover {
color: #91877F; color: #91877F;
margin: 0; margin: 0;
...@@ -35,8 +43,8 @@ function Paginations({ index, totalPages, handlePage }) { ...@@ -35,8 +43,8 @@ function Paginations({ index, totalPages, handlePage }) {
{index === totalPages ? "" : <Pagination.Item onClick={()=>handlePage(index + 1)}>{index + 1}</Pagination.Item>} {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-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-3 && index < 3 ? <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-4 && index < 2 ? <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 ? <Pagination.Next onClick={()=>handlePage(index)} /> : <Pagination.Next onClick={()=>handlePage(index + 1)} />}
<Pagination.Last onClick={() =>handlePage(totalPages)} /> <Pagination.Last onClick={() =>handlePage(totalPages)} />
......
client/src/Components/SubNav.js
View file @ 49c8863b
...@@ -28,6 +28,14 @@ function SubNav() { ...@@ -28,6 +28,14 @@ function SubNav() {
<Navbar sticky="top" className="flex-nowrap" style={{ top: "56px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff" }}> <Navbar sticky="top" className="flex-nowrap" style={{ top: "56px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff" }}>
<style type="text/css"> <style type="text/css">
{` {`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
.nav-link, .nav-link:hover, .nav-link:active { .nav-link, .nav-link:hover, .nav-link:active {
color: #91877F; color: #91877F;
} }
......
client/src/Pages/Account.js
View file @ 49c8863b
...@@ -93,11 +93,24 @@ function Account() { ...@@ -93,11 +93,24 @@ function Account() {
<Container className="px-3"> <Container className="px-3">
<style type="text/css"> <style type="text/css">
{` {`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
a, a:hover, a:active { a, a:hover, a:active {
color: #91877F; color: #91877F;
text-decoration-color: #91877F; text-decoration-color: #91877F;
} }
`} `}
</style> </style>
<h3 className="my-4 mx-3 font-weight-bold">My Page</h3> <h3 className="my-4 mx-3 font-weight-bold">My Page</h3>
<Card md={3} className="p-1 mb-4" style={{ background: '#F7F3F3' }}> <Card md={3} className="p-1 mb-4" style={{ background: '#F7F3F3' }}>
......
client/src/Pages/Admin.js
View file @ 49c8863b
...@@ -68,6 +68,14 @@ function Admin() { ...@@ -68,6 +68,14 @@ function Admin() {
<Container> <Container>
<style type="text/css"> <style type="text/css">
{` {`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
.btn { .btn {
background-color: #CDC5C2; background-color: #CDC5C2;
border-color: #CDC5C2; border-color: #CDC5C2;
...@@ -85,6 +93,7 @@ function Admin() { ...@@ -85,6 +93,7 @@ function Admin() {
background-color: #91877F; background-color: #91877F;
border-color: #91877F; border-color: #91877F;
} }
`} `}
</style> </style>
<Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5"> <Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5">
......
client/src/Pages/Home.js
View file @ 49c8863b
...@@ -31,55 +31,66 @@ function Home() { ...@@ -31,55 +31,66 @@ function Home() {
<Container> <Container>
<style type="text/css"> <style type="text/css">
{` {`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
a, a:hover, a:active { a, a:hover, a:active {
color: #000; color: #000;
text-decoration: none; text-decoration: none;
}
`} `}
</style> </style>
<div className="my-4"> <div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2> <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2>
<Row className="justify-content-center mx-0"> <Row className="justify-content-center mx-0">
{productlist.bestProduct.map(pro => ( {productlist.bestProduct.map(pro => (
<Link to={{ <Link to={{
pathname: `/product/${pro._id}`, pathname: `/product/${pro._id}`,
state: { state: {
id: pro._id, id: pro._id,
name: pro.pro_name, name: pro.pro_name,
price: pro.price, price: pro.price,
colors: pro.colors, colors: pro.colors,
sizes: pro.sizes, sizes: pro.sizes,
description: pro.description, description: pro.description,
main_img: pro.main_imgUrl, main_img: pro.main_imgUrl,
detail_imgs: pro.detail_imgUrls detail_imgs: pro.detail_imgUrls
} }
}}> }}>
<ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} /> <ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
</Link> </Link>
))} ))}
</Row> </Row>
</div> </div>
<div className="my-4"> <div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem", marginTop: "2rem" }}><u>New Arrival</u></h2> <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem", marginTop: "2rem" }}><u>New Arrival</u></h2>
<Row className="justify-content-center mx-0"> <Row className="justify-content-center mx-0">
{productlist.newProduct.map(pro => ( {productlist.newProduct.map(pro => (
<Link to={{ <Link to={{
pathname: `/product/${pro._id}`, pathname: `/product/${pro._id}`,
state: { state: {
id: pro._id, id: pro._id,
name: pro.pro_name, name: pro.pro_name,
price: pro.price, price: pro.price,
colors: pro.colors, colors: pro.colors,
sizes: pro.sizes, sizes: pro.sizes,
description: pro.description, description: pro.description,
main_img: pro.main_imgUrl, main_img: pro.main_imgUrl,
detail_imgs: pro.detail_imgUrls detail_imgs: pro.detail_imgUrls
} }
}}> }}>
<ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} /> <ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
</Link> </Link>
))} ))}
</Row> </Row>
</div> </div>
</Container> </Container>
) )
} }
......
client/src/Pages/Product.js
View file @ 49c8863b
...@@ -18,7 +18,7 @@ function Product({ match, location }) { ...@@ -18,7 +18,7 @@ function Product({ match, location }) {
let history = useHistory(); let history = useHistory();
const handleClose = () => setShow(false); const handleClose = () => setShow(false);
const handleShow = () => setShow(true); const handleShow = () => setShow(true);
useEffect(() => { useEffect(() => {
if (size && color) { if (size && color) {
...@@ -144,6 +144,15 @@ function Product({ match, location }) { ...@@ -144,6 +144,15 @@ function Product({ match, location }) {
<div> <div>
<style type="text/css"> <style type="text/css">
{` {`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
.btn { .btn {
background-color: #CDC5C2; background-color: #CDC5C2;
border-color: #CDC5C2; border-color: #CDC5C2;
...@@ -153,6 +162,7 @@ function Product({ match, location }) { ...@@ -153,6 +162,7 @@ function Product({ match, location }) {
background-color: #91877F; background-color: #91877F;
border-color: #91877F; border-color: #91877F;
} }
`} `}
</style> </style>
<Modal show={show} onHide={handleClose}> <Modal show={show} onHide={handleClose}>
...@@ -167,7 +177,7 @@ function Product({ match, location }) { ...@@ -167,7 +177,7 @@ function Product({ match, location }) {
</Modal> </Modal>
<Row className="justify-content-center mt-5 mx-0"> <Row className="justify-content-center mt-5 mx-0">
<Col sm={11} md={4}> <Col sm={11} md={4}>
<img src={`/images/${product.main_img}`} style={{ objectFit: "contain", width: "100%" }} /> <img src={`/images/${product.main_img}`} style={{ objectFit: "contain", maxWidth: "100%", height: 'auto' }} />
</Col> </Col>
<Col sm={11} md={4} className="align-middle mt-4"> <Col sm={11} md={4} className="align-middle mt-4">
<h3 className="mb-4">{product.name}</h3> <h3 className="mb-4">{product.name}</h3>
...@@ -217,23 +227,23 @@ function Product({ match, location }) { ...@@ -217,23 +227,23 @@ function Product({ match, location }) {
<h3 style={{ borderBottom: "1px solid #91877F", paddingBottom: "5px", marginBottom: "1em" }} className="p-3"> <h3 style={{ borderBottom: "1px solid #91877F", paddingBottom: "5px", marginBottom: "1em" }} className="p-3">
설명 설명
</h3> </h3>
<Col className='text-center' style={{ fontSize: '1px' }}> <Col className='text-center'>
<div className='p-2 text-center border' style={{ background: '#CDC5C2', width: '50%', margin: 'auto', fontSize: '3.5vmin' }} > <div className='p-2 text-center border' style={{ background: '#CDC5C2', width: '60%', margin: 'auto', fontSize: '3.5vmin' }} >
{product.name} {product.name}
</div> </div>
<Image src={`/images/${product.main_img}`} className='d-flex justify-content-center p-4' style={{ objectFit: "contain", maxWidth: "100%", margin: 'auto' }} /> <Image src={`/images/${product.main_img}`} className='d-flex justify-content-center p-4' style={{ objectFit: "contain", maxWidth: "100%", height: 'auto', margin: 'auto' }} />
<Card style={{ width: '80%', margin: 'auto' }} className='my-4' > <Card style={{ width: '80%', margin: 'auto' }} className='my-4' >
<Card.Header className='text-center' style={{ background: '#CDC5C2' }}> <Card.Header className='text-center' style={{ background: '#CDC5C2' }}>
<h5 className='m-0' style={{ whiteSpace: 'nowrap' }}> [ Description ]</h5> <h5 className='m-0' style={{ whiteSpace: 'nowrap' }}> [ Description ]</h5>
</Card.Header> </Card.Header>
<Card.Body className='text-center m-2' style={{ whiteSpace: "pre-line", background: '#F7F3F3', fontSize: '1vw' }}> <Card.Body className='text-center m-2' style={{ whiteSpace: "pre-line", background: '#F7F3F3', fontSize: '1.2vw' }}>
<small>{product.description}</small> {product.description}
</Card.Body> </Card.Body>
</Card> </Card>
<Col className='p-5'> <Col className='p-5'>
<div className='border p-2' style={{ width: '60%', margin: 'auto', fontSize: '3.5vmin' }}>[ Detail Images ]</div> <div className='border p-2' style={{ maxWidth: "100%", height: 'auto', margin: 'auto', fontSize: '3.5vmin' }}>[ Detail Images ]</div>
<Image src={`/images/${product.detail_imgs}`} style={{ objectFit: "contain", maxWidth: "100%", margin: 'auto' }} className='p-4 d-flex justify-content-center' /> <Image src={`/images/${product.detail_imgs}`} style={{ objectFit: "contain", maxWidth: "100%", height: 'auto', margin: 'auto' }} className='p-4 d-flex justify-content-center' />
</Col> </Col>
</Col> </Col>
......
client/src/Pages/ProductsList.js
View file @ 49c8863b
...@@ -159,6 +159,14 @@ function ProductsList({ match }) { ...@@ -159,6 +159,14 @@ function ProductsList({ match }) {
<Container> <Container>
<style type="text/css"> <style type="text/css">
{` {`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
a, a:hover, a:active { a, a:hover, a:active {
color: #000; color: #000;
text-decoration: none; text-decoration: none;
...@@ -194,7 +202,7 @@ function ProductsList({ match }) { ...@@ -194,7 +202,7 @@ function ProductsList({ match }) {
<div className="text-center"> <div className="text-center">
<h1 style={{ fontSize: "5.5vmax" }} className="text-center m-1 py-3">{mainCategory}</h1> <h1 style={{ fontSize: "5.5vmax" }} className="text-center m-1 py-3">{mainCategory}</h1>
<ButtonGroup className="mb-3" style={{ display: "inline" }}> <ButtonGroup className="mb-3" style={{ display: "inline" }}>
{subCategory.map(el =>(<Button className="m-1" style={{ fontSize: "1.2vw" }} name={el} onClick={handleSubname}>{el}</Button>))} {subCategory.map(el => (<Button className="m-1" style={{ fontSize: "1.5vw" }} name={el} onClick={handleSubname}>{el}</Button>))}
</ButtonGroup> </ButtonGroup>
</div> </div>
</Col> </Col>
......
client/src/Pages/Signup.js
View file @ 49c8863b
...@@ -93,28 +93,30 @@ function Signup() { ...@@ -93,28 +93,30 @@ function Signup() {
<Form.Group as={Row} controlId="formBasicNumber"> <Form.Group as={Row} controlId="formBasicNumber">
<Form.Label column sm="4" for='number'> <Form.Label column sm="4" for='number'>
주민등록번호 </Form.Label> 주민등록번호 </Form.Label>
<Col sm="4" xs='5'> <Row style={{ width: '300px'}} className='px-3'>
<Form.Control <Col sm="6" xs='5' className='pr-1'>
className='pr-0' <Form.Control
required type="text" className='pl-2 pr-0'
name="number1" required type="text"
maxlength="6" name="number1"
placeholder="생년월일" maxlength="6"
value={user.number1} placeholder="생년월일"
onChange={handleChange} /> value={user.number1}
<Form.Control.Feedback type="invalid" >주민등록번호 입력하세요. </Form.Control.Feedback> onChange={handleChange} />
</Col> <Form.Control.Feedback type="invalid" >주민등록번호 입력하세요. </Form.Control.Feedback>
<strong className='pt-2 d-flex align-items-flex-start'>-</strong> </Col>
<Col md="2" xs='3'> <strong className='pt-2 d-flex align-items-flex-start'>-</strong>
<Form.Control <Col md="2" xs='3' className='px-2'>
className='pr-0' <Form.Control
required type="text" className='pl-2 pr-0'
name="number2" required type="text"
maxlength="1" name="number2"
value={user.number2} maxlength="1"
onChange={handleChange} /> value={user.number2}
</Col> onChange={handleChange} />
<strong className='pt-2 d-flex align-items-flex-start'>* * * * * *</strong> </Col>
<strong className='pt-2 d-flex align-items-flex-start'>* * * * * *</strong>
</Row>
</Form.Group> </Form.Group>
<Form.Group as={Row} controlId="formBasicId"> <Form.Group as={Row} controlId="formBasicId">
<Form.Label column sm="4" for='id'> <Form.Label column sm="4" for='id'>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment