[15팀 김재환] [Chapter 2-1] 클린코드와 리팩토링 #37
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dosilv
reviewed
Jan 11, 2025
Comment on lines
+21
to
+31
| function main() { | ||
| calcCart(); | ||
|
|
||
| renderCart(); | ||
|
|
||
| renderProductSelectOptions(); | ||
|
|
||
| alertLuckySale(); | ||
|
|
||
| alertSuggestProduct(); | ||
| } |
hty0525
reviewed
Jan 11, 2025
Comment on lines
+1
to
+8
| export const utils = () => { | ||
| // 랜덤 인덱스 값 | ||
| const randomIndex = (length) => Math.floor(Math.random() * length); | ||
|
|
||
| return { | ||
| randomIndex, | ||
| }; | ||
| }; |
There was a problem hiding this comment.
유틸을 객체로 관리하는 이유가 혹시 있을까요!
randomIndex 자체로 function을 export 하면 어떨까 해서요!
hty0525
reviewed
Jan 11, 2025
Comment on lines
21
to
+31
| function main() { | ||
| prodList=[ | ||
| {id: 'p1', name: '상품1', val: 10000, q: 50 }, | ||
| {id: 'p2', name: '상품2', val: 20000, q: 30 }, | ||
| {id: 'p3', name: '상품3', val: 30000, q: 20 }, | ||
| {id: 'p4', name: '상품4', val: 15000, q: 0 }, | ||
| {id: 'p5', name: '상품5', val: 25000, q: 10 } | ||
| ]; | ||
| var root=document.getElementById('app'); | ||
| let cont=document.createElement('div'); | ||
| var wrap=document.createElement('div'); | ||
| let hTxt=document.createElement('h1'); | ||
| cartDisp=document.createElement('div'); | ||
| sum=document.createElement('div'); | ||
| sel=document.createElement('select'); | ||
| addBtn=document.createElement('button'); | ||
| stockInfo=document.createElement('div'); | ||
| cartDisp.id='cart-items'; | ||
| sum.id='cart-total'; | ||
| sel.id='product-select'; | ||
| addBtn.id='add-to-cart'; | ||
| stockInfo.id='stock-status'; | ||
| cont.className='bg-gray-100 p-8'; | ||
| wrap.className='max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl p-8'; | ||
| hTxt.className='text-2xl font-bold mb-4'; | ||
| sum.className='text-xl font-bold my-4'; | ||
| sel.className='border rounded p-2 mr-2'; | ||
| addBtn.className='bg-blue-500 text-white px-4 py-2 rounded'; | ||
| stockInfo.className='text-sm text-gray-500 mt-2'; | ||
| hTxt.textContent='장바구니'; | ||
| addBtn.textContent='추가'; | ||
| updateSelOpts(); | ||
| wrap.appendChild(hTxt); | ||
| wrap.appendChild(cartDisp); | ||
| wrap.appendChild(sum); | ||
| wrap.appendChild(sel); | ||
| wrap.appendChild(addBtn); | ||
| wrap.appendChild(stockInfo); | ||
| cont.appendChild(wrap); | ||
| root.appendChild(cont); | ||
| calcCart(); | ||
|
|
||
| renderCart(); | ||
|
|
||
| renderProductSelectOptions(); | ||
|
|
||
| alertLuckySale(); | ||
|
|
||
| alertSuggestProduct(); | ||
| } |
hty0525
reviewed
Jan 11, 2025
Comment on lines
211
to
308
| itemToAdd.q--; | ||
| const newItem = document.createElement('div'); | ||
| newItem.id = itemToAdd.id; | ||
| newItem.className = 'flex justify-between items-center mb-2'; | ||
| newItem.innerHTML = ` | ||
| <span>${itemToAdd.name} - ${itemToAdd.price}원 x 1</span> | ||
| <div> | ||
| <button | ||
| class="quantity-change bg-blue-500 text-white px-2 py-1 rounded mr-1" | ||
| data-product-id="${itemToAdd.id}" | ||
| data-change="-1">-</button> | ||
| <button | ||
| class="quantity-change bg-blue-500 text-white px-2 py-1 rounded mr-1" | ||
| data-product-id="${itemToAdd.id}" | ||
| data-change="1">+</button> | ||
| <button | ||
| class="remove-item bg-red-500 text-white px-2 py-1 rounded" | ||
| data-product-id="${itemToAdd.id}">삭제</button> | ||
| </div> | ||
| `; | ||
| ElementCartItems.appendChild(newItem); | ||
| itemToAdd.stock--; | ||
| } | ||
|
|
||
| calcCart(); | ||
| lastSel=selItem; | ||
| lastAddCartProductId = addProductId; | ||
| } | ||
| }); | ||
| cartDisp.addEventListener('click', function (event) { | ||
| var tgt=event.target; | ||
| if(tgt.classList.contains('quantity-change') || tgt.classList.contains('remove-item')) { | ||
| var prodId=tgt.dataset.productId; | ||
| var itemElem=document.getElementById(prodId); | ||
| var prod=prodList.find(function (p) { return p.id === prodId; }); | ||
| if(tgt.classList.contains('quantity-change')) { | ||
| var qtyChange=parseInt(tgt.dataset.change); | ||
| var newQty=parseInt(itemElem.querySelector('span').textContent.split('x ')[1]) + qtyChange; | ||
| if(newQty > 0 && newQty <= prod.q + parseInt(itemElem.querySelector('span').textContent.split('x ')[1])) { | ||
| itemElem.querySelector('span').textContent=itemElem.querySelector('span').textContent.split('x ')[0] + 'x ' + newQty; | ||
| prod.q -= qtyChange; | ||
| } else if(newQty <= 0) { | ||
| itemElem.remove(); | ||
| prod.q -= qtyChange; | ||
|
|
||
| ElementCartItems.addEventListener('click', function (event) { | ||
| const target = event.target; | ||
|
|
||
| if ( | ||
| target.classList.contains('quantity-change') || | ||
| target.classList.contains('remove-item') | ||
| ) { | ||
| const productId = target.dataset.productId; | ||
| const ElementCartItem = document.getElementById(productId); | ||
| const product = productList.find(function (product) { | ||
| return product.id === productId; | ||
| }); | ||
|
|
||
| if (target.classList.contains('quantity-change')) { | ||
| const qtyChange = parseInt(target.dataset.change); | ||
| const newQty = | ||
| parseInt( | ||
| ElementCartItem.querySelector('span').textContent.split('x ')[1] | ||
| ) + qtyChange; | ||
| if ( | ||
| newQty > 0 && | ||
| newQty <= | ||
| product.stock + | ||
| parseInt( | ||
| ElementCartItem.querySelector('span').textContent.split('x ')[1] | ||
| ) | ||
| ) { | ||
| ElementCartItem.querySelector('span').textContent = | ||
| ElementCartItem.querySelector('span').textContent.split('x ')[0] + | ||
| 'x ' + | ||
| newQty; | ||
| product.stock -= qtyChange; | ||
| } else if (newQty <= 0) { | ||
| ElementCartItem.remove(); | ||
| product.stock -= qtyChange; | ||
| } else { | ||
| alert('재고가 부족합니다.'); | ||
| alert(OUT_OF_STOCK_MSG); | ||
| } | ||
| } else if(tgt.classList.contains('remove-item')) { | ||
| var remQty=parseInt(itemElem.querySelector('span').textContent.split('x ')[1]); | ||
| prod.q += remQty; | ||
| itemElem.remove(); | ||
| } else if (target.classList.contains('remove-item')) { | ||
| const remQuantity = parseInt( | ||
| ElementCartItem.querySelector('span').textContent.split('x ')[1] | ||
| ); | ||
| product.stock += remQuantity; | ||
| ElementCartItem.remove(); | ||
| } | ||
| calcCart(); | ||
| } | ||
| }); No newline at end of file | ||
| }); |
9yurilee
reviewed
Jan 11, 2025
| const randomIndex = (length: number) => Math.floor(Math.random() * length); | ||
|
|
||
| return { | ||
| randomIndex, |
There was a problem hiding this comment.
오호.. 바로 return randomIndex 안하시구, 요러케 하신 이유가 있나유?
hty0525
reviewed
Jan 11, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
과제 체크포인트
기본과제
심화과제
과제 셀프회고
과제에서 좋았던 부분
과제를 하면서 새롭게 알게된 점
과제를 진행하면서 아직 애매하게 잘 모르겠다 하는 점, 혹은 뭔가 잘 안되서 아쉬운 것들
리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문