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() {
{admin ?
''
: (
<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="/account"> Mypage </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) {
<Card.Header className="font-weight-bold mb-3 text-center" style={{ background: '#F7F3F3' }}>
{e.products[0].productId.pro_name}
</Card.Header>)}
<Card.Text>
<Col>
<Row className=''>
<Col sm={4} xs={4} className='p-1'>주문번호 :</Col>
<Col sm={8} xs={8} 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={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={4} xs={4} className='p-1'>주문날짜 :</Col>
<Col sm={8} xs={8} className='p-1'><strong>{e.createdAt.substring(0, 10)}</strong></Col>
<Card.Text >
<Col className='justify-content-center'>
<Row className='justify-content-center' >
<>
<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={3} xs={5} className='p-1'><li>결제금액 :</li></Col>
<Col sm={8} xs={6} 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.receiverInfo.address}</strong> <br />( {e.receiverInfo.address2} )</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>
</Col>
</Card.Text>
......
client/src/Components/Pagination.js
View file @ 49c8863b
......@@ -7,6 +7,14 @@ function Paginations({ index, totalPages, handlePage }) {
<Pagination className="d-flex justify-content-center">
<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 {
color: #91877F;
margin: 0;
......@@ -35,8 +43,8 @@ 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-3 && index < 3 ? <Pagination.Item onClick={()=>handlePage(index + 3)}>{index + 3}</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)} />}
<Pagination.Last onClick={() =>handlePage(totalPages)} />
......
client/src/Components/SubNav.js
View file @ 49c8863b
......@@ -28,6 +28,14 @@ function SubNav() {
<Navbar sticky="top" className="flex-nowrap" style={{ top: "56px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff" }}>
<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 {
color: #91877F;
}
......
client/src/Pages/Account.js
View file @ 49c8863b
......@@ -93,11 +93,24 @@ function Account() {
<Container className="px-3">
<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 {
color: #91877F;
text-decoration-color: #91877F;
}
`}
</style>
<h3 className="my-4 mx-3 font-weight-bold">My Page</h3>
<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() {
<Container>
<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 {
background-color: #CDC5C2;
border-color: #CDC5C2;
......@@ -85,6 +93,7 @@ function Admin() {
background-color: #91877F;
border-color: #91877F;
}
`}
</style>
<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() {
<Container>
<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 {
color: #000;
text-decoration: none;
}
`}
</style>
<div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2>
<Row className="justify-content-center mx-0">
{productlist.bestProduct.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>
))}
</Row>
</div>
<div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem", marginTop: "2rem" }}><u>New Arrival</u></h2>
<Row className="justify-content-center mx-0">
{productlist.newProduct.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>
))}
</Row>
</div>
<div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2>
<Row className="justify-content-center mx-0">
{productlist.bestProduct.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>
))}
</Row>
</div>
<div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem", marginTop: "2rem" }}><u>New Arrival</u></h2>
<Row className="justify-content-center mx-0">
{productlist.newProduct.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>
))}
</Row>
</div>
</Container>
)
}
......
client/src/Pages/Product.js
View file @ 49c8863b
......@@ -18,7 +18,7 @@ function Product({ match, location }) {
let history = useHistory();
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
useEffect(() => {
if (size && color) {
......@@ -144,6 +144,15 @@ function Product({ match, location }) {
<div>
<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 {
background-color: #CDC5C2;
border-color: #CDC5C2;
......@@ -153,6 +162,7 @@ function Product({ match, location }) {
background-color: #91877F;
border-color: #91877F;
}
`}
</style>
<Modal show={show} onHide={handleClose}>
......@@ -167,7 +177,7 @@ function Product({ match, location }) {
</Modal>
<Row className="justify-content-center mt-5 mx-0">
<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 sm={11} md={4} className="align-middle mt-4">
<h3 className="mb-4">{product.name}</h3>
......@@ -217,23 +227,23 @@ function Product({ match, location }) {
<h3 style={{ borderBottom: "1px solid #91877F", paddingBottom: "5px", marginBottom: "1em" }} className="p-3">
설명
</h3>
<Col className='text-center' style={{ fontSize: '1px' }}>
<div className='p-2 text-center border' style={{ background: '#CDC5C2', width: '50%', margin: 'auto', fontSize: '3.5vmin' }} >
<Col className='text-center'>
<div className='p-2 text-center border' style={{ background: '#CDC5C2', width: '60%', margin: 'auto', fontSize: '3.5vmin' }} >
{product.name}
</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.Header className='text-center' style={{ background: '#CDC5C2' }}>
<h5 className='m-0' style={{ whiteSpace: 'nowrap' }}> [ Description ]</h5>
</Card.Header>
<Card.Body className='text-center m-2' style={{ whiteSpace: "pre-line", background: '#F7F3F3', fontSize: '1vw' }}>
<small>{product.description}</small>
<Card.Body className='text-center m-2' style={{ whiteSpace: "pre-line", background: '#F7F3F3', fontSize: '1.2vw' }}>
{product.description}
</Card.Body>
</Card>
<Col className='p-5'>
<div className='border p-2' style={{ width: '60%', 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' />
<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%", height: 'auto', margin: 'auto' }} className='p-4 d-flex justify-content-center' />
</Col>
</Col>
......
client/src/Pages/ProductsList.js
View file @ 49c8863b
......@@ -159,6 +159,14 @@ function ProductsList({ match }) {
<Container>
<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 {
color: #000;
text-decoration: none;
......@@ -194,7 +202,7 @@ 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: "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>
</div>
</Col>
......
client/src/Pages/Signup.js
View file @ 49c8863b
......@@ -93,28 +93,30 @@ function Signup() {
<Form.Group as={Row} controlId="formBasicNumber">
<Form.Label column sm="4" for='number'>
주민등록번호 </Form.Label>
<Col sm="4" xs='5'>
<Form.Control
className='pr-0'
required type="text"
name="number1"
maxlength="6"
placeholder="생년월일"
value={user.number1}
onChange={handleChange} />
<Form.Control.Feedback type="invalid" >주민등록번호 입력하세요. </Form.Control.Feedback>
</Col>
<strong className='pt-2 d-flex align-items-flex-start'>-</strong>
<Col md="2" xs='3'>
<Form.Control
className='pr-0'
required type="text"
name="number2"
maxlength="1"
value={user.number2}
onChange={handleChange} />
</Col>
<strong className='pt-2 d-flex align-items-flex-start'>* * * * * *</strong>
<Row style={{ width: '300px'}} className='px-3'>
<Col sm="6" xs='5' className='pr-1'>
<Form.Control
className='pl-2 pr-0'
required type="text"
name="number1"
maxlength="6"
placeholder="생년월일"
value={user.number1}
onChange={handleChange} />
<Form.Control.Feedback type="invalid" >주민등록번호 입력하세요. </Form.Control.Feedback>
</Col>
<strong className='pt-2 d-flex align-items-flex-start'>-</strong>
<Col md="2" xs='3' className='px-2'>
<Form.Control
className='pl-2 pr-0'
required type="text"
name="number2"
maxlength="1"
value={user.number2}
onChange={handleChange} />
</Col>
<strong className='pt-2 d-flex align-items-flex-start'>* * * * * *</strong>
</Row>
</Form.Group>
<Form.Group as={Row} controlId="formBasicId">
<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