[Project] Pre-onboarding: Sir.Loin

🏃🏻‍♀️ プロジェクトの継続時間と人員

📆 2022年1月27日から1月29日まで/Front-endの4人

👀 Repository

🍕 テクノロジーアーキテクチャ

Front-end

Common

▼▼▼▼課題の概要

💻 タスク実装リスト

露出時間と販売期間の設定

商品基本情報（本人責任）

商品オプション

商品紹介イメージ、バイヤー推薦イメージ

商品配送の設定

商品の取扱許可の設定、その他の設定

🙋🏻実施内容

カテゴリの指定

カテゴリ・リストと商品名定数データを使用した管理

const CATEGORY_LIST = [
  { id: 0, data: '구이용' },
  { id: 1, data: '안심' },
  { id: 2, data: '등심' },
  { id: 3, data: '채끝' },
  { id: 4, data: '특수' },
  { id: 5, data: '양념' },
  { id: 6, data: 'Bone' },
  { id: 7, data: '선물제안' },
  { id: 8, data: '이벤트' },
  { id: 9, data: '요리용' },
  { id: 10, data: '무료배송' },
  { id: 11, data: '세트' },
];

商品の基本情報をチェックボックス、選択、キャンセルで表示

function ProdBasicInfo() {
  
  // 카테고리를 클릭했을 때 값을 바꿔주는 state. 초기값은 빈배열.
  const [checkedList, setCheckedList] = useState([]);
 
  // onChange이벤트를 통해서 checked(Boolean)값, item(value)값을 받아온다.
  const onCheckedElement = (checked, item) => {
    // check되었을때 check된 value값을 빈배열인 checkedList에 업데이트를 해준다
    if (checked) {
      setCheckedList([...checkedList, item]);
    } 
   /* filter함수는 반환값이 true인것만 구성된 새로운 배열을 반환한다.
    클릭된값이 item이고 item이 el랑 다른 경우가 true, 즉 클릭된 요소가 빠진 배열을 반환하는 것임. */
    else if (!checked) {
      setCheckedList(checkedList.filter(el => el !== item));
    }
  };
  
  /*체크박스가 아닌 카테고리 배너의 x를 클릭했을 때 해제되는 기능.
  위에있는 체크박스 해제하는 원리와 동일하게 동작함!*/
  const onRemove = item => {
    setCheckedList(checkedList.filter(el => el !== item));
  };
  
return (
      <S.CategoryContainer>
        <S.SubTitle>카테고리 *</S.SubTitle>
        <S.SelectContainer>
          <S.CheckBox>
  // 상수데이터 카테고리 리스트에 맵을 활용하여 렌더링 함
            {CATEGORY_LIST.map(item => {
              return (
             /* 고유 key값 부여. 
             배열을 렌더링 했을 때 key값을 통해 배열의 어떤 원소에 변화가 있었는지를 알아낸다.*/
                <S.Label key={item.id}>
  /*여기서 Check는 Input태그. type을 체크박스로 지정하고 
  value값은 CATEGORT_LIST의 data값으로 지정*/
                  <S.Check
                    type="checkbox"
                    value={item.data}
// onChange이벤트를 통해 변화를 감지하고 onCheckedElement함수에 check여부와 check된 value값을 전달해준다.
                    onChange={e => {
                      onCheckedElement(e.target.checked, e.target.value);
                    }}
                    // 선택된 상태를 말하는 것. checkeList에 요소가 있으면 true, 없으면 false.
                    checked={checkedList.includes(item.data) ? true : false}
                  />
// 체크박스 리스트에 출력될 data값.
                  <S.Type>{item.data}</S.Type>
                </S.Label>
              );
            })}
          </S.CheckBox>
          <S.SelectedBox>
            /* 카테고리란
           checkedList의 길이가 0이라면 빈배열이란 뜻으로 기본값이 '카테고리를 지정해 주세요' 문구를 출력한다.*/
            {checkedList.length === 0 && (
              <S.AlertMessage>카테고리를 지정해 주세요.</S.AlertMessage>
            )}
            // 선택된 값들을 관리하는 것이므로 checkedList에 map을 활용한다.
            {checkedList.map(item => {
              return (
                <S.SelectedCategory key={item}>
                  <S.Selected>{item}</S.Selected>
                  <S.CancelChecked onClick={() => onRemove(item)}>
                    X
                  </S.CancelChecked>
                </S.SelectedCategory>
              );
            })}
          </S.SelectedBox>
        </S.SelectContainer>
      </S.CategoryContainer>
 );
}

商品名選択時に該当商品コード画面に出力

同様に、商品リストを定数データとして管理する

const PRODUCT_DATA = [
  { id: null, value: '상품을 선택하세요.' },
  { id: '0001', value: '알꼬리 300g' },
  { id: '0002', value: '미니샤토 150g' },
  { id: '0003', value: '안심추리 150g' },
  { id: '0004', value: '안심슬라이스 150g' },
  { id: '0005', value: '립아이' },
  { id: '0006', value: '로스 등심 200g' },
  { id: '0007', value: '꽃등심 200g' },
  { id: '0008', value: '채끝 등심 200g' },
];

選択した商品の商品コードをドロップダウンメニューから入力、出力します。

function ProdBasicInfo() {
  
  // 상품명, 상품코드 출력을 위한 state
  const [selectedDropValue, setSelectedDropValue] =
    useState('상품을 선택하세요.');

const handleDropProduct = e => {
  // e.target.value. 구조분해로 e.target에서 타겟팅 된 요소의 value를 가져옴. 즉, 선택된 요소!
    const { value } = e.target;
  // PRODUCT_DATA는 id(상품코드)와 value(상품명)로 구성된 객체들로 구성된 배열. filter함수를 써서 선택된 상품명과 PRODUCT_DATA 에 있는 상품명이 일치하는 배열을 반환. 인덱스 0과 id를 사용하여 배열 안에 있는 객체에 접근하여 id값을 추출한다. id값이 상품코드. 이 id값을 selectedDropValue에 업데이트.
    setSelectedDropValue(PRODUCT_DATA.filter(el => PRODUCT_DATA.filter(el => el.value === value)[0].id));
  };

return (
<S.ProductNameContainer>
        <S.SubTitle>상품명 *</S.SubTitle>
        <S.ProductBar>
  // select태그와 option태그를 사용하여 드롭다운 메뉴를 만들었다.
          <S.ProductSearch onChange={handleDropProduct}>
            {PRODUCT_DATA.map(el => {
              return (
                <option key={el.id}>
                  {el.value}
                </option>
              );
            })}
          </S.ProductSearch>
        </S.ProductBar>
        <S.ProductCode>
          <S.Code>상품 코드</S.Code>
// 상품코드 출력
          <S.ShowingCode>{selectedDropValue}</S.ShowingCode>
        </S.ProductCode>
      </S.ProductNameContainer>
 );
}