Merge pull request #1615 from woowacourse/feature/1388-essay-answer-list

로드맵 퀴즈 답변 전체 글 필터 구현

frontend/src/apis/essayanswers.ts

@@ -1,12 +1,34 @@
 import { AxiosPromise, AxiosResponse } from 'axios';
 import { client } from '.';
-import { EssayAnswerRequest, EssayEditRequest } from '../models/EssayAnswers';
+import {
+  EssayAnswerListRequest,
+  EssayAnswerRequest,
+  EssayEditRequest,
+} from '../models/EssayAnswers';
 import { Quiz } from '../models/Keywords';
 
 export const createNewEssayAnswerRequest = (body: EssayAnswerRequest) =>
   client.post(`/essay-answers`, body);
 
-export const requestGetEssayAnswer = async (essayAnswerId) => {
+export const requestGetEssayAnswers = async (params: EssayAnswerListRequest) => {
+  const { quizIds, memberIds, ...otherParams } = params;
+
+  const axiosParams: Omit<EssayAnswerListRequest, 'quizIds' | 'memberIds'> & {
+    quizIds?: string;
+    memberIds?: string;
+  } = { ...otherParams };
+
+  if (quizIds) axiosParams.quizIds = quizIds.join(',');
+  if (memberIds) axiosParams.memberIds = memberIds.join(',');
+
+  const { data } = await client.get('/essay-answers', {
+    params: axiosParams,
+  });
+
+  return data;
+};
+
+export const requestGetEssayAnswer = async (essayAnswerId: number) => {
   const { data } = await client.get(`/essay-answers/${essayAnswerId}`);
   return data;
 };
@@ -15,21 +37,28 @@ export const requestEditEssayAnswer = async (essayAnswerId: number, body: EssayE
   await client.patch(`/essay-answers/${essayAnswerId}`, body);
 };
 
-export const requestDeleteEssayAnswer = async (essayAnswerId) => {
+export const requestDeleteEssayAnswer = async (essayAnswerId: number) => {
   await client.delete(`/essay-answers/${essayAnswerId}`);
 };
 
-export const requestGetEssayAnswerList = async (quizId) => {
+export const requestGetQuizAnswers = async (quizId: number) => {
   const { data } = await client.get(`/quizzes/${quizId}/essay-answers`);
 
   return data;
 };
 
-export const requestGetQuizAsync = async (quizId) => {
+export const requestGetQuizAsync = async (quizId: number) => {
   const { data } = await client.get(`/quizzes/${quizId}`);
 
   return data;
 };
 
 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.js → frontend/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,12 +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<typeof DropdownMenu>;
 
-const Template = (args) => <DropdownMenu {...args} />;
+const Template: Story<React.PropsWithChildren<DropdownMenuProps>> = (args) => <DropdownMenu {...args} />;
 
 export const Basic = Template.bind({});
 
@@ -24,5 +28,5 @@ Basic.args = {
       </li>
     </ul>
   ),
-  onLogoClick: () => {},
+  css: css``,
 };

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

@@ -1,11 +1,11 @@
+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';
 import MEDIA_QUERY from '../../constants/mediaQuery';
 
-const Container = styled.div<{
-  css: ReturnType<typeof css>;
-}>`
+const Container = styled.div<{ css?: InterpolationWithTheme<Theme> }>`
   height: fit-content;
   max-height: 32rem;
   white-space: nowrap;
@@ -26,7 +26,7 @@ const Container = styled.div<{
   /* transform: translateY(30%); */
 
   && {
-    ${(props) => props.css}
+    ${({ css }) => css}
   }
 
   /* &:before {

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/FilterList/FilterList.tsx → frontend/src/components/FilterList/FilterList.jsx

@@ -1,3 +1,5 @@
+/** @jsxImportSource @emotion/react */
+
 import { useState } from 'react';
 import { DropdownMenu } from '..';
 import SearchBar from '../SearchBar/SearchBar';
@@ -81,7 +83,7 @@ const FilterList = ({
               <SearchBarWrapper>
                 <SearchBar
                   css={SearchBarStyle}
-                  onChange={({ target }) => setSearchKeyword(target.value)}
+                  onChange={(value) => setSearchKeyword(value)}
                   value={searchKeyword}
                 />
               </SearchBarWrapper>

frontend/src/components/FilterList/FilterList.styles.ts

@@ -18,10 +18,7 @@ const DropdownToggledStyle = css`
   }
 `;
 
-const Container = styled.div<{
-  isDropdownToggled: string;
-  css: ReturnType<typeof css> | null;
-}>`
+const Container = styled.div<{ isDropdownToggled: boolean }>`
   background-color: ${COLOR.LIGHT_GRAY_50};
 
   border: 1px solid ${COLOR.DARK_GRAY_400};
@@ -33,7 +30,7 @@ const Container = styled.div<{
   align-items: center;
 
   ${({ isDropdownToggled }) => isDropdownToggled && DropdownToggledStyle}
-  ${({ css }) => css && css}
+  ${({ css }) => css}
 
   & > div:not(:last-child) {
     margin-right: 3.2rem;
@@ -148,9 +145,7 @@ const ResetFilter = styled.div`
   flex-shrink: 0;
 `;
 
-const CheckIcon = styled.img<{
-  checked: boolean;
-}>`
+const CheckIcon = styled.img<{ checked: boolean }>`
   ${({ checked }) => !checked && 'visibility: hidden;'}
 `;