[view] Summary 내 Detail 컴포넌트 내부 콘텐츠 스타일 개선 작업

[seocylucky]

Related issue

Closes #790

Result

Summary의 cluster-summary__info 클릭 시 나오는 Detail 컴포넌트의 내부 콘텐츠 스타일링 개선 작업을 진행했습니다.

기존	개선 후

기존

commit_id가 commit date와 겹쳐 보이는 현상 + commit message hover 시, 주변 내용들을 완전히 뒤덮는 상황

수정

detail__commit-item 구조 개선 + 그 외 추가적인 스타일 개선 작업(cluster-summary 박스 overflow 개선과 detail max-height 조정)

효과

• commit message hover 시, 다른 커밋 내역들을 가리지 않은 채 상세 메시지 확인 가능
• commit_id 겹침 현상 해결

Work list

detail__commit-item 구조 리팩토링

일렬로 flex 처리 되어있었던 detail__commit-item 내부 요소들을 commit-item__left(author, commit message)와 commit-item__right(author, date, commit_id)로 이분화하여 구조를 개선하였습니다. 해당 작업을 기반으로, space-between으로 item 간 간격 정리를 해주었습니다.

추가적으로 commit message hover 시, 확대하고자 하는 메시지가 다른 내용들을 가리지 않도록 absolute 되어 있던 관련 코드를 삭제시켰고, 기존 align-items: center 처리 되었던 부분을 flex-start 상태로 변경시켜 깔끔한 ui로 개선시켜보았습니다.

cluster-summary 박스 overflow 개선

기존 cluster-summary 박스 내부 콘텐츠들이 박스 밖으로 overflow되는 문제를 발견하여 hidden 처리해주었습니다.

detail max-height 조정

max-height가 17.5rem로 고정으로 박혀있어서 커밋 수가 적을 콘텐츠에는 하단에 공백이 크게 생기는 상황을 확인하여 이를 방지하기 위해 fit-content 처리를 해주었습니다.

Discussion

위 작업들을 기반으로 문제되었던 이슈들이 잘 해결됐는지 확인부탁드립니다:)

[grapefruit13]

LGTM

[grapefruit13]

세미콜론 두 개 있던 거 찾으셨네요 대박👍🏻

[ytaek]

detail하게 잘 잡으셨네요!!!
이런 사소한 ui 들부터 사용자가 불편을 느끼는 부분이 많아서, 매우 중요한 pr 같습니다!!
LGGGGTM!

[ytaek]

detail 👍