Skip to content

GitLab

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

0126

parent 054d1872
Show whitespace changes
Inline Side-by-side
client/src/Pages/Product.js
View file @ af3ab5b2
......@@ -15,12 +15,8 @@ function Product({ match, location }) {
const [count, setCount] = useState(1)
const [price, setPrice] = useState(0)
const replace = product.description.replaceAll('\n', '<br />')
// const replace = product.description.replaceAll('\n', '<br />')
// const replace = product.description.replaceAll(/\n/, '<br />')
console.log("objectasdasd", replace)
const replace = product.description.replaceAll('{\n\n}', '<br />')
console.log("replaceALL Description= ", replace)
useEffect(() => {
if (size && color) {
......@@ -172,20 +168,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 @ af3ab5b2
......@@ -29,11 +29,6 @@ function ProductsList({ match }) {
try {
const response = await axios.get(`/api/categories/sub/${mainCategory}`)
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) {
catchError(error, setError)
}
......@@ -87,17 +82,19 @@ function ProductsList({ match }) {
`}
</style>
<Container>
<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 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>
</div>
</Col>
</Row>
<Row className="justify-content-end mx-0 my-5">
<Row className="justify-content-end mx-0 my-2">
<Dropdown>
<Dropdown.Toggle variant="secondary" className="mx-2">정렬</Dropdown.Toggle>
<Dropdown.Menu>
......@@ -136,8 +133,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>
)
}
......
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