import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import styled from 'styled-components';
function Detail(props) {
let Box = styled.div `
padding : 20px;
color : grey;
`;
let YellowBox = styled.div `
background: yellow;
padding : 10px;
position : absolute;
left : 100px;
top : 100px;
`
let YellowBtn = styled.button`
background : yellow;
color : black;
padding : 10px;
`;
let {id} = useParams();
let findItem = props.shoes.find((x) => x.id == id);
let [showYellowBox, setShowYellowBox] = useState(true);
let [countDown, setCountDown] = useState(6);
useEffect(() => {
setInterval(() => {
setShowYellowBox(false)}, 6000);
}, )
setInterval(() => {
countDown--;
setCountDown(countDown)
}, 1000);
// 선생님 여기서 질문있습니다 혹시 useEffect안에 setInterval 두개를 넣으면 countDown이 6에서 4로 확 넘어가버리는데 setInterval(() => {
countDown--;
setCountDown(countDown)
}, 1000);
--> // 요 코드를 useEffect 밖에 쓰는거랑 안에 쓰는거랑 무슨 차이가 있나요?? useEffect는 html이 재랜더링 될떄마다 실행되는 것이라고 알고 있는데
// 어떤 식으로 동작하는지 감이 오지 않습니다...
return (
<div>
{
showYellowBox == true ? <YellowBox>{countDown}초 이내 구매시 할인</YellowBox> : null
}
<div className="container">
<div className="row">
< img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
</div>
</div>
<div className="col-md-6 mt-4">
<h4 className="pt-5">{findItem.title}</h4>
<p>{findItem.content}</p>
<p>{findItem.price}원</p>
<button className="btn btn-danger">주문하기</button>
</div>
</div>
)
}
export default Detail;
