[WRFE0-70](feat): 카테고리, 태그 API연동 중

Author: eric-hjh

apps/front/wraffle-webview/src/features/product/category/api/useCategoryQuery.ts

@@ -0,0 +1,17 @@
+import type {CategoryItem} from '@/entities/category/type';
+import apiClient from '@/shared/api/apiClient';
+import {useQuery} from '@tanstack/react-query';
+
+const fetchCategories = async () => {
+  const response = await apiClient.get<{items: CategoryItem[]}>('/categories', {
+    withAuth: true,
+  });
+
+  return response.data;
+};
+
+export const useCategoryQuery = () =>
+  useQuery({
+    queryKey: ['categories'],
+    queryFn: () => fetchCategories(),
+  });

apps/front/wraffle-webview/src/features/product/tag/api/useTagQuery.ts

@@ -0,0 +1,48 @@
+import type {
+  CreateBody,
+  CreateTag,
+  TagList,
+  TagQueryParams,
+} from '../config/type';
+import type {CursorPagination} from '@/entities/pagination/type';
+import apiClient from '@/shared/api/apiClient';
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+
+const fetchTags = async ({itemsPerPage, uuid, prefix}: TagQueryParams) => {
+  const response = await apiClient.get<{
+    items: TagList[];
+    pagination: CursorPagination;
+  }>('/tags', {
+    withAuth: true,
+    params: {
+      itemsPerPage: itemsPerPage,
+      uuid: uuid,
+      prefix: prefix,
+    },
+  });
+  return response.data;
+};
+
+export const useTagQuery = ({itemsPerPage, uuid, prefix}: TagQueryParams) =>
+  useQuery({
+    queryKey: ['tags', itemsPerPage, uuid, prefix],
+    queryFn: () => fetchTags({itemsPerPage, uuid, prefix}),
+  });
+
+const createTag = async (tag: string) => {
+  const response = await apiClient.post<CreateTag, CreateBody>('/tags', {
+    body: {name: tag},
+    withAuth: true,
+  });
+  return response.data;
+};
+
+export const useCreateTag = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (tag: string) => createTag(tag),
+    onSuccess: () => {
+      queryClient.invalidateQueries({queryKey: ['tags']});
+    },
+  });
+};

apps/front/wraffle-webview/src/features/product/tag/config/type.ts

@@ -0,0 +1,40 @@
+export interface TagList {
+  id: number;
+  name: string;
+  uuid: string;
+}
+
+export interface TagQueryParams {
+  itemsPerPage: number;
+  uuid: string;
+  prefix: string;
+}
+
+export interface CreateTag {
+  id: number;
+  name: string;
+}
+
+export interface CreateBody {
+  name: string;
+}
+
+export interface CreateTagAndAddToList {
+  tag: string;
+  createTag: (tag: string) => Promise<CreateTag>;
+  tagIds: number[];
+  onTagChange: (newTags: number[]) => void;
+}
+
+export interface AddTagFromUserInputIfDuplicate {
+  tag: string;
+  serverTags?: CreateTag[];
+  tagIds: number[];
+  onTagChange: (newTags: number[]) => void;
+}
+
+export interface AddTagFromServerData {
+  id: number;
+  tagIds: number[];
+  onTagChange: (newTags: number[]) => void;
+}

apps/front/wraffle-webview/src/features/product/tag/config/utils.ts

@@ -0,0 +1,48 @@
+import type {
+  AddTagFromServerData,
+  AddTagFromUserInputIfDuplicate,
+  CreateTagAndAddToList,
+} from './type';
+
+/**
+ * 새 태그 서버에서 받아서 추가
+ */
+export const createTagAndAddToList = async ({
+  tag,
+  createTag,
+  tagIds,
+  onTagChange,
+}: CreateTagAndAddToList) => {
+  try {
+    const response = await createTag(tag);
+    onTagChange([...tagIds, response.id]);
+  } catch (error) {
+    console.error('error:', error);
+  }
+};
+
+/**
+ * id를 서버에서 받아온 태그 추가하는 곳
+ * but 서버에서 받아온 리스트중 사용자 입력값과 중복된 값은 리스트에서 제거하고 맨 위로 올리기 때문에
+ * id를 찾아서 제출태그 리스트에 넣어줌
+ */
+export const addTagFromUserInputIfDuplicate = ({
+  tag,
+  serverTags,
+  tagIds,
+  onTagChange,
+}: AddTagFromUserInputIfDuplicate) => {
+  const foundid = serverTags?.find(item => item.name === tag)?.id ?? 0;
+  onTagChange([...tagIds, foundid]);
+};
+
+/**
+ * id를 서버에서 받아온 태그 추가하는 곳
+ */
+export const addTagFromServerData = ({
+  id,
+  tagIds,
+  onTagChange,
+}: AddTagFromServerData) => {
+  onTagChange([...tagIds, id]);
+};

apps/front/wraffle-webview/src/shared/ui/tag/Tags.tsx

@@ -3,15 +3,22 @@ import {Tag} from '@wraffle/ui';
 
 interface TagsProps {
   tags: string[];
+  setTags: (tags: string[]) => void;
   className: string;
 }
 
-export const Tags = ({tags, className}: TagsProps) => (
-  <div className={clsx('flex gap-1.5', className)}>
-    {tags.map(tag => (
-      <Tag handleRemoveTag={tag => tag} key={tag}>
-        {tag}
-      </Tag>
-    ))}
-  </div>
-);
+export const Tags = ({tags, setTags, className}: TagsProps) => {
+  const handleRemoveTag = (tag: string) => {
+    setTags(tags.filter(t => t !== tag));
+  };
+
+  return (
+    <div className={clsx('flex gap-1.5', className)}>
+      {tags.map(tag => (
+        <Tag handleRemoveTag={tag => handleRemoveTag(tag)} key={tag}>
+          {tag}
+        </Tag>
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,131 @@
+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 {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('');
+  };
+
+  return (
+    <div className='relative'>
+      <Label className='text-xl font-bold'>태그</Label>
+
+      <InputWithSearchIcon
+        placeholder='태그명을 입력해주세요. (최대 5개)'
+        onClick={() => {}}
+        maxLength={TAG_LIMIT}
+        disabled={selectedTagNames.length === 5}
+        value={inputValue}
+        onChange={e => setInputValue(e.target.value.trim())}
+      />
+
+      {inputValue && (
+        <div className='absolute z-10 mt-2 flex max-h-40 w-full flex-col gap-1 overflow-y-auto rounded-md border border-solid bg-[#FAFAFB] px-3 py-2 text-sm'>
+          <p
+            className='text-[#ADB5BD]'
+            onClick={() => handleAddTag(inputValue, 0)}
+          >
+            # {inputValue}
+          </p>
+          {isQueryPending ? (
+            <div className='px-2 pb-3 pt-2 text-sm text-gray-500'>
+              검색 중...
+            </div>
+          ) : (
+            autocompleteTags.length > 0 && (
+              <>
+                {autocompleteTags.map(({id, name}) => (
+                  <div key={id} onClick={() => handleAddTag(name, id)}>
+                    <span className='text-[#ADB5BD]'>
+                      # {name.slice(0, inputValue.length)}
+                    </span>
+
+                    <span className='text-black'>
+                      {name.slice(inputValue.length)}
+                    </span>
+                  </div>
+                ))}
+              </>
+            )
+          )}
+        </div>
+      )}
+
+      <Tags
+        tags={selectedTagNames}
+        setTags={setSelectedTagNames}
+        className='mt-2 h-20 flex-wrap'
+      />
+    </div>
+  );
+};