✨ Feat: 태그 목록 컴포넌트

[wayandway]

연관된 이슈

• close #127

작업 내용

할일카드 내 태그 목록이 있는데, 할일카드 수정 & 할일카드 모달에도 재사용될 수 있어서 컴포넌트로 분리했습니다.

• [x] Tags.tsx 컴포넌트 - 코드 내 주석 참고 부탁드립니다!

  • 프롭으로 태그 목록 데이터, 커스텀 클래스, 삭제기능 토글 값을 받습니다.
  • 오렌지/핑크/블루/그린 색상 중 색상이 랜덤 지정됩니다.
  • 태그명이 같을 경우, 같은 색상으로 지정됩니다.
  • isDeleteOption 프롭이 있어 삭제 기능을 토글할 수 있습니다. (할일카드 수정에서 활용하면 좋을 것 같습니다)

• [x] 태그 컬러 상수 추가 & 기존 generateTagColor 유틸 함수 삭제

스크린샷

삭제 기능 ON

삭제 기능 OFF

코멘트 및 논의 사항

• 꼽사리 커밋 1. ProfileIcon 수정된 부분 반영하면서, 카드 컴포넌트 내 assignee 프로필을 조건부 렌더링 처리했습니다.
• 꼽사리 커밋 2. ColumnsSection 컴포넌트 내에 스크롤 너비 잘못 지정한 게 있어서 수정했습니다.

• 리렌더링 되면 태그 컬러는 계속 랜덤으로 바뀝니다. 한 번 지정된 태그 컬러가 지속되도록 하려면 어떻게 해야 할까요..? 저는 Redux 전역에 넣는 방법 정도밖에 안떠오르네요😱 좋은 아이디어 제시해주시면 감사하겠습니다!

[un0211]

리렌더링 되면 태그 컬러는 계속 랜덤으로 바뀝니다. 한 번 지정된 태그 컬러가 지속되도록 하려면 어떻게 해야 할까요..? 저는 Redux 전역에 넣는 방법 정도밖에 안떠오르네요😱 좋은 아이디어 제시해주시면 감사하겠습니다!

저희가 컬러를 저장해 놓기 애매해서 (어딘가 저장한다면 전체 유저가 만든 모든 대시보드 마다 입력한 모든 태그의 컬러 값을 저장해야해서) generateTagIndex 함수를 만든거였어요! 태그 글자를 이용해서 색상을 부여할 수 있도록!

• 26

• 44

[wayandway]

앗 태그 인덱스 함수를 그렇게 활용하면 되는거였군요..!! 제대로 모르고 있었네요 민재님, 혜원님 도와주셔서 감사합니다!!! 이래서 집단지성이 좋군요 😇

해당 내용 수정해서 머지시켜놓을게요!

[wayandway]

generateTagIndex 활용해서 각 태그에 고유한 색상 지정되도록 수정했습니다! 새로고침해도 잘 유지됩니다

[wayandway]

yellow, purple 색상 추가해서 6개로 수정했습니다!