From 27405ec9cb8be1c1a1121f8af9a6915e01b43074 Mon Sep 17 00:00:00 2001
From: Cat Hanbit <saejinpark951210@gmail.com>
Date: Mon, 14 Aug 2023 16:35:33 +0900
Subject: [PATCH 1/2] =?UTF-8?q?#85=20feat:=20sideBar=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 타입 및  컴포넌트 분리
- 구조 수정
- dummy 제거
---
 frontend/src/components/common/SideBar.tsx    | 157 ------------------
 .../src/components/common/sideBar/Element.tsx |  99 +++++++++++
 .../components/common/sideBar/Elements.tsx    |  25 +++
 .../src/components/common/sideBar/SideBar.tsx |  51 ++++++
 frontend/src/components/label/Label.tsx       |   7 +-
 .../constant/{CheckBox.tsx => CheckBox.ts}    |   0
 frontend/src/constant/ElementType.ts          |   8 +
 frontend/src/pages/Components.tsx             |  34 +++-
 frontend/src/types/ElementProps.ts            |  16 ++
 frontend/src/types/LabelProps.ts              |   7 +
 10 files changed, 235 insertions(+), 169 deletions(-)
 delete mode 100644 frontend/src/components/common/SideBar.tsx
 create mode 100644 frontend/src/components/common/sideBar/Element.tsx
 create mode 100644 frontend/src/components/common/sideBar/Elements.tsx
 create mode 100644 frontend/src/components/common/sideBar/SideBar.tsx
 rename frontend/src/constant/{CheckBox.tsx => CheckBox.ts} (100%)
 create mode 100644 frontend/src/constant/ElementType.ts
 create mode 100644 frontend/src/types/ElementProps.ts
 create mode 100644 frontend/src/types/LabelProps.ts

diff --git a/frontend/src/components/common/SideBar.tsx b/frontend/src/components/common/SideBar.tsx
deleted file mode 100644
index c69344a47..000000000
--- a/frontend/src/components/common/SideBar.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import { styled } from 'styled-components';
-import Icons from '../../design/Icons';
-
-enum ElementType {
-  AddButton,
-  Assignee,
-  Label,
-  milestone,
-}
-
-const { AddButton, Assignee, Label, milestone } = ElementType;
-
-type ElementProps<T extends ElementType> = {
-  type: T;
-} & (T extends typeof AddButton
-  ? { text: string }
-  : T extends typeof Assignee
-  ? { text: string; checked: boolean }
-  : T extends typeof Label
-  ? { text: string }
-  : { text: string; progress: number });
-
-const dummy: ElementProps<
-  typeof AddButton | typeof Assignee | typeof Label | typeof milestone
->[] = [
-  { type: AddButton, text: 'label1' },
-  { type: Assignee, text: 'label2', checked: false },
-  { type: Label, text: 'label3' },
-  { type: milestone, text: 'label4', progress: 30 },
-];
-
-export default function SideBar() {
-  return (
-    <Container>
-      <h2 className="blind">사이드바</h2>
-      <ul>
-        {dummy.map((props) => (
-          <li key={props.text}>
-            <Element type={props.type} props={props} />
-          </li>
-        ))}
-      </ul>
-    </Container>
-  );
-}
-
-const Container = styled.aside`
-  width: 288px;
-  border: 1px solid ${({ theme }) => theme.color.neutral.border.default};
-  overflow: hidden;
-  border-radius: ${({ theme }) => theme.objectStyles.radius.large};
-  & > ul {
-    & > li {
-      padding: 32px;
-      border-bottom: 1px solid
-        ${({ theme }) => theme.color.neutral.border.default};
-      &:last-child {
-        border: 0;
-      }
-      & > button {
-        width: 100%;
-        border: 0;
-        background-color: transparent;
-        display: inline-flex;
-        align-items: center;
-        justify-content: space-between;
-        color: ${({ theme }) => theme.color.neutral.text.default};
-        ${({ theme }) => theme.font.available.medium[16]};
-        & > svg {
-          & > path {
-            stroke: ${({ theme }) => theme.color.neutral.text.default};
-          }
-        }
-      }
-
-      & > label {
-        width: 100%;
-        display: inline-flex;
-        gap: 8px;
-        align-items: center;
-        ${({ theme }) => theme.font.display.medium[12]};
-        & > input {
-          display: none;
-        }
-        & > span {
-          display: inline-block;
-          color: ${({ theme }) => theme.color.neutral.text.strong};
-          width: 100%;
-        }
-      }
-      & > span {
-        border: 1px solid ${({ theme }) => theme.color.neutral.border.default};
-        ${({ theme }) => theme.font.display.medium[12]};
-        border-radius: ${({ theme }) => theme.objectStyles.radius.large};
-        color: ${({ theme }) => theme.color.neutral.text.weak};
-        height: 24px;
-        display: inline-flex;
-        align-items: center;
-        padding: 0 8px;
-      }
-      & > article {
-        & > progress {
-          width: 100%;
-          margin-bottom: 4px;
-        }
-        & > label {
-          ${({ theme }) => theme.font.display.medium[12]};
-          color: ${({ theme }) => theme.color.neutral.text.strong};
-        }
-      }
-    }
-  }
-`;
-
-function Element<T extends ElementType>({
-  type,
-  props,
-}: {
-  type: T;
-  props: ElementProps<T>;
-}) {
-  const {
-    text,
-    checked,
-    progress,
-  }: { text: string; checked?: boolean; progress?: number } = props;
-  switch (type) {
-    case AddButton:
-      return (
-        <button>
-          <span>{text}</span>
-          <Icons.plus />
-        </button>
-      );
-    case Assignee:
-      return (
-        <label htmlFor={text}>
-          <Icons.userImageLarge />
-          <span>{text}</span>
-          <input type="checkbox" name={text} id={text} checked={checked} />
-        </label>
-      );
-    case Label:
-      return <span>{text}</span>;
-    case milestone:
-      return (
-        <article>
-          <h4 className="blind">{text} 진행률</h4>
-          <progress id={text} value={progress} max="100">
-            {progress}%
-          </progress>
-          <br />
-          <label htmlFor={text}>{text}</label>
-        </article>
-      );
-  }
-}
diff --git a/frontend/src/components/common/sideBar/Element.tsx b/frontend/src/components/common/sideBar/Element.tsx
new file mode 100644
index 000000000..9600be0d2
--- /dev/null
+++ b/frontend/src/components/common/sideBar/Element.tsx
@@ -0,0 +1,99 @@
+import { styled } from 'styled-components';
+import ElementType from '../../../constant/ElementType';
+import Icons from '../../../design/Icons';
+import ElementProps from '../../../types/ElementProps';
+import Label from '../../label/Label';
+
+export default function Element<T extends ElementType>({
+  type,
+  props,
+}: {
+  type: T;
+  props: ElementProps<T>;
+}) {
+  switch (type) {
+    case ElementType.AddButton:
+      return (() => {
+        const { text } = props as ElementProps<ElementType.AddButton>;
+        return (
+          <AddButton>
+            <span>{text}</span>
+            <Icons.plus />
+          </AddButton>
+        );
+      })();
+    case ElementType.Assignee:
+      return (() => {
+        const { text, checked } = props as ElementProps<ElementType.Assignee>;
+        return (
+          <Assignee htmlFor={text}>
+            <Icons.userImageLarge />
+            <span>{text}</span>
+            <input type="checkbox" name={text} id={text} checked={checked} />
+          </Assignee>
+        );
+      })();
+    case ElementType.Label:
+      return (() => {
+        const { labelProps } = props as ElementProps<ElementType.Label>;
+        return <Label {...labelProps} />;
+      })();
+    case ElementType.milestone:
+      return (() => {
+        const { text, progress } = props as ElementProps<ElementType.milestone>;
+        return (
+          <Milestone>
+            <h4 className="blind">{text} 진행률</h4>
+            <progress id={text} value={progress} max="100">
+              {progress}%
+            </progress>
+            <br />
+            <label htmlFor={text}>{text}</label>
+          </Milestone>
+        );
+      })();
+  }
+}
+
+const AddButton = styled.button`
+  width: 100%;
+  border: 0;
+  background-color: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  color: ${({ theme }) => theme.color.neutral.text.default};
+  ${({ theme }) => theme.font.available.medium[16]};
+  & > svg {
+    & > path {
+      stroke: ${({ theme }) => theme.color.neutral.text.default};
+    }
+  }
+`;
+
+const Assignee = styled.label`
+  width: 100%;
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  ${({ theme }) => theme.font.display.medium[12]};
+  & > input {
+    display: none;
+  }
+  & > span {
+    display: inline-block;
+    color: ${({ theme }) => theme.color.neutral.text.strong};
+    width: 100%;
+  }
+`;
+
+const Milestone = styled.article`
+  & > progress {
+    width: 100%;
+    margin-bottom: 4px;
+  }
+  & > label {
+    ${({ theme }) => theme.font.display.medium[12]};
+    color: ${({ theme }) => theme.color.neutral.text.strong};
+  }
+`;
diff --git a/frontend/src/components/common/sideBar/Elements.tsx b/frontend/src/components/common/sideBar/Elements.tsx
new file mode 100644
index 000000000..6c8c4eab8
--- /dev/null
+++ b/frontend/src/components/common/sideBar/Elements.tsx
@@ -0,0 +1,25 @@
+import ElementType from '../../../constant/ElementType';
+import ElementProps from '../../../types/ElementProps';
+import Element from './Element';
+
+const { Assignee, Label, milestone } = ElementType;
+
+export default function Elements({
+  items,
+}: {
+  items: (
+    | ElementProps<typeof Assignee>
+    | ElementProps<typeof Label>
+    | ElementProps<typeof milestone>
+  )[];
+}) {
+  return (
+    <ul>
+      {items.map((props, index) => (
+        <li key={index}>
+          <Element type={props.type} props={props} />
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/frontend/src/components/common/sideBar/SideBar.tsx b/frontend/src/components/common/sideBar/SideBar.tsx
new file mode 100644
index 000000000..f3ddae855
--- /dev/null
+++ b/frontend/src/components/common/sideBar/SideBar.tsx
@@ -0,0 +1,51 @@
+import { styled } from 'styled-components';
+import ElementType from '../../../constant/ElementType';
+import ElementProps from '../../../types/ElementProps';
+import Elements from './Elements';
+import Element from './Element';
+
+const { AddButton, Assignee, Label, milestone } = ElementType;
+
+type SideBarProps = {
+  sideBarItems: [
+    ElementProps<typeof AddButton>,
+    (
+      | ElementProps<typeof Assignee>
+      | ElementProps<typeof Label>
+      | ElementProps<typeof milestone>
+    )[]
+  ][];
+};
+
+export default function SideBar({ sideBarItems }: SideBarProps) {
+  return (
+    <Container>
+      <h2 className="blind">사이드바</h2>
+      <ul>
+        {sideBarItems.map(([props, items]) => (
+          <li key={props.text}>
+            <Element type={props.type} props={props} />
+            <Elements items={items} />
+          </li>
+        ))}
+      </ul>
+    </Container>
+  );
+}
+
+const Container = styled.aside`
+  width: 288px;
+  border: 1px solid ${({ theme }) => theme.color.neutral.border.default};
+  overflow: hidden;
+  border-radius: ${({ theme }) => theme.objectStyles.radius.large};
+  & > ul {
+    & > li {
+      padding: 32px;
+      border-bottom: 1px solid
+        ${({ theme }) => theme.color.neutral.border.default};
+      &:last-child {
+        border: 0;
+      }
+    }
+  }
+`;
diff --git a/frontend/src/components/label/Label.tsx b/frontend/src/components/label/Label.tsx
index a799dfdae..e4654b947 100644
--- a/frontend/src/components/label/Label.tsx
+++ b/frontend/src/components/label/Label.tsx
@@ -1,15 +1,12 @@
 import { styled } from 'styled-components';
 import InformationTag from '../common/InformationTag';
+import LabelProps from '../../types/LabelProps';
 
 export default function Label({
   textColor,
   backgroundColor,
   name,
-}: {
-  textColor: string;
-  backgroundColor: string;
-  name: string;
-}) {
+}: LabelProps) {
   return (
     <Container $textColor={textColor} $backgroundColor={backgroundColor}>
       <InformationTag size="small">{name}</InformationTag>
diff --git a/frontend/src/constant/CheckBox.tsx b/frontend/src/constant/CheckBox.ts
similarity index 100%
rename from frontend/src/constant/CheckBox.tsx
rename to frontend/src/constant/CheckBox.ts
diff --git a/frontend/src/constant/ElementType.ts b/frontend/src/constant/ElementType.ts
new file mode 100644
index 000000000..82e65f247
--- /dev/null
+++ b/frontend/src/constant/ElementType.ts
@@ -0,0 +1,8 @@
+enum ElementType {
+  AddButton,
+  Assignee,
+  Label,
+  milestone,
+}
+
+export default ElementType;
diff --git a/frontend/src/pages/Components.tsx b/frontend/src/pages/Components.tsx
index 3b6378f2b..95ef6734f 100644
--- a/frontend/src/pages/Components.tsx
+++ b/frontend/src/pages/Components.tsx
@@ -1,8 +1,8 @@
 import { styled } from 'styled-components';
-import Button from '../components/common/button/BaseButton';
-import ButtonLarge from '../components/common/button/ButtonLarge';
-import ButtonSmall from '../components/common/button/ButtonSmall';
-import ColorCodeInput from '../components/common/ColorCodeInput';
+// import Button from '../components/common/button/BaseButton';
+// import ButtonLarge from '../components/common/button/ButtonLarge';
+// import ButtonSmall from '../components/common/button/ButtonSmall';
+// import ColorCodeInput from '../components/common/ColorCodeInput';
 // import TabButton from '../components/common/TabButton';
 // import InformationTag from '../components/common/InformationTag';
 // import TextInput from '../components/common/TextInput';
@@ -15,6 +15,10 @@ import ColorCodeInput from '../components/common/ColorCodeInput';
 // import Comment from '../components/common/CommentElements';
 import { AppContext } from '../main';
 import { useContext } from 'react';
+import SideBar from '../components/common/sideBar/SideBar';
+import ElementType from '../constant/ElementType';
+
+const { AddButton, Assignee, Label } = ElementType;
 
 export default function Components() {
   const appContext = useContext(AppContext);
@@ -22,7 +26,7 @@ export default function Components() {
   return (
     <StyledComponents>
       <Wrapper>
-        <ButtonLarge type="submit" iconName="plus">
+        {/* <ButtonLarge type="submit" iconName="plus">
           BUTTON
         </ButtonLarge>
         <Button type="submit" outline iconName="plus">
@@ -41,7 +45,7 @@ export default function Components() {
           S BUTTON
         </ButtonSmall>
         <ColorCodeInput label="배경색" />
-        {/* <TabButton />
+        <TabButton />
         <InformationTag size="medium" iconName="alertCircle">
           Label
         </InformationTag>
@@ -76,8 +80,24 @@ export default function Components() {
           timeStamp="5분 전"
           comment="오늘 점심 뭐 먹죠?"
         />
-        <SideBar />
         <FilterBar /> */}
+        <SideBar
+          sideBarItems={[
+            [{ type: AddButton, text: '담당자' }, []],
+            [
+              { type: AddButton, text: '레이블' },
+              [{ type: Assignee, text: 'label2', checked: false }],
+            ],
+            [
+              { type: AddButton, text: '마일스톤' },
+              [{ type: Label, labelProps: {
+                textColor: 'AAA333',
+                backgroundColor: 'FFF3FF',
+                name: 'refactor',
+              } }],
+            ],
+          ]}
+        />
       </Wrapper>
     </StyledComponents>
   );
diff --git a/frontend/src/types/ElementProps.ts b/frontend/src/types/ElementProps.ts
new file mode 100644
index 000000000..3e94ce240
--- /dev/null
+++ b/frontend/src/types/ElementProps.ts
@@ -0,0 +1,16 @@
+import ElementType from '../constant/ElementType';
+import LabelProps from './LabelProps';
+
+const { AddButton, Assignee, Label } = ElementType;
+
+type ElementProps<T extends ElementType> = {
+  type: T;
+} & (T extends typeof AddButton
+  ? { text: string }
+  : T extends typeof Assignee
+  ? { text: string; checked: boolean }
+  : T extends typeof Label
+  ? { labelProps: LabelProps }
+  : { text: string; progress: number });
+
+export default ElementProps;
diff --git a/frontend/src/types/LabelProps.ts b/frontend/src/types/LabelProps.ts
new file mode 100644
index 000000000..b969f66cf
--- /dev/null
+++ b/frontend/src/types/LabelProps.ts
@@ -0,0 +1,7 @@
+type LabelProps = {
+  textColor: string;
+  backgroundColor: string;
+  name: string;
+};
+
+export default LabelProps
\ No newline at end of file

From 9396c17b1a7989cf86100767b53c69520380e342 Mon Sep 17 00:00:00 2001
From: Cat Hanbit <saejinpark951210@gmail.com>
Date: Mon, 14 Aug 2023 16:49:49 +0900
Subject: [PATCH 2/2] =?UTF-8?q?#85=20chore:=20=EB=88=84=EB=9D=BD=EB=90=98?=
 =?UTF-8?q?=EC=96=B4=EC=9E=88=EB=8D=98=20=EC=9E=90=EC=8B=9D=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B0=B0=EA=B2=BD=EC=83=89=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/sideBar/SideBar.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/common/sideBar/SideBar.tsx b/frontend/src/components/common/sideBar/SideBar.tsx
index f3ddae855..02eaa627e 100644
--- a/frontend/src/components/common/sideBar/SideBar.tsx
+++ b/frontend/src/components/common/sideBar/SideBar.tsx
@@ -40,6 +40,7 @@ const Container = styled.aside`
   border-radius: ${({ theme }) => theme.objectStyles.radius.large};
   & > ul {
     & > li {
+      background-color: ${({ theme }) => theme.color.neutral.surface.strong};
       padding: 32px;
       border-bottom: 1px solid
         ${({ theme }) => theme.color.neutral.border.default};