From f4d7e268423ea0d8ae8199925faf36e0ea3af9ac Mon Sep 17 00:00:00 2001
From: fuse <massenger7@gmail.com>
Date: Thu, 17 Aug 2023 15:46:00 +0900
Subject: [PATCH] =?UTF-8?q?#101=20feat:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=20=EA=B8=B0=EB=8A=A5=EC=AA=BD=20=EC=9E=84=EC=8B=9C=20?=
 =?UTF-8?q?=EC=BB=A4=EB=B0=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/DropdownPanel.tsx   | 23 +++++++++-----
 frontend/src/components/common/FilterBar.tsx  | 23 ++++++++------
 frontend/src/components/landmark/Toolbar.tsx  |  1 +
 frontend/src/pages/Issues.tsx                 | 31 ++++++++++++++++++-
 4 files changed, 60 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/common/DropdownPanel.tsx b/frontend/src/components/common/DropdownPanel.tsx
index c307e44cf..a394f9df3 100644
--- a/frontend/src/components/common/DropdownPanel.tsx
+++ b/frontend/src/components/common/DropdownPanel.tsx
@@ -7,18 +7,25 @@ enum Option {
   Selected,
 }
 
-const dummy = [
-  ['label', Option.Selected],
-  ['label', Option.Available],
-] as [string, Option][];
+// const dummy = [
+//   ['label', Option.Selected],
+//   ['label', Option.Available],
+// ] as [string, Option][];
 
-export default function DropdownPanel({ label }: { label: string }) {
+export default function DropdownPanel({
+  elements,
+  label,
+  ...rest
+}: {
+  elements: [text: string, option: Option][];
+  label: string;
+}) {
   return (
-    <Container>
+    <Container {...rest}>
       <Header>{label}</Header>
       <DropdownElements>
-        {dummy.map(([text, option]) => {
-          const key = uuidV4()
+        {elements.map(([text, option]) => {
+          const key = uuidV4();
           const Icon = Icons.userImageSmall;
           return (
             <li key={key}>
diff --git a/frontend/src/components/common/FilterBar.tsx b/frontend/src/components/common/FilterBar.tsx
index ef0870c46..96ae11d1a 100644
--- a/frontend/src/components/common/FilterBar.tsx
+++ b/frontend/src/components/common/FilterBar.tsx
@@ -3,22 +3,27 @@ import { styled } from 'styled-components';
 import DropdownIndicator from './DropdownIndicator';
 import Icons from '../../design/Icons';
 
-export default function FilterBar() {
-  const [filterValue, setFilterValue] = useState<string>(
-    'default filter option'
-  );
+type FilterBarProps = {
+  filterValue: string;
+  openPanel: () => void;
+};
+
+export default function FilterBar({ filterValue, openPanel }: FilterBarProps) {
+  // const [filterValue, setFilterValue] = useState<string>(
+  //   'default filter option'
+  // );
   const SearchIcon = Icons['search'];
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFilterValue(e.target.value);
-  };
+  // const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  //   setFilterValue(e.target.value);
+  // };
 
   return (
     <Bar>
-      <StyledDropdownIndicator text="Button" />
+      <StyledDropdownIndicator text="Button" onClick={openPanel} />
       <TextFilter>
         <SearchIcon />
-        <TextInput value={filterValue} onChange={handleChange}></TextInput>
+        <TextInput value={filterValue}></TextInput>
       </TextFilter>
     </Bar>
   );
diff --git a/frontend/src/components/landmark/Toolbar.tsx b/frontend/src/components/landmark/Toolbar.tsx
index bebc15c25..b6c167326 100644
--- a/frontend/src/components/landmark/Toolbar.tsx
+++ b/frontend/src/components/landmark/Toolbar.tsx
@@ -9,4 +9,5 @@ const Container = styled.div`
   justify-content: space-between;
   margin-bottom: 24px;
   align-items: center;
+  position: relative;
 `;
diff --git a/frontend/src/pages/Issues.tsx b/frontend/src/pages/Issues.tsx
index 05c27cab8..f15386d91 100644
--- a/frontend/src/pages/Issues.tsx
+++ b/frontend/src/pages/Issues.tsx
@@ -15,6 +15,12 @@ import Layout from '../components/Layout';
 import Button from '../components/common/button/BaseButton';
 import { Data } from '../types';
 import useAxiosPrivate from '../hooks/useAxiosPrivate';
+import DropdownPanel from '../components/common/DropdownPanel';
+
+enum Option {
+  Available,
+  Selected,
+}
 
 export default function Issues() {
   const { util } = useContext(AppContext);
@@ -22,6 +28,7 @@ export default function Issues() {
   const logo = (util.getLogoByTheme() as ContextLogo).medium;
   const navigate = useNavigate();
   const axiosPrivate = useAxiosPrivate();
+  const [filterValue, setFilterValue] = useState<string>('status:open');
 
   const [data, setData] = useState<Data>({
     openCount: 1,
@@ -141,7 +148,22 @@ export default function Issues() {
         </div>
       </Header>
       <Toolbar>
-        <FilterBar />
+        <FilterBar
+          filterValue="hi"
+          openPanel={() => {
+            console.log('open filterbar');
+          }}
+        />
+        <FilterBarPanel
+          elements={[
+            ['열린 이슈', Option.Selected],
+            ['내가 작성한 이슈', Option.Available],
+            ['나에게 할당된 이슈', Option.Available],
+            ['내가 댓글을 남긴 이슈', Option.Available],
+            ['닫힌 이슈', Option.Available],
+          ]}
+          label="이슈 필터"
+        />
         <ActionGroup>
           <TabButton
             tabs={[
@@ -175,3 +197,10 @@ const ActionGroup = styled.div`
   align-items: center;
   gap: 16px;
 `;
+
+const FilterBarPanel = styled(DropdownPanel)`
+  position: absolute;
+  z-index: 1;
+  top: 50px;
+  background-color: ${({ theme }) => theme.color.neutral.surface.strong};
+`;