From cc858a189f5cd48f85e0a0d05f1f7e68ce80a45b Mon Sep 17 00:00:00 2001 From: somedaycode Date: Thu, 17 Jun 2021 20:41:15 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20#35=20api=20=EC=9A=94=EC=B2=AD=ED=95=9C?= =?UTF-8?q?=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=ED=95=84=ED=84=B0=20=EB=A9=94?= =?UTF-8?q?=EB=89=B4=EC=97=90=20=EC=B6=9C=EB=A0=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../issues/tableHeader/AssigneeFilter.tsx | 58 ++++++++++------- .../issues/tableHeader/AuthorFilter.tsx | 58 ++++++++++------- .../issues/tableHeader/LabelFilter.tsx | 62 ++++++++++--------- .../issues/tableHeader/MilestoneFilter.tsx | 35 ++++++----- 4 files changed, 121 insertions(+), 92 deletions(-) diff --git a/FE/issue-tracker/src/components/issues/tableHeader/AssigneeFilter.tsx b/FE/issue-tracker/src/components/issues/tableHeader/AssigneeFilter.tsx index 0f8fb55ea..e38573042 100644 --- a/FE/issue-tracker/src/components/issues/tableHeader/AssigneeFilter.tsx +++ b/FE/issue-tracker/src/components/issues/tableHeader/AssigneeFilter.tsx @@ -1,3 +1,5 @@ +import { useRecoilState } from 'recoil'; + import { Menu, MenuButton, @@ -6,35 +8,43 @@ import { Button, Checkbox, } from '@chakra-ui/react'; - -import { ReactComponent as DropDownIcon } from '@assets/dropDown.svg'; -import MenuTitle from '@components/common/MenuTitle'; import { checkBoxStyle, menuItemStyle } from '@styles/chakraStyle'; +import { ReactComponent as DropDownIcon } from '@assets/dropDown.svg'; import { menuBtnStyle } from './style'; +import { assigneeFilterList } from '@store/atoms/issueFilter'; +import { fetchOnMouseEnter } from '@utils/fetchOnEnter'; + +import MenuTitle from '@components/common/MenuTitle'; + function AssigneeFilter() { + const [assigneeList, setAssigneeList] = useRecoilState(assigneeFilterList); + const { data } = assigneeList; + return ( - - } - > - 담당자 - - - 담당자 필터 - - 담당자가 없는 이슈 - - - - 프로필 Q - - - - +
fetchOnMouseEnter(assigneeList, setAssigneeList)}> + + } + > + 담당자 + + + 담당자 필터 + {data.map(({ user_id, name, vatar_url }) => { + return ( + + {name} + + + ); + })} + + +
); } diff --git a/FE/issue-tracker/src/components/issues/tableHeader/AuthorFilter.tsx b/FE/issue-tracker/src/components/issues/tableHeader/AuthorFilter.tsx index 4841a2e7e..9b01b959a 100644 --- a/FE/issue-tracker/src/components/issues/tableHeader/AuthorFilter.tsx +++ b/FE/issue-tracker/src/components/issues/tableHeader/AuthorFilter.tsx @@ -1,3 +1,5 @@ +import { useRecoilState } from 'recoil'; + import { Menu, MenuButton, @@ -6,35 +8,43 @@ import { Button, Checkbox, } from '@chakra-ui/react'; - -import { ReactComponent as DropDownIcon } from '@assets/dropDown.svg'; -import MenuTitle from '@components/common/MenuTitle'; import { checkBoxStyle, menuItemStyle } from '@styles/chakraStyle'; +import { ReactComponent as DropDownIcon } from '@assets/dropDown.svg'; import { menuBtnStyle } from './style'; +import { authorFilterList } from '@store/atoms/issueFilter'; +import { fetchOnMouseEnter } from '@utils/fetchOnEnter'; + +import MenuTitle from '@components/common/MenuTitle'; + function AuthorFilter() { + const [authorList, setAuthorList] = useRecoilState(authorFilterList); + const { data } = authorList; + return ( - - } - > - 작성자 - - - 작성자 필터 - - 프로필사진 Q - - - - 프로필사진 Eve - - - - +
fetchOnMouseEnter(authorList, setAuthorList)}> + + } + > + 작성자 + + + 작성자 필터 + {data.map(({ user_id, name, vatar_url }) => { + return ( + + {name} + + + ); + })} + + +
); } diff --git a/FE/issue-tracker/src/components/issues/tableHeader/LabelFilter.tsx b/FE/issue-tracker/src/components/issues/tableHeader/LabelFilter.tsx index 235165dea..573f7fa3a 100644 --- a/FE/issue-tracker/src/components/issues/tableHeader/LabelFilter.tsx +++ b/FE/issue-tracker/src/components/issues/tableHeader/LabelFilter.tsx @@ -1,3 +1,5 @@ +import { useRecoilState } from 'recoil'; + import { Menu, MenuButton, @@ -6,39 +8,43 @@ import { Button, Checkbox, } from '@chakra-ui/react'; - -import { ReactComponent as DropDownIcon } from '@assets/dropDown.svg'; -import MenuTitle from '@components/common/MenuTitle'; import { checkBoxStyle, menuItemStyle } from '@styles/chakraStyle'; +import { ReactComponent as DropDownIcon } from '@assets/dropDown.svg'; import { menuBtnStyle } from './style'; +import { labelFilterList } from '@store/atoms/issueFilter'; +import { fetchOnMouseEnter } from '@utils/fetchOnEnter'; + +import MenuTitle from '@components/common/MenuTitle'; + function LabelFilter() { + const [labelList, setLabelList] = useRecoilState(labelFilterList); + const { data } = labelList; + return ( - - } - > - 레이블 - - - 레이블 필터 - - 레이블이 없는 이슈 - - - - color Bug - - - - color documentation - - - - +
fetchOnMouseEnter(labelList, setLabelList)}> + + } + > + 레이블 + + + 레이블 필터 + {data.map(({ id, title }) => { + return ( + + {title} + + + ); + })} + + +
); } diff --git a/FE/issue-tracker/src/components/issues/tableHeader/MilestoneFilter.tsx b/FE/issue-tracker/src/components/issues/tableHeader/MilestoneFilter.tsx index f87cccd52..254d50d5d 100644 --- a/FE/issue-tracker/src/components/issues/tableHeader/MilestoneFilter.tsx +++ b/FE/issue-tracker/src/components/issues/tableHeader/MilestoneFilter.tsx @@ -1,3 +1,5 @@ +import { useRecoilState } from 'recoil'; + import { Menu, MenuButton, @@ -6,22 +8,23 @@ import { Button, Checkbox, } from '@chakra-ui/react'; - import { checkBoxStyle, menuItemStyle } from '@styles/chakraStyle'; import { ReactComponent as DropDownIcon } from '@assets/dropDown.svg'; +import { menuBtnStyle } from './style'; + +import { milestoneFilterList } from '@store/atoms/issueFilter'; import MenuTitle from '@components/common/MenuTitle'; -import { menuBtnStyle } from './style'; +import { fetchOnMouseEnter } from '@utils/fetchOnEnter'; function MilestoneFilter() { - const query = 'milestones'; - const fetchOnMouseEnter = ( - e: React.MouseEvent, - query: string - ) => {}; + const [milestoneList, setMilestoneList] = useRecoilState(milestoneFilterList); + const { data } = milestoneList; return ( -
fetchOnMouseEnter(e, query)}> +
fetchOnMouseEnter(milestoneList, setMilestoneList)} + > 마일스톤 필터 - - 마일스톤 없는 필터 - - - - 마스터즈 코스 - - + {data.map(({ id, title }) => { + return ( + + {title} + + + ); + })}