feat(editor): memo 구현

src/app/(sidebar)/write/[id]/api/useGetCardDetail/useGetCardDetail.ts

@@ -1,17 +1,14 @@
 import { http } from '@/apis/http';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { JSONContent } from '@tiptap/react';
+import { Tag } from '../useGetTags/useGetTags';
 
 export interface GetCardDetailResponse {
   title: string;
   content: JSONContent;
   updatedDate: `${string} ${string}`;
   cardTypeValueList: string[];
-  tagList: Array<{
-    id: number;
-    name: string;
-    type: '인성' | '역량' | '분류';
-  }>;
+  tagList: Array<Tag>;
 }
 
 const getCardDetail = (cardId: number) =>

src/app/(sidebar)/write/[id]/api/useGetTags/useGetTags.ts

@@ -0,0 +1,20 @@
+import { http } from '@/apis/http';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+export interface Tag {
+  id: number;
+  name: string;
+  type: string;
+}
+
+const getTags = () =>
+  http.get<Array<Tag>>({
+    url: '/tags',
+  });
+
+export const useGetTags = () =>
+  useSuspenseQuery({
+    queryKey: ['tags'],
+    queryFn: getTags,
+    select: ({ data }) => data,
+  });

src/app/(sidebar)/write/[id]/fetcher/TagsFetcher.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { generateContext } from '@/lib';
+import { Tag, useGetTags } from '../api/useGetTags/useGetTags';
+import { StrictPropsWithChildren } from '@/types';
+
+const [TagsProvider, useTagsContext] = generateContext<{ tags: Array<Tag> }>({ name: 'tags' });
+
+function TagsFetcher({ children }: StrictPropsWithChildren) {
+  const { data } = useGetTags();
+
+  return <TagsProvider tags={data}>{children}</TagsProvider>;
+}
+
+export { TagsFetcher, useTagsContext };

src/app/(sidebar)/write/[id]/hooks/index.ts

@@ -4,19 +4,18 @@ import { usePostCardTag } from '../api/usePostCardTag/usePostCardTag';
 import { useDeleteCardTag } from '../api/useDeleteCardTag/useDeleteCardTag';
 import { useCardDetailTagsContext } from '../fetcher/CardTagFetcher';
 import { GetCardDetailResponse } from '@/app/(sidebar)/write/[id]/api/useGetCardDetail/useGetCardDetail';
+import { useTagsContext } from '../fetcher/TagsFetcher';
 
 export function useWrite(id: number) {
   const { title: prevTitle, updatedDate, tagList, content } = useCardDetailTagsContext();
+  const { tags } = useTagsContext();
 
-  const personalityTags = useMemo(() => tagList.filter((tag) => tag.type === '인성'), [id]);
-  const abilityTags = useMemo(() => tagList.filter((tag) => tag.type === '역량'), [id]);
-  const categoryTags = useMemo(() => tagList.filter((tag) => tag.type === '분류'), [id]);
+  const personalityTags = useMemo(() => tags.filter((tag) => tag.type === '인성'), [id]);
+  const abilityTags = useMemo(() => tags.filter((tag) => tag.type === '역량'), [id]);
+  const categoryTags = useMemo(() => tags.filter((tag) => tag.type === '분류'), [id]);
 
   const [title, setTitle] = useState<string>(prevTitle || '');
-  const [selectedTags, setSelectedTags] = useState<GetCardDetailResponse['tagList']>([
-    ...personalityTags,
-    ...abilityTags,
-  ]);
+  const [selectedTags, setSelectedTags] = useState<GetCardDetailResponse['tagList']>(tagList);
   const [selectedCategories, setSelectedCategories] = useState<GetCardDetailResponse['tagList']>(categoryTags);
 
   const { mutate: mutatePutCardTitle } = usePutCardTitle(id);

src/app/(sidebar)/write/[id]/layout.tsx

@@ -1,12 +1,15 @@
 import { AsyncBoundaryWithQuery } from '@/lib';
 import { PropsWithChildren } from 'react';
 import { CardTagFetcher } from './fetcher/CardTagFetcher';
+import { TagsFetcher } from './fetcher/TagsFetcher';
 
 export default function WriteLayout({ params: { id }, children }: PropsWithChildren<{ params: { id: string } }>) {
   return (
     <AsyncBoundaryWithQuery>
       <CardTagFetcher cardId={Number(id)}>
-        <main>{children}</main>
+        <TagsFetcher>
+          <main>{children}</main>
+        </TagsFetcher>
       </CardTagFetcher>
     </AsyncBoundaryWithQuery>
   );

src/lib/QueryProvider/QueryProvider.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { useState } from 'react';
 import type { PropsWithChildren } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { QueryClientConfig } from '@tanstack/react-query';
 
 const queryClientOption: QueryClientConfig = {
@@ -22,10 +21,5 @@ const queryClientOption: QueryClientConfig = {
 export function QueryProvider({ children }: PropsWithChildren) {
   const [queryClient] = useState(() => new QueryClient(queryClientOption));
 
-  return (
-    <QueryClientProvider client={queryClient}>
-      {children}
-      <ReactQueryDevtools />
-    </QueryClientProvider>
-  );
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
 }