[feat] label form component 구현

- label form component 구현

#87

client/src/components/organisms/LabelForm/LabelForm.stories.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { text, color } from '@storybook/addon-knobs';
+import LabelForm from './LabelForm';
+
+export default {
+  component: LabelForm,
+  title: 'Organisms/LabelForm',
+};
+export const Default = () => {
+  const title = text('title', 'Bug');
+  const bgColor = color('background color', 'rgba(163,10,10,100)');
+  const hexColor = `#${bgColor
+    .slice(5, -1)
+    .split(',')
+    .map((v) => Number(v).toString(16).padStart(2, '0'))
+    .join('')
+    .slice(0, 6)}`;
+  const [btnColor, setColor] = useState(hexColor);
+  const onClick = () => {
+    const letters = '0123456789ABCDEF';
+    let randomColor = '#';
+    for (let i = 0; i < 6; i += 1) {
+      randomColor += letters[Math.floor(Math.random() * 16)];
+    }
+    setColor(randomColor);
+  };
+  const description = text('description', 'api develop');
+  return (
+    <LabelForm
+      title={title}
+      bgColor={btnColor}
+      description={description}
+      onClick={onClick}
+    />
+  );
+};

client/src/components/organisms/LabelForm/LabelForm.tsx

@@ -0,0 +1,96 @@
+import React, { FunctionComponent } from 'react';
+import styled from '@themes/styled';
+import Input from '@components/atoms/Input';
+import InputLabel from '@components/atoms/InputLabel';
+import Button from '@components/atoms/Button';
+import BoldText from '@/components/atoms/BoldText';
+import TextWithIcon from '@/components/molecules/TextWithIcon';
+import { Change } from '@components/atoms/icons';
+import getTextColorByBGColor from '@lib/getTextColorByBGColor';
+
+interface StyledProps {
+  bgColor: string;
+}
+
+const StyledLabelForm = styled.form<StyledProps>`
+  display: flex;
+  align-items: center;
+  & > * {
+    flex: 1;
+    padding-right: 16px;
+  }
+
+  & button {
+    margin-right: 16px;
+  }
+
+  & > .color {
+    & > div {
+      display: flex;
+    }
+    & button {
+      display: flex;
+      align-items: center;
+      padding: 5px;
+      background-color: ${({ bgColor }) => bgColor};
+    }
+    & button svg {
+      fill: ${({ bgColor }) => getTextColorByBGColor(bgColor)};
+    }
+  }
+
+  & > .btn {
+    text-align: right;
+  }
+`;
+
+interface Props {
+  title: string;
+  description?: string;
+  bgColor: string;
+  onClick: () => void;
+}
+
+const LabelForm: FunctionComponent<Props> = ({
+  title,
+  description = '',
+  bgColor,
+  onClick,
+}) => {
+  return (
+    <StyledLabelForm bgColor={bgColor}>
+      <div>
+        <InputLabel text="Label name" />
+        <Input placeholder="Label name" value={title} type="text" />
+      </div>
+      <div>
+        <InputLabel text="Description" />
+        <Input
+          placeholder="Descriptio (optional)"
+          value={description}
+          type="text"
+        />
+      </div>
+      <div className="color">
+        <InputLabel text="Color" />
+        <div>
+          <Button onClick={onClick}>
+            <TextWithIcon icon={Change} text="" />
+          </Button>
+          <Input value={bgColor} type="text" />
+        </div>
+      </div>
+
+      <div className="btn">
+        <Button type="default">
+          <BoldText value="Cancel" />
+        </Button>
+        <Button type="primary">
+          <BoldText value="save changes" />
+        </Button>
+      </div>
+    </StyledLabelForm>
+  );
+};
+
+export default LabelForm;

client/src/components/organisms/LabelForm/index.ts

@@ -0,0 +1 @@
+export { default } from './LabelForm';