[FE] Timer Pip 구현

[dle234]

브랜치 이름 변경했어요 !

변경하면 close 되는지 몰랐어요 .. ㅎ

연관된 이슈

• closes: [FE] pip 구현 #1044

구현한 기능

• TimerPip 구현

상세 설명

openPiP 함수가 하는 일

• Pip 를 open 하는 함수.
• 크기에 맞는 pip window 를 생성하고 style 과 같은 기본 태그들을 넣어줌.
• unload(pip 윈도우 창을 닫았을때) 되었을때 모든 상태를 초기화 해 줌.

updatePipContent 함수가 하는 일

• Pip 를 update 하는 함수.
• 생성된 pipWindow 에 props 에 맞는 html 을 넣어줌
• minutes, seconds, progress 가 변경될때마다 실행되어 업데이트 시켜줌.

handleVisibilityChange 함수가 하는 일

• visibilitychange(탭이 변경됨을 감지) 되었을 떄, 타이머가 실행중이며 Pip가 아직 열리지 않았다면 열어줌

+))
window 창에서 사용자와 상호작용하려면 pip window 에서 message 를 받도록 해서 그 메세지에 따라 다른 함수를 실행시켜주는 방법이 있었는데 handleStart, handlePause 함수가 단순히 ()⇒void 타입인 함수이기 때문에 네트워크 요청이 이 함수 내부에 위치해 있어 해당 함수의 성공, 에러처리를 못해서 그냥 다시 제거했습니닷

[greetings1012]

해시 폼 미쳤다 👍👍