현재는 수로 점수, 플래그 점수로만 관리자 페이지의 필터링이 가능한 상태인데 우리 길드 마스터의 요청으로 관리자 페이지에 길드원 이름으로 필터링 기능을 추가했다.

기존에 필터링 로직이 있었기 때문에 character_name만 추가하면 돼서 아주 간단한 작업이었다!

interface Filter {
  value: number;
  operator: string;
}

interface Filters {
  character_name: string;
  suro_score: Filter;
  flag_score: Filter;
  logical_operator: string;
}

// 초기 상태 정의
const initialFilters: Filters = {
  character_name: "",
  suro_score: { value: 0, operator: "min" },
  flag_score: { value: 0, operator: "min" },
  logical_operator: "and",
};

---

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);

      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;
      }
    });
  };

---

 <TextField
            label="닉네임"
            variant="outlined"
            style={{ marginRight: "5px" }}
            size="small"
            value={filters.character_name}
            onChange={(e) =>
              setFilters({
                ...filters,
                character_name: e.target.value
              })
            }
          />

작업 하는 김에 페이지에 길드 정보도 추가하고, 조금 더 보기 좋게 해봤다!

요구 사항에 맞춰 기능 추가하는 것도 너무너무 재미있고 뿌듯한 것 같다.