music を jotai で管理するように変更

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

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

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

@@ -1,16 +1,12 @@
 import { useEffect, useRef, useState } from 'react';
 import paper from 'paper';
-import { splitCurve } from '../functions/curveSprit';
-import { createInterval } from '../functions/intervalCreate';
-import { useAtomValue } from 'jotai';
-import { barCountAtom, beatCountAtom } from '@/stores/settings';
+import { useSetAtom } from 'jotai';
 import styles from '@/styles/colors.module.scss';
-import { Coordinate } from '../types/curve';
+import { Coordinate } from '@/types/draw';
+import { curveCoordinatesAtom } from '@/stores/draw';
 
 export function useDrawing() {
-  const barCount = useAtomValue(barCountAtom);
-  const beatCount = useAtomValue(beatCountAtom);
-  const totalBeatCount = barCount * beatCount;
+  const setCurveCoordinates = useSetAtom(curveCoordinatesAtom);
 
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
@@ -54,10 +50,7 @@ export function useDrawing() {
               y: segment.point.y,
             })) as Coordinate[];
 
-            const curveCoordinates = splitCurve(coordinates, totalBeatCount);
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const interval = createInterval(curveCoordinates);
-
+            setCurveCoordinates(coordinates);
             setIsCurveDrawn(true);
           }
         };

src/app/generate/_components/Blocks/index.tsx

@@ -6,13 +6,14 @@ import { barCountAtom, octaveRangeAtom, beatCountAtom, minNoteDurationAtom } fro
 import { CSSProperties, ForwardedRef, forwardRef, useMemo } from 'react';
 import Block from './Block';
 import { MAX, MIN } from '@/const';
-import { music } from '@/samples';
+import { musicAtom } from '@/stores/music';
 
 interface Props {
   onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
 }
 
 export default forwardRef(function Blocks({ onScroll }: Props, ref: ForwardedRef<HTMLElement>) {
+  const music = useAtomValue(musicAtom); // 音楽データ
   const octaveRange = useAtomValue(octaveRangeAtom); // 表示する音域
   const barCount = useAtomValue(barCountAtom); // 小節数
   const beatCount = useAtomValue(beatCountAtom); // 拍子

src/app/tap/features/RecordRhythm/components/HighlightedSections/index.tsx

@@ -1,4 +1,4 @@
-import { HighlightedSection } from '@/app/tap/features/RecordRhythm/types';
+import { HighlightedSection } from '@/types/tap';
 import styles from './style.module.scss';
 
 interface HighlightedSectionsProps {

src/app/tap/features/RecordRhythm/hooks/useRhythmBar.ts

@@ -1,19 +1,13 @@
 import { useCallback, useEffect, useState } from 'react';
-import { highlightMap2Beat } from '../functions/highlightMap2Beat';
-import { useAtomValue } from 'jotai';
-import { barCountAtom, beatCountAtom, minNoteDurationAtom } from '@/stores/settings';
+import { useAtom } from 'jotai';
+import { highlightedSectionsAtom } from '@/stores/tap';
 
 export function useRhythmBar(duration: number) {
-  const barCount = useAtomValue(barCountAtom); // 小節数
-  const beatCount = useAtomValue(beatCountAtom); // 拍子
-  const minNoteDuration = useAtomValue(minNoteDurationAtom); // 最小音符の長さ
-
   const [pushSpaceKey, setPushSpaceKey] = useState(false);
   const [progress, setProgress] = useState(0);
-  const [highlightedSections, setHighlightedSections] = useState<{ start: number; end: number }[]>([]);
+  const [highlightedSections, setHighlightedSections] = useAtom(highlightedSectionsAtom);
   const [currentHighlightStart, setCurrentHighlightStart] = useState<number | null>(null);
   const [isStarted, setIsStarted] = useState(false); // 進行状況の開始フラグ
-  const [isFinished, setIsFinished] = useState(false);
 
   const handleKeyDownSpace = useCallback(
     (event: KeyboardEvent) => {
@@ -75,16 +69,7 @@ export function useRhythmBar(duration: number) {
         setCurrentHighlightStart(null);
       }
     }
-    if (progress >= 100 && !pushSpaceKey) {
-      setIsFinished(true);
-    }
   }, [progress, pushSpaceKey]);
 
-  useEffect(() => {
-    const length = barCount * beatCount * minNoteDuration;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const Beat = highlightMap2Beat(highlightedSections, length);
-  }, [isFinished]);
-
   return { pushSpaceKey, progress, highlightedSections, currentHighlightStart, isStarted };
 }

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

@@ -1,9 +1,11 @@
 import { Interval, ScaleInterval } from '@/types';
-import { Coordinate } from '../types/curve';
-import { HALF_NOTE, SCALE_NUM, WHOLE_NOTE } from '../const';
+import { Coordinate } from '@/types/draw';
+import { HALF_NOTE, SCALE_NUM, WHOLE_NOTE } from '@/const/draw';
 
 export function createInterval(curveCoordinates: Coordinate[]): Interval[] {
-  const yBase = curveCoordinates[0].y;
+  const yBase = curveCoordinates.at(0)?.y;
+  if (yBase == undefined) return [];
+
   const yMax = Math.max(...curveCoordinates.map((c) => c.y - yBase));
   const yMin = Math.min(...curveCoordinates.map((c) => c.y - yBase));
   const yMaxAbs = Math.max(Math.abs(yMax), Math.abs(yMin));

src/functions/createMusic.ts

@@ -0,0 +1,15 @@
+import { Beat } from '@/models';
+import { Interval, Settings } from '@/types';
+import { music as musicSample } from '@/samples';
+
+/**
+ * Interval と beat から音楽データを生成する
+ *
+ * @param intervals 音程
+ * @param beats 拍子
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function createMusic(interval: Interval[], beats: Beat[], settings: Settings) {
+  // TODO
+  return musicSample;
+}

src/app/tap/features/RecordRhythm/functions/highlightMap2Beat.ts → src/functions/highlightMap2Beat.ts

@@ -1,4 +1,4 @@
-import { HighlightedSection } from '../types';
+import { HighlightedSection } from '@/types/tap';
 
 import { Beat } from '@/models';
 

src/stores/draw.ts

@@ -0,0 +1,13 @@
+import { Interval } from '@/types';
+import { Coordinate } from '@/types/draw';
+import { createInterval } from '@/functions/createInterval';
+import { atom } from 'jotai';
+
+// 曲線 (Read & Write)
+export const curveCoordinatesAtom = atom<Coordinate[]>([]);
+
+// 音程 (Read Only)
+export const intervalsAtom = atom<Interval[]>((get) => {
+  const curveCoordinates = get(curveCoordinatesAtom);
+  return createInterval(curveCoordinates);
+});

src/stores/music.ts

@@ -0,0 +1,15 @@
+import { Music } from '@/models';
+import { atom } from 'jotai';
+import { settingsAtom } from './settings';
+import { intervalsAtom } from './draw';
+import { beatsAtom } from './tap';
+import { createMusic } from '@/functions/createMusic';
+
+// Music (Read Only)
+export const musicAtom = atom<Music>((get) => {
+  const settings = get(settingsAtom);
+  const intervals = get(intervalsAtom);
+  const beats = get(beatsAtom);
+
+  return createMusic(intervals, beats, settings);
+});

src/stores/settings.ts

@@ -11,3 +11,12 @@ export const barCountAtom = atom<Settings['barCount']>(8);
 export const beatCountAtom = atom<Settings['beatCount']>(4);
 // 最小の音符の長さ (1/N 拍)
 export const minNoteDurationAtom = atom<Settings['minNoteDuration']>(4);
+
+// 設定 (Read Only)
+export const settingsAtom = atom<Settings>((get) => ({
+  bpm: get(bpnAtom),
+  octaveRange: get(octaveRangeAtom),
+  barCount: get(barCountAtom),
+  beatCount: get(beatCountAtom),
+  minNoteDuration: get(minNoteDurationAtom),
+}));

src/stores/tap.ts

@@ -0,0 +1,18 @@
+import { Beat } from '@/models';
+import { barCountAtom, beatCountAtom, minNoteDurationAtom } from './settings';
+import { highlightMap2Beat } from '@/functions/highlightMap2Beat';
+import { atom } from 'jotai';
+
+// ハイライト区間 (Read & Write)
+export const highlightedSectionsAtom = atom<{ start: number; end: number }[]>([]);
+
+// ビート (Read Only)
+export const beatsAtom = atom<Beat[]>((get) => {
+  const highlightedSections = get(highlightedSectionsAtom);
+  const barCount = get(barCountAtom);
+  const beatCount = get(beatCountAtom);
+  const minNoteDuration = get(minNoteDurationAtom);
+  const length = barCount * beatCount * minNoteDuration;
+
+  return highlightMap2Beat(highlightedSections, length);
+});