최근 본 상품이 추가가 안되는데 왜 그런지 모르겠습니다

import { useEffect } from "react";
import { useParams } from "react-router-dom";
// import styled from 'styled-components'
import { useState } from "react";
import { Nav } from 'react-bootstrap'
import { addItem } from "../store";
import { useDispatch } from "react-redux";

// let YellowBtn = styled.button`
// background : ${props => props.bg};
// color : ${props => props.bg == 'blue' ? 'white' : 'black'};
// padding : 10px;
// `

/* eslint-disable jsx-a11y/alt-text */
function Detail(props) {
 

//useEffect 쓰는 이유 
//먼저 useEffect안에 있는 코드는 html렌더링 후에 동작

let {id}=useParams();
let 찾은상품 = props.shoes.find(x => x.id == id);
let [count , setCount] = useState(0)
let [ alerta, setAlerta ] = useState(true);
let [num, setNum] = useState('')
let [탭, 탭변경] = useState(0)
let dispatch = useDispatch()

useEffect(()=>{
let 꺼낸거 = localStorage.getItem('watched')
꺼낸거 = JSON.parse(꺼낸거)
꺼낸거.push(찾은상품.id)
localStorage.setItem('watched', JSON.stringify(꺼낸거))
 }, [])

useEffect(()=>{
let timer = setTimeout(()=>{ setAlerta(false) }, 2000);
console.log(2)
return ()=>{
console.log(1)
clearTimeout(timer)
 }
 },[]);

// useEffect(()=>{}) 1. 재랜더링마다 코드실행하고 싶으면
// useEffect(()=>{}, []) 2.mount시 1회 코드실행하고 싶으면
// useEffect(()=>{
// return () =>{ 3.unmount시 1회 코드실행하고 싶으면

// }
// },[])

useEffect(()=>{
if (isNaN(num) === true){
alert('숫자만입력')
 }
 }, [num])

return (
<div className="container">
{
alert === true
 ? (<div className="alert alert-warning">
<p>2초 이내 구매시 할인</p>
</div>)
 : null
}

{count}
{/* <YellowBtn bg="blue">버튼</YellowBtn> */}
<button onClick={()=>{ setCount(count+1) }}>버튼</button>
 
<div className="row">
<div className="col-md-6">
<img src="https://codingapple1.github.io/shop/shoes1.jpg">
</div>
<div className="col-md-6">
<input onChange={(e) => {setNum(e.target.value)}}></input>
<h4 className="pt-5">{찾은상품.title}</h4>
<p>{찾은상품.content}</p>
<p>{찾은상품.price}원</p>
<button className="btn btn-danger" onClick={()=>{
dispatch(addItem({id : 1, name : 'Red Knit', count : 1}))

 }}>주문하기</button>
 
</div>
</div>

<Nav variant="tabs" defaultActiveKey="link0">
<Nav.Item>
<Nav.Link onClick={()=>{탭변경(0)}} eventKey="link0">버튼0</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link onClick={()=>{탭변경(1)}} eventKey="link1">버튼1</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link onClick={()=>{탭변경(2)}} eventKey="link2">버튼2</Nav.Link>
</Nav.Item>
</Nav>

<Tabcontent 탭={탭}/>

</div>
 
 )
}

function Tabcontent({탭}){
// if(탭==0){
// return <div>내용0</div>
// }
// else if(탭==1){
// return <div>내용1</div>
// }
// else if(탭==2){
// return <div>내용2</div>
// }
let [fade, setFade] = useState('')
useEffect(()=>{
setTimeout(()=>{ setFade('end') },100)
return ()=>{
setFade('')
 }
 },[탭])
return <div className={'start' + fade}>
{[<div>내용0</div>,<div>내용1</div>,<div>내용2</div>][탭]}
</div>
}
export default Detail;