feat(composables): usePropsState TypeScript 변환

- usePropsState.js를 usePropsState.ts로 타입스크립트 변환
- props, state, 반환 객체, 각 함수의 파라미터에 타입 명확히 지정
- 타입스크립트 strict 옵션 대응

Author: Seungwoo321

src/composables/usePropsState.ts

@@ -0,0 +1,105 @@
+import { computed, reactive, ComputedRef, UnwrapRef } from 'vue'
+
+// 초기 props 타입 정의 (실제 프로젝트 상황에 맞게 확장 가능)
+export interface UsePropsStateProps {
+  languagePack: Record<string, { localeStrings: Record<string, string> }>
+  locale: string
+  valueFilter?: Record<string, any>
+  rendererName?: string
+  heatmapMode?: string
+  aggregatorName?: string
+  rowOrder?: string
+  colOrder?: string
+  vals?: any[]
+  [key: string]: any
+}
+
+export interface UsePropsStateReturn<T extends UsePropsStateProps> {
+  state: UnwrapRef<T>
+  localeStrings: ComputedRef<Record<string, string>>
+  updateState: (key: keyof T, value: any) => void
+  updateMultiple: (updates: Partial<T>) => void
+  onUpdateValueFilter: (payload: { key: string; value: any }) => void
+  onUpdateRendererName: (rendererName: string) => void
+  onUpdateAggregatorName: (aggregatorName: string) => void
+  onUpdateRowOrder: (rowOrder: string) => void
+  onUpdateColOrder: (colOrder: string) => void
+  onUpdateVals: (vals: any[]) => void
+  onDraggedAttribute: (payload: { key: keyof T; value: any }) => void
+}
+
+export function usePropsState<T extends UsePropsStateProps> (
+  initialProps: T
+): UsePropsStateReturn<T> {
+  const state = reactive({
+    ...initialProps
+  }) as UnwrapRef<T>
+
+  const localeStrings = computed<Record<string, string>>(
+    () => initialProps.languagePack[initialProps.locale].localeStrings
+  )
+
+  const updateState = (key: keyof T, value: any) => {
+    if (key in state) {
+      (state as any)[key] = value
+    }
+  }
+
+  const updateMultiple = (updates: Partial<T>) => {
+    Object.entries(updates).forEach(([key, value]) => {
+      if (key in state) {
+        (state as any)[key] = value
+      }
+    })
+  }
+
+  const onUpdateValueFilter = ({ key, value }: { key: string; value: any }) => {
+    updateState('valueFilter' as keyof T, {
+      ...(state.valueFilter || {}),
+      [key]: value
+    })
+  }
+
+  const onUpdateRendererName = (rendererName: string) => {
+    updateState('rendererName' as keyof T, rendererName)
+    if (rendererName === 'Table Heatmap') {
+      updateState('heatmapMode' as keyof T, 'full')
+    } else if (rendererName === 'Table Row Heatmap') {
+      updateState('heatmapMode' as keyof T, 'row')
+    } else if (rendererName === 'Table Col Heatmap') {
+      updateState('heatmapMode' as keyof T, 'col')
+    } else {
+      updateState('heatmapMode' as keyof T, '')
+    }
+  }
+
+  const onUpdateAggregatorName = (aggregatorName: string) => {
+    updateState('aggregatorName' as keyof T, aggregatorName)
+  }
+  const onUpdateRowOrder = (rowOrder: string) => {
+    updateState('rowOrder' as keyof T, rowOrder)
+  }
+  const onUpdateColOrder = (colOrder: string) => {
+    updateState('colOrder' as keyof T, colOrder)
+  }
+  const onUpdateVals = (vals: any[]) => {
+    updateState('vals' as keyof T, vals)
+  }
+  const onDraggedAttribute = ({ key, value }: { key: keyof T; value: any }) => {
+    updateState(key, value)
+  }
+
+  return {
+    state,
+    localeStrings,
+    updateState,
+    updateMultiple,
+    onUpdateValueFilter,
+    onUpdateRendererName,
+    onUpdateAggregatorName,
+    onUpdateRowOrder,
+    onUpdateColOrder,
+    onUpdateVals,
+    onDraggedAttribute
+  }
+}