fix: resolve FOUC issue on initial render of custom elements

[sounmind]

• Added display:none to body to hide text until the component is fully loaded

Checklist before merging

• Link an issue with the pull request
• Ensure no errors or warnings on the browser console
• Avoid additional major pushes after approval (if necessary, request a new review)

[SamTheKorean]

이렇게 해주면 유지보수 비용이 줄겠네요! 다만 이 문제를 해결하기 위해서 body에 none을 붙이는게 문제를 정확하게 인지하고 있는 저희 입장에서는 정말 직관적이지만 엄청 모르는 사람이 봐도 저희가 html만 봐도 코드를 알 수 있는 기존 코드의 장점을 희석시키는 것 같다는 생각이 듭니다. 이런 부분은 주석으로 보완해야하는 부분일까요?

[sounmind]

이렇게 해주면 유지보수 비용이 줄겠네요! 다만 이 문제를 해결하기 위해서 body에 none을 붙이는게 문제를 정확하게 인지하고 있는 저희 입장에서는 정말 직관적이지만 엄청 모르는 사람이 봐도 저희가 html만 봐도 코드를 알 수 있는 기존 코드의 장점을 희석시키는 것 같다는 생각이 듭니다. 이런 부분은 어쩔 수 없이 감수해야하는 부분일까요?

사용자가 HTML 코드를 봐도 아무것도 사라지지 않았는데, 어떤 부분이 장점을 희석시키나요?

[SamTheKorean]

아 body의 none을 붙이는 코드 하나만 보고 말씀드렸습니다! 처음 보는 사람이 이걸 봤을 때 의아할 것 같아서요. 그런데 충분히 main.js만 보면 이해할 수 있는 쉬운 코드이니 이정도는 문제가 전혀안되겠네요!