Feat: #35 api 요청한 데이터 필터 메뉴에 출력

codesquad-members-2021 · Jun 17, 2021 · cc858a1 · cc858a1
1 parent 907588b
commit cc858a1
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 92 deletions.
diff --git 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 (
-    <Menu>
-      <MenuButton
-        className="menu-title"
-        {...menuBtnStyle}
-        as={Button}
-        rightIcon={<DropDownIcon />}
-      >
-        담당자
-      </MenuButton>
-      <MenuList>
-        <MenuTitle>담당자 필터</MenuTitle>
-        <MenuItem {...menuItemStyle}>
-          <span>담당자가 없는 이슈</span>
-          <Checkbox {...checkBoxStyle} />
-        </MenuItem>
-        <MenuItem {...menuItemStyle}>
-          <span>프로필 Q</span>
-          <Checkbox {...checkBoxStyle} />
-        </MenuItem>
-      </MenuList>
-    </Menu>
+    <div onMouseEnter={() => fetchOnMouseEnter(assigneeList, setAssigneeList)}>
+      <Menu>
+        <MenuButton
+          className="menu-title"
+          {...menuBtnStyle}
+          as={Button}
+          rightIcon={<DropDownIcon />}
+        >
+          담당자
+        </MenuButton>
+        <MenuList>
+          <MenuTitle>담당자 필터</MenuTitle>
+          {data.map(({ user_id, name, vatar_url }) => {
+            return (
+              <MenuItem key={user_id} {...menuItemStyle}>
+                {name}
+                <Checkbox {...checkBoxStyle} />
+              </MenuItem>
+            );
+          })}
+        </MenuList>
+      </Menu>
+    </div>
   );
 }
 

diff --git 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 (
-    <Menu>
-      <MenuButton
-        className="menu-title"
-        {...menuBtnStyle}
-        as={Button}
-        rightIcon={<DropDownIcon />}
-      >
-        작성자
-      </MenuButton>
-      <MenuList>
-        <MenuTitle>작성자 필터</MenuTitle>
-        <MenuItem {...menuItemStyle}>
-          프로필사진 Q
-          <Checkbox {...checkBoxStyle} />
-        </MenuItem>
-        <MenuItem {...menuItemStyle}>
-          프로필사진 Eve
-          <Checkbox {...checkBoxStyle} />
-        </MenuItem>
-      </MenuList>
-    </Menu>
+    <div onMouseEnter={() => fetchOnMouseEnter(authorList, setAuthorList)}>
+      <Menu>
+        <MenuButton
+          className="menu-title"
+          {...menuBtnStyle}
+          as={Button}
+          rightIcon={<DropDownIcon />}
+        >
+          작성자
+        </MenuButton>
+        <MenuList>
+          <MenuTitle>작성자 필터</MenuTitle>
+          {data.map(({ user_id, name, vatar_url }) => {
+            return (
+              <MenuItem key={user_id} {...menuItemStyle}>
+                {name}
+                <Checkbox {...checkBoxStyle} />
+              </MenuItem>
+            );
+          })}
+        </MenuList>
+      </Menu>
+    </div>
   );
 }
 

diff --git 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 (
-    <Menu>
-      <MenuButton
-        className="menu-title"
-        {...menuBtnStyle}
-        as={Button}
-        rightIcon={<DropDownIcon />}
-      >
-        레이블
-      </MenuButton>
-      <MenuList>
-        <MenuTitle>레이블 필터</MenuTitle>
-        <MenuItem {...menuItemStyle}>
-          <span>레이블이 없는 이슈</span>
-          <Checkbox {...checkBoxStyle} />
-        </MenuItem>
-        <MenuItem {...menuItemStyle}>
-          color Bug
-          <Checkbox {...checkBoxStyle} />
-        </MenuItem>
-        <MenuItem {...menuItemStyle}>
-          color documentation
-          <Checkbox {...checkBoxStyle} />
-        </MenuItem>
-      </MenuList>
-    </Menu>
+    <div onMouseEnter={() => fetchOnMouseEnter(labelList, setLabelList)}>
+      <Menu>
+        <MenuButton
+          className="menu-title"
+          {...menuBtnStyle}
+          as={Button}
+          rightIcon={<DropDownIcon />}
+        >
+          레이블
+        </MenuButton>
+        <MenuList>
+          <MenuTitle>레이블 필터</MenuTitle>
+          {data.map(({ id, title }) => {
+            return (
+              <MenuItem key={id} {...menuItemStyle}>
+                {title}
+                <Checkbox {...checkBoxStyle} />
+              </MenuItem>
+            );
+          })}
+        </MenuList>
+      </Menu>
+    </div>
   );
 }
 

diff --git 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<HTMLDivElement, MouseEvent>,
-    query: string
-  ) => {};
+  const [milestoneList, setMilestoneList] = useRecoilState(milestoneFilterList);
+  const { data } = milestoneList;
 
   return (
-    <div onMouseEnter={(e) => fetchOnMouseEnter(e, query)}>
+    <div
+      onMouseEnter={() => fetchOnMouseEnter(milestoneList, setMilestoneList)}
+    >
       <Menu>
         <MenuButton
           className="menu-title"
@@ -33,14 +36,14 @@ function MilestoneFilter() {
         </MenuButton>
         <MenuList>
           <MenuTitle>마일스톤 필터</MenuTitle>
-          <MenuItem {...menuItemStyle}>
-            마일스톤 없는 필터
-            <Checkbox {...checkBoxStyle} />
-          </MenuItem>
-          <MenuItem {...menuItemStyle}>
-            마스터즈 코스
-            <Checkbox {...checkBoxStyle} />
-          </MenuItem>
+          {data.map(({ id, title }) => {
+            return (
+              <MenuItem key={id} {...menuItemStyle}>
+                {title}
+                <Checkbox {...checkBoxStyle} />
+              </MenuItem>
+            );
+          })}
         </MenuList>
       </Menu>
     </div>