Fix: #35 체크박스 바깥 클릭시의 에러 수정

codesquad-members-2021 · Jun 23, 2021 · 5efc0c4 · 5efc0c4
1 parent 5c4ef0d
commit 5efc0c4
Show file tree

Hide file tree

Showing 4 changed files with 150 additions and 26 deletions.
diff --git 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<CheckBoxs>({});
+
+  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 (
     <div onMouseEnter={() => fetchOnMouseEnter(assigneeList, setAssigneeList)}>
       <Menu>
@@ -34,12 +61,24 @@ function AssigneeFilter() {
         <MenuList>
           <MenuTitle>담당자 필터</MenuTitle>
           {data.length > 0 ? (
-            data.map(({ user_id, name, avatar_url }) => {
+            data.map(({ user_id, name, vatar_url }) => {
               return (
-                <MenuItem key={user_id} data-id={user_id} {...menuItemStyle}>
-                  {name}
-                  <Checkbox {...checkBoxStyle} />
-                </MenuItem>
+                <ModalWrap
+                  key={user_id}
+                  onClick={handleClickCheckBox}
+                  id={user_id}
+                >
+                  <Checkbox
+                    className="checkBox"
+                    id={user_id}
+                    checked={isChecked[user_id]}
+                    {...checkBoxStyle}
+                  >
+                    <MenuItem {...menuItemStyle} pointerEvents="none">
+                      {name}
+                    </MenuItem>
+                  </Checkbox>
+                </ModalWrap>
               );
             })
           ) : (
@@ -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
@@ -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<CheckBoxs>({});
+
+  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 (
     <div onMouseEnter={() => fetchOnMouseEnter(authorList, setAuthorList)}>
@@ -37,10 +65,22 @@ function AuthorFilter() {
           {data.length > 0 ? (
             data.map(({ user_id, name, vatar_url }) => {
               return (
-                <MenuItem key={user_id} data-id={user_id} {...menuItemStyle}>
-                  {name}
-                  <Checkbox {...checkBoxStyle} />
-                </MenuItem>
+                <ModalWrap
+                  key={user_id}
+                  onClick={handleClickCheckBox}
+                  id={user_id}
+                >
+                  <Checkbox
+                    className="checkBox"
+                    id={user_id}
+                    checked={isChecked[user_id]}
+                    {...checkBoxStyle}
+                  >
+                    <MenuItem {...menuItemStyle} pointerEvents="none">
+                      {name}
+                    </MenuItem>
+                  </Checkbox>
+                </ModalWrap>
               );
             })
           ) : (
@@ -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
@@ -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() {
           <MenuTitle>레이블 필터</MenuTitle>
           {data.map(({ id, title }) => {
             return (
-              <MenuItem
-                key={id}
-                onClick={handleClickCheckBox}
-                {...menuItemStyle}
-              >
-                {title}
-                <Checkbox id={id} checked={isChecked[id]} {...checkBoxStyle} />
-              </MenuItem>
+              <ModalWrap key={id} onClick={handleClickCheckBox} id={id}>
+                <Checkbox
+                  className="checkBox"
+                  id={id}
+                  checked={isChecked[id]}
+                  {...checkBoxStyle}
+                >
+                  <MenuItem {...menuItemStyle} pointerEvents="none">
+                    {title}
+                  </MenuItem>
+                </Checkbox>
+              </ModalWrap>
             );
           })}
         </MenuList>
@@ -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
@@ -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() {
           <MenuTitle>마일스톤 필터</MenuTitle>
           {data.map(({ id, title }) => {
             return (
-              <MenuItem
-                key={id}
-                onClick={handleClickCheckBox}
-                {...menuItemStyle}
-              >
-                {title}
-                <Checkbox id={id} checked={isChecked[id]} {...checkBoxStyle} />
-              </MenuItem>
+              <ModalWrap key={id} onClick={handleClickCheckBox} id={id}>
+                <Checkbox
+                  className="checkBox"
+                  id={id}
+                  checked={isChecked[id]}
+                  {...checkBoxStyle}
+                >
+                  <MenuItem {...menuItemStyle} pointerEvents="none">
+                    {title}
+                  </MenuItem>
+                </Checkbox>
+              </ModalWrap>
             );
           })}
         </MenuList>
@@ -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};
+  }
+`;