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 }) {
let history = useHistory();
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const replace = product.description.replaceAll('\n', '<br />')
console.log("objectasdasd", replace)
const replace = product.description.replaceAll('{\n\n}', '<br />')
useEffect(() => {
if (size && color) {
......@@ -144,17 +142,6 @@ function Product({ match, location }) {
return (
<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">
{`
.btn {
......@@ -168,6 +155,16 @@ function Product({ match, location }) {
}
`}
</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">
<Col sm={11} md={4}>
<img src={`/images/${product.main_img}`} style={{ objectFit: "contain", width: "100%" }} />
......@@ -220,20 +217,25 @@ function Product({ match, location }) {
<h3 style={{ borderBottom: "1px solid #91877F", paddingBottom: "5px", marginBottom: "1em" }} className="p-3">
설명
</h3>
<Col className='justify-content-center '>
<h2 className='p-2 text-center border' style={{ background: '#CDC5C2' }}>{product.name} </h2>
<>
<Image src={`/images/${product.main_img}`} style={{ objectFit: "contain", maxWidth: "100%" }} />
</>
<Card className='m-3 d-flex justify-content-center'>
<Card.Body className='text-center'>
{replace}
<Col className='text-center' style={{ fontSize: '1px' }}>
<div className='p-2 text-center border' style={{ background: '#CDC5C2', width: '50%', 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' }} />
<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>
</Card.Header>
<Card.Body className='text-center m-4' style={{ whiteSpace: "pre-line", background: '#F7F3F3', fontSize: '1vw' }}>
<small>{replace}</small>
</Card.Body>
</Card>
<>
<h4 className='my-4 text-center'>[ Detail Images ]</h4>
<Image src={`/images/${product.detail_imgs}`} style={{ objectFit: "contain", maxWidth: "100%" }} />
</>
<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' />
</Col>
</Col>
</Col>
</Row>
......
client/src/Pages/ProductsList.js
View file @ 0ea2e9c4
......@@ -8,6 +8,7 @@ import { Container, Row, Col, Form, FormControl, Button, Dropdown, ButtonGroup,
function ProductsList({ match }) {
const [search, setSearch] = useState({ word: '' })
const [sortingName, setSortingName] = useState('정렬')
const [mainCategory, setMainCategory] = useState(match.params.main.toUpperCase())
const [subCategory, setSubCategory] = useState([])
const [productlist, setProductlist] = useState([])
......@@ -18,8 +19,6 @@ function ProductsList({ match }) {
const indexOfFirst = indexOfLast - postsPerPage;
const searchref = useRef(null)
const [sortingName, setSortingName] = useState('정렬')
function currentPosts(tmp) {
let currentPosts = 0;
currentPosts = tmp.slice(indexOfFirst, indexOfLast);
......@@ -81,55 +80,55 @@ function ProductsList({ match }) {
console.log("thisispurchase")
productlist.sort(function (a, b) {
if (a.purchase > b.purchase) {
return -1;
return -1;
}
if (a.purchase < b.purchase) {
return 1;
return 1;
}
// a must be equal to b
return 0;
});
setSortingName("인기상품")
} else if(method === "newest"){
});
setSortingName("인기상품")
} else if (method === "newest") {
console.log("thisisnewest")
productlist.sort(function (a, b) {
if (a.createdAt > b.createdAt) {
return -1;
return -1;
}
if (a.createdAt < b.createdAt) {
return 1;
return 1;
}
// a must be equal to b
return 0;
});
setSortingName("신상품")
});
setSortingName("신상품")
} else if(method === "lowest"){
} else if (method === "lowest") {
console.log("thisislowest")
productlist.sort(function (a, b) {
if (a.price > b.price) {
return 1;
return 1;
}
if (a.price < b.price) {
return -1;
return -1;
}
// a must be equal to b
return 0;
});
setSortingName("낮은가격")
});
setSortingName("낮은가격")
} else {
console.log("thisispurchase")
productlist.sort(function (a, b) {
if (a.price > b.price) {
return -1;
return -1;
}
if (a.price < b.price) {
return 1;
return 1;
}
// a must be equal to b
return 0;
});
setSortingName("높은가격")
});
setSortingName("높은가격")
}
}
......@@ -154,7 +153,6 @@ function ProductsList({ match }) {
return (
<Container>
{console.log(productlist)}
<style type="text/css">
{`
a, a:hover, a:active {
......@@ -175,25 +173,20 @@ function ProductsList({ match }) {
}
`}
</style>
<Row className="justify-content-center">
<Col sm={10} xs={12} >
<h1 style={{ fontSize: "3rem" }} className="text-center">{mainCategory}</h1>
<Row className="justify-content-center" >
<Col className='px-3'>
<div className="text-center">
<ButtonGroup className="m-3" variant="outline-light secondary" style={{ display: "inline-block" }}>
{subCategory.map(el => (<Button className="m-1" variant="secondary" name={el} onClick={handleSubname}>{el}</Button>))}
<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>))}
</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">
<img src="/icon/search.svg" width="20" height="20" />
</Button>
</Form>
<Dropdown className="my-2">
<Dropdown.Toggle className="mx-2">{sortingName}</Dropdown.Toggle>
<Dropdown>
<Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item as="button" onClick={() => handleSort('purchase')}>인기상품</Dropdown.Item>
<Dropdown.Item as="button" onClick={() => handleSort('newest')}>신상품</Dropdown.Item>
......@@ -201,6 +194,12 @@ function ProductsList({ match }) {
<Dropdown.Item as="button" onClick={() => handleSort('highest')}>높은가격</Dropdown.Item>
</Dropdown.Menu>
</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 md={8} sm={12} className="justify-content-center m-2">
{productlist.length > 0 ?
......@@ -223,8 +222,8 @@ function ProductsList({ match }) {
</Link>
))
: (
<Image src="/sryimready.jpg"
style={{ objectFit: "cover", width: "45 rem", height: "45 rem" }}></Image>
<Image src="/sryimready.jpg" className='m-5'
style={{ objectFit: "contain", width: "45vw", height: "45vh" }}></Image>
)
}
</Row>
......
client/src/Pages/Signup.js
View file @ 0ea2e9c4
......@@ -33,12 +33,10 @@ function Signup() {
event.stopPropagation();
}
setValidated(true);
console.log(user)
try {
setError('')
const response = await axios.post('/api/users/signup', user)
console.log(response.data)
setSuccess(true)
} catch (error) {
catchErrors(error, setError)
......@@ -66,155 +64,135 @@ function Signup() {
}
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">
<Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}>
<h2 className="text-center m-5">Sign Up</h2>
{error && <Alert variant='danger'>
{error}
</Alert>}
<Form
noValidate validated={validated}
onSubmit={handleSubmit}
className="p-4">
<Form.Group as={Col} controlId="formBasicName" className="justify-content-end">
<Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="id">이 름</Col>
<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}>
<Form.Group as={Row} controlId="formBasicName">
<Form.Label column sm="4" for='name'>
이 름 </Form.Label>
<Col sm="8">
<Form.Control
required type="text"
name="name"
placeholder="Name"
value={user.name}
onChange={handleChange} />
<Form.Control.Feedback type="invalid" >이름을 입력하세요. </Form.Control.Feedback>
</Col>
</Form.Group>
</Col>
<div className='d-flex justify-content-end mt-1'><small >' - ' 를 함께 입력해주세요^^</small></div>
</Col>
<Form.Control.Feedback type="invalid"> 휴대전화를 입력하세요. </Form.Control.Feedback>
</Form.Row>
<Form.Control.Feedback className="text-end" type="invalid">
비밀번호를 입력하세요.
</Form.Control.Feedback>
</Form.Group >
<Button
style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block
onClick={checkPassword}
>
Sign Up
<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>
</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>
</Form>
</Col>
</Row>
</Container>
</div >
</Form>
</Col>
</Row>
</Container>
)
}
......
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