항해 99 - 2022.03.25.FRI (마우스 올리면 설명글 나오게 하기)

이번 챕터 일정

• 02/26 기획 회의 ✅
• 02/28 알고리즘 스터디 발제 ✅
• 03/01 1차 기획멘토링 ✅
• 03/05 1차 기술 멘토링  ✅
• 03/09 2차 기획 멘토링 ✅
• 03/12 2차 기술 멘토링 ✅
• 03/16 3차 기획 멘토링 ✅
• 03/19 중간 점검 ✅
• 03/23 4차 기획멘토링 & 3차 기술 멘토링 ✅
• 04/09 최종 발표회 

오늘 내가 할 일 

• 타이머 오류 해결 ✅
• 채팅 닫혀도 받은 채팅 유지하게 하기 ✅
• today time 로컬에 저장해서 가져오기 ✅
• 잠긴 뱃지에 마우스 올리면 설명글 나오게 하기 ✅

오전에는 오자마자 코드 공뷰를 했다. 
다른 분들이 작성한 코드 보면서 이해하고 이해 안 되는 부분들 물어보고 하는 시간을 가졌다

오후에 서버가 일단 모아져서 그 서버 가지고 프론트 작업했는데
각각 따로 할 땐 되던 작업들이 합쳤더니 안 되는 경우가 발생해서
이것저것 손보느라 하루가 다 갔다

그래도 수민 님이랑 같이 하느라 시간도 금방 끝나서 얼마나 다행인지 ㅠㅠㅠ

<채팅창 닫혀도 채팅 값 유지하게 하기>

• 채팅 컴포넌트가 분리되어있어서 생기는 문제였다
• 채팅 컴포넌트가 열릴 때마다 소켓 통신이 시작되는데 우리는 채팅이 닫혀있어도 알림이 오길 바랬고
• 채팅 컴포넌트를 분리하지 않고 디테일 페이지에서 사용하기로 했더니 유지가 되었다!!

<마우스 올리면 설명글 나오게 하기>

• visivility를 처음에 히든으로 주고 hover시에 visible로 바꿔서 표현할 수 있다!!!

<div className="badge">
   <div>마우스 올려봐!</div>
   <p>설명부분</p>
</div>

p{
    visibility: hidden;
    background-color: #bcc0ff;
    width: 150px;
    position: absolute;
    padding: 5px;
    border-radius: 4px;
    color: white;
    z-index: 40;
    text-align: center;
  }
  p::after{
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -50px;
    border: solid transparent;
    border-color: transparent;
    border-bottom-color: #bcc0ff;
    border-width: 10px;
    pointer-events: none;
    content: ' ';
  }
  .badge:hover p{
    box-shadow: rgba(0, 0, 0, 0.19) 0px 5px 10px,
      rgba(0, 0, 0, 0.23) 0px 3px 3px;
    visibility: visible;
  }

https://www.w3schools.com/css/css_tooltip.asp

CSS Tooltip

• 툴팁이라는 아주 좋은 css가 있네,,,ㅎㅎ,,