#11 feat: DropdownPanel "modify" 종류 추가

issue-tracker-08 · Jul 25, 2023 · c80d81b · c80d81b
1 parent 356f05d
commit c80d81b
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 33 deletions.
diff --git a/fe/src/App.tsx b/fe/src/App.tsx
@@ -23,34 +23,98 @@ export default function App() {
         Theme Mode
       </button>
 
-      <DropdownIndicator
-        dropdownName="assignee"
-        dropdownList={[
-          {
-            variant: "withImg",
-            name: "assignee",
-            content: "Kakamotobiscuitcookie",
-            imgSrc: "https://avatars.githubusercontent.com/u/79886384?v=4",
-          },
-          {
-            variant: "withImg",
-            name: "assignee",
-            content: "Zoey",
-            imgSrc: "https://avatars.githubusercontent.com/u/111998760?v=4",
-          },
-          {
-            variant: "withColor",
-            name: "label",
-            content: "documentation",
-            colorFill: "blue",
-          },
-          {
-            variant: "plain",
-            name: "milestone",
-            content: "FE Sprint #1",
-          },
-        ]}
-      />
+      <div style={{ display: "flex" }}>
+        <DropdownIndicator
+          dropdownPanelVariant="filter"
+          dropdownName="assignee"
+          dropdownList={[
+            {
+              variant: "withImg",
+              name: "assignee",
+              content: "Kakamotobiscuitcookie",
+              imgSrc: "https://avatars.githubusercontent.com/u/79886384?v=4",
+            },
+            {
+              variant: "withImg",
+              name: "assignee",
+              content: "Zoey",
+              imgSrc: "https://avatars.githubusercontent.com/u/111998760?v=4",
+            },
+          ]}
+        />
+
+        <DropdownIndicator
+          dropdownPanelVariant="filter"
+          dropdownName="label"
+          dropdownList={[
+            {
+              variant: "withColor",
+              name: "label",
+              content: "documentation",
+              colorFill: "blue",
+            },
+            {
+              variant: "withColor",
+              name: "label",
+              content: "bug",
+              colorFill: "red",
+            },
+          ]}
+        />
+
+        <DropdownIndicator
+          dropdownPanelVariant="filter"
+          dropdownName="milestone"
+          dropdownList={[
+            {
+              variant: "plain",
+              name: "milestone",
+              content: "FE Sprint#1",
+            },
+            {
+              variant: "plain",
+              name: "milestone",
+              content: "BE Sprint#1",
+            },
+          ]}
+        />
+
+        <DropdownIndicator
+          dropdownPanelVariant="filter"
+          dropdownName="author"
+          dropdownList={[
+            {
+              variant: "withImg",
+              name: "assignee",
+              content: "Kakamotobiscuitcookie",
+              imgSrc: "https://avatars.githubusercontent.com/u/79886384?v=4",
+            },
+            {
+              variant: "withImg",
+              name: "assignee",
+              content: "Zoey",
+              imgSrc: "https://avatars.githubusercontent.com/u/111998760?v=4",
+            },
+          ]}
+        />
+
+        <DropdownIndicator
+          dropdownPanelVariant="modify"
+          dropdownName="issueState"
+          dropdownList={[
+            {
+              variant: "plain",
+              name: "issueState",
+              content: "선택한 이슈 열기",
+            },
+            {
+              variant: "plain",
+              name: "issueState",
+              content: "선택한 이슈 닫기",
+            },
+          ]}
+        />
+      </div>
     </ThemeProvider>
   );
 }

diff --git a/fe/src/components/Dropdown/DropdownIndicator.tsx b/fe/src/components/Dropdown/DropdownIndicator.tsx
@@ -2,12 +2,19 @@ import { useState } from "react";
 import { styled } from "styled-components";
 import DropdownPanel from "@components/Dropdown/DropdownPanel";
 import chevronDown from "@assets/icon/chevronDown.svg";
-import { DropdownNameKOR, DropdownName, DropdownItemType } from "./types";
+import {
+  DropdownNameKOR,
+  DropdownName,
+  DropdownPanelVariant,
+  DropdownItemType,
+} from "./types";
 
 export default function DropdownIndicator({
+  dropdownPanelVariant,
   dropdownName,
   dropdownList,
 }: {
+  dropdownPanelVariant: DropdownPanelVariant;
   dropdownName: DropdownName;
   dropdownList: DropdownItemType[];
 }) {
@@ -20,14 +27,16 @@ export default function DropdownIndicator({
   return (
     <StyledDropdownIndicator>
       <Button type="button" $isOpen={isOpen} onClick={onDropdownClick}>
-        <span>{DropdownNameKOR[dropdownName]}</span>
+        <span>{`${DropdownNameKOR[dropdownName]} ${
+          dropdownPanelVariant === "modify" ? "수정" : ""
+        }`}</span>
         <img src={chevronDown} alt={`Filter by ${dropdownName}`} />
       </Button>
 
       {isOpen && (
         <DropdownPanel
           dropdownPanel={{
-            variant: "filter",
+            variant: dropdownPanelVariant,
             dropdownName,
             dropdownList,
           }}
@@ -41,7 +50,7 @@ const StyledDropdownIndicator = styled.div`
   width: 80px;
   height: 32px;
   position: relative;
-  margin-left: 300px; // Remove this!
+  margin-left: 200px; // Remove this!
 `;
 
 const Button = styled.button<{ $isOpen: boolean }>`

diff --git a/fe/src/components/Dropdown/DropdownPanel.tsx b/fe/src/components/Dropdown/DropdownPanel.tsx
@@ -41,6 +41,19 @@ export default function DropdownPanel({
             <Header>
               <h4>{DropdownNameKOR[dropdownName]} 설정</h4>
             </Header>
+            <DropdownList>
+              {dropdownList.map((item) => {
+                return <DropdownItem {...{ key: item.content, item }} />; // TODO: change the `key` value!
+              })}
+            </DropdownList>
+          </>
+        );
+      case "modify":
+        return (
+          <>
+            <Header>
+              <h4>{DropdownNameKOR[dropdownName]} 변경</h4>
+            </Header>
             <DropdownList>
               {dropdownList.map((item) => {
                 return <DropdownItem {...{ key: item.content, item }} />;

diff --git a/fe/src/components/Dropdown/types.ts b/fe/src/components/Dropdown/types.ts
@@ -3,12 +3,15 @@ export enum DropdownNameKOR {
   author = "작성자",
   label = "레이블",
   milestone = "마일스톤",
+  issueState = "상태",
 }
 
 export type DropdownName = keyof typeof DropdownNameKOR;
 
+export type DropdownPanelVariant = "filter" | "select" | "modify";
+
 export type DropdownPanelType = {
-  variant: "filter" | "select";
+  variant: DropdownPanelVariant;
   dropdownName: DropdownName;
   dropdownList: DropdownItemType[];
 };