diff --git a/client/src/components/organisms/LabelForm/LabelForm.stories.tsx b/client/src/components/organisms/LabelForm/LabelForm.stories.tsx
new file mode 100644
index 0000000..5b0c445
--- /dev/null
+++ b/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 (
+
+ );
+};
diff --git a/client/src/components/organisms/LabelForm/LabelForm.tsx b/client/src/components/organisms/LabelForm/LabelForm.tsx
new file mode 100644
index 0000000..5035716
--- /dev/null
+++ b/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`
+ 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 = ({
+ title,
+ description = '',
+ bgColor,
+ onClick,
+}) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default LabelForm;
diff --git a/client/src/components/organisms/LabelForm/index.ts b/client/src/components/organisms/LabelForm/index.ts
new file mode 100644
index 0000000..017eb84
--- /dev/null
+++ b/client/src/components/organisms/LabelForm/index.ts
@@ -0,0 +1 @@
+export { default } from './LabelForm';