[FE] 행사 삭제 비회원은 불가능하도록 변경

[jinhokim98]

issue

• close [FE] 행사 삭제 비회원은 불가능하도록 변경 #919

구현 사항

비회원은 행사 삭제를 할 수 없도록 설정

회원은 행사 삭제 후 생성한 이벤트 페이지로, 비회원은 행사 삭제 후 랜딩 페이지로 보냈으나, 회의 결과 비회원은 행사 삭제를 할 수 없도록 제한하자는 결과를 반영했습니다.

제한하는 방식은 행사 삭제하기 버튼을 보이지 않도록 하는 것입니다.

Children 타입을 고정하면서 생긴 고려 사항

Dropdown의 children을 DropdownButton으로 제한하고자 ReactElement을 사용했었고 문제가 없었습니다.

export type DropdownProps = {
  ...
  children: React.ReactElement<DropdownButtonProps>[];
}

하지만 게스트 여부로 버튼을 조건부로 보여주는 과정에서 문제가 발생했습니다.

<Dropdown>
  <DropdownButton text="행사 이름 변경" onClick={navigateEditEventName} />
  <DropdownButton text="전체 참여자 관리" onClick={navigateEventMemberManage} />
  <DropdownButton text="계좌번호 입력하기" onClick={navigateAccountInputPage} />
  <DropdownButton text="사진 첨부하기" onClick={navigateAddImages} />
   {!createdByGuest ? (
     <DropdownButton text="행사 삭제하기" onClick={deleteEventAndNavigateCreatedEventsPage} />
   ) : null}
</Dropdown>

이제 children은 DropdownButton과 null 두 가지 타입이 돼서 타입 에러가 발생했습니다.
그래서 null도 포함할 수 있도록 변경했습니다.

export type DropdownProps = {
  ...
  children: (React.ReactElement<DropdownButtonProps> | null)[];
}

어제 여기까지 시도했다가 에러가 나서 금방 해결할 수 없었습니다.
그 이유는 이제 children이 null일 수도 있기 때문에 아래 코드가 문제가 생긴 것이었는데

{children.map((button, index) => (
<DropdownButton key={index} setIsOpen={setIsOpen} {...button.props} />
))}

여기서 button이 null일 수도 있다는 에러를 터뜨리는 것이었습니다. 어제는 시간이 급해서 이를 해결하지 못 했지만 다시 살펴보니 여기서도 조건부로 렌더링 하면 된다는 것을 깨닫고 이렇게 수정했습니다.

{children.map((button, index) => {
  if (button) return <DropdownButton key={index} setIsOpen={setIsOpen} {...button.props} />;
  return null;
})}

이렇게 수정하니 이제 타입 에러가 일어나지 않게 됐고 문제를 해결할 수 있었습니다.

🫡 참고사항

[pakxe]

어후 이런 기능 하나 추가에 여러 곳을 변경해주어야 했군요. 고생많았습니다..!!!

null 을 넣으면 pr본문에서도 작성되어있듯이 여러 곳에서 return null이라는 코드가 추가되어야 해서 조금 불편할 것 같아요. 방법을 생각해봤지만 마땅히 최고다 하는 방법은 없는 것 같네요.

타입 변경 없이 간단하게 이 문제를 해결하는 방법은 2가지 정도 찾을 수 있었어요. 아래처럼 프래그먼트를 반환하면 null추가 없이 기존 타입 그대로 사용할 수는 있어요. 다만 익숙한 표현이 아니다보니 낯설긴 하죠.. 이 방법으로 바꾸라는 의미는 아니에용~!

const A = ({ children }: { children: ReactElement<typeof B>[]; }) => {
  return <div>{children}</div>;
};

const Test = () => {
  const [isTrue, setIsTrue] = useState(true);

// 방법 1
  return (
    <A>
      <B />
      {isTrue ? <B /> : <></>}
    </A>
  );
  
  // 방법 2
   return (
    <A>
      <B />
      <>{isTrue && <B />}</>
    </A>
  );
};

[soi-ha]

회원과 비회원의 기능 차이가 더 명확해진 것 같아서 좋아요! 고마워요 쿠키~!

[soi-ha]

의견 반영해주셔서 감사합니닷!

[jinhokim98]

@pakxe 저도 처음에 이 두 가지 방식을 시도했었는데;;; 이렇게 되어버리더라구요...ㅜㅜ

1번 Fragment를 사용한 결과는

2번 &&을 사용한 결과는 이런 에러가 나옵니다..
Type 'false | Element' is not assignable to type 'ReactElement<DropdownButtonProps, string | JSXElementConstructor> | null'.
Type 'boolean' is not assignable to type 'ReactElement<DropdownButtonProps, string | JSXElementConstructor>'.ts(2322)

그래서 이 두 가지 방식을 사용하지 못 했어요...