아직 부캐 길드 관련 로직을 구현하지 못해서 조금이나마 불편함을 덜기 위해 관리자 페이지의 길드 컨텐츠 기록 테이블에 해당 캐릭터의 본캐릭명이 출력되도록 했다.

일단 recordController에서 main_character_name도 클라이언트로 같이 전송해주도록 코드를 수정했다.

// recordController.js

const getRecordsController = async (req, res) => {
 
		...

   const characters = await CharacterService.getCharactersByGuild(guildName, worldName);
    const charactersMap = characters.reduce((acc, character) => {
      acc[character.id] = character;
      return acc;
    }, {});

    const charactersRecords = await Promise.all(
      characters.map(async (character) => {
        const records = await RecordService.getRecordsByCharacterId(character.id, week);
        return records.map((record) => ({
          ...record.toJSON(),
          character_name: character.name,
          main_character_name: character.main_character_name,
        }));
      })
    );
    const response = charactersRecords.flat();

    res.json(response);

   ...
};

클라이언트에서 main_character_name을 잘 받아온다.

그 후 닉네임으로 필터링 하는 부분에 본캐릭명도 같이 조회가 되도록 추가하였다.

api 조회가 불가능 한 23년 12월 21일 이후 미 접속 캐릭의 경우 본캐릭명 값이 null이기 때문에 null check가 필수였다.

const getFilteredRowIds = () => {
    return tableData.filter((row) => {
      const characterName = filters.character_name.toLowerCase(); // 대소문자 구분 없애기 위해 소문자로 변경
      const suroScore = filters.suro_score.value;
      const flagScore = filters.flag_score.value;

      const characterNameCondition =
        characterName === "" ||
        row.character_name.toLowerCase().includes(characterName) ||
        (row.main_character_name && row.main_character_name.toLowerCase().includes(characterName));

      const suroCondition =
        suroScore === undefined ||
        (filters.suro_score.operator === "max"
          ? row.suro_score <= suroScore
          : row.suro_score >= suroScore);
      const flagCondition =
        flagScore === undefined ||
        (filters.flag_score.operator === "max"
          ? row.flag_score <= flagScore
          : row.flag_score >= flagScore);

      if (filters.logical_operator === "and") {
        return (suroCondition && flagCondition) && characterNameCondition;
      } else {
        return (suroCondition || flagCondition) && characterNameCondition;
      }
    });
  };

완성! 제대로 잘 필터링 돼서 나온다!

++ 팀원은 본캐릭명이 안 보이길 원해서 본캐릭명 보이기 / 숨기기 버튼을 추가했다.

 const [isHidden, setIsHidden] = useState(false);
  const toggleDisplay = () => {
    setIsHidden(!isHidden);
  };

---

<button className={styles.buttonStyle} onClick={toggleDisplay}>
          {isHidden ? '본캐릭명 보이기' : '본캐릭명 숨기기'}
</button>