Redux : 5 상세페이지 주문하기 -> 장바구니에 아이템 추가

[조인환]

안녕하세요

일단 동일한 코드를 cart 페이지에서 실행하면 잘 되는데 루트 페이지나 detail 페이지에서 버튼을 클릭하면 안되는데, cart페이지로 넘어갈 때 새로고침이 되서 그런거 같은데 
강의 내용과 동일한 코드 실행했는데 어디 부분을 수정해야 될까요? ㅜ 

store.js

import { configureStore, createSlice } from '@reduxjs/toolkit'
import user from './userSlice'

let stock = createSlice({
name: 'stock',
initialState: [10, 11, 12]
})

let item = createSlice({
name: 'item',
initialState: [
 { id: 0, name: 'White and Black', count: 2 },
 { id: 1, name: 'Grey Yordan', count: 1 }
 ],
reducers : {
changeCount(state,action){
let num = state.findIndex((a)=>{ return a.id === action.payload})
state[num].count ++
 },
addItem(state){
state.push({id:2,name:'Red Knit',count:5})
 }
 }
})

export let {changeCount, addItem} = item.actions

export default configureStore({
reducer: {
user: user.reducer,
stock: stock.reducer,
item: item.reducer
 }
})

detail.js

// import useParams from 'react-router-dom'
import React, { useState } from 'react';
import { useParams } from 'react-router-dom'
import { useEffect } from 'react';
import { Nav } from 'react-bootstrap'
import { useSelector, useDispatch } from 'react-redux'
import {addItem} from '../store/store'

function DetailPage(props) {
let { id } = useParams();
let [count, setCount] = useState(0);
let [alart, setAlert] = useState(true);
let 
 = useState(0);
let [fade, setFade] = useState('')
let [shoes,setShoes] = [props.shoes, props.setShoes]

let dispatch = useDispatch()

useEffect(() => {
setTimeout(() => {
// document.getElementById('test').style.display = 'none';
setAlert(false)
 }, 2000)})

return (
<div className={`container`}>
 <button onClick={()=>{ dispatch(addItem());
console.log(dispatch(addItem()))}}>button</button>
 
 <div className='container'>

{
alart === true ? <div className='alert alert-warning' id='test'>2초 뒤 사라짐</div> : null
}

 </div>

 <div className="row">
 <div className="col-md-6">
{
isNaN(id) ?
<>< img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" /></>
:
<>< img src={"https://codingapple1.github.io/shop/shoes" + (props.shoes[id].id + 1) + ".jpg"} width="100%" /></>
}

 </div>
 <div className="col-md-6">
{
isNaN(id) ?
<><h4 className="pt-5">{props.shoes[0].title}</h4><p>{props.shoes[0].content}</p><p>{props.shoes[0].price}</p></>
:
<><h4 className="pt-5">{props.shoes[id].title}</h4><p>{props.shoes[id].content}</p><p>{props.shoes[id].price}</p></>
}
 
 </div>

 </div>
 <Nav variant="tabs" defaultActiveKey="link0">
 <Nav.Item>
 <Nav.Link onClick={()=>{setTab(0)}} eventKey="link0">버튼0</Nav.Link>
 </Nav.Item>
 <Nav.Item>
 <Nav.Link onClick={()=>{setTab(1)}} eventKey="link1">버튼1</Nav.Link>
 </Nav.Item>
 <Nav.Item>
 <Nav.Link onClick={()=>{setTab(2)}} eventKey="link2">버튼2</Nav.Link>
 </Nav.Item>
 </Nav>
 
 <TabContent tab={tab} shoes={shoes}/>
 </div>)
}

function TabContent(props){
let [fade, setFade] = useState('')
useEffect(()=>{
let a =setTimeout(() => {
setFade('end')
 }, 10); 
return ()=>{ clearTimeout(a); setFade('')}
 },[props.tab])
return (<div className={`start ${fade}`}>
{[<div>{props.shoes[0].title}</div>,<div>내용1</div>,<div>내용2</div>][props.tab]}
 </div>)
}

export default DetailPage;

Cart.js

import { Table } from 'react-bootstrap'

import { useSelector, useDispatch } from 'react-redux'
import {changeName, changeAge} from './../store/userSlice'
import {changeCount} from './../store/store'
import {addItem} from '../store/store'

function Cart() {
let item = useSelector((state) => state.item)
let user = useSelector((state) => state.user)
 
 
let dispatch = useDispatch()
return (
<div>
 <h3>{user.name}의 장바구니{user.age}</h3>
 <button onClick={()=> { dispatch(changeName())}}>+</button>
 <button onClick={()=> { dispatch(changeAge())}}>^^</button>
 <Table>
 <thead>
 <tr>
 <th>#</th>
 <th>상품명</th>
 <th>수량</th>
 <th>변경하기</th>
 </tr>
 </thead>
 <tbody>
{
item.map((a, i) =>
<tr key={i}>
 <td>{item[i].id}</td>
 <td>{item[i].name}</td>
 <td>{item[i].count}</td>
 <td>
 <button onClick={()=>{
dispatch(changeCount(item[i].id))
 }}> + </button>
 </td>
 </tr>
 )
}
 </tbody>
 </Table>
 <div>
 <button onClick={()=> { dispatch(addItem())}}> 상품 추가</button>
 </div>
 </div>
 )
}

export default Cart


App.js

import './App.css';
import Nav from 'react-bootstrap/Nav';
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import { Row } from 'react-bootstrap';
import Col from 'react-bootstrap/Col';
import { useState } from 'react';
import data from './data';
import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'
import DetailPage from './Route/detail'
import axios from 'axios'
import Cart from './Route/Cart'

//

function App() {
let [shoes, setShoes] = useState(data);
let navigate = useNavigate();
return (

<div className="App">
 <BasicNav navigate={navigate} />

 <Routes>
 <Route path='/' element={
<>
 <div className='main-bg'></div>
 <div>
 <div>
 <button onClick={() => {
axios.get('https://codingapple1.github.io/shop/data2.json').then(
 (data) => {
let copy = [...shoes, ...data.data]
setShoes(copy)
 }).catch(() => { console.log('실패함 ㅅㄱ') })
 }}>상품 추가하기 버튼</button>
 </div>
 <Container style={{}}>
 <Row>
{
shoes.map((a, i) => {
return (
<Coll shoes={shoes[i]} i={i} key={a.id}> </Coll>)
 })
}

 </Row>
 </Container>
 </div></>}
/>

 <Route path='/detail/:id' element={
<DetailPage shoes={shoes} setShoes={setShoes} />} />
 <Route path='/about' element={<About />} >
 <Route path='member' element={<div>어바웃 맴버 페이지</div>} />
 </Route>
 <Route path='cart' element={<Cart />} />
 <Route path='*' element={<div>없는 페이지 Error 404 u know </div>} />
 </Routes>
{/* <div>
 <button onClick={() => {
 axios.get('https://codingapple1.github.io/shop/data2.json').then(
 (data) => {
 let copy = [...shoes, ...data.data]
 setShoes(copy)
 }).catch(() => { console.log('실패함 ㅅㄱ') })
 }}>상품 추가하기 버튼</button>
 </div> */}

 </div>
 );
}

//

function BasicNav(props) {
return (
<Navbar expand="lg" className="bg-body-tertiary">
 <Container>
 <Navbar.Brand href="/">React-Shop</Navbar.Brand>
 <Navbar.Toggle aria-controls="basic-navbar-nav" />
 <Navbar.Collapse id="basic-navbar-nav">
 <Nav className="me-auto">

 <Nav.Link href="/detail/0">detail</Nav.Link>
 <Nav.Link href="/cart">cart</Nav.Link>
 <Nav.Link onClick={() => { props.navigate(-1) }}>이전 페이지</Nav.Link>

 </Nav>
 </Navbar.Collapse>
 </Container>
 </Navbar>
 );
}

function Coll(props) {
return (
<Col>
 < img src={'https://codingapple1.github.io/shop/shoes' + (props.i + 1) + '.jpg'} width="80%" />
 <h4>{props.shoes.title}</h4>
 <p>{props.shoes.content}</p>
 <p>{props.shoes.price}</p>
 <button>주문하기</button>
 </Col>
 )
}

function About() {

return (
<div>
 <h4>회사 정보</h4>
 <Outlet></Outlet>
 </div>
 )
}

export default App;

[codingapple]

링크태그로 이동하지말고 클릭하면 navigate() 로 이동시킵시다

[조인환]

감사합니다! ㅎㅎ

[글쓴이]

글