강의를 듣는데 속도가 안나서 진행 상황을 보며 공부를 하고 싶어서 만들게 되었다.
Apption의 DIY Embed URL에 들어가서 HTML Code에 다음 코드를 넣고 URL을 생성한다. (무료로 최대 3개의 Embed URL을 생성할 수 있다.)
Apption - Notion friendly Embeddable Widget Apps
notion에 URL을 임베드 생성
옵션으로 붙여넣는다.
https://github.com/do0ori/progress-bar
CSS 건들이기 귀찮아서 GPT에게 계속 feedback을 주면서 만들었는데 물론 내가 조금 고치긴 했지만 꽤나 성공적인 것 같다. 지시를 구체적으로 주고 feedback도 여러 번해서 그런 것 같다.
웹에서도 잘 동작하고 모바일에서도 잘 동작한다!
apption ver.
github ver.
[x] LocalStorage에 저장하다보니 도메인이 동일한 곳에서는 여러 개를 사용할 수 없는데 widget이 위치하는 페이지마다 개별적으로 동작하도록 수정하면 좋을 것 같다.
window.location.href
속성으로 key를 unique하게 설정하면 되지 않을까 싶다. window가 apption으로 되어 있어서 안된다.
apption을 embed하고 있는 Top-level site에 접근하면 될 것 같다. window**.parent**.location.href
를 이용했는데 apption 미리보기에서는 잘 되는데 notion에 붙여넣으니 안된다.
사실 이게 뚫리면 apption 정액제가 있을 필요가 없으니 말이 안되긴 한다. 일단 apption에서는 불가능한 걸로…
apption이 아니라 그냥 내가 github page로 만들고 배포한 다음 임베드하면 어떻게 될까? 일단 잘 된다.
사실 구조가 똑같아서 마찬가지 일 것 같다. 그래도 그냥 notion page로 필요한 만큼 만들면 되니까 괜찮을 것 같다.
[x] settings 버튼을 만들고 마우스 우클릭으로 bar의 색상도 고를 수 있게 해보자. (contextmenu event 활용)