Props

import React, { useState } from 'react' const ProductDetail = ({ product }) => { // ✅ props ➡ { product } 👩‍🏫 객체 구조분해할당 // state 추가 const [quantity, setQuntity] = useState(1) // product{} ➡ App.js 이동 // 최종 가격 계산 const totalPrice = product.price * quantity // 이벤트 정의 - 증가 const onIncrease = () => { console.log(quantity); setQuntity(quantity + 1) } // 이벤트 정의 - 감소 const onDecrease = () => { console.log(quantity); setQuntity(quantity - 1) } return ( <div className='product-detail'> <div className="item img"> <img src={product.img} alt={product.name} /> </div> <div className="item info"> <div className="title"> <h1>{product.name}</h1> </div> <p> <span className='txt-pt'>INFO</span><br /> -편안한 착용이 가능한 폴라 디자인 <br /> -체형 커버가 가능한 베이직한 실루엣 <br /> </p> <p> <span className="txt-pt">Color & Size</span> <br /> Black, Navy, Red <br /> 85, 90, 95, 100, 110 <br /> - 어깨 53, 가슴 59, 암홀 23, 소매 62, 총장 68 <br /> (측정 방법에 따라 1~3cm 오차가 있을 수 있습니다) <br /> </p> <span className='line-lg'></span> <div className="text-group"> <div className="item"> <span className='txt-pt'>판매가</span> </div> <div className="item"> <span className='txt-pt'>{product.price.toLocaleString()} 원</span> </div> </div> <div className="text-group"> <div className="item"> <span>배송비</span> </div> <div className="item"> <span>3,000</span> 원 </div> </div> <span className="line-lg"></span> <div className="text-group"> <div className="item"> <span>Color</span> </div> <div className="item"> <select name="color" id="color"> <option value="Black">Black</option> <option value="Navy">Navy</option> <option value="Red">Red</option> </select> </div> </div> <div className="text-group"> <div className="item"> <span>Size</span> </div> <div className="item"> <select name="color" id="color"> <option value="85">85</option> <option value="90">90</option> <option value="95">95</option> <option value="100">100</option> <option value="110">110</option> </select> </div> </div> <div className="text-group"> <div className="item"> <span>수량</span> </div> <div className="item flex"> <input type="text" className='quantity' value={quantity} min={1} max={100} /> {/* value 를 state 로 변경 */} <button className='btn btn-xs' onClick={ onIncrease }>+</button> {/* 이벤트 추가 */} <button className='btn btn-xs' onClick={ onDecrease }>-</button> {/* 이벤트 추가 */} </div> </div> <span className="line-lg"></span> <div className="text-group"> <div className="item"> <span className='txt-pt'>최종 가격</span> </div> <div className="item"> <span className='txt-pt'>{totalPrice.toLocaleString()} 원</span> </div> </div> <div className="text-group flex gap-1"> <div className="item"> <button className="btn btn-lg">구매하기</button> </div> <div className="item flex"> <button className="btn btn-lg btn-outline">장바구니</button> <button className="btn btn-lg btn-outline">관심상품</button> </div> </div> </div> </div> ) } export default ProductDetail

import logo from './logo.svg'; import './App.css'; import ProductDetail from './components/ProductDetail'; function App() { // ✅ 객체 가져옴 const product = { productId : 'p000001', name : '베이직 폴라 니트', price : 42000, quantity : 1, img: 'https://i.imgur.com/1vpSkbW.png', } return ( <div> <ProductDetail product={product} /> </div> ); } export default App;