refactor(client): extract interval logic to a composable function

あと`onUnmounted`を`onMounted`内で呼んでいたりしたのを修正したりとか

packages/client/src/widgets/slideshow.vue

@@ -13,9 +13,10 @@
 
 <script lang="ts" setup>
 import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
 import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
 
 const name = 'slideshow';
 
@@ -75,7 +76,7 @@ const fetch = () => {
 	os.api('drive/files', {
 		folderId: widgetProps.folderId,
 		type: 'image/*',
-		limit: 100
+		limit: 100,
 	}).then(res => {
 		images.value = res;
 		fetching.value = false;
@@ -96,15 +97,15 @@ const choose = () => {
 	});
 };
 
+useInterval(change, 10000, {
+	immediate: false,
+	afterMounted: true,
+});
+
 onMounted(() => {
 	if (widgetProps.folderId != null) {
 		fetch();
 	}
-
-	const intervalId = window.setInterval(change, 10000);
-	onUnmounted(() => {
-		window.clearInterval(intervalId);
-	});
 });
 
 defineExpose<WidgetComponentExpose>({