항해99 9주차 Weekly I Learn(실전 프로젝트 2주차)

What I Learned

- 다중 선택이 가능한 카테고리를 개발해보자

• 각기 다른 색을 가진, 그리고 클릭시 색이 바뀌는 버튼
• 검색 선택옵션에서 다중 선택을 하여 선택한 값들이 서버로 요청 시 넘어갈 수 있도록 상태관리가 필요한 버튼  

- 실전 프로젝트를 하면서 기술적으로 막혔던 부분은?

1. Mui Modal 안에서 스타일컴포넌트로 커스텀한 Input radio Button 동작 안되는 현상 

• Mui 프레임워크에서 Modal 기능을 가져다 쓰는데 Modal 창 안에서 label htmlFor 을 통한 radio button이 동작을 하지 않는 현상 발생 (스타일 컴포넌트 Input type="radio" 와 label 속성을 줌)
• DataList=[ {name="카테고리이름", hex="컬러값"}, {...}, ... , {...} ] 의 데이터를 맵돌림. 

<StInputRadio
    id={category.name}
    type="checkbox"
    name="category-selector"
    value={category.name}
    color={category.hex}
/>
<StRadioLabel htmlFor={category.name} color={category.hex}>{category.name}</StRadioLabel>

2. Category Button을 만들 때 다중선택과 하나만 선택 할 수 있게 Element 컴포넌트 만들기

• 디자이너 분이 주신 시안은 Category Button을 눌렀을 때 Background-color와 color 속성이 바뀌는 형식인데 여기에 다중선택이 가능하고 하나만 선택할 수 있는 기능적 요소와 특정 값을 보내기 위해 button을 눌렀을 때 어떤 식으로 로직을 구성해야 좋을지 고민해봄.

 

- 해결했다면 어떻게 해결하였는지?

1. Mui Modal 안에서 스타일컴포넌트로 커스텀한 Input radio Button 동작 안되는 현상 

• 에러 범위를 좁히기 위해 여러가지 시도를 하던 중 알게 된 사실
  1. 하드 코딩 시 동작이 된다... map 안에서 돌고 나서 동작이 안되는 부분으로 보인다
  2. htmlFor을 이용한 label로 radio 버튼 동작도 원활
• 아주 멍청하고 바보같은 행동을 했다. 문제는 테스트를 위해 만든 페이지에 같은 id를 주고 만든 button을 띄워놓고 modal 안에서도 그대로 실행하려하니 id가 중복이 되어 작동하지 않았던 것이다. 상위 페이지에서 만든 버튼 컴포넌트를 삭제하니 잘 작동하였다.. ㅠㅠㅠ

2. Category Button을 만들 때 다중선택과 하나만 선택 할 수 있게 Element 컴포넌트 만들기

• CSS 적 요소는 검색을 통해 해결(Radio type의 Input을 커스텀 할 때 label을 이용 할 수 있다)
• useState를 이용하여 다중선택 시 상태변경 된 값을 저장하여 검색 시까지 이용하도록 하였다.