[Project] Pre-onboarding: Sir.Loin

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

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

👀 Repository

配備アドレス
アドレス

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

Front-end

React

Styled-components

Common

Github

Slack

▼▼▼▼課題の概要

商品に関する基本情報、登録、注文、出荷、販促など多くのオプションを管理できるサイトが実装されています.主な機能は,フィルタ関数とCustom Toggleボタンを用いて商品の露出度合いを変えることである.

💻 タスク実装リスト

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

Material-UIライブラリを使用して、カレンダおよび時間コンポーネントを指定します.

で設定された期限が満了した場合、自動的にステータスを変更できます.

設定期間内の日付選択機能を無効にします.

ボタンを有効にすると、別のボタンの機能が無効になります.

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

チェック・ボックスを選択および選択解除することで、商品のカテゴリを指定およびキャンセルできます.

では、サムネイル画像を1つしかアップロードできません.

商品名を選択すると、該当商品コード画面が出力されます.

商品オプション

ボタンを押すと、他の構成部品を作成および削除できます.

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

ユーザに画像アップロード領域とアップロードされた画像ファイル名露光機能を提供する.

でアップロードされた削除画像ボタンはアップロード状態で削除されます.

商品配送の設定

カスタム切替ボタン

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

カスタム切替ボタン

🙋🏻実施内容

カテゴリの指定

チェックボックスを選択することにより、当該商品のカテゴリ

を指定することができる.

「チェックボックスの指定解除」または「カテゴリX」ボタンを使用すると、カテゴリ

の指定を解除できます.

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

関数では、レンダリングのたびにデータがロードされますが、定数データは不変のデータなので、メモリが漏洩した場合に関数に配置する必要はありません.

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>
 );
}