Skip to main content

2024/03/15

일지 기록#

info

[ 2024/03/15 ]

🧐 Problem#

  • type 을 굳이 extend 하여 interface 화 할 이유가 있나?
  • 네이밍
  • 컴포넌트 분리

👀 Analysis#

코드리뷰에서

type 추가한 부분에 있어서

I로 시작하는데 Type으로 끝나는 워딩으로 const에 있을게 왜 여기 있나 찾아보게 되네요🐣

IInviteProfile과 별개로 별도의 인터페이스를 생성한 이유가 있을까요?

라는 피드백을 받게되었고

export interface IInviteProfile {  id: string;  name: string;  tel: string;  type?: 'user' | 'group';}

로 수정하게되었다.

로직 부분에서는

아래 로직 컴포넌트로 분리 해서 작업하는건 어떨까요 ? JSX return 문 안쪽에 너무 많은 로직이 있는 것 같아서 컴포넌트로 분류 하고 isUser 인경우의 return 과 그 외의 return 문으로 분류해서 처리하는게 좋을 것 같습니다~

초대 대상이 추가될때 마다 이쪽 로직을 수정해줘야하는데 불편할 것 같습니다!

에 대한 피드백으로 아래와 같이 수정하게되었는데….

const isUser = (item: IInviteProfile): JSX.Element => {    if (inviteType === 'user') {      return <span>({item.id})</span>;    }    return <span>({item.tel})</span>;  };
  return (    <Box className={classes.wrapper}>      {selectedData.map((item, index) => (        <div key={index} className={classes.item}>          {item.type === 'group' && <img src={`${process.env.PUBLIC_URL}/images/icon_group.png`} alt="icon_group" />}          {item.name}          {item.type === 'user' && isUser(item)}          {!disabled && (            <button className={classes.button} onClick={(): void => handleClick(item)}>              <img className={classes.arrow} src={`${process.env.PUBLIC_URL}/images/no_img2.gif`} alt="no-image" />            </button>          )}        </div>      ))}    </Box>  );

이거를 선배가 다 뜯어고쳐서…

const UserItem = ({  profile,  inviteType,  onDelete,}: {  profile: IInviteProfile;  inviteType: InviteType;  onDelete(item: IInviteProfile): void;}): JSX.Element => {  const id = inviteType === 'user' ? profile.id : profile.tel;  const isGroup = profile.type === 'group';  const [ref, isEllipsis] = useEllipsis();  const [open, setOpen] = useState(false);  const classes = useStyles();
  const handleMouseEnter = (): void => {    setOpen(true);  };
  const handleMouseLeave = (): void => {    setOpen(false);  };
  return (    <Box className={classes.item} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>      <Box className={classes.itemInfo}>        {isGroup && <UsersGroupIcon color={'action'} />}        <MuiTooltip title={`${profile.name} (${id})`} open={isEllipsis && open} classes={{ tooltip: classes.tooltip }}>          <Typography ref={ref} component={'p'} ellipsis variant="body14" color={'secondary'}>            {profile.name}            {!isGroup && (              <Typography component={'span'} variant="body14" color={'label'}>                &nbsp;({id})              </Typography>            )}          </Typography>        </MuiTooltip>      </Box>
      {open && <CloseIcon className={classes.deleteIcon} color={'action'} onClick={(): void => onDelete(profile)} />}    </Box>  );};

이렇게 UserItem 으로 만들고

return (    <Box className={classes.wrapper}>      {selectedData.map(profile => (        <UserItem key={profile.id} profile={profile} inviteType={inviteType} onDelete={handleDelete} />      ))}    </Box>  );

UserItem 을 return 할 수 있도록 만들었다.

🌈 Solution#

🎯 Outcome#

👼 Reflection#