feat: (#205) 게시글 작성 페이지에서 카테고리 리스트를 불러와 옵션으로 변환하는 기능 구현

frontend/__test__/changeCategoryToOption.test.ts

@@ -0,0 +1,27 @@
+import { Category } from '@type/category';
+
+import { Option } from '@components/common/MultiSelect/types';
+
+import { changeCategoryToOption } from '@utils/post/changeCategoryToOption';
+
+describe('changeCategoryToOption 함수를 이용해서 카테고리 리스트를 셀렉트 컴포넌트에 사용되는 옵션 리스트로 변환한다.', () => {
+ test('카테고리 리스트로 옵션 리스트를 만든다.', () => {
+ const categoryList: Category[] = [
+ { id: 1, isFavorite: false, name: '갤럭시' },
+ { id: 2, isFavorite: true, name: '애플' },
+ ];
+
+ const result: Option[] = changeCategoryToOption(categoryList);
+
+ expect(result).toEqual([
+ {
+ id: 1,
+ name: '갤럭시',
+ },
+ {
+ id: 2,
+ name: '애플',
+ },
+ ]);
+ });
+});

frontend/__test__/hooks/query/useCategoryList.test.tsx

@@ -0,0 +1,48 @@
+import React, { ReactNode } from 'react';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { useCategoryList } from '@hooks/query/category/useCategoryList';
+
+import { transformCategoryListResponse } from '@api/categoryList';
+
+import { MOCK_CATEGORY_LIST, MOCK_GUEST_CATEGORY_LIST } from '@mocks/mockData/categoryList';
+
+const queryClient = new QueryClient();
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+ <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+describe('useCategoryList 훅이 카테고리 목록을 불러오는지 확인한다.', () => {
+ test('비회원 카테고리 목록을 불러온다.', async () => {
+ const { result } = renderHook(() => useCategoryList(false), {
+ wrapper,
+ });
+
+ await waitFor(() =>
+ expect(result.current.data).toEqual(transformCategoryListResponse(MOCK_GUEST_CATEGORY_LIST))
+ );
+ });
+
+ test('회원 카테고리 목록을 불러온다.', async () => {
+ const { result } = renderHook(() => useCategoryList(true), {
+ wrapper,
+ });
+
+ await waitFor(() =>
+ expect(result.current.data).toEqual(transformCategoryListResponse(MOCK_CATEGORY_LIST))
+ );
+ });
+
+ test('회원 카테고리 목록을 불러온다.', async () => {
+ const { result } = renderHook(() => useCategoryList(true), {
+ wrapper,
+ });
+
+ await waitFor(() =>
+ expect(result.current.data).toEqual(transformCategoryListResponse(MOCK_CATEGORY_LIST))
+ );
+ });
+});

frontend/src/components/PostForm/index.tsx

@@ -1,10 +1,12 @@
 import type { UseMutateFunction } from '@tanstack/react-query';
 
-import React, { HTMLAttributes, useState } from 'react';
+import React, { HTMLAttributes, useContext, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { PostInfo } from '@type/post';
 
+import { AuthContext } from '@hooks/context/auth';
+import { useCategoryList } from '@hooks/query/category/useCategoryList';
 import { useContentImage } from '@hooks/useContentImage';
 import { useMultiSelect } from '@hooks/useMultiSelect';
 import { useText } from '@hooks/useText';
@@ -20,10 +22,9 @@ import WritingVoteOptionList from '@components/optionList/WritingVoteOptionList'
 
 import { POST_DESCRIPTION_MAX_LENGTH, POST_TITLE_MAX_LENGTH } from '@constants/post';
 
+import { changeCategoryToOption } from '@utils/post/changeCategoryToOption';
 import { addTimeToDate, formatTimeWithOption } from '@utils/post/formatTime';
 
-import { MOCK_CATEGORY_LIST } from '@mocks/mockData/categoryList';
-
 import { DEADLINE_OPTION } from './constants';
 import ContentImagePart from './ContentImageSection';
 import * as S from './style';
@@ -53,6 +54,8 @@ export default function PostForm({ data, mutate, isError, error }: PostFormProps
  const navigate = useNavigate();
  const writingOptionHook = useWritingOption(voteInfo?.options);
  const contentImageHook = useContentImage(imageUrl);
+ const { isLogged } = useContext(AuthContext).loggedInfo;
+ const { data: categoryList } = useCategoryList(isLogged);
 
  const { isOpen, openComponent, closeComponent } = useToggle();
  const [time, setTime] = useState({
@@ -65,6 +68,8 @@ export default function PostForm({ data, mutate, isError, error }: PostFormProps
  const { text: writingTitle, handleTextChange: handleTitleChange } = useText(title ?? '');
  const { text: writingContent, handleTextChange: handleContentChange } = useText(content ?? '');
 
+ const categoryOptionList = changeCategoryToOption(categoryList ?? []);
+
  const handleDeadlineButtonClick = (option: string) => {
  setTime(formatTimeWithOption(option));
  };
@@ -184,7 +189,7 @@ export default function PostForm({ data, mutate, isError, error }: PostFormProps
  <S.LeftSide $hasImage={!!contentImageHook.contentImage}>
  <MultiSelect
  selectedOptionList={selectedOptionList}
- optionList={MOCK_CATEGORY_LIST}
+ optionList={categoryOptionList}
  handleOptionAdd={handleOptionAdd}
  handleOptionDelete={handleOptionDelete}
  placeholder="카테고리를 선택해주세요."

frontend/src/utils/post/changeCategoryToOption.ts

@@ -0,0 +1,7 @@
+import { Category } from '@type/category';
+
+import { Option } from '@components/common/MultiSelect/types';
+
+export const changeCategoryToOption = (categoryList: Category[]): Option[] => {
+ return categoryList.map(category => ({ id: category.id, name: category.name }));
+};