[💌 FEATURE REQUEST] Group 컴포넌트를 구현한다

[JengYoung]

멈춰! 🖐🏻 잠시 체크 들어갑니다~

• [X] 다음 페이지에서 중복되지 않음을 확인했어요. 🙆🏻
• [X] 다른 분들께서 허락해주신다면, 제가 구현해보고 싶어요! 🙆🏻‍♀️

배경 및 설명

44 의 선행 이슈이다.

모든 컴포넌트를 묶는 그룹 컴포넌트를 지원한다.

이 이슈는 밑의 코멘트로 인해 수정되었습니다.

그룹을 묶는 책임을 갖고 있는 BlockGroupWrapper와 BlockGroupMember을 구현합니다. 둘의 책임이 완전히 다르며, 고로 컴포넌트 설계상에서 분리되어야 하기 때문에, 이와 같이 설계합니다.

기대결과

BlockGroupWrapper

• [x] GroupWrapper은 펼칠 수 있고, 접을 수 있어야 한다.
• [x] GroupWrapper이 클릭되면 토글여부를 설정한다
• [x] GroupWrapper이 클릭되면 해당 그룹 색상이 활성화되어야 한다.
• [x] GroupWrapper이 활성화되면 그룹의 textContent는 bold처리 되어야 한다.
• [x] GroupWrapper의 이름을 더블클릭하면 이름을 바꿀 수 있다

BlockGroupMember

• [x] BlockGroupMember이 클릭되면 해당 멤버 색상이 활성화되어야 한다.
• [x] BlockGroupMember이 활성화되면 그룹의 textContent는 bold처리 되어야 한다.
• [x] BlockGroupMember된 상태에서 그룹의 이름을 더블클릭하면 이름을 바꿀 수 있다

마크업 다 구현하고 유지보수하려다, 꽤나 이 컴포넌트의 명세가 만만치 않음을 깨닫고 재설계해본다! 😖

대안 제시

피그마를 참고한다.

참고자료

Seeyouletter Figma

[JengYoung]

경과

이거... 마크업 로직은 쉬운데, UX적으로 따지니까 좀 더 구조를 세분화할 필요가 있는 재미있는 컴포넌트인 듯하다.

생각해보자.

Group이라는 것은 과연 '독립적으로 존재하는 컴포넌트'일까?

결론을 이야기하자면 '그렇다'이다.

왜?

Group의 특징은 다음과 같다.

• 일련의 컴포넌트를 묶는 독립적인 기능을 갖고 있다.
• 별도의 이름을 갖고 있다.
• 추후 이를 백엔드에서 갖고 올 때에도, 이 그룹은 유지되어야 한다.

일단 첫 번째 특징에서 이미 결론이 났다. 따라서 이 명세를 좀 더 구체화할 필요가 있다.

어떻게 구체화할까?

일단 다음과 같이 생각한다.

BlockGroupWrapper

그룹을 묶는 역할을 한다.

BlockGroupMembers

그룹 안에 속한 멤버들이다.

이런 구조가 되어야 한다.

BlockGroupWrapper
⎿ BlockGroupMembers
    ⎿Member1
    ⎿Member2
    ⎿...

상세 디테일 설계

BlockGroupWrapper은 토글 권한을 갖고 있어야 한다. 즉 해당 토글을 활성화했다면 토글이 계속 되어야 하고, 반대라면 없어져야 한다.

이는 그룹을 클릭하는 것으로 충분히 해결할 수 있다.

즉 클릭은 멤버의 클릭과 그룹의 클릭이 별도로 수행되어야 한다. 둘의 클릭에 대한 책임이 다르기 때문이다.

• BlockGroupMember의 클릭: 멤버에 해당하는 컴포넌트가 활성화된다 + 슬라이더에서 해당 멤버 색상이 활성화되어야 한다.
• GroupWrapper의 클릭: 그룹이 토글여부를 설정한다 + 슬라이더에서 해당 그룹 색상이 활성화되어야 한다.

이를 같게 설계해서 꽤나 초기 유지보수에 애를 먹었다. 😖 역시, 요새 프론트엔드를 하면서 느끼는 건 정말 초기 컴포넌트 설계 잘 짜야 한다. 이러한 고민이 분명 나중에 더 많은 시간 절약을 이루어낼 것이다 🥰

[JengYoung]

고로 다음과 같이 이번 이슈의 목표를 바꿔야 한다.

Group 컴포넌트와 이에 해당하는 GroupMember 컴포넌트를 구현한다