[합주시간표 프로젝트] 02# 합주 시간표 제작 - 멤버 선택

완성본

---

메인 기능 : 멤버를 선택하면 시간표를 만들 수 있다.

- 멤버 선택, 선택한 멤버 표시, 토글창, 경고문구

---

생각보다 반응이 매우매우매우 폭발적이다.

아직 부족한게 많은데 칭찬 해주셔서 매우 감사.. 멋있다고 해주셔서.. 매우감사...

 

아무래도 내가 직접 사용자 입장에서 만들다 보니

불편한점을 최대한 없애기위해 많이 생각하고 노력한것 같다.

 

만들면서 고려한 기능은 이렇다.

1. 멤버를 여러명 선택할 수 있을 것.

2. 두명 이상의 멤버를 반드시 선택하고, 그렇지 않을 경우 경고 메세지를 띄울 것

3. 보기 편하게 선택한 멤버를 한번에 보여주는 div를 만들 것

4. 선택 완료를 누르면 제목을 입력하는 칸을 만들것.

-> 모달창으로 제작함

5. 간지용 애니메이션을 넣을것

 

---

01. 멤버 선택 코드

---

여러명을 선택해야하므로 checkbox를 통해 만들었다.

{names.map((name, index) => (
   <div className="nameli" key={index} onClick={() => document.getElementById(`name${index}`).click()}>
      <input type="checkbox"
             id={`name${index}`}
             onChange={() => checkMember(name)}/>
      <label htmlFor={`name${index}`}>{name}</label>
   </div>
))}

names는 이름들이 담긴 list이다. 이 list의 요소들을 출력해서 체크 리스트를 만든다.  

checkbox와 div를 연결해서 div를 눌러도 chcek 박스가 체크되도록 설정하였다.

label htmlFor 처럼 id를 일치시키면 연결이 된다.

✔️onChange

입력 필드의 값을 변경할 때 발생하는 이벤트이다.

체크된 이름들의 값을 모아서 화면 상단에 표시해야하기 때문에

체크했을 때 checkMember 함수를 통해서 이들을 추가하고 제거할 수 있게 하려고 한다.

const [selectNames, setSelectNames] = useState([]);

✔️useState

const [state, setState] = useState(초기값);

- state : 상태

- setState : 상태 업데이트 함수

useState로 선택된 이름을 담을 list를 만든다. 상단에 이 list의 값을 보여주는거다.

const checkMember = (name) => {
        setSelectNames((prev) =>
            //이름 포함되어있는지 확인
            prev.includes(name)
                //이미 있는데 또 눌렀다? 그러면 아 삭제할래 하고 누른거라 판단하죠.
                //filter : 만족하는 요소를 모아 배열로 반환
                //유다빈-조윤민 달라 - true
                //유다빈-유다빈 같아 - false -> 제거
                ? prev.filter((e) => e !== name)
                //없어 -> name을 추가해준다.
                : [...prev, name]
        );
        setWarning(false); 
    };

이게 이번의 핵심 코드이다. 이름을 선택하고 안하고!를 결정하는...

name은 우리가 선택한 이름이다. 우리가 선택한 이름(name)을 인자로 받는다.

setState로 선택된 이름을 관리한다.

prev.includes(name) 로 이전 state 값인 prev에 선택된 이름이 포함되어 있는지 확인한다.

 

그런데 이미 prev에 이름이 있는데 또 인자를 전달 받았다? == 또 누른거다

== 삭제하려고 누른거다!

이기 때문에, 이 겹치는 값을 삭제해주어야한다. right?

✔️filter

말 그대로 필터링. 조건에 만족하는 요소를 배열로 반환한다.

true면 유지, false면 제거

 

prev.filter((e) => e !== name)

prev의 요소인 e와 선택한 이름 name이 다를 경우 = true이고, 같을 경우는 false로 제거가 된다.

뭔말이냐?

prev에 [유다빈, 조윤민, 김병무]가 있다고 하자.

name이 '유다빈'일 때,

e(조윤민) - name(유다빈)이 다르면 냅둠

e(유다빈) - name(유다빈)이 같으면 지운다.

 

prev에 이름이 없으면 [...prev, name] 이렇게 기존 배열에 name을 추가하면 된다.

 

<div className='Parti'>
  {selectNames.map((name, index) => (
      <span id='view_name' key={index}>{name}</span> ))}
</div>

이렇게 완성된 list를 map으로 통해 출력한다.

그러면 이렇게 선택된 이름이 상단에 표시되는 부분이다.

바로 뚝뚝 나오는게 별로라서 애니메이션을 따로 구현하였다.

(모든 애니메이션 구현은 다음 포스팅에 적도록 하겠다.)

 

02. 경고 문구 코드

---

멤버들을 선택하고 선택 완료 버튼을 누르면 토글창이 뜬다. 

하지만 합주를 하기 위해서는 최소 2명의 사람이 있어야 한다. (사실 이것도 적지만)

그래서 두명 이상의 멤버를 선택하지 않을 경우 경고를 띄워주기로 하였다.

꽤 간단하다. 

두명이상인게 만족되면 경고창 false(경고창 안뜨니까 F), 아니면 true (경고창 뜨니까 T)

    const nextButFunc = () => {
        if (selectNames.length < 2) {
            setShowWarning(true); 
        } else {
            setShowWarning(false); 
            setOpen(true); //모달창열기
        }
    };

아까 상단에 선택한 이름들을 띄우기 위해 만들었던

selectName을 이용했다.

이 리스트 길이가 2를 넘지못하면 경고창 띄우기.

 

03. 모달창 만들기

---

모달창은 잘 정리해주신 블로거가 계셔서 링크 올리도록 하겠다.

참고해서 만들었다. 감사합니다

 

👇참고한 블로그👇

https://jisilver-k.tistory.com/143

---

 

현재는 동아리 친구들의 예시 데이터를 만들어 테스트해보았고,

(데이터 깔끔하게 정리해준 윤호야 고마워👍)

코드를 수정해가며 서버와 연결할 준비를 하고있다.

 

시간표 추가하기 코드를 만들어야하는데 이건 어떻게 해야 편할지 생각을 더 해봐야겠다.

다음 포스팅은 애니메이션이다.

 

끝!