From 5efc0c427ef22de47cee4111ec2d6434c8dadf46 Mon Sep 17 00:00:00 2001 From: somedaycode Date: Wed, 23 Jun 2021 18:32:33 +0900 Subject: [PATCH] =?UTF-8?q?Fix:=20#35=20=EC=B2=B4=ED=81=AC=EB=B0=95?= =?UTF-8?q?=EC=8A=A4=20=EB=B0=94=EA=B9=A5=20=ED=81=B4=EB=A6=AD=EC=8B=9C?= =?UTF-8?q?=EC=9D=98=20=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../issues/tableHeader/AssigneeFilter.tsx | 58 +++++++++++++++++-- .../issues/tableHeader/AuthorFilter.tsx | 57 ++++++++++++++++-- .../issues/tableHeader/LabelFilter.tsx | 30 +++++++--- .../issues/tableHeader/MilestoneFilter.tsx | 31 +++++++--- 4 files changed, 150 insertions(+), 26 deletions(-) diff --git a/FE/issue-tracker/src/components/issues/tableHeader/AssigneeFilter.tsx b/FE/issue-tracker/src/components/issues/tableHeader/AssigneeFilter.tsx index 48dfd4fac..15193dc76 100644 --- a/FE/issue-tracker/src/components/issues/tableHeader/AssigneeFilter.tsx +++ b/FE/issue-tracker/src/components/issues/tableHeader/AssigneeFilter.tsx @@ -1,4 +1,6 @@ +import { useState } from 'react'; import { useRecoilState } from 'recoil'; +import styled from 'styled-components'; import { Menu, @@ -12,14 +14,39 @@ import { checkBoxStyle, menuItemStyle } from '@styles/chakraStyle'; import { ReactComponent as DropDownIcon } from '@assets/dropDown.svg'; import { menuBtnStyle } from './style'; +import { querySet } from '@store/atoms/issueList'; import { assigneeFilterList } from '@store/atoms/issueFilter'; import { fetchOnMouseEnter } from '@utils/fetchOnEnter'; import MenuTitle from '@components/common/MenuTitle'; +import type { CheckBoxs } from './MilestoneFilter'; function AssigneeFilter() { const [assigneeList, setAssigneeList] = useRecoilState(assigneeFilterList); const { data, errorMsg } = assigneeList; + const [query, setQuery] = useRecoilState(querySet); + const [isChecked, setChecked] = useState({}); + + const handleClickCheckBox = (e: React.MouseEvent) => { + const target = e.target as HTMLInputElement; + const checkNumber = target.id; + if (checkNumber === '') return; + + const toggleBoolean = isChecked[checkNumber] === true ? false : true; + if (toggleBoolean) + setQuery({ + closed: null, + author: null, + assignee: checkNumber, + label: null, + milestone: null, + }); + + setChecked({ + ...isChecked, + [checkNumber]: toggleBoolean, + }); + }; return (
fetchOnMouseEnter(assigneeList, setAssigneeList)}> @@ -34,12 +61,24 @@ function AssigneeFilter() { 담당자 필터 {data.length > 0 ? ( - data.map(({ user_id, name, avatar_url }) => { + data.map(({ user_id, name, vatar_url }) => { return ( - - {name} - - + + + + {name} + + + ); }) ) : ( @@ -52,3 +91,12 @@ function AssigneeFilter() { } export default AssigneeFilter; + +const ModalWrap = styled.div` + width: 100%; + height: 100%; + + &:hover { + background-color: ${({ theme }) => theme.colors.gr_inputBackground}; + } +`; diff --git a/FE/issue-tracker/src/components/issues/tableHeader/AuthorFilter.tsx b/FE/issue-tracker/src/components/issues/tableHeader/AuthorFilter.tsx index 8f75c1b52..d7290fd49 100644 --- a/FE/issue-tracker/src/components/issues/tableHeader/AuthorFilter.tsx +++ b/FE/issue-tracker/src/components/issues/tableHeader/AuthorFilter.tsx @@ -1,4 +1,6 @@ +import { useState } from 'react'; import { useRecoilState } from 'recoil'; +import styled from 'styled-components'; import { Menu, @@ -12,14 +14,40 @@ import { checkBoxStyle, menuItemStyle } from '@styles/chakraStyle'; import { ReactComponent as DropDownIcon } from '@assets/dropDown.svg'; import { menuBtnStyle } from './style'; +import { querySet } from '@store/atoms/issueList'; import { authorFilterList } from '@store/atoms/issueFilter'; import { fetchOnMouseEnter } from '@utils/fetchOnEnter'; import MenuTitle from '@components/common/MenuTitle'; +import type { CheckBoxs } from './MilestoneFilter'; function AuthorFilter() { const [authorList, setAuthorList] = useRecoilState(authorFilterList); const { data, errorMsg } = authorList; + const [query, setQuery] = useRecoilState(querySet); + const [isChecked, setChecked] = useState({}); + + const handleClickCheckBox = (e: React.MouseEvent) => { + const target = e.target as HTMLInputElement; + const checkNumber = target.id; + if (checkNumber === '') return; + console.log('hi'); + + const toggleBoolean = isChecked[checkNumber] === true ? false : true; + if (toggleBoolean) + setQuery({ + closed: null, + author: checkNumber, + assignee: null, + label: null, + milestone: null, + }); + + setChecked({ + ...isChecked, + [checkNumber]: toggleBoolean, + }); + }; return (
fetchOnMouseEnter(authorList, setAuthorList)}> @@ -37,10 +65,22 @@ function AuthorFilter() { {data.length > 0 ? ( data.map(({ user_id, name, vatar_url }) => { return ( - - {name} - - + + + + {name} + + + ); }) ) : ( @@ -53,3 +93,12 @@ function AuthorFilter() { } export default AuthorFilter; + +const ModalWrap = styled.div` + width: 100%; + height: 100%; + + &:hover { + background-color: ${({ theme }) => theme.colors.gr_inputBackground}; + } +`; diff --git a/FE/issue-tracker/src/components/issues/tableHeader/LabelFilter.tsx b/FE/issue-tracker/src/components/issues/tableHeader/LabelFilter.tsx index 9ef6f04d7..4ef9cfe85 100644 --- a/FE/issue-tracker/src/components/issues/tableHeader/LabelFilter.tsx +++ b/FE/issue-tracker/src/components/issues/tableHeader/LabelFilter.tsx @@ -1,5 +1,6 @@ import { useState } from 'react'; import { useRecoilState } from 'recoil'; +import styled from 'styled-components'; import { Menu, @@ -63,14 +64,18 @@ function LabelFilter() { 레이블 필터 {data.map(({ id, title }) => { return ( - - {title} - - + + + + {title} + + + ); })} @@ -80,3 +85,12 @@ function LabelFilter() { } export default LabelFilter; + +const ModalWrap = styled.div` + width: 100%; + height: 100%; + + &:hover { + background-color: ${({ theme }) => theme.colors.gr_inputBackground}; + } +`; diff --git a/FE/issue-tracker/src/components/issues/tableHeader/MilestoneFilter.tsx b/FE/issue-tracker/src/components/issues/tableHeader/MilestoneFilter.tsx index c0776d032..e066febdc 100644 --- a/FE/issue-tracker/src/components/issues/tableHeader/MilestoneFilter.tsx +++ b/FE/issue-tracker/src/components/issues/tableHeader/MilestoneFilter.tsx @@ -1,5 +1,6 @@ import { useState } from 'react'; import { useRecoilState } from 'recoil'; +import styled from 'styled-components'; import { Menu, @@ -34,7 +35,6 @@ function MilestoneFilter() { if (toggleBoolean) setQuery({ ...query, - closed: null, milestone: Number(checkNumber), }); @@ -61,14 +61,18 @@ function MilestoneFilter() { 마일스톤 필터 {data.map(({ id, title }) => { return ( - - {title} - - + + + + {title} + + + ); })} @@ -82,3 +86,12 @@ export default MilestoneFilter; export type CheckBoxs = { [id: string]: boolean; }; + +const ModalWrap = styled.div` + width: 100%; + height: 100%; + + &:hover { + background-color: ${({ theme }) => theme.colors.gr_inputBackground}; + } +`;