// 값을 읽을 때
const userInfo = computed(() => instance.$store.getters['client/login/userInfo']);
// 값이 바뀔 때
instance.$store.dispatch('client/login/setUpdate', { type: 'id', data: { value: 'xxx' } });
 
// 모든 input, 버튼 이벤트가 store 경유 → 로컬 state/양방향 바인딩 완전 배제

<!-- ❌ 1단계: Vue에서 LocalStorage 야매 방식 -->
<script lang="ts">
export default defineComponent({
  beforeRouteLeave(to, from, next) {
    // 🔥 문제: 페이지 이동 시 로컬스토리지로 상태 추적
    if (to.path !== getLocalStorage('currentPage')) {
      this.$store.dispatch('common/global/searchParamAction', { page: 1 });
    }
    next();
  },
  
  setup(props) {
    onMounted(async () => {
      // 🔥 문제: 현재 페이지를 로컬스토리지에 저장
      if (props.where) setLocalStorage('currentPage', props.where);
      
    });
  }
});
</script>

export const useSearchParam = (searchParams?: any) => {
  const [querySearchParams, setQuerySearchParams] = useState<MyObject | null>(
    () => makeSearchParams()
  );
 
  useEffect(() => {
    const obj: MyObject = { ...searchParams }; // 매번 새로운 객체
    
    for (const key of initSearchParams.keys()) {
      // 복잡한 파싱 로직...
    }
    
    // 🔥 매번 새로운 객체로 상태 업데이트
    setQuerySearchParams(Object.values(obj).length ? {...obj} : null);
  }, [initSearchParams]); // 🔥 URL 변경시마다 실행
 
  return {
    querySearchParams, // 🔥 매번 새로운 참조
    replaceURL, // 🔥 매번 새로운 함수
  };
};

// ❌ 2단계: React 컴포넌트에서의 복잡한 사용법
export const useMspCostListQueryString = ({
  querySearchParams,
  replaceURL,
}: useMspCostListQueryStringProps) => {
  const {makeMonthOptions} = useMspCostListSetYearMonth();
 
  useEffect(() => {
    if (querySearchParams && Object.keys(querySearchParams).length > 0) {
      replaceURL({...querySearchParams});
 
      const availableMonths = makeMonthOptions(
        Number(querySearchParams.year),
        dayjs().month() + 1
      );
 
      setSelectForm((prev: FixedCostInitType) => {
        return {
          ...prev,
          .. 코드 중략
        };
      });
    }
  }, [querySearchParams]);
 
  const querySearchParamsMemo = useMemo(() => {
    return {
      ...querySearchParams,
    };
  }, [querySearchParams]);
 
  return {querySearchParamsMemo} as const;
};

// ✅ FormProvider를 통한 상태 공유
const ManualPageV2 = () => {
  useSettingQueryParameter(MANUAL_PAGE_V2_INITIAL_STATE()); // 현재 조회 조건과 설정된 조회 조건을 비교하여 useQueryParameter으로 부터 파라메터 비교
  const forms= useFormWithQueryParams<ManualFormType>(); // useForm을 커스텀 마이징 내부적으로 useQueryParameter를 호출하여 반영
 
  const onSubmit = (data) => {
    forms.replaceParams(data);
  };
  
  const handleResetButtonClick = () => {
    forms.reset(MANUAL_PAGE_V2_INITIAL_STATE());
    forms.replaceParams(MANUAL_PAGE_V2_INITIAL_STATE());
  };
  
  return (
    <FormProvider {...forms}>
      <form onSubmit={forms.handleSubmit(onSubmit)}>
        <ManualSearchArea
          buttonArea={
            <Grid item marginLeft="auto">
              <AuthButton
                pageName="billing"
                buttonName="INV_PUR_MANUAL_MANAGE"
              >
                <Grid id={'grid-ds-add-panel'} />
              </AuthButton>
            </Grid>
          }
          gridArea={
            <>
              <ManualGridTitleContent /> {/* 🔥 Context를 통해 폼 상태 공유 */}
              <ManualGridV2 apiRef={apiRef} />
            </>
          }
          handleResetButtonClick={handleResetButtonClick}
        >
          <ManualSearchAreaContent />
        </ManualSearchArea>
      </form>
    </FormProvider>
  );
};

// ✅ React Hook Form의 JavaScript Proxy 활용
const ManualSearchAreaContent = () => {
  const {control, getValues, setValue} = useManualFormContext(); // useFormWithQueryParamsContext 구현
 
  ... 코드 중략...
  
  const {field: monthField} = useController({
    control,
    name: 'month',
  });
 
  // 🔥 JavaScript Proxy를 통한 지연 평가 - 실제 접근 시에만 상태 추적
  const monthOptions = useMemo(() => {
    if (!isLoading) {
      const option = createMonthOptions(getValues('year'));
      const find = option.find(item => {
        return Number(item.value) === Number(getValues('month'));
      });
      if (!find) setValue('month', dayjs().format('MM'));
      return option;
    }
    return [];
  }, [isLoading, getValues, yearOptions]);
 
  return (
    <TextField
      {...monthField}
      value={monthField.value?.toString().padStart(2, '0')}
      onChange={monthField.onChange}
      fullWidth
      size="small"
      select
    >
      {renderMenuItems({
        options: monthOptions,
      })}
    </TextField>
  );
};

const useFormWithQueryParamsContext = <T extends FieldValues>() => {
  const method = useFormContext<T>();
  const {replace, push} = useRoute();
  const parsingQueryStringValue = useQueryParameter(); // 현재 URL Query Params를 파싱
 
  const replaceParams = (
    params: Partial<T>,
    options?: ReplaceParamsOptions
  ) => {
    replace(
      options?.keepAllQueryParams // 페이지 네이션 여부에 따른 기존 URL 유지
        ? {...parsingQueryStringValue, ...params}
        : {...method.getValues(), ...params}
    );
  };
 
  return {...method, replaceParams, pushParams};
};

export const useSettingQueryParameter = <T extends Record<string, any>>(
  settingQueryParams: T
) => {
  const currentQueryParams = useQueryParameter();
  const {replace} = useRoute();
 
  useEffect(() => {
    const settingQueryKey = Object.keys(settingQueryParams);
    const currentQueryKey = Object.keys(currentQueryParams);
 
    const isInvalidQueryParams = currentQueryKey.some(
      key => !settingQueryKey.includes(key)
    );
 
    const isInvalidQueryKeyLength =
      currentQueryKey.length !== settingQueryKey.length;
 
    if (isInvalidQueryParams || isInvalidQueryKeyLength) {
      replace(settingQueryParams);
    }
  }, [settingQueryParams, currentQueryParams]);
};

<template>
  <layout>
    <div class="flex justify-between items-end">
      <DefectListDashboard />
      <AuthorityButtonV2 permissionKey="DEFECT_INSERT" @click="handleDevTaskCreate">
        <template #default="{ onClick, isDisabled }">
          <Button variant="yellow" type="button" :disabled="isDisabled" @click="onClick">
            등록
          </Button>
        </template>
      </AuthorityButtonV2>
    </div>
    <ValidationObserver ref="observer">
      <form @submit.prevent="handleSubmit">
        <DefectSearchArea>
          <div class="clear-search-btn-area">
            <div class="refresh-search">
              <Button variant="refresh" @click="handleReset" size="small">
                <i class="fi fi-rr-rotate-right" />
              </Button>
              <Button type="submit" :debounce="1000">검색</Button>
            </div>
          </div>
        </DefectSearchArea>
        <DefectListGridArea />
      </form>
    </ValidationObserver>
  </layout>
</template>
 
<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from '@vue/composition-api';
import { ValidationObserver } from 'vee-validate';
import { provideFormContext } from '../context/useDefectProvideFormContext';
import { useSettingQueryParameter } from '@/composable/useSettingQueryParameter';
import { useFormWithQueryParams } from '@/composable/useFormWithQueryParams';
import { DEFECT_LIST_INITIAL_STATE } from '../constants';
 
export default defineComponent({
  name: 'DefectList',
  components: { ValidationObserver },
  setup() {
    const observer = ref();
    
    // URL 파라미터와 폼 상태 동기화
    const initialState = reactive(DEFECT_LIST_INITIAL_STATE());
    const settingParams = useSettingQueryParameter(initialState);
    const forms = useFormWithQueryParams({
      defaultValues: {
        ...settingParams,
        page: 1,
        itemsPerPage: 10,
      },
    });
 
    // Provide/Inject로 상태 공유
    const formContext = provideFormContext();
 
    const handleSubmit = async () => {
      const isValid = await observer.value?.validate();
      if (!isValid) {
        // 검증 실패 처리
        return;
      } else {
        // 🔥 검색 조건 변경 시 페이지 1로 초기화
        forms.formData.value.page = 1;
        forms.replaceParams(forms.formData);
      }
    };
 
    const handleReset = () => {
      const initialStateData = {
        ...initialState,
        workflowCodes: initialState.workflowCodes.map((item) => item),
      };
      forms.replaceParams(initialStateData);
      observer.value?.reset();
    };
 
    return {
      observer,
      handleSubmit,
      handleReset,
    };
  },
});
</script>

<template>
  <div class="search-filter-area">
    <div class="input-row">
      <TextField
        v-model="formData.workflowCodes"
        input-type="multiSelect"
        :select-options="workflowOptions"
      />
      <TextField
        v-model="formData.priorityCodes"
        input-type="select"
        :select-options="priorityOptions"
      />
      ... 코드 중략 ...
    </div>
    <slot />
  </div>
</template>
 
<script lang="ts">
import { defineComponent, inject, toRefs, computed } from '@vue/composition-api';
import { TextField } from '@/components';
 
export default defineComponent({
  name: 'DefectSearchArea',
  components: { TextField },
  setup() {
    // 🔥 Inject로 상태 주입받기
    const formContext = inject('defectFormContext');
    const { formData, commonCode } = toRefs(formContext as any);
 
    // 🔥 Computed로 옵션 관리 - 반응성 유지 (따로 UI와 비지니스를 분리하여 훅으로 관리해도 되나 코드를 보여주기 위한 예시로 노출)
    const workflowOptions = computed(() => [
      { label: '전체', value: 'ALL' },
      ...(commonCode.value.workflow?.map((item) => ({
        value: item.codeValue,
        label: item.codeName,
      })) || []),
    ]);
 
    const priorityOptions = computed(() => [
      { label: '전체', code: 'ALL' },
      ...(commonCode.value.priority?.map((item) => ({
        code: item.codeValue,
        label: item.codeName,
      })) || []),
    ]);
 
    return {
      formData,
      workflowOptions,
      priorityOptions,
    };
  },
});
</script>

const useFormWithQueryParams = () => {
  const parsingQueryStringValue = useQueryParameter();
  const { replace, push, route } = useCustomRoute();
 
  const replaceParams = (params: any, options: any = {}) => {
    ... 코드 중략 ...
    const queryParameters = convertEmptyArrayToString(
      options.keepAllQueryParams
        ? { ...(parsingQueryStringValue.value), ...paramsWithTab }
        : { ...getValues(), ...paramsWithTab }
    );
 
    if (options.keepAllQueryParams) {
      push(route.path, queryParameters);
    } else {
      replace(queryParameters);
    }
  };
 
  return {...method, replaceParams, pushParams};
};

export const useSettingQueryParameter = <T extends Record<string, any>>(settingQueryParams: T) => {
  const currentQueryParams = useQueryParameter();
  const { replace } = useCustomRoute();
  const reactiveSettingParams = reactive(settingQueryParams);
 
  watch(
    [() => currentQueryParams, () => reactiveSettingParams],
    ([current, setting]) => {
      const settingQueryKeys = Object.keys(setting );
 
      const currentQueryKeys = Object.keys(current.value);
 
      const isInvalidQueryParams = currentQueryKeys.some((key) => !settingQueryKeys.includes(key));
      const isInvalidQueryKeyLength = currentQueryKeys.length !== settingQueryKeys.length;
 
      if (isInvalidQueryParams || isInvalidQueryKeyLength) {
        replace(setting);
      }
    },
    { deep: true, immediate: true }
  );
 
  return reactiveSettingParams;
};