2024/03/14

일지 기록#

info

[ 2024/03/14 ]

🧐 Problem#

전 요구사항에서 개인/팀 인 경우 사용자에게 노출되는 이미지와 이름이 다르다는 것을 놓쳤다.

👀 Analysis#

inviteProfile 에서는 타입이 없으므로 타입을 추가해줘야한다.

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

이렇게 extends 를 하게 하였고,

<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}          {(inviteType === 'partner' || inviteType === 'user') && item.type === 'user' && (            <span>({inviteType === 'partner' ? item.tel : item.id})</span>          )}          {!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>

이렇게 user 타입과 partner 타입으로 분리하여 진행하였다.

실제로 데이터를 넣어줄때에는

this.partnersAndPartnerGroups = [...this.partnersAndPartnerGroups, { ...group, type: 'group' }];

이렇게 type 을 따로 넣어주고

🌈 Solution#

위에 내용도 있고 근데 코드리뷰에서 털림

🎯 Outcome#

실제로 돌아가고