feat: add board options dropdown and pipeline stage creation (#1399)

* feat: add board options dropdown and pipeline stage creation

Closes #1395

* refactor: code review

- remove useCallback

front/src/modules/pipeline/graphql/mutations/createPipelineStage.ts

@@ -0,0 +1,11 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_PIPELINE_STAGE = gql`
+  mutation CreatePipelineStage($data: PipelineStageCreateInput!) {
+    pipelineStage: createOnePipelineStage(data: $data) {
+      id
+      name
+      color
+    }
+  }
+`;

front/src/modules/pipeline/hooks/usePipelineStages.ts

@@ -0,0 +1,34 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { useRecoilValue } from 'recoil';
+
+import type { BoardColumnDefinition } from '@/ui/board/types/BoardColumnDefinition';
+import { useCreatePipelineStageMutation } from '~/generated/graphql';
+
+import { GET_PIPELINES } from '../graphql/queries/getPipelines';
+import { currentPipelineState } from '../states/currentPipelineState';
+
+export const usePipelineStages = () => {
+  const currentPipeline = useRecoilValue(currentPipelineState);
+
+  const [createPipelineStageMutation] = useCreatePipelineStageMutation();
+
+  const handlePipelineStageAdd = async (boardColumn: BoardColumnDefinition) => {
+    if (!currentPipeline?.id) return;
+
+    return createPipelineStageMutation({
+      variables: {
+        data: {
+          color: boardColumn.colorCode,
+          id: boardColumn.id,
+          index: boardColumn.index,
+          name: boardColumn.title,
+          pipeline: { connect: { id: currentPipeline.id } },
+          type: 'ongoing',
+        },
+      },
+      refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
+    });
+  };
+
+  return { handlePipelineStageAdd };
+};