State

import React from 'react' const ProductDetail = () => { return ( <div className='product-detail'> <div className="item img"> <img src="https://i.imgur.com/1vpSkbW.png" alt="상품명" /> </div> <div className="item info"> <div className="title"> <h1>상품명</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'>42,000 원</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' min={1} max={100} value={1} /> <button className='btn btn-xs'>+</button> <button className='btn btn-xs'>-</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'>42,000</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() { return ( <div> <ProductDetail /> </div> ); } export default App;

.txt-pt { color: salmon; font-weight: bold; } .line-lg { display: block; border-bottom: 2px solid lightgray; } .product-detail { display: inline-flex; justify-content: center; column-gap: 100px; padding: 10px; /* border: 1px solid salmon; */ } .product-detail .item { width: 400px; } .product-detail .info { border-top: 2px solid black; border-bottom: 2px solid black; } .quantity { width: 40px; font-size: 16px; line-height: 20px; height: 20px; text-align: center; appearance: none; } /* 공통 */ .text-group { display: flex; padding: 10px 0; } img { width: 100%; } select { width: 100%; font-size: 16px; line-height: 40px; height: 40px; padding-left: 15px; padding-right: 15px; color: #222; color: inherit; cursor: pointer; outline: none; border: 1px solid #777; background: none; border-radius: 0; padding-right: 32px; } .flex { display: flex; } .flex.gap-1 { gap: 10px; } .btn { background-color: royalblue; color: white; font-weight: bold; outline: none; border: none; margin: 0 2px; padding: 0 10px; cursor: pointer; } .btn:hover { box-shadow: 2px 2px 2px rgba(0,0,0,0.5); } .btn:active { box-shadow: none; } .btn.btn-lg { width: 100%; min-height: 40px; } .btn.btn-outline { border: 2px solid gray; background-color: white; color: gray; }

import React, { useState } from 'react' const ProductDetail = (props) => { // ✅ 객체 추가 const product = { productId : 'p000001', name : '베이직 폴라 니트', price : 42000, quantity : 1, img: 'https://i.imgur.com/1vpSkbW.png', } // ✅ 최종 가격 계산 const totalPrice = product.price * product.quantity 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={product.quantity} min={1} max={100} /> <button className='btn btn-xs'>+</button> <button className='btn btn-xs'>-</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 React, { useState } from 'react' const ProductDetail = (props) => { // ✅ state 추가 const [quantity, setQuantity] = useState(1) // ✅ 객체 추가 const product = { productId : 'p000001', name : '베이직 폴라 니트', price : 42000, quantity : 1, img: 'https://i.imgur.com/1vpSkbW.png', } // ✅ 최종 가격 계산 const totalPrice = product.price * quantity // ✅ 이벤트 정의 - 증가 const onIncrease = () => { console.log(quantity); setQuantity(quantity + 1) } // ✅ 이벤트 정의 - 감소 const onDecrease = () => { console.log(quantity); setQuantity(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