단어장 리팩터링 - 4

import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useSearchStore = defineStore('search', () => {
  const searchModalOpenState = ref(false);

  function closeSearchModal() {
    searchModalOpenState.value = false;
  }

  function openSearchModal() {
    searchModalOpenState.value = true;
  }

  return {
    searchModalOpenState,
    closeSearchModal,
    openSearchModal,
  };
});

<script setup>
import SearchModalNoraml from './SearchModalNoraml.vue';
import SearchModalMissing from './SearchModalMissing.vue';
import SearchModalSimilar from './SearchModalSimilar.vue';
import SearchModalError from './SearchModalError.vue';
import useSearchWord from '../composables/searchWord';
import MODAL_CASE from '../constant';
import { storeToRefs } from 'pinia';
import { useTargetWordStore } from '../../wordInput/composables/targetWordStore';

const targetWordStore = useTargetWordStore();

const { targetWord } = storeToRefs(targetWordStore);
const { data, searchCase, error } = useSearchWord(targetWord);
</script>

<template>
  <div v-if="error">
    <SearchModalError />
  </div>
  <div v-else-if="data">
    <SearchModalNoraml
      v-if="searchCase === MODAL_CASE.normal"
      :word="targetWord"
      :searchData="data"
    />
    <SearchModalSimilar
      v-else-if="searchCase === MODAL_CASE.similar"
      :word="targetWord"
      :searchData="data"
    />
    <SearchModalMissing v-else :word="targetWord" />
  </div>
</template>

<script setup>
import TheModal from '../../TheModal.vue';
import { useSimilarCase } from '../composables/searchCase';
import { useSearchStore } from '../composables/searchStore';
import { useTargetWordStore } from '../../wordInput/composables/targetWordStore';
import { onKeyStroke } from '@vueuse/core';

const props = defineProps({
  word: String,
  searchData: Array,
});

const searchStore = useSearchStore();
const targetWordStore = useTargetWordStore();

const { similarWords } = useSimilarCase(props.searchData);

function clickSimilarWord(similarWord) {
  targetWordStore.setTargetWord(similarWord);
}

function closeModal() {
  searchStore.closeSearchModal();
}

onKeyStroke(['Enter'], () => closeModal());
</script>

<template>
  <TheModal @click-close-icon="closeModal">
    <template #word> {{ props.word }}와 유사한 단어 </template>
    <template #means>
      <div
        v-for="similarWord in similarWords"
        :key="similarWord"
        @click="clickSimilarWord(similarWord)"
        class="modal_means hover:text-xl cursor-pointer h-[32px] leading-[32px] hover:leading-[32px]"
      >
        {{ similarWord }}
      </div>
    </template>
    <template #footer>
      <div class="flex">
        <button
          @click="closeModal"
          class="modal_btn px-3.5 bg-blue-500 hover:bg-blue-600"
        >
          ok
        </button>
      </div>
    </template>
  </TheModal>
</template>

import { onMounted, onUnmounted } from 'vue';

function useFocusInput(target, selector) {
  const EVENT = 'click';

  function outFocusInput(e) {
    if (!e.target.closest(selector)) {
      target.value = false;
    }
  }

  onMounted(() => {
    window.addEventListener(EVENT, outFocusInput);
  });

  onUnmounted(() => {
    window.removeEventListener(EVENT, outFocusInput);
  });
}

export default useFocusInput;

import { computed, toValue } from 'vue';

const INPUT_WORD = '단어를 입력해주세요';
const CAN_NOT_INPUT_WORD = '단어를 입력할 수 없습니다';

function useInputClasses(mode) {
  const bgColor = computed(() => (toValue(mode) ? 'bg-white' : 'bg-[#cbd5e1]'));
  const placeHolderText = computed(() =>
    toValue(mode) ? INPUT_WORD : CAN_NOT_INPUT_WORD,
  );

  return {
    bgColor,
    placeHolderText,
  };
}

export default useInputClasses;

import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useTargetWordStore = defineStore('targetWord', () => {
  const targetWord = ref(null);

  function setTargetWord(word) {
    targetWord.value = word;
  }

  return {
    targetWord,
    setTargetWord,
  };
});

import { toValue, watchEffect } from 'vue';

function useToggleTagsDisabled(elementRefs, booleanValue) {
  const setTargetTag = (elementRef) => {
    if (elementRef.value) {
      elementRef.value.disabled = toValue(booleanValue);
    }
  };

  watchEffect(() => elementRefs.forEach(setTargetTag));
}

export default useToggleTagsDisabled;

import { toValue } from 'vue';

function useValidateInputWord(inputWord) {
  const word = toValue(inputWord);

  const checkEmpty = (word) => word === '';
  const checkNotEnglish = (word) => /[^a-zA-Z]/.test(word);

  return checkEmpty(word) || checkNotEnglish(word);
}

export default useValidateInputWord;

<script setup>
import { Icon } from '@iconify/vue';
import { ref, computed, inject } from 'vue';
import useInputClasses from '../composables/inputClasses';
import useFocusInput from '../composables/focusInput';
import useToggleTagsDisabled from '../composables/toggleTagDisabled';
import RecentSearch from '../../recentSearch/components/RecentSearch.vue';
import { useSearchStore } from '../../search/composables/searchStore';
import useValidateInputWord from '../composables/validateInputWord';
import { storeToRefs } from 'pinia';
import { useTargetWordStore } from '../composables/targetWordStore';
import SearchContainer from '../../search/components/SearchContainer.vue';

const CONTAINER_ID = 'inputContainer';
const ALERT_INPUT = '영어 단어를 입력해 주세요.';

const inputRef = ref(null);
const searchBtnRef = ref(null);

const { isNoteMode } = inject('mode');

const searchStore = useSearchStore();
const targetWordStore = useTargetWordStore();

const { searchModalOpenState } = storeToRefs(searchStore);
const inputWord = ref('');
const recentWordsFocus = ref(false);
const isInputDisabled = computed(
  () => !isNoteMode.value || searchModalOpenState.value,
);

const { bgColor, placeHolderText } = useInputClasses(isNoteMode);
useFocusInput(recentWordsFocus, `#${CONTAINER_ID}`);
useToggleTagsDisabled([inputRef, searchBtnRef], isInputDisabled);

function focusInput() {
  inputRef.value.focus();
}

function clearInputWord() {
  inputWord.value = '';
  focusInput();
}

function alertInputCondition(e) {
  if (!e.isComposing) {
    window.alert(ALERT_INPUT);
    inputWord.value = '';
    focusInput();
  }
}

function setTargetWord(targetWord) {
  targetWordStore.setTargetWord(targetWord);
  inputWord.value = '';
  recentWordsFocus.value = false;
  searchStore.openSearchModal();
}

function handleInputValidationAndSetTargetWord(e) {
  if (useValidateInputWord(inputWord)) {
    alertInputCondition(e);
    return;
  }

  setTargetWord(inputWord.value);
}
</script>

<template>
  <div :id="CONTAINER_ID">
    <div class="flex items-center h-9 px-3 border boder-black" :class="bgColor">
      <button v-show="inputWord" @click="clearInputWord">
        <Icon icon="ph:x-bold" />
      </button>
      <input
        ref="inputRef"
        class="w-full px-2 focus:outline-0 bg-inherit"
        :placeholder="placeHolderText"
        :value="inputWord"
        @keydown.enter="handleInputValidationAndSetTargetWord"
        @keydown.esc="clearInputWord"
        @focus="recentWordsFocus = true"
        @input="(e) => (inputWord = e.target.value)"
      />
      <button ref="searchBtnRef" @click="handleInputValidationAndSetTargetWord">
        <Icon icon="ion:search" width="24" height="24" />
      </button>
    </div>
    <RecentSearch
      v-show="recentWordsFocus"
      @click-recent-word="(recentSearcWord) => setTargetWord(recentSearcWord)"
    />
  </div>
  <Teleport to="body">
    <SearchContainer v-if="searchModalOpenState" />
  </Teleport>
</template>