Feature/#341 스터디 카드에서 종료된 스터디와 진행중인 스터디 구분 표시

[yeonddori]

관련 이슈

• close [FEAT] 스터디 카드에서 종료된 스터디와 진행중인 스터디 구분 표시 #341

작업 요약

• 디자인이 따로 없었던 것 같아서 스터디 카드에서 진행 중인 스터디와 종료된 스터디를 Badge로 표시해주었습니다.

작업 상세 설명

• Chakra Badge 컴포넌트에서 기본적으로 색상 4개를 제공하는데, 진행 중인 표시를 원래 green으로 하려고 했으나, 저희 프로젝트에서 green이라는 이름으로 색상 팔레트를 덮어서 사용하고 있기 때문에 적용이 안 되었습니다. green 색을 쓰려면 따로 green 이라고 덮어 씌어둔 이름을 green_base와 같이 변경하든지, 새로 green_light와 같이 만들어야 할 것 같은데(저희가 정의해둔 green 색은 너무 진해서), 마땅히 재사용하지도 않을 것 같아서 일단 purple로 해두었습니다. orange를 쓰자니 red와 너무 비슷해서 구분이 잘 안 가고, 색 조합이 영 안 맞는 것 같아서.. 혹시 다른 의견 있으시면 부탁드립니다~!
• 아니면 아래 미리보기 처럼 orange_light랑 orange_dark로 하는 게 차라리 나으려나요?

리뷰 요구 사항

• 리뷰 예상 시간: 2분

미리 보기

purple, red

orange_light와 orange_dark를 적용해본 것입니다!

[llddang]

스터디 상태를 스터디명 옆에 달아주셨는데요.
제가 이번에 스터디 카드에서 스터디명을 가운데 위치하도록 바꾸면서 스터디 명이 긴 경우 말줄임이 되도록 했습니다.

그래서 스터디 상태를 모달의 X 버튼 처럼 오른쪽 상단 또는 스터디 설명 과 기간이 나와있는 것처럼 중간에 배치하면 좋을 것 같습니다!

[llddang]

아니면 아래 미리보기 처럼 orange_light랑 orange_dark로 하는 게 차라리 나으려나요?

저는 purple, red가 더 명확한 구분이 가능해서 좋은 것 같습니다!

[jasper200207]

저도 purple, red가 좋을거 같습니다!

[yeonddori]

스터디 상태를 스터디명 옆에 달아주셨는데요. 제가 이번에 스터디 카드에서 스터디명을 가운데 위치하도록 바꾸면서 스터디 명이 긴 경우 말줄임이 되도록 했습니다.

그래서 스터디 상태를 모달의 X 버튼 처럼 오른쪽 상단 또는 스터디 설명 과 기간이 나와있는 것처럼 중간에 배치하면 좋을 것 같습니다!

오른쪽 상단으로 위치 변경하고 rounded도 스터디 카드와 똑같은 값으로 줬습니다!

[yeonddori]

진행 전 표시도 추가했습니다.
뭔가 코드가 더러워진 것 같은데 저런식으로 날짜 포맷팅을 안해주니 오늘 날짜가 종료 날짜와 같은 경우 바로 종료라고 뜨더라구요..ㅜㅜ

[llddang]

수고하셨습니다!