Skip to content

GitLab

Commit 0ea2e9c4 authored by kusang96's avatar kusang96
Browse files

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

parents 410cd60f 48925ca0
Hide whitespace changes
Inline Side-by-side
client/src/Pages/Product.js
View file @ 0ea2e9c4
...@@ -18,9 +18,7 @@ function Product({ match, location }) { ...@@ -18,9 +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);
const replace = product.description.replaceAll('\n', '<br />') const replace = product.description.replaceAll('{\n\n}', '<br />')
console.log("objectasdasd", replace)
useEffect(() => { useEffect(() => {
if (size && color) { if (size && color) {
...@@ -144,17 +142,6 @@ function Product({ match, location }) { ...@@ -144,17 +142,6 @@ function Product({ match, location }) {
return ( return (
<div> <div>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>장바구니에 상품담기</Modal.Title>
</Modal.Header>
<Modal.Body>정상적으로 장바구니에 상품을 담았습니다.</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>쇼핑계속하기</Button>
<Button variant="primary" href='/shoppingcart'>장바구니로 이동</Button>
</Modal.Footer>
</Modal>
{/* {console.log(cart)} */}
<style type="text/css"> <style type="text/css">
{` {`
.btn { .btn {
...@@ -168,6 +155,16 @@ function Product({ match, location }) { ...@@ -168,6 +155,16 @@ function Product({ match, location }) {
} }
`} `}
</style> </style>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>장바구니에 상품담기</Modal.Title>
</Modal.Header>
<Modal.Body>정상적으로 장바구니에 상품을 담았습니다.</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>쇼핑계속하기</Button>
<Button variant="primary" href='/shoppingcart'>장바구니로 이동</Button>
</Modal.Footer>
</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", width: "100%" }} />
...@@ -220,20 +217,25 @@ function Product({ match, location }) { ...@@ -220,20 +217,25 @@ 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='justify-content-center '> <Col className='text-center' style={{ fontSize: '1px' }}>
<h2 className='p-2 text-center border' style={{ background: '#CDC5C2' }}>{product.name} </h2> <div className='p-2 text-center border' style={{ background: '#CDC5C2', width: '50%', margin: 'auto', fontSize: '3.5vmin' }} >
<> {product.name}
<Image src={`/images/${product.main_img}`} style={{ objectFit: "contain", maxWidth: "100%" }} /> </div>
</> <Image src={`/images/${product.main_img}`} className='d-flex justify-content-center p-4' style={{ objectFit: "contain", maxWidth: "100%", margin: 'auto' }} />
<Card className='m-3 d-flex justify-content-center'>
<Card.Body className='text-center'> <Card style={{ width: '70%', margin: 'auto' }} className='my-4' >
{replace} <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-4' style={{ whiteSpace: "pre-line", background: '#F7F3F3', fontSize: '1vw' }}>
<small>{replace}</small>
</Card.Body> </Card.Body>
</Card> </Card>
<> <Col className='p-5'>
<h4 className='my-4 text-center'>[ Detail Images ]</h4> <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%" }} /> <Image src={`/images/${product.detail_imgs}`} style={{ objectFit: "contain", maxWidth: "100%", margin: 'auto' }} className='p-4 d-flex justify-content-center' />
</>
</Col>
</Col> </Col>
</Col> </Col>
</Row> </Row>
......
client/src/Pages/ProductsList.js
View file @ 0ea2e9c4
...@@ -8,6 +8,7 @@ import { Container, Row, Col, Form, FormControl, Button, Dropdown, ButtonGroup, ...@@ -8,6 +8,7 @@ import { Container, Row, Col, Form, FormControl, Button, Dropdown, ButtonGroup,
function ProductsList({ match }) { function ProductsList({ match }) {
const [search, setSearch] = useState({ word: '' }) const [search, setSearch] = useState({ word: '' })
const [sortingName, setSortingName] = useState('정렬')
const [mainCategory, setMainCategory] = useState(match.params.main.toUpperCase()) const [mainCategory, setMainCategory] = useState(match.params.main.toUpperCase())
const [subCategory, setSubCategory] = useState([]) const [subCategory, setSubCategory] = useState([])
const [productlist, setProductlist] = useState([]) const [productlist, setProductlist] = useState([])
...@@ -18,8 +19,6 @@ function ProductsList({ match }) { ...@@ -18,8 +19,6 @@ function ProductsList({ match }) {
const indexOfFirst = indexOfLast - postsPerPage; const indexOfFirst = indexOfLast - postsPerPage;
const searchref = useRef(null) const searchref = useRef(null)
const [sortingName, setSortingName] = useState('정렬')
function currentPosts(tmp) { function currentPosts(tmp) {
let currentPosts = 0; let currentPosts = 0;
currentPosts = tmp.slice(indexOfFirst, indexOfLast); currentPosts = tmp.slice(indexOfFirst, indexOfLast);
...@@ -81,55 +80,55 @@ function ProductsList({ match }) { ...@@ -81,55 +80,55 @@ function ProductsList({ match }) {
console.log("thisispurchase") console.log("thisispurchase")
productlist.sort(function (a, b) { productlist.sort(function (a, b) {
if (a.purchase > b.purchase) { if (a.purchase > b.purchase) {
return -1; return -1;
} }
if (a.purchase < b.purchase) { if (a.purchase < b.purchase) {
return 1; return 1;
} }
// a must be equal to b // a must be equal to b
return 0; return 0;
}); });
setSortingName("인기상품") setSortingName("인기상품")
} else if(method === "newest"){ } else if (method === "newest") {
console.log("thisisnewest") console.log("thisisnewest")
productlist.sort(function (a, b) { productlist.sort(function (a, b) {
if (a.createdAt > b.createdAt) { if (a.createdAt > b.createdAt) {
return -1; return -1;
} }
if (a.createdAt < b.createdAt) { if (a.createdAt < b.createdAt) {
return 1; return 1;
} }
// a must be equal to b // a must be equal to b
return 0; return 0;
}); });
setSortingName("신상품") setSortingName("신상품")
} else if(method === "lowest"){ } else if (method === "lowest") {
console.log("thisislowest") console.log("thisislowest")
productlist.sort(function (a, b) { productlist.sort(function (a, b) {
if (a.price > b.price) { if (a.price > b.price) {
return 1; return 1;
} }
if (a.price < b.price) { if (a.price < b.price) {
return -1; return -1;
} }
// a must be equal to b // a must be equal to b
return 0; return 0;
}); });
setSortingName("낮은가격") setSortingName("낮은가격")
} else { } else {
console.log("thisispurchase") console.log("thisispurchase")
productlist.sort(function (a, b) { productlist.sort(function (a, b) {
if (a.price > b.price) { if (a.price > b.price) {
return -1; return -1;
} }
if (a.price < b.price) { if (a.price < b.price) {
return 1; return 1;
} }
// a must be equal to b // a must be equal to b
return 0; return 0;
}); });
setSortingName("높은가격") setSortingName("높은가격")
} }
} }
...@@ -154,7 +153,6 @@ function ProductsList({ match }) { ...@@ -154,7 +153,6 @@ function ProductsList({ match }) {
return ( return (
<Container> <Container>
{console.log(productlist)}
<style type="text/css"> <style type="text/css">
{` {`
a, a:hover, a:active { a, a:hover, a:active {
...@@ -175,25 +173,20 @@ function ProductsList({ match }) { ...@@ -175,25 +173,20 @@ function ProductsList({ match }) {
} }
`} `}
</style> </style>
<Row className="justify-content-center"> <Row className="justify-content-center" >
<Col sm={10} xs={12} > <Col className='px-3'>
<h1 style={{ fontSize: "3rem" }} className="text-center">{mainCategory}</h1>
<div className="text-center"> <div className="text-center">
<ButtonGroup className="m-3" variant="outline-light secondary" style={{ display: "inline-block" }}> <h1 style={{ fontSize: "5.5vmax" }} className="text-center m-1 py-3">{mainCategory}</h1>
{subCategory.map(el => (<Button className="m-1" variant="secondary" name={el} onClick={handleSubname}>{el}</Button>))} <ButtonGroup className="mb-3" style={{ display: "inline" }}>
{subCategory.map(el =>
(<Button className="m-1" style={{ fontSize: "0.8vw" }} name={el} onClick={handleSubname}>{el}</Button>))}
</ButtonGroup> </ButtonGroup>
</div> </div>
</Col> </Col>
</Row> </Row>
<Row className="justify-content-end mx-0 mt-5 mb-3"> <Row className="justify-content-end mx-0 mt-5 mb-3">
<Form inline onSubmit={handleSearch} className="justify-content-end mx-0 my-2"> <Dropdown>
<FormControl ref={searchref} type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} /> <Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle>
<Button type="submit" className="px-2 mr-2">
<img src="/icon/search.svg" width="20" height="20" />
</Button>
</Form>
<Dropdown className="my-2">
<Dropdown.Toggle className="mx-2">{sortingName}</Dropdown.Toggle>
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item as="button" onClick={() => handleSort('purchase')}>인기상품</Dropdown.Item> <Dropdown.Item as="button" onClick={() => handleSort('purchase')}>인기상품</Dropdown.Item>
<Dropdown.Item as="button" onClick={() => handleSort('newest')}>신상품</Dropdown.Item> <Dropdown.Item as="button" onClick={() => handleSort('newest')}>신상품</Dropdown.Item>
...@@ -201,6 +194,12 @@ function ProductsList({ match }) { ...@@ -201,6 +194,12 @@ function ProductsList({ match }) {
<Dropdown.Item as="button" onClick={() => handleSort('highest')}>높은가격</Dropdown.Item> <Dropdown.Item as="button" onClick={() => handleSort('highest')}>높은가격</Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
<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">
<img src="/icon/search.svg" width="20" height="20" />
</Button>
</Form>
</Row> </Row>
<Row md={8} sm={12} className="justify-content-center m-2"> <Row md={8} sm={12} className="justify-content-center m-2">
{productlist.length > 0 ? {productlist.length > 0 ?
...@@ -223,8 +222,8 @@ function ProductsList({ match }) { ...@@ -223,8 +222,8 @@ function ProductsList({ match }) {
</Link> </Link>
)) ))
: ( : (
<Image src="/sryimready.jpg" <Image src="/sryimready.jpg" className='m-5'
style={{ objectFit: "cover", width: "45 rem", height: "45 rem" }}></Image> style={{ objectFit: "contain", width: "45vw", height: "45vh" }}></Image>
) )
} }
</Row> </Row>
......
client/src/Pages/Signup.js
View file @ 0ea2e9c4
...@@ -33,12 +33,10 @@ function Signup() { ...@@ -33,12 +33,10 @@ function Signup() {
event.stopPropagation(); event.stopPropagation();
} }
setValidated(true); setValidated(true);
console.log(user)
try { try {
setError('') setError('')
const response = await axios.post('/api/users/signup', user) const response = await axios.post('/api/users/signup', user)
console.log(response.data)
setSuccess(true) setSuccess(true)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
...@@ -66,155 +64,135 @@ function Signup() { ...@@ -66,155 +64,135 @@ function Signup() {
} }
return ( return (
<div> <Container className="my-5">
<Container className="my-5"> <Row className="justify-content-center">
<Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}>
<h2 className="text-center pt-3 m-4">Sign Up</h2>
{error && <Alert variant='danger'>
{error}
</Alert>}
<Form
noValidate validated={validated}
onSubmit={handleSubmit}
className="p-4">
<Row className="justify-content-center"> <Form.Group as={Row} controlId="formBasicName">
<Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}> <Form.Label column sm="4" for='name'>
<h2 className="text-center m-5">Sign Up</h2> 이 름 </Form.Label>
{error && <Alert variant='danger'> <Col sm="8">
{error} <Form.Control
</Alert>} required type="text"
<Form name="name"
noValidate validated={validated} placeholder="Name"
onSubmit={handleSubmit} value={user.name}
className="p-4"> onChange={handleChange} />
<Form.Group as={Col} controlId="formBasicName" className="justify-content-end"> <Form.Control.Feedback type="invalid" >이름을 입력하세요. </Form.Control.Feedback>
<Form.Row> </Col>
<Col sm={4} xs={6} as={Form.Label} for="id">이 름</Col> </Form.Group>
<Col sm={8} xs={6} as={Form.Control}
required type="text"
name="name"
placeholder="Name"
style={{ width: '160px' }}
value={user.name}
onChange={handleChange} />
<Form.Control.Feedback type="invalid" >이름을 입력하세요. </Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Form.Group as={Col} controlId="formBasicNumber">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="number">주민등록번호</Col>
<Col xs={3}>
<Form.Control
required type="text"
name="number1"
maxlength="6"
className="ml-1 mr-3 p-1" style={{ width: '80px' }}
value={user.number1}
onChange={handleChange}>
</Form.Control>
</Col>
<Col xs={1}>
<div className='font-weight-bold d-flex align-items-center' style={{ text: 'center' }}>-</div>
</Col>
<Col xs={2}>
<Form.Control
required type="text"
name="number2"
maxlength="1" className="mx-3 p-1"
style={{ width: '30px' }}
value={user.number2}
onChange={handleChange}>
</Form.Control>
</Col>
<div className='font-weight-bold d-flex align-items-center'>* * * * * * </div>
<Form.Control.Feedback type="invalid">주민등록번호를 입력하세요.</Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Form.Group as={Col} controlId="formBasicId">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="id">아이디</Col>
<Col sm={8} xs={12} as={Form.Control}
required
type="text"
name="id"
placeholder="ID"
style={{ width: '160px' }}
value={user.id}
onChange={handleChange} />
<Form.Control.Feedback type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Form.Group as={Col} controlId="formBasicPassword">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="password">비밀번호</Col>
<Col sm={8} xs={12} as={Form.Control}
type="password"
name="password"
placeholder="Password"
style={{ width: '160px' }}
value={user.password}
required
onChange={handleChange}
/>
<Form.Control.Feedback className="text-end" type="invalid">
비밀번호를 입력하세요.
</Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Form.Group as={Col} controlId="formBasicPassword2">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="password">비밀번호 확인</Col>
<Col sm={8} xs={12} as={Form.Control}
type="password"
name="password2"
placeholder="Password"
style={{ width: '160px' }}
value={user.password2}
required
onChange={handleChange}
/>
<Form.Control.Feedback type="invalid"> 비밀번호를 한번 더 입력하세요.
</Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Form.Group as={Col} controlId="formBasicEmail">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="email">이메일</Col>
<Col sm={8} xs={12} as={Form.Control}
required type="email"
name="email"
placeholder="E-mail"
style={{ width: '160px' }}
value={user.email}
onChange={handleChange} />
<Form.Control.Feedback type="invalid"> 이메일 입력하세요. </Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Form.Group as={Col} controlId="formBasicTel">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="tel">휴대전화</Col>
<Col sm={8} xs={12} style={{ width: '160px' }} className='p-0'>
<Col
as={Form.Control}
required type="text"
name="tel"
placeholder="Telephone"
className='p-1'
value={user.tel}
onChange={handleChange}>
</Col> <Form.Group as={Row} controlId="formBasicNumber">
<div className='d-flex justify-content-end mt-1'><small >' - ' 를 함께 입력해주세요^^</small></div> <Form.Label column sm="4" for='number'>
</Col> 주민등록번호 </Form.Label>
<Form.Control.Feedback type="invalid"> 휴대전화를 입력하세요. </Form.Control.Feedback> <Col sm="4" xs='5'>
</Form.Row> <Form.Control
<Form.Control.Feedback className="text-end" type="invalid"> className='pr-0'
비밀번호를 입력하세요. required type="text"
</Form.Control.Feedback> name="number1"
</Form.Group > maxlength="6"
<Button placeholder="생년월일"
style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block value={user.number1}
onClick={checkPassword} onChange={handleChange} />
> <Form.Control.Feedback type="invalid" >주민등록번호 입력하세요. </Form.Control.Feedback>
Sign Up </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>
</Form.Group>
<Form.Group as={Row} controlId="formBasicId">
<Form.Label column sm="4" for='id'>
아이디 </Form.Label>
<Col sm="8">
<Form.Control
required type="text"
name="id"
placeholder="ID"
value={user.id}
onChange={handleChange} />
<Form.Control.Feedback type="invalid" >아이디를 입력하세요. </Form.Control.Feedback>
</Col>
</Form.Group>
<Form.Group as={Row} controlId="formBasicPassword">
<Form.Label column sm="4" for='password'>
비밀번호 </Form.Label>
<Col sm="8">
<Form.Control
type="password"
name="password"
placeholder="Password"
value={user.password}
required
onChange={handleChange} />
<Form.Control.Feedback type="invalid" >비밀번호를 입력하세요. </Form.Control.Feedback>
</Col>
</Form.Group>
<Form.Group as={Row} controlId="formBasicPassword2">
<Form.Label column sm="4" for='password'>
비밀번호 확인 </Form.Label>
<Col sm="8">
<Form.Control
type="password"
name="password2"
placeholder="Password"
value={user.password2}
required
onChange={handleChange} />
<Form.Control.Feedback type="invalid" >비밀번호를 한번 더 입력하세요.</Form.Control.Feedback>
</Col>
</Form.Group>
<Form.Group as={Row} controlId="formBasicEmail">
<Form.Label column sm="4" for='email'>
이메일 </Form.Label>
<Col sm="8">
<Form.Control
required type="email"
name="email"
placeholder="E-mail"
value={user.email}
onChange={handleChange} />
<Form.Control.Feedback type="invalid" >이메일을 입력하세요.</Form.Control.Feedback>
</Col>
</Form.Group>
<Form.Group as={Row} controlId="formBasicTel">
<Form.Label column sm="4" for='tel'>
휴대전화 </Form.Label>
<Col sm="8">
<Form.Control
required type="text"
name="tel"
placeholder="Telephone"
value={user.tel}
onChange={handleChange} />
<Form.Control.Feedback type="invalid" >휴대전화를 입력하세요.</Form.Control.Feedback>
<Row className='text-end pl-3 mt-1'><small >' - ' 를 함께 입력해주세요^^</small></Row>
</Col>
</Form.Group>
<Button
style={{ background: '#91877F', borderColor: '#91877F', margin: 'auto' }} type="submit" block
onClick={checkPassword} >
Sign Up
</Button> </Button>
</Form> </Form>
</Col> </Col>
</Row> </Row>
</Container> </Container>
</div >
) )
} }
......
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