20210628,29 Tooltip 리팩토링

28

작업현황

- 주문 > 합포장 > 합포장 완료주문: 상품명 셀폭 절대값 적용하여 두줄로 내용 표시

- 주문 > 합포장 > 합포장 오류주문: 툴팁 구현

 

29

feat(balloon tooltip): refactor tooltip logics for reusability
- 주문, 매칭, 합포장, 관리에 적용되는 툴팁 리팩토링(위치변화)
- EZTable 컴포넌트에 툴립 컴포넌트 적용하여 재사용성 향상

 

 

재사용성을 고려하여 툴팁을 Table 컴포넌트에 적용(위치)시켜 조건에 따라 불러오게 구현.

매번 해당 컴포넌트에서 툴팁을 불러올 필요가 없다. 

 

해당 코드는 아래와 같다. type prop 을 확인하여 해당 툴팁을 적용하는데, 이때 rowData 와 type 의 타입을 맞춰주는 것이 중요하다. 

타입스크립트 공부가 필요한 부분.

<Table>
if (v.type === 'string') {
      return {
        ...v,
        render: (rowData: any, type: 'row' | 'group') => {
          if (!v.render) return;
          const contents = v.render(rowData, type);

          return (
            <ArrowTooltip
              text={contents}
              openOnHover
              arrowPlacement="bottom-start"
              TooltipProps={{
                arrow: true,
                placement: 'bottom-start',
              }}
            >
              <CustomTooltipChild text={contents} />
            </ArrowTooltip>
          );
        },
      };
    }
    
<Column>
    {
         title: '옵션명',
         type: 'string',
         render: row => {
           if (isChildRow(row) || isSingleRow(row)) {
             const option = formatOption(
               row.productOptionLevelOn  
               row.productOptionLevelTwo
             );
             return option;
           }
         },
    },