최상위 +layout.svelte 을 이용한 hook 같은 이벤트 처리

Sveltekit 최신버전에 해당되는 내용입니다.

Sveltekit 정식 버전 나오기 전까지. 에메모호 했던것이

hook 이벤트 중 내부 계산은 js 파일로 한다고 치더라도, 

보여주는 부분 경고창 같은 보여줘야하는 내용들은 어떻게 보여줘야하느냐의 문제가 있었습니다.

그때는 일일이 해당 페이지에 배치해서 넣어줬습니다.

그런데 정식버전 업데이트 되면서,

routes 폴더 최상위 +layout.svelte가 

포든 하위 폴더에 물고 들어간다는 내용을 보고.

아 이제는 공동으로 자주 사용하는 컴포넌트는 이곳에 등록해서 쓰면 되겠다 싶어서

잘 넣어두고 사용하고 있습니다.

주로

alert, confirm,toast 창(별도로 이쁘게 만들어 놓은)을 주로 배치 해놓고 사용합니다.

<script lang="ts">

    // alert

    import Alert from '$lib/component/modal/Alert.svelte';

    // confirm

    import Confirm from '$lib/component/modal/Confirm.svelte';

    // toast

    import ToastMessage from '$lib/component/modal/ToastMessage.svelte';

</script>

<Alert />

<Confirm />

<ToastMessage />

이렇게 해놓고

각 컴포넌트에 store 만들어서 

사용하려는 페이지에  store만 호출해서 사용합니다.