#101 feat: 드롭다운 기능쪽 임시 커밋

codesquad-issue-team-05 · Aug 17, 2023 · f4d7e26 · f4d7e26
1 parent f28f525
commit f4d7e26
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -15,13 +15,20 @@ 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);
   const { auth, logout } = useAuth();
   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};
+`;