8 글 보임 - 1 에서 8 까지 (총 8 중에서)
-
import React, { useEffect, useState } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import data from './data'; import './Detail.css'; const Detail = () => { let [timeSale, SettimeSale] = useState(true); let [amount, SetAmount] = useState(1); // let [num, setNum] = useState(''); let [tab, SetTab] = useState(1); useEffect(()=> { setTimeout(()=> {SettimeSale(false)}, 2000); },[]) useEffect(()=>{ if(isNaN(amount) === true){ alert('숫자만 입력해주세요'); SetAmount(amount = 1); } if(amount <= 0){ alert('해당 상품의 최소 구매 수량은 1개 입니다'); SetAmount(amount = 1); } },[amount]) let {id} = useParams(); let navigate = useNavigate(); return ( <div className="container"> <div className="row"> { timeSale === true ? <div className='timesale'><h2>2초후에 사라집니다</h2></div> : null } <div className="col-md-6"></div> <div className="col-md-6"> <h4 className="pt-5">{data[id].title}</h4> <p>{data[id].content}</p> <p>{data[id].price}</p> <input value={amount} onChange={(e) => {SetAmount(e.target.value)}}></input> <button onClick={()=>{SetAmount(amount ++ )}}>+</button> <button onClick={()=>{SetAmount(amount --)}}>-</button> <p>TOTAL : { Math.ceil(data[id].price * amount)}원</p> <button className="btn btn-danger">주문하기</button> <button className="btn btn-danger" onClick={()=>{navigate(-1)}}>뒤로가기</button> </div> </div> {/* <input onChange={(e) => {setNum(e.target.value)}}></input> */} <div className='tabWrap'>
-
<li onClick={()=>{SetTab(1)}}>제품정보
<li onClick={()=>{SetTab(2)}}>제품문의
<li onClick={()=>{SetTab(3)}}>리뷰
<li onClick={()=>{SetTab(4)}}>교환/반품
안녕하세요 선생님 이게 지금 제 detail.js인데 1번클릭시 456뜨고 2번 클릭시 789뜨게하는 응용문제는 성공했는데 뜬 상품을 눌렀을때 상세페이지가 안뜨는데
뜨게하려면 detail.js에서도 axios.get('https://codingapple1.github.io/shop/data3.json') 이런식으로 데이터를 불러와서 주소창에 예를들어 detail/7 이 찍혔을때는 https://codingapple1.github.io/shop/data3.json' 이주소에서 데이터값을 불러와서 보여줘라는 식의 코드를 짜야할것 같은데 주말부터 어떻게 짜봐도 오류가 나는데 도와주세요 선생님 ㅠㅠ~!import React, { useEffect, useState } from 'react'; import { useDispatch } from 'react-redux'; import { useParams, useNavigate } from 'react-router-dom'; import data from './data'; import './Detail.css'; import axios from 'axios'; import { addItem } from './store.js';const Detail = () => { let [productData, setProductdata] = useState(data); let [timeSale, SettimeSale] = useState(true); let [amount, SetAmount] = useState(1); // let [num, setNum] = useState(''); let [tab, SetTab] = useState(0); let dispatch = useDispatch();let {id} = useParams(); let navigate = useNavigate();console.log(id); Number(id) <= 5 ? console.log() : axios.get('https://ohwowoAo.github.io/shop/data2.json') .then((결과)=>{ let addList = [...결과.data]; setProductdata(addList) console.log(addList) }) useEffect (()=> { const titleElement = document.getElementsByTagName("title")[0]; titleElement.innerHTML = '상품상세페이지'; },[]); useEffect(()=> { let watched = localStorage.getItem('watched'); watched = JSON.parse(watched); watched.push(data[id].id); watched = new Set(watched); watched = Array.from(watched); localStorage.setItem('watched',JSON.stringify(watched)); },[])useEffect(()=> { setTimeout(()=> {SettimeSale(false)}, 3000); },[])useEffect(()=>{ if(isNaN(amount) === true){ alert('숫자만 입력해주세요'); SetAmount(amount = 1); } if(amount <= 0){ alert('해당 상품의 최소 구매 수량은 1개 입니다'); SetAmount(amount = 1); } },[amount]) // useEffect(() => { // console.log(localStorage.getItem('cart')) // },[]) return ( <div className="container"><div className="row"> { timeSale === true ? <div className='timesale'><p>※ 배송비 이벤트 기간 ~8월 15일 (3초후에 사라집니다.) </p></div> : null } <div className="col-md-8 thumb-info"></div> <div className="col-md-4 info"> <h4 className="pt-5">{productData[id].title}</h4> <p className='productInfo'>{data[id].content}</p> <p className='price'>{data[id].price}</p> <table class="detailOpt"> <tr> <th scope="row">제조사</th> <td>내용이 들어갑니다.</td> </tr> <tr> <th scope="row">브랜드</th> <td>내용이 들어갑니다.</td> </tr> <tr> <th scope="row">배송비</th> <td> 배송비이벤트🔥 주문금액에 상관없이 무료배송</td> </tr> </table> <div className='innerPrice'> <p className='innerPriceName'>{productData[id].title}</p> <div className='MK_qty-ctrl'> <input value={amount} onChange={(e) => {SetAmount(e.target.value)}}></input> <button className='plus' onClick={()=>{SetAmount(amount ++ )}}>+</button> <button className='minus' onClick={()=>{SetAmount(amount --)}}>-</button> </div> <p className='innerPrice_basic'>{ Math.ceil(data[id].price * amount)}</p> </div> <div className='total'><p>TOTAL</p> <b>{ Math.ceil(data[id].price * amount)}원</b></div> <button className="cartBtn" onClick={()=>{ let cartList = JSON.parse(localStorage.getItem('cart')); cartList.push({id : data[id].id, name : data[id].title, count : 1}); localStorage.setItem('cart', JSON.stringify(cartList)) }}>Cart</button> <button className="backBtn" onClick={()=>{navigate(-1)}}>Back</button> </div> </div> {/* <input onChange={(e) => {setNum(e.target.value)}}></input> */} <div className='tabWrap'>
-
<li style="list-style-type: none;">
- <li className={tab === 0? 'bold' : null} onClick={()=>{SetTab(0)}}>제품정보
<li className={tab === 1? 'bold' : null} onClick={()=>{SetTab(1)}}>제품문의
<li className={tab === 2? 'bold' : null} onClick={()=>{SetTab(2)}}>리뷰
<li className={tab === 3? 'bold' : null} onClick={()=>{SetTab(3)}}>교환/반품
<Tabcontent tab={tab} /> </div> </div> ); };
function Tabcontent (props) {let [fade, setFade] = useState('');useEffect (()=>{ setTimeout(()=> {setFade('end')}, 10) return () => { setFade('') } }, [props.tab])return (<div className={'tabInfo ' + 'start ' + fade}> { [ <div>제품정보입니다</div>, <div>제품문의입니다</div>, <div>리뷰</div>, <div>교환/반품</div>][props.tab]}</div>) } export default Detail; 선생님 저렇게 가져온 data가 .then(()=>{})안에서만 유효하고 밖으로 나오지 못하는데 어떤식으로 작성해야 주소 id에 맞춰 가져오게 짤수 있을까요? 구조가 너무 어렵게 느껴져요 감이 안잡혀요 ㅠㅠ
8 글 보임 - 1 에서 8 까지 (총 8 중에서)
- 답변은 로그인 후 가능합니다.