상품 등록 - 상품 옵션기능

[구현 내용]

• 이미지 첨부 시에 이미지 미리보기 기능 구현
• 옵션 세트 추가시에 옵션 세트 카드 추가기능과 삭제기능
• 옵션 추가 시에 상품 옵션 추가기능과 삭제기능
• 상품 정상가/판매가 input 숫자만 입력가능, 세자리comma
• 정상가 미입력하고 판매가 입력시 alert창 후 정상가로 focus
• 정상가대비 판매가 할인율 %로 표기, 소수점버림, 0%일경우 없음처리

After

이번 프로젝트는 상품의 옵션을 설정하고 등록 또는 삭제하는 기능을 진행하게 되었는데 그중에 상품 옵션 설정 기능을 담당하였다. 간단할 것 같으면서도 복잡한 프로젝트였다. 개인적으로 삽질하는 시간이 많았고 아쉬움이 남은 프로젝트이다.
첫 시작 때 전체적인 설계 구조를 잡는 데에 있어서 미흡한 부분이 있었다. 이번 설계는 나중에 필요한 기능을 구현하는 데에 있어서 큰 어려움을 주었다.
대표적으로 옵션 세트 추가했을 때 새로운 컴포넌트를 생성하고 삭제하는 부분에서 큰 시간을 들였다.
이번 과제에서 부족했던 부분은 각각의 컴포넌트끼리 서로 어떻게 서로의 데이터를 주고받을 것인지에 대한 설계가 부족했다. 가장 기본적인 부분이었는데 여러모로 아쉬움이 많다. 앞으로 남은 프로젝트 동안 실수를 줄이도록 더욱 신경 써야겠다.

Input 란에 사용자가 값을 입력하면 그 값을 저장할 공간이 필요하다.
productForm.js에서 공간을 만든다.

productForm.js

export const default_productform = {
  id: 1,
  name_product: '',
  price_nomal: '',
  price_sale: '',
  product_inven: '',
};

export const default_option_list = ['제품명', '제품정상가', '제품판매가', '재고'];

ProductInfo라는 새로운 컴포넌트를 생성한다. 이 컴포넌트에서는 버튼을 클릭했을 때 상품 옵션 카드가 생성될 수 있도록 동작한다.

  const [cardList, setCardList] = useState([default_productform]); <-- Input 데이터를 위한 객체 값을 기본값으로 설정.
  
  const addCard = () => {
    let id = cardList[cardList.length - 1].id;
    let temp = [...cardList].concat({ ...default_productform, id: id + 1 });
    setCardList(temp);
  };
  

<div>
    {cardList.map((card, idx) => {
          return (
            <Infocard
              key={idx}
              cardList={cardList}
              setCardList={setCardList}
              card={card}
            ></Infocard>
          );
        })}
        <button className='infocard-add-btn' onClick={addCard}>
          + 옵션 세트 추가
        </button>
<div/>