Skip to content

GitLab

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

0126

parent 054d1872
Hide whitespace changes
Inline Side-by-side
client/src/Pages/Product.js
View file @ af3ab5b2
...@@ -15,12 +15,8 @@ function Product({ match, location }) { ...@@ -15,12 +15,8 @@ function Product({ match, location }) {
const [count, setCount] = useState(1) const [count, setCount] = useState(1)
const [price, setPrice] = useState(0) const [price, setPrice] = useState(0)
const replace = product.description.replaceAll('\n', '<br />') const replace = product.description.replaceAll('{\n\n}', '<br />')
// const replace = product.description.replaceAll('\n', '<br />') console.log("replaceALL Description= ", replace)
// const replace = product.description.replaceAll(/\n/, '<br />')
console.log("objectasdasd", replace)
useEffect(() => { useEffect(() => {
if (size && color) { if (size && color) {
...@@ -172,20 +168,25 @@ function Product({ match, location }) { ...@@ -172,20 +168,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' }}>
</Card.Body> <h5 className='m-0' style={{ whiteSpace: 'nowrap' }}> [ Description ]</h5>
</Card> </Card.Header>
<> <Card.Body className='text-center m-4' style={{ whiteSpace: "pre-line", background: '#F7F3F3', fontSize: '1vw' }}>
<h4 className='my-4 text-center'>[ Detail Images ]</h4> <small>{replace}</small>
<Image src={`/images/${product.detail_imgs}`} style={{ objectFit: "contain", maxWidth: "100%"}}/> </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' />
</Col>
</Col> </Col>
</Col> </Col>
</Row> </Row>
......
client/src/Pages/ProductsList.js
View file @ af3ab5b2
...@@ -29,11 +29,6 @@ function ProductsList({ match }) { ...@@ -29,11 +29,6 @@ function ProductsList({ match }) {
try { try {
const response = await axios.get(`/api/categories/sub/${mainCategory}`) const response = await axios.get(`/api/categories/sub/${mainCategory}`)
setSubcategory(Object.values(response.data)[0]) setSubcategory(Object.values(response.data)[0])
// console.log("response data=", response.data)
// console.log("object value=", Object.values(response.data));
// console.log("object value=2", Object.values(response.data)[0]);
} catch (error) { } catch (error) {
catchError(error, setError) catchError(error, setError)
} }
...@@ -87,17 +82,19 @@ function ProductsList({ match }) { ...@@ -87,17 +82,19 @@ function ProductsList({ match }) {
`} `}
</style> </style>
<Container> <Container>
<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 d-flex flex-nowrap" variant="outline-light secondary" style={{ display: "inline", overflowX: "auto"}}>
{subcategory.map(el =>
(<Button className="m-1" style={{ fontSize: "0.8vw", whiteSpace: 'nowrap' }} variant="secondary" name={el} onClick={handleSubname}>{el}
</Button>))}
</ButtonGroup> </ButtonGroup>
</div> </div>
</Col> </Col>
</Row> </Row>
<Row className="justify-content-end mx-0 my-5"> <Row className="justify-content-end mx-0 my-2">
<Dropdown> <Dropdown>
<Dropdown.Toggle variant="secondary" className="mx-2">정렬</Dropdown.Toggle> <Dropdown.Toggle variant="secondary" className="mx-2">정렬</Dropdown.Toggle>
<Dropdown.Menu> <Dropdown.Menu>
...@@ -136,8 +133,8 @@ function ProductsList({ match }) { ...@@ -136,8 +133,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>
) )
} }
......
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