[리액트 React] 팬카페 만들기_메뉴마다 다른 색상 넣기(수정)

  const memberClick = (member) => {
    setSelectedColor(member);
    navigate("/Jjanggu");
  };
  const members = {
    jjanggu: "짱구",
    cheolsu: "철수",
    yurl: "유리",
    maenggu: "맹구",
    huni: "훈이",
  };

      <Members>
        <ul>
          {Object.keys(members).map((item, idx) => {
            return (
              <List
                key={idx}
                onClick={() => {
                  memberClick(item);
                }}
                // 선택한 리스트를 찾기 위한 변수 selectedColor에 설정한 색상과 매개변수의 색상이 맞는지 확인
                selected={selectedColor === item}
                selectedMember={selectedColor}
                member={item}
              >
                {`${members[item]}`}
              </List>
            );
          })}
        </ul>
      </Members>

const List = styled.li`
  width: 10%;
  border-radius: 1rem;
  padding: 10px;
  text-align: center;
  border: 3px solid ${(props) => memberColor(props.member)};

  /* List에서 선택한 li가 맞다면 백그라운드 컬러를 바꿀것 */
  background-color: ${(props) =>
    props.selected ? memberColor(props.selectedMember) : "transparent"};

  &:hover {
    cursor: pointer;
    background-color: ${(props) => memberColor(props.member)};
  }
`;

const memberColor = function (members) {
  switch (members) {
    case "jjanggu":
      return "#ff242482";
    case "cheolsu":
      return "#03a9f496";
    case "yurl":
      return "#ffc0cbab";
    case "maenggu":
      return "#ffea32cc";
    case "huni":
      return "#8bc34ab0";
    default:
      return "떡잎마을 방위대";
  }
};​

 

기본으로 멤버이름에 각각 다른 색상의 보더컬러가 들어가 있어야 한다, 멤버 이름을 클릭하면 보더컬러에 맞는 백그라운드 컬러가 들어가고 멤버 페이지로 넘어가야 하는데 클릭 이벤트 실행 시 백그라운드 컬러를 바꿈과 동시 멤버 페이지로 이동을 해야 한다 이전 코드는 switch문에서 멤버 이름을 한글로 반환했기 때문에 useNavigate를 사용하려면 한글로 넣어야 한다, 그럼 페이지 이름도 모두 한글로 바꿔야 하는 문제가 발생했다. 결국 해결은 됐으나 너무 정신 없이해서 아래 설명을 제대로 적은 건지 잘 모르겠다... 코드를 다시 하나씩 곱씹으며 읽어봐야겠다

 

문제 해결

1. members {영어이름 : 한글 이름} 객체를 만들고 Object.keys(members). map((item, idx)으로 멤버 영어이름을 기준으로 반복한다
2. 스위치 문에서 멤버 이름을 인자로 받아 각 멤버의 색상을 반환
3. 멤버 이름 클릭 시 멤버 이름(key = 영어이름)을 인자로 받아서 selectedMember에  setSelectedColor상태(객체 키 값을 통해 반환된 색상)를 담아 삼항연산자를 이용해 멤버 이름에 맞는 백그라운드컬러를 설정한다