feat: add default,circle shape node shape changer

src/app/roadmap/create/components/panel/PanelControl.tsx

@@ -20,7 +20,6 @@ import {
   IconPencil,
   IconPhotoPlus,
   IconPlus,
-  IconTriangleSquareCircle,
 } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useCallback, useMemo, useRef, useState } from 'react';
@@ -67,8 +66,6 @@ const PanelItem = ({
     );
   });
 
-  const onChangeShape = () => {};
-
   const onSubmitRoadmap = useCallback(async () => {
     if (!formData || !files) {
       alert('썸네일은 필수입니다.');
@@ -189,11 +186,11 @@ const PanelItem = ({
               <IconLayoutDistributeHorizontal data-disabled size='1rem' />
             </ActionIcon>
           </Tooltip>
-          <Tooltip label='change shape' position='bottom'>
+          {/* <Tooltip label='change shape' position='bottom'>
             <ActionIcon variant='default' onClick={onChangeShape}>
               <IconTriangleSquareCircle data-disabled size='1rem' />
             </ActionIcon>
-          </Tooltip>
+          </Tooltip> */}
 
           <Tooltip
             label={

src/app/roadmap/create/components/panel/items/NodeShapePicker.tsx

@@ -0,0 +1,106 @@
+'use client';
+import { ActionIcon, Box, Group } from '@mantine/core';
+import { IconCircleFilled, IconRectangleFilled } from '@tabler/icons-react';
+import { Dispatch, SetStateAction, useMemo } from 'react';
+import { Node, useUpdateNodeInternals } from 'reactflow';
+
+import { defaultNodes } from '@/constants';
+import { omit, pick } from '@/utils/shared';
+
+import { NodeStyle } from '@/types/reactFlow';
+
+const NodeShapePicker = ({
+  clickedNode,
+  setClickedNode,
+  setNodes,
+  nodes,
+}: {
+  clickedNode: Node;
+  setClickedNode: Dispatch<SetStateAction<Node | null>>;
+  setNodes: Dispatch<SetStateAction<Node[]>>;
+  nodes: Node[];
+}) => {
+  const updateNodeInternals = useUpdateNodeInternals();
+
+  useMemo(() => {
+    updateNodeInternals(clickedNode.id);
+  }, [clickedNode.id, updateNodeInternals]);
+
+  return (
+    <Box>
+      <Group>
+        <ActionIcon
+          variant='default'
+          onClick={() => {
+            const temp = pick(clickedNode, 'style') as { style: NodeStyle };
+            const styleWithoutBorderRadius = omit(
+              temp.style,
+              'borderRadius',
+            ) as Omit<NodeStyle, 'borderRadius'>;
+            const defaultStyle = {
+              ...styleWithoutBorderRadius,
+              borderRadius: defaultNodes[0].style.borderRadius,
+              aspectRatio: 'auto',
+            };
+            const currNode = nodes.filter((v) => v.id == clickedNode.id);
+            const tempCurrNode = {
+              ...omit(currNode[0], 'style'),
+              style: defaultStyle,
+            } as Node;
+            setClickedNode(tempCurrNode);
+            const newNodes = nodes.reduce((acc, curr) => {
+              if (curr.id === tempCurrNode.id) {
+                acc.push(tempCurrNode);
+                return acc;
+              } else {
+                acc.push(curr);
+              }
+              return acc;
+            }, [] as Node[]);
+            setNodes([...newNodes]);
+          }}
+        >
+          <IconRectangleFilled data-disabled size='1rem' />
+        </ActionIcon>
+        <ActionIcon
+          variant='default'
+          onClick={() => {
+            const temp = pick(clickedNode, 'style') as { style: NodeStyle };
+            const styleWithoutBorderRadius = omit(
+              temp.style,
+              'borderRadius',
+            ) as Omit<NodeStyle, 'borderRadius'>;
+            const circleStyle = {
+              ...styleWithoutBorderRadius,
+              borderRadius: '100%',
+              aspectRatio: 1,
+              display: 'inline-flex',
+              alignItems: 'center',
+              padding: '0.3rem',
+            };
+            const currNode = nodes.filter((v) => v.id == clickedNode.id);
+            const tempCurrNode = {
+              ...omit(currNode[0], 'style'),
+              style: circleStyle,
+            } as Node;
+            setClickedNode(tempCurrNode);
+            const newNodes = nodes.reduce((acc, curr) => {
+              if (curr.id === tempCurrNode.id) {
+                acc.push(tempCurrNode);
+                return acc;
+              } else {
+                acc.push(curr);
+              }
+              return acc;
+            }, [] as Node[]);
+            setNodes([...newNodes]);
+          }}
+        >
+          <IconCircleFilled data-disabled size='1rem' />
+        </ActionIcon>
+      </Group>
+    </Box>
+  );
+};
+
+export default NodeShapePicker;

src/types/reactFlow.ts

@@ -16,9 +16,10 @@ export interface CustomEdge extends Connection {
 }
 
 export interface NodeStyle {
+  [key: string]: unknown;
   background: string;
   border: string;
-  borderRadius: number;
+  borderRadius: number | string;
   fontSize: number;
 }
 export interface CustomNode {