[WRFE-70](feat): 태그 커스텀 훅 추가

Author: eric-hjh

apps/front/wraffle-webview/src/widgets/product-list/create/hooks/useTagManagement.ts

@@ -0,0 +1,92 @@
+import {useState, useEffect} from 'react';
+import {
+  useCreateTag,
+  useTagQuery,
+} from '@/features/product/tag/api/useTagQuery';
+import {useDebounce} from '@/shared/hook';
+
+interface TagList {
+  id: number;
+  name: string;
+}
+
+interface UseTagManagementProps {
+  tagIds: number[];
+  onTagChange: (newTags: number[]) => void;
+}
+
+interface UseTagManagementReturn {
+  inputValue: string;
+  setInputValue: (value: string) => void;
+  selectedTagNames: string[];
+  setSelectedTagNames: (tags: string[]) => void;
+  autocompleteTags: TagList[];
+  isQueryPending: boolean;
+  handleAddTag: (tag: string, id: number) => Promise<void>;
+}
+
+export const useTagManagement = ({
+  tagIds,
+  onTagChange,
+}: UseTagManagementProps): UseTagManagementReturn => {
+  const [inputValue, setInputValue] = useState('');
+  const [selectedTagNames, setSelectedTagNames] = useState<string[]>([]);
+  const [autocompleteTags, setAutocompleteTags] = useState<TagList[]>([]);
+  const [isNew, setIsNew] = useState(true);
+
+  const debouncedInputValue = useDebounce(inputValue);
+  const {mutateAsync: createTag} = useCreateTag();
+  const {isPending: isQueryPending, data} = useTagQuery({
+    itemsPerPage: 100,
+    uuid: '',
+    prefix: debouncedInputValue.toLocaleLowerCase(),
+  });
+
+  const serverTags = data?.items;
+
+  useEffect(() => {
+    if (!serverTags) return;
+
+    setIsNew(true);
+
+    const isExistingTag = serverTags.some(tag => tag.name === inputValue);
+
+    if (isExistingTag) {
+      const suggestions = serverTags.filter(tag => tag.name !== inputValue);
+      setAutocompleteTags(suggestions);
+      setIsNew(false);
+    } else {
+      setAutocompleteTags(serverTags);
+    }
+  }, [data, inputValue, serverTags]);
+
+  const handleAddTag = async (tag: string, id: number) => {
+    if (selectedTagNames.length >= 5 || selectedTagNames.includes(tag)) {
+      setInputValue('');
+      return;
+    }
+
+    if (isNew && id === 0) {
+      const newTag = await createTag(tag);
+      onTagChange([...tagIds, newTag.id]);
+    } else if (!isNew && id === 0) {
+      const foundid = serverTags?.find(item => item.name === tag)?.id ?? 0;
+      onTagChange([...tagIds, foundid]);
+    } else {
+      onTagChange([...tagIds, id]);
+    }
+
+    setSelectedTagNames(prev => [...prev, tag]);
+    setInputValue('');
+  };
+
+  return {
+    inputValue,
+    setInputValue,
+    selectedTagNames,
+    setSelectedTagNames,
+    autocompleteTags,
+    isQueryPending,
+    handleAddTag,
+  };
+};

apps/front/wraffle-webview/src/widgets/product-list/create/ui/Section/TagSection.tsx

@@ -1,80 +1,24 @@
-import {
-  useCreateTag,
-  useTagQuery,
-} from '../../../../../features/product/tag/api/useTagQuery';
-import {useEffect, useState} from 'react';
-import {
-  addTagFromServerData,
-  addTagFromUserInputIfDuplicate,
-  createTagAndAddToList,
-} from '@/features/product/tag/config/utils';
-import {useDebounce} from '@/shared/hook';
+import {useTagManagement} from '../../hooks/useTagManagement';
 import {InputWithSearchIcon} from '@/shared/ui/input/InputWithSearchIcon';
 import {Tags} from '@/shared/ui/tag/Tags';
 import {TAG_LIMIT} from '@/shared/util';
 import {Label} from '@wraffle/ui';
 
-interface TagList {
-  id: number;
-  name: string;
-}
-
 interface TagSectionProps {
   tagIds: number[];
   onTagChange: (newTags: number[]) => void;
 }
 
 export const TagSection = ({tagIds, onTagChange}: TagSectionProps) => {
-  const [inputValue, setInputValue] = useState(''); // 입력하는 값
-  const debouncedInputValue = useDebounce(inputValue);
-
-  const [autocompleteTags, setAutocompleteTags] = useState<TagList[]>([]); // 서버에서 받아오는 태그 리스트
-
-  const [isNew, setIsNew] = useState<boolean>(true); // 새로 생성할지 말지
-
-  const [selectedTagNames, setSelectedTagNames] = useState<string[]>([]); // 화면에 보여지는 태그 리스트
-
-  const {mutateAsync: createTag} = useCreateTag();
-  const {isPending: isQueryPending, data} = useTagQuery({
-    itemsPerPage: 100, //
-    uuid: '',
-    prefix: debouncedInputValue.toLocaleLowerCase(),
-  });
-  const serverTags = data?.items;
-
-  useEffect(() => {
-    if (!serverTags) return;
-
-    setIsNew(true);
-
-    const isExistingTag = serverTags.some(tag => tag.name === inputValue);
-
-    if (isExistingTag) {
-      const suggestions = serverTags.filter(tag => tag.name !== inputValue);
-      setAutocompleteTags(suggestions);
-      setIsNew(false);
-    } else {
-      setAutocompleteTags(serverTags);
-    }
-  }, [data, inputValue, serverTags]);
-
-  const handleAddTag = async (tag: string, id: number) => {
-    if (selectedTagNames.length >= 5 || selectedTagNames.includes(tag)) {
-      setInputValue('');
-      return;
-    }
-
-    if (isNew && id === 0) {
-      createTagAndAddToList({tag, createTag, tagIds, onTagChange});
-    } else if (!isNew && id === 0) {
-      addTagFromUserInputIfDuplicate({tag, serverTags, tagIds, onTagChange});
-    } else {
-      addTagFromServerData({id, tagIds, onTagChange});
-    }
-
-    setSelectedTagNames(prev => [...prev, tag]);
-    setInputValue('');
-  };
+  const {
+    inputValue,
+    setInputValue,
+    selectedTagNames,
+    setSelectedTagNames,
+    autocompleteTags,
+    isQueryPending,
+    handleAddTag,
+  } = useTagManagement({tagIds, onTagChange});
 
   return (
     <div className='relative'>