: 장바구니 컴포넌트로 OverView라는 최상위 부모 컴포넌트의 자식으로 존재한다. 하지만 독특한점은 모달창 때문에 이녀석만큼은 OverView보다 더 높은 위치로 이벤트를 올려보낸다.
: 사진에서처럼 모달창이 존재한다. 이것도 서드파티 라이브러리를 사용하지 않고 태그로 만들었다.
import React, { Component } from 'react';
import Overview from './Overview/Overview';
import Modal from '../../component/Modal/Modal';
class ProductDetail extends Component {
constructor() {
super();
this.state = {
modalSwitch: false,
};
}
handleModalSwitch = () => {
this.setState({ modalSwitch: !this.state.modalSwitch });
};
render() {
const { handleModalSwitch } = this;
return (
<div>
{this.state.modalSwitch ? (
<Modal takeModalEvent={handleModalSwitch} />
) : null}
<div className='ProductDetail'>
<Overview takeModalEvent={handleModalSwitch} />
</div>
</div>
);
}
}
export default ProductDetail;
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import './Modal.scss';
class Modal extends Component {
goCart = () => {
this.props.history.push('/cart');
};
render() {
const { goCart } = this;
const { takeModalEvent } = this.props;
return (
<div className='showMonalPage'>
<div className='cartButtonBox'>
<p className='notificationPhrase'>장바구니에 상품을 담았습니다</p>
<button className='moveCartButton' onClick={goCart}>
장바구니 보러가기
</button>
<button className='cancleButton' onClick={takeModalEvent}>
확인
</button>
</div>
</div>
);
}
}
export default withRouter(Modal);
export default function calcuration(targetList, saleRate, multiplication) {
if (targetList.length) {
return (
targetList
.map(
(ele) =>
(ele.options.reduce(
(accumulator, currentValue) =>
accumulator + parseInt(currentValue.price * currentValue.count),
0
) /
saleRate) *
multiplication
)
.reduce((acc, val) => acc + val)
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '원'
);
}
}
오 글 정주행중인데 참고할만한 글이 많은 것 같습니다.
React + Node 공부하고 있는데, 혹시 내일의 집 코드를 볼 수 있을까요?(github 링크라던지...)