Merge pull request #86 from codesquad-issue-team-05/fe/feature/#85

[FE] SideBar 공통 컴포넌트 수정

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};
+  }
+`;

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>
+  );
+}

frontend/src/components/common/sideBar/SideBar.tsx

@@ -0,0 +1,52 @@
+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 {
+      background-color: ${({ theme }) => theme.color.neutral.surface.strong};
+      padding: 32px;
+      border-bottom: 1px solid
+        ${({ theme }) => theme.color.neutral.border.default};
+      &:last-child {
+        border: 0;
+      }
+    }
+  }
+`;

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>

frontend/src/constant/ElementType.ts

@@ -0,0 +1,8 @@
+enum ElementType {
+  AddButton,
+  Assignee,
+  Label,
+  milestone,
+}
+
+export default ElementType;