曲線を一つしか書けないようにした

src/app/draw/features/FreeDrawing/components/ConfirmButton/index.tsx

@@ -0,0 +1,19 @@
+import { ReactElement } from 'react';
+
+import styles from './styles.module.scss';
+
+type Props = {
+  disabled: boolean;
+  children: string;
+  onClick: () => void;
+};
+
+function ConfirmButton({ disabled, children, onClick }: Props): ReactElement {
+  return (
+    <button className={styles.button} disabled={disabled} onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+
+export default ConfirmButton;

src/app/draw/features/FreeDrawing/components/ConfirmButton/styles.module.scss

@@ -0,0 +1,17 @@
+.button {
+  border: 1px solid $button-border-color;
+  border-radius: $radius-md;
+  color: $text-color;
+  padding: $sm $xl;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $button-hover-background-color;
+  }
+
+  &:disabled {
+    color: lighten($text-color, 30%);
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}

src/app/draw/features/FreeDrawing/components/FreeDrawingCanvas/index.tsx

@@ -1,10 +1,12 @@
-import { ReactElement } from 'react';
-import { useDrawing } from '../../hooks/useDrawing';
+import { ReactElement, RefObject } from 'react';
+
 import styles from './styles.module.scss';
 
-function FreeDrawingCanvas(): ReactElement {
-  const { canvasRef } = useDrawing();
+type Props = {
+  canvasRef: RefObject<HTMLCanvasElement>;
+};
 
+function FreeDrawingCanvas({ canvasRef }: Props): ReactElement {
   return <canvas ref={canvasRef} className={styles.canvas} />;
 }
 

src/app/draw/features/FreeDrawing/functions/curveSprit.ts

@@ -1,4 +1,4 @@
-import { Coordinate } from '../dto/curve';
+import { Coordinate } from '../types/curve';
 
 export function splitCurve(coordinates: Coordinate[], totalBeatCount: number): Coordinate[] {
   const resultCurve = Array.from(

src/app/draw/features/FreeDrawing/functions/intervalCreate.ts

@@ -1,5 +1,5 @@
 import { Interval, ScaleInterval } from '@/types';
-import { Coordinate } from '../dto/curve';
+import { Coordinate } from '../types/curve';
 import { HALF_NOTE, SCALE_NUM, WHOLE_NOTE } from '../const';
 
 export function createInterval(curveCoordinates: Coordinate[]): Interval[] {

src/app/draw/features/FreeDrawing/hooks/useDrawing.ts

@@ -1,10 +1,11 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import paper from 'paper';
-import { curveDraw } from '../functions/curveDraw';
 import { splitCurve } from '../functions/curveSprit';
 import { createInterval } from '../functions/intervalCreate';
 import { useAtomValue } from 'jotai';
 import { barCountAtom, beatCountAtom } from '@/stores/settings';
+import styles from '@/styles/colors.module.scss';
+import { Coordinate } from '../types/curve';
 
 export function useDrawing() {
   const barCount = useAtomValue(barCountAtom);
@@ -13,14 +14,52 @@ export function useDrawing() {
 
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
+  const [isCurveDrawn, setIsCurveDrawn] = useState(false);
+
   useEffect(() => {
     const setupCanvas = async () => {
       const canvas = canvasRef.current;
       if (canvas) {
         paper.setup(canvas);
-        const curveInformation = await curveDraw();
-        const curveCoordinates = splitCurve(curveInformation.coordinates, totalBeatCount);
-        const interval = createInterval(curveCoordinates);
+
+        const tool = new paper.Tool();
+        let path: paper.Path | null = null;
+
+        tool.onMouseDown = (event: paper.ToolEvent) => {
+          if (paper.project.activeLayer.hasChildren()) {
+            paper.project.activeLayer.removeChildren();
+            setIsCurveDrawn(false);
+          }
+
+          path = new paper.Path();
+          path.strokeColor = new paper.Color(styles.primaryColor);
+          path.strokeWidth = 2;
+          path.add(event.point);
+
+          setIsCurveDrawn(false);
+        };
+
+        tool.onMouseDrag = (event: paper.ToolEvent) => {
+          if (path) {
+            path.add(event.point);
+          }
+        };
+
+        tool.onMouseUp = () => {
+          if (path) {
+            path.smooth();
+
+            const coordinates = path.segments.map((segment) => ({
+              x: segment.point.x,
+              y: segment.point.y,
+            })) as Coordinate[];
+
+            const curveCoordinates = splitCurve(coordinates, totalBeatCount);
+            const interval = createInterval(curveCoordinates);
+
+            setIsCurveDrawn(true);
+          }
+        };
       }
     };
 
@@ -29,7 +68,7 @@ export function useDrawing() {
     return () => {
       paper.project.clear();
     };
-  });
+  }, []);
 
-  return { canvasRef };
+  return { canvasRef, isCurveDrawn };
 }

src/app/draw/features/FreeDrawing/types/curve.d.ts

@@ -0,0 +1,4 @@
+export type Coordinate = {
+  x: number;
+  y: number;
+};

src/app/draw/page.tsx

@@ -4,17 +4,30 @@ import { ReactElement } from 'react';
 import FreeDrawingCanvas from './features/FreeDrawing/components/FreeDrawingCanvas';
 import styles from './styles.module.scss';
 import DrawingText from './features/FreeDrawing/components/DrawingText';
+import { useDrawing } from './features/FreeDrawing/hooks/useDrawing';
+import ConfirmButton from './features/FreeDrawing/components/ConfirmButton';
 
 function DrawPage(): ReactElement {
+  const { canvasRef, isCurveDrawn } = useDrawing();
+
+  const onClickComplete = () => {
+    console.log('Complete');
+  };
+
   return (
     <>
       <div className={styles.container}>
-        <div className={styles.freeDrawingCanvasContainer}>
-          <FreeDrawingCanvas />
-        </div>
-        <div className={styles.drawingTextContainer}>
-          <DrawingText text="Draw freely" />
-        </div>
+        <section className={styles.freeDrawingCanvasContainer}>
+          <FreeDrawingCanvas canvasRef={canvasRef} />
+        </section>
+        <section className={styles.confirmButtonContainer}>
+          <ConfirmButton disabled={!isCurveDrawn} onClick={onClickComplete}>
+            OK
+          </ConfirmButton>
+        </section>
+        <section className={styles.drawingTextContainer}>
+          <DrawingText text={isCurveDrawn ? 'Are these curves correct?' : 'Draw freely'} />
+        </section>
       </div>
     </>
   );

src/app/draw/styles.module.scss

@@ -4,10 +4,18 @@
   height: 100vh;
   padding: $md;
   gap: $md;
+  box-sizing: border-box;
 
   .freeDrawingCanvasContainer {
     width: 100%;
-    height: 100%;
+    height: 90%;
+  }
+
+  .confirmButtonContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: $xl;
   }
 
   .drawingTextContainer {

src/styles/colors.scss

@@ -7,6 +7,9 @@ $background-color: #ffffff;
 $bar-background-color: #eeeeee;
 $shadow-color: #333333;
 
+$button-border-color: #d9d9d9;
+$button-hover-background-color: #f9f9f9;
+
 $on-primary-color: #ffffff;
 $on-primary-light-color: #000000;
 $on-text-color: #ffffff;