[FE] 전체 참여자 관리 페이지 구현

[soi-ha]

issue

• close [FE] 전체 참여자 관리 페이지 구현 #583

구현 사항

DepositToggle 디자인 변경

전체 참여자 관리 페이지 디자인 변경

참여자 입금 상태 (isDeposited) 변경하기

const toggleDepositStatus = (memberId: number) => {
  setReports(prevReports =>
    prevReports.map(report =>
      report.memberId === memberId ? {...report, isDeposited: !report.isDeposited} : report,
    ),
  );

  setChangedMembers(prev => {
    const existing = prev.find(member => member.id === memberId);
    const name = reports.find(report => report.memberId === memberId)?.memberName ?? ''; // 기본값 제공
    const newIsDeposited = !reports.find(report => report.memberId === memberId)?.isDeposited ?? false;

    if (existing) {
      return prev.map(member => (member.id === memberId ? {...member, isDeposited: newIsDeposited} : member));
    }
    return [...prev, {id: memberId, name, isDeposited: newIsDeposited}];
  });

  setIsCanRequest(true);
};

참여자 이름 변경하기

const changeMemberName = (memberId: number, newName: string) => {
  // 유효성 검사 (4글자)
  if (!validateMemberName(newName).isValid) {
    return;
  }

  setReports(prevReports =>
    prevReports.map(report => (report.memberId === memberId ? {...report, memberName: newName} : report)),
  );

  setChangedMembers(prev => {
    const existing = prev.find(member => member.id === memberId);
    const isDeposited = reports.find(report => report.memberId === memberId)?.isDeposited ?? false; // 기본값 제공

    if (existing) {
      return prev.map(member => (member.id === memberId ? {...member, name: newName, isDeposited} : member));
    }
    return [...prev, {id: memberId, name: newName, isDeposited}];
  });

  setIsCanRequest(true);
};

참여자 삭제하기

const handleDeleteMember = (memberId: number) => {
  setDeleteMembers(prev => [memberId, ...prev]);
  setReports(prevReports => prevReports.filter(report => report.memberId !== memberId));
  setChangedMembers(prev => prev.filter(member => member.id !== memberId));
};

FixedButton 활성화/비활성화 조건

• 비활성화 조건

  • 삭제한 member가 존재할 경우

  • 전체 참여자 리스트에서 중복된 이름이 존재할 경우

    단, 삭제한 member 이름은 중복에 포함되지 않는다.

  • 새로 입력된 member의 이름이 유효하지 않는 경우

    member의 이름은 1글자 이상 4글자 미만이어야 한다.

• 활성화 조건

  • 초기의 값에서 단 하나라도 변경이 존재하는 경우
    • memberName이 유효한 경우
    • isDeposited가 변경된 경우
    • 삭제된 member가 존재할 경우

위 조건에 따라 setIsCanRequest(서버에게 요청 가능/불가능)를 변경한다.

useEffect(() => {
  const changedMembers = getChangedMembers();

  // 중복된 이름이 존재할 경우 isCanRequest를 false로 변경
  if (hasDuplicateMemberName()) {
    setIsCanRequest(false);
  } else {
    // 변경된 사항이 존재하거나 삭제한 member가 존재한다면 isCanRequest를 true로 변경
    setIsCanRequest(changedMembers.length > 0 || deleteMembers.length > 0);
  }

  // memberName 유효성 검사 (0글자)
  const hasEmptyName = changedMembers.some(member => member.name.trim().length === 0);
  if (hasEmptyName) setIsCanRequest(false);

  setFilteredChangedMembers(changedMembers);
}, [reports, changedMembers, deleteMembers]);

변경된 값과 초기값을 비교하여 변경된 값만을 가지는 filteredChangedMembers를 가진다.

이때, changedMembers는 초기값과 동일한 것도 포함된다.

filteredChangedMembers는 초기값과 동일하지 않은 변경사항만을 말한다.

const getChangedMembers = () => {
  // 초기 상태에서 변경된 값이 존재하는 것만 filtering하여 return 한다.

  // 초기 상태에서 memberId를 키로 갖는 맵 생성
  const initialReportsMap = new Map(initialReports.map(report => [report.memberId, report]));

  // 변경된 값(changedMembers)에서 초기 상태와 동일한 값을 삭제
  const filteredChangedMembers = changedMembers.filter(changedMember => {
    const initialMember = initialReportsMap.get(changedMember.id);
    return (
      !initialMember ||
      initialMember.memberName !== changedMember.name ||
      initialMember.isDeposited !== changedMember.isDeposited
    );
  });

  return filteredChangedMembers;
};

서버에게 api 요청하기

삭제 요청(DELTE)을 진행한 후에, 변경 요청(PUT)을 진행한다.

const updateMembersOnServer = () => {
  // 삭제할 member(deleteMembers)가 존재한다면 Delete 요청 실행
  if (deleteMembers.length > 0) {
    for (const id of deleteMembers) {
      deleteMember({memberId: id});
    }
  }

  // 변경된 값(filteredChangedMembers)이 존재한다면 PUT 요청 실행
  if (filteredChangedMembers.length > 0) {
    putMember({members: filteredChangedMembers});
  }
};

논의할 사항

• 여러분의 PR 발표를 듣다가 깨달은 것인데.. 참여자가 아무도 존재하지 않을 경우에 문구를 추가해야 할 것 같아효 ^^...
• price의 길이에 따라서 memberName의 길이가 달라지는데.. 이걸 어떻게 할 지 고민이에요.

🫡 참고사항

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-flnxxwyngk.chromatic.com/

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-jgybeerdvy.chromatic.com/

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-bnlldtsgys.chromatic.com/

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-oaqgolkkfh.chromatic.com/

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-ijcswkxxae.chromatic.com/

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-cbwmqbwmvs.chromatic.com/

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-rdwsczuhii.chromatic.com/