feat: 로드맵 답변 전체 글 보기 필터 구현

Co-authored-by: WaiNaat <[email protected]>
Co-authored-by: gc-park <[email protected]>

frontend/src/apis/essayanswers.ts

@@ -55,3 +55,10 @@ export const requestGetQuizAsync = async (quizId: number) => {
 
 export const requestGetQuiz = (quizId: Number): AxiosPromise<AxiosResponse<Quiz>> =>
   client.get<AxiosResponse<Quiz>>(`/quizzes/${quizId}`);
+
+export const requestGetQuizzes = async (curriculumId: number) => {
+  const { data } = await client.get<{ id: number; question: string }[]>(
+    `/curriculums/${curriculumId}/quizzes`
+  );
+  return data;
+};

frontend/src/apis/filter.ts

@@ -0,0 +1,11 @@
+import { client } from '.';
+import { FilterResponse } from '../models/filter';
+import { Author } from '../models/Studylogs';
+
+export const getMembersForFilter = async (): Promise<Author[]> => {
+  const {
+    data: { members },
+  } = await client.get<FilterResponse>(`/filters`);
+
+  return members;
+};

frontend/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,13 +1,16 @@
-import DropdownMenu from './DropdownMenu';
+/** @jsxImportSource @emotion/react */
+
+import DropdownMenu, { DropdownMenuProps } from './DropdownMenu';
 import { Story, Meta } from '@storybook/react';
+import { css } from '@emotion/react';
 
 export default {
   title: 'Component/DropdownMenu',
   component: DropdownMenu,
   argTypes: { children: { control: 'text' } },
-} as Meta;
+} as Meta<typeof DropdownMenu>;
 
-const Template: Story<typeof DropdownMenu> = (args) => <DropdownMenu {...args} />;
+const Template: Story<React.PropsWithChildren<DropdownMenuProps>> = (args) => <DropdownMenu {...args} />;
 
 export const Basic = Template.bind({});
 
@@ -25,5 +28,5 @@ Basic.args = {
       </li>
     </ul>
   ),
-  onLogoClick: () => {},
+  css: css``,
 };

frontend/src/components/DropdownMenu/DropdownMenu.styles.ts

@@ -2,7 +2,6 @@ import { InterpolationWithTheme } from '@emotion/core';
 import { Theme } from '@emotion/react';
 import styled from '@emotion/styled';
 import COLOR from '../../constants/color';
-import { css } from '@emotion/react';
 
 const Container = styled.div<{ css?: InterpolationWithTheme<Theme> }>`
   height: fit-content;

frontend/src/components/DropdownMenu/DropdownMenu.tsx

@@ -1,12 +1,15 @@
-import PropTypes from 'prop-types';
+/** @jsxImportSource @emotion/react */
+
+// import PropTypes from 'prop-types';
 import { Container } from './DropdownMenu.styles';
+import { css } from '@emotion/react';
 
-const DropdownMenu = ({ children, css }) => {
-  return <Container css={css}>{children}</Container>;
-};
+export interface DropdownMenuProps {
+  css: ReturnType<typeof css>;
+}
 
-DropdownMenu.propTypes = {
-  children: PropTypes.node,
+const DropdownMenu = ({ children, css }: React.PropsWithChildren<DropdownMenuProps>) => {
+  return <Container css={css}>{children}</Container>;
 };
 
 export default DropdownMenu;

frontend/src/components/Items/EssayAnswerItem.tsx

@@ -10,10 +10,10 @@ import {
 import { AlignItemsEndStyle, FlexColumnStyle, FlexStyle } from '../../styles/flex.styles';
 import Card from '../Card/Card';
 import ProfileChip from '../ProfileChip/ProfileChip';
-import { EssayAnswerResponse } from '../../models/EssayAnswers';
+import { EssayAnswer } from '../../models/EssayAnswers';
 
 type EssayAnswerItemProps = (
-  Pick<EssayAnswerResponse, "author" | "answer">
+  Pick<EssayAnswer, "author" | "answer">
   & { title?: string; showTitle?: boolean }
 );
 

frontend/src/components/Lists/QuizAnswerList.tsx

@@ -2,10 +2,10 @@
 import {css} from '@emotion/react';
 import EssayAnswerItem from "../Items/EssayAnswerItem";
 import { NoDefaultHoverLink } from '../Items/EssayAnswerItem.styles';
-import { EssayAnswerResponse } from '../../models/EssayAnswers';
+import { EssayAnswer } from '../../models/EssayAnswers';
 
 interface QuizAnswerListProps {
-  essayAnswers: EssayAnswerResponse[];
+  essayAnswers: EssayAnswer[];
   showQuizTitle?: boolean;
 }
 

frontend/src/components/SearchBar/SearchBar.tsx

@@ -7,7 +7,7 @@ import { ChangeEventHandler, FormEventHandler } from 'react';
 interface SearchBarProps {
   onSubmit?: FormEventHandler;
   onChange: ChangeEventHandler<HTMLInputElement>;
-  css: ReturnType<typeof css>;
+  css?: ReturnType<typeof css>;
   value: string;
 }
 

frontend/src/constants/reactQueryKey.ts

@@ -1,8 +1,10 @@
 const REACT_QUERY_KEY = {
   STUDYLOG: 'STUDYLOG',
   QUIZ: 'QUIZ',
+  QUIZZES: 'QUIZZES',
   ESSAY_ANSWER: 'ESSAY_ANSWER',
   QUIZ_ANSWERS: 'QUIZ_ANSWERS',
+  ESSAY_ANSWER_FILTER_LIST: 'ESSAY_ANSWER_FILTER_LIST',
 };
 
 export default REACT_QUERY_KEY;

frontend/src/hooks/queries/essayanswer.ts

@@ -9,13 +9,15 @@ import {
   requestGetEssayAnswers,
   requestGetQuizAnswers,
   requestGetQuizAsync,
+  requestGetQuizzes,
 } from '../../apis/essayanswers';
 import { ResponseError } from '../../apis/studylogs';
 import { ALERT_MESSAGE, PATH } from '../../constants';
 import ERROR_CODE from '../../constants/errorCode';
 import { ERROR_MESSAGE, SUCCESS_MESSAGE } from '../../constants/message';
 import REACT_QUERY_KEY from '../../constants/reactQueryKey';
 import {
+  EssayAnswer,
   EssayAnswerFilterRequest,
   EssayAnswerRequest,
   EssayAnswerResponse,
@@ -53,15 +55,15 @@ export const useEditEssayAnswer = ({ essayAnswerId }: { essayAnswerId: number })
 
 export const useGetEssayAnswer = (
   { essayAnswerId },
-  { onSuccess = (essayAnswer: EssayAnswerResponse) => {}, onError = () => {} } = {}
+  { onSuccess = (essayAnswer: EssayAnswer) => {}, onError = () => {} } = {}
 ) => {
   const history = useHistory();
   const { openSnackBar } = useSnackBar();
-  return useQuery<EssayAnswerResponse>(
+  return useQuery<EssayAnswer>(
     [REACT_QUERY_KEY.ESSAY_ANSWER, essayAnswerId],
     () => requestGetEssayAnswer(essayAnswerId),
     {
-      onSuccess: (essayAnswer: EssayAnswerResponse) => {
+      onSuccess: (essayAnswer: EssayAnswer) => {
         onSuccess?.(essayAnswer);
       },
       onError: (error) => {
@@ -93,13 +95,13 @@ export const useDeleteEssayAnswerMutation = ({
 
 export const useGetQuizAnswerList = (
   { quizId },
-  { onSuccess = (essayAnswer: EssayAnswerResponse[]) => {}, onError = () => {} } = {}
+  { onSuccess = (essayAnswer: EssayAnswer[]) => {}, onError = () => {} } = {}
 ) => {
-  return useQuery<EssayAnswerResponse[]>(
+  return useQuery<EssayAnswer[]>(
     [REACT_QUERY_KEY.QUIZ_ANSWERS, quizId],
     () => requestGetQuizAnswers(quizId),
     {
-      onSuccess: (essayAnswer: EssayAnswerResponse[]) => {
+      onSuccess: (essayAnswer: EssayAnswer[]) => {
         onSuccess?.(essayAnswer);
       },
       onError: (error) => {},
@@ -110,7 +112,7 @@ export const useGetQuizAnswerList = (
 };
 
 export const useGetEssayAnswers = (filter: EssayAnswerFilterRequest) => {
-  return useQuery<EssayAnswerResponse[]>([REACT_QUERY_KEY.ESSAY_ANSWER_FILTER_LIST, filter], () =>
+  return useQuery<EssayAnswerResponse>([REACT_QUERY_KEY.ESSAY_ANSWER_FILTER_LIST, filter], () =>
     requestGetEssayAnswers(filter)
   );
 };
@@ -127,3 +129,9 @@ export const useGetQuiz = (
     retry: false,
   });
 };
+
+export const useGetQuizzes = ({ curriculumId }: { curriculumId: number }) => {
+  return useQuery<Array<{ id: number; question: string }>>([REACT_QUERY_KEY.QUIZZES], () =>
+    requestGetQuizzes(curriculumId)
+  );
+};