【イベント】【間取り編集】選択している色のStateをJotaiに置き換え #269

front/src/components/organisms/event/venueedit/palette/ColorPalette.tsx

@@ -5,23 +5,21 @@ import ColorButton from '@/components/organisms/event/venueedit/palette/ColorBut
 import { Color } from 'react-color'
 import ToggleToEraseButton from '@/components/organisms/event/venueedit/palette/ToggleToEraseButton'
 import { useSubToolSelection } from '@/hooks/event/venueedit/useSubToolSelection'
+import { useSelectedColor } from '@/hooks/event/venueedit/submenu/useSelectedColor'
 
 interface ColorPaletteProps {
   colors: Color[]
-  selectedColor: Color
-  onColorSelect: (color: Color) => void
   onAddColor?: (color: Color) => void
   onDeleteColor: (color: Color) => void
 }
 
 export default function ColorPalette({
   colors,
-  selectedColor,
-  onColorSelect,
   onAddColor,
   onDeleteColor,
 }: Readonly<ColorPaletteProps>) {
   const { toggleToGenerateTool, isDrawingTool } = useSubToolSelection()
+  const { selectedColor, updateSelectedColor } = useSelectedColor()
 
   return (
     <div className="grid grid-cols-12 lg:grid-cols-4 xl:grid-cols-8 gap-2">
@@ -30,7 +28,7 @@ export default function ColorPalette({
           key={color.toString()}
           color={color}
           isSelected={isDrawingTool && selectedColor === color}
-          onClick={() => {onColorSelect(color); toggleToGenerateTool()}} // 色の変更とツールを変更を同時に行う
+          onClick={() => {updateSelectedColor(color); toggleToGenerateTool()}} // 色の変更とツールを変更を同時に行う
           onDelete={() => onDeleteColor(color)}
         />
       ))}

front/src/components/organisms/event/venueedit/palette/ColorSingleSelector.tsx

@@ -6,30 +6,25 @@ import ColorPickerDialog from '@/components/organisms/event/venueedit/palette/Co
 import ToggleToGenerateButton from '@/components/organisms/event/venueedit/palette/ToggleToGenerateButton'
 import ToggleToEraseButton from '@/components/organisms/event/venueedit/palette/ToggleToEraseButton'
 import { useSubToolSelection } from '@/hooks/event/venueedit/useSubToolSelection'
+import { useSelectedColor } from '@/hooks/event/venueedit/submenu/useSelectedColor'
 
-interface ColorSingleSelectorProps {
-  selectedColor: Color
-  selectedColorBackGround: Color
-  setSelectedColor: (color: Color) => void
-  setSelectedColorBackGround: (color: Color) => void
-}
-
-export default function ColorSingleSelector({
-  selectedColor,
-  selectedColorBackGround,  
-  setSelectedColor,
-  setSelectedColorBackGround,
-}: Readonly<ColorSingleSelectorProps>) {
+export default function ColorSingleSelector() {
   const { isDrawingTool } = useSubToolSelection()
+  const { 
+    selectedColor, 
+    updateSelectedColor, 
+    selectedColorBackGround, 
+    updateSelectedColorBackGround 
+  } = useSelectedColor()
   const [isTextColorOpen, setIsTextColorOpen] = useState(false)
   const [isBackgroundColorOpen, setIsBackgroundColorOpen] = useState(false)
 
   const handleTextColorChange = (hex: string) => {
-    setSelectedColor(hex as Color)
+    updateSelectedColor(hex as Color)
   }
 
   const handleBackgroundColorChange = (hex: string) => {
-    setSelectedColorBackGround(hex as Color)
+    updateSelectedColorBackGround(hex as Color)
   }
 
   return (

front/src/components/templates/event/venueedit/VenueEditorTemplate.tsx

@@ -20,11 +20,7 @@ interface Props {
  */
 export default function VenueEditorTemplate({ eventVenueEditViewModel }: Readonly<Props>) {
   const { 
-    selectedColor,
-    setSelectedColor, 
     colorPalette, 
-    selectedColorBackGround,
-    setSelectedColorBackGround,
     addColor,
     removeColor
   } = useColorPalette()
@@ -47,8 +43,6 @@ export default function VenueEditorTemplate({ eventVenueEditViewModel }: Readonl
     saveImageAction,
     isPendingForSave
   } = useCanvasDraw({
-    selectedColor,
-    selectedColorBackGround,
     eventVenueEditViewModel,
   })
 
@@ -76,10 +70,6 @@ export default function VenueEditorTemplate({ eventVenueEditViewModel }: Readonl
           </div>
           <div className="col-span-1 md:col-span-1 lg:col-span-2 xl:col-span-4">
             <VenueToolSubMenu 
-              selectedColor={selectedColor}
-              setSelectedColor={setSelectedColor}
-              selectedColorBackGround={selectedColorBackGround}
-              setSelectedColorBackGround={setSelectedColorBackGround}
               colorPalette={colorPalette}
               onAddColor={addColor}
               onDeleteColor={removeColor}

front/src/components/templates/event/venueedit/VenueToolSubMenu.tsx

@@ -5,20 +5,12 @@ import ColorSingleSelector from '@/components/organisms/event/venueedit/palette/
 import { useSubToolSelection } from '@/hooks/event/venueedit/useSubToolSelection';
 
 interface VenueToolSubMenuProps {
-  selectedColor: Color;
-  setSelectedColor: (color: Color) => void;
-  selectedColorBackGround: Color;
-  setSelectedColorBackGround: (color: Color) => void;
   colorPalette: Color[];
   onAddColor: (color: Color) => void;
   onDeleteColor: (color: Color) => void;
 }
 
 export default function VenueToolSubMenu({
-  selectedColor,
-  setSelectedColor,
-  selectedColorBackGround,
-  setSelectedColorBackGround,
   colorPalette,
   onAddColor,
   onDeleteColor
@@ -34,20 +26,13 @@ export default function VenueToolSubMenu({
           </div>
           {isPixelTool && (
             <ColorPalette
-              onColorSelect={setSelectedColor}
-              selectedColor={selectedColor}
               colors={colorPalette}
               onAddColor={onAddColor}
               onDeleteColor={onDeleteColor}
             />
           )}
           {isTextTool && (
-            <ColorSingleSelector
-              selectedColor={selectedColor}
-              selectedColorBackGround={selectedColorBackGround}
-              setSelectedColor={setSelectedColor}
-              setSelectedColorBackGround={setSelectedColorBackGround}
-            />
+            <ColorSingleSelector/>
           )}
         </div>
       </div>

front/src/hooks/event/venueedit/submenu/useColorPalette.ts

@@ -1,16 +1,13 @@
 import { Color } from 'react-color'
-import { useState, Dispatch, SetStateAction } from 'react'
+import { useState } from 'react'
 import { DEFAULT_COLORS } from '@/lib/event/venueedit/constants'
+import { useSelectedColor } from './useSelectedColor'
 
 /**
  * useColorPaletteフックの戻り値の型定義
  */
 interface UseColorPaletteReturn {
-  selectedColor: Color
   colorPalette: Color[]
-  setSelectedColor: Dispatch<SetStateAction<Color>>
-  selectedColorBackGround: Color
-  setSelectedColorBackGround: Dispatch<SetStateAction<Color>>
   addColor: (color: Color) => void
   removeColor: (color: Color) => void
   resetColors: () => void
@@ -21,9 +18,9 @@ interface UseColorPaletteReturn {
  * @returns カラーパレットの状態と操作関数
  */
 export const useColorPalette = (): UseColorPaletteReturn => {
-  const [selectedColor, setSelectedColor] = useState<Color>(DEFAULT_COLORS[0])
-  const [selectedColorBackGround, setSelectedColorBackGround] = useState<Color>(DEFAULT_COLORS[1])
   const [colorPalette, setColorPalette] = useState<Color[]>(DEFAULT_COLORS)
+  const { updateSelectedColor, selectedColor } = useSelectedColor()
+
 
   /**
    * 新しい色を追加する
@@ -33,7 +30,7 @@ export const useColorPalette = (): UseColorPaletteReturn => {
     // 重複チェック
     if (colorPalette.includes(color)) return
     setColorPalette([...colorPalette, color])
-    setSelectedColor(color) // 追加した色を選択状態にする
+    updateSelectedColor(color)
   }
 
   /**
@@ -42,9 +39,8 @@ export const useColorPalette = (): UseColorPaletteReturn => {
    */
   const removeColor = (color: Color) => {
     setColorPalette(colorPalette.filter(c => c !== color))
-    // 削除した色が選択されていた場合、最初の色を選択
     if (selectedColor === color) {
-      setSelectedColor(colorPalette[0])
+      updateSelectedColor(colorPalette[0])
     }
   }
 
@@ -53,15 +49,11 @@ export const useColorPalette = (): UseColorPaletteReturn => {
    */
   const resetColors = () => {
     setColorPalette(DEFAULT_COLORS)
-    setSelectedColor(DEFAULT_COLORS[0])
+    updateSelectedColor(DEFAULT_COLORS[0])
   }
 
   return {
-    selectedColor,
     colorPalette,
-    setSelectedColor,
-    selectedColorBackGround,
-    setSelectedColorBackGround,
     addColor,
     removeColor,
     resetColors

front/src/hooks/event/venueedit/submenu/useSelectedColor.ts

@@ -0,0 +1,38 @@
+import { useAtomValue, useSetAtom } from 'jotai'
+import { useCallback } from 'react'
+import { Color } from 'react-color'
+import { 
+  selectedColorAtom,
+  selectedColorBackGroundAtom,
+  colorActionAtom
+} from '@/store/event/venueedit/color'
+
+/**
+ * 選択色の状態と操作を管理するカスタムフック
+ */
+export const useSelectedColor = () => {
+  // Atomから状態を読み取る
+  const selectedColor = useAtomValue(selectedColorAtom)
+  const selectedColorBackGround = useAtomValue(selectedColorBackGroundAtom)
+
+  // 更新用のdispatch関数を取得
+  const dispatch = useSetAtom(colorActionAtom)
+
+  // 各アクションに対応するコールバック関数を定義
+  const updateSelectedColor = useCallback(
+    (color: Color) => dispatch({ type: 'SET_SELECTED_COLOR', color }),
+    [dispatch]
+  )
+
+  const updateSelectedColorBackGround = useCallback(
+    (color: Color) => dispatch({ type: 'SET_BACKGROUND_COLOR', color }),
+    [dispatch]
+  )
+
+  return {
+    selectedColor,
+    updateSelectedColor,
+    selectedColorBackGround,
+    updateSelectedColorBackGround,
+  }
+}

front/src/hooks/event/venueedit/tool/cell/useCircleDraw.ts

@@ -2,19 +2,20 @@ import { useCallback } from 'react'
 import { Color } from 'react-color'
 import { useCellEditableTool } from '@/hooks/event/venueedit/tool/cell/useCellEditableTool'
 import { TextState } from '@/types/event/state'
+import { useSelectedColor } from '@/hooks/event/venueedit/submenu/useSelectedColor'
 
 interface Props {
   canvasRef: React.RefObject<HTMLCanvasElement | null>
   numPixel: number
-  selectedColor: Color
   setPixelColorState: React.Dispatch<React.SetStateAction<(Color | null)[][]>>
   pixelColorState: (Color | null)[][]
   setCircleColorState: React.Dispatch<React.SetStateAction<(Color | null)[][]>>
   circleColorState: (Color | null)[][]    
   textState: TextState[]
 }
 
-export const useCircleDraw = ({ canvasRef, numPixel, selectedColor, setCircleColorState, pixelColorState, circleColorState, textState }: Props) => {
+export const useCircleDraw = ({ canvasRef, numPixel, setCircleColorState, pixelColorState, circleColorState, textState }: Props) => {
+  const { selectedColor } = useSelectedColor()
   const updateCircleState = useCallback((x: number, y: number) => {
     const newState = [...circleColorState]
     newState[y] = [...newState[y]]

front/src/hooks/event/venueedit/tool/cell/usePixelDraw.ts

@@ -2,19 +2,20 @@ import { useCallback } from 'react'
 import { Color } from 'react-color'
 import { useCellEditableTool } from '@/hooks/event/venueedit/tool/cell/useCellEditableTool'
 import { TextState } from '@/types/event/state'
+import { useSelectedColor } from '@/hooks/event/venueedit/submenu/useSelectedColor'
 
 interface Props {
   canvasRef: React.RefObject<HTMLCanvasElement | null>
   numPixel: number
-  selectedColor: Color
   setPixelColorState: React.Dispatch<React.SetStateAction<(Color | null)[][]>>
   pixelColorState: (Color | null)[][]
   setCircleColorState: React.Dispatch<React.SetStateAction<(Color | null)[][]>>
   circleColorState: (Color | null)[][]
   textState: TextState[]
 }
 
-export const usePixelDraw = ({ canvasRef, numPixel, selectedColor, setPixelColorState, pixelColorState, circleColorState, textState }: Props) => {
+export const usePixelDraw = ({ canvasRef, numPixel, setPixelColorState, pixelColorState, circleColorState, textState }: Props) => {
+  const { selectedColor } = useSelectedColor()
   const updatePixelState = useCallback((x: number, y: number) => {
     const newState = [...pixelColorState]
     newState[y] = [...newState[y]]

front/src/hooks/event/venueedit/tool/select/dialog/useTextDialog.ts

@@ -1,24 +1,22 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useCallback } from 'react'
 import { Position, TextState } from '@/types/event/state'
 import { Color } from 'react-color'
+import { useSelectedColor } from '@/hooks/event/venueedit/submenu/useSelectedColor'
 
 interface TextDialogProps {
   textState: TextState[]
   setTextState: React.Dispatch<React.SetStateAction<TextState[]>>
-  selectedColor: Color
-  selectedColorBackGround?: Color
   isDialogModalOpen: boolean
   setIsDialogModalOpen: (isOpen: boolean) => void
 }
 
 export const useTextDialog = ({
   textState,
   setTextState,
-  selectedColor,
-  selectedColorBackGround,
   isDialogModalOpen,
   setIsDialogModalOpen,
 }: TextDialogProps) => {
+  const { selectedColor, selectedColorBackGround } = useSelectedColor()
   const [isTextDialogOpen, setIsTextDialogOpen] = useState(false)
   const [currentText, setCurrentText] = useState('')
   const [textPosition, setTextPosition] = useState<Position>({
@@ -38,7 +36,7 @@ export const useTextDialog = ({
     setIsTextDialogOpen(isDialogModalOpen)
   }, [isDialogModalOpen])
 
-  const handleTextAdd = () => {
+  const handleTextAdd = useCallback(() => {
     const newTextState: TextState[] = [...textState, {
       text: currentText,
       textColor: selectedColor,
@@ -52,7 +50,7 @@ export const useTextDialog = ({
     }]
     setTextState(newTextState)
     setIsTextDialogOpen(false)
-  }
+  }, [currentText, selectedColor, selectedColorBackGround, textState, textPosition, setTextState, setIsTextDialogOpen])
 
   return {
     isTextDialogOpen,
@@ -62,7 +60,5 @@ export const useTextDialog = ({
     textPosition,
     setTextPosition,
     handleTextAdd,
-    selectedColor,
-    selectedColorBackGround,
   }
-}
+}

front/src/hooks/event/venueedit/tool/select/useTextAdd.ts

@@ -8,8 +8,6 @@ interface Props {
   canvasRef: React.RefObject<HTMLCanvasElement | null>
   numPixel: number
   draggingColor: string
-  selectedColor: Color
-  selectedColorBackGround?: Color
   textState: TextState[]
   setTextState: React.Dispatch<React.SetStateAction<TextState[]>>
   isDialogModalOpen: boolean
@@ -20,8 +18,6 @@ export const useTextAdd = ({
   canvasRef, 
   numPixel, 
   draggingColor, 
-  selectedColor,
-  selectedColorBackGround,
   textState,
   setTextState,
   isDialogModalOpen,
@@ -38,8 +34,6 @@ export const useTextAdd = ({
     setTextPosition,
     handleTextAdd,
   } = useTextDialog({
-    selectedColor,
-    selectedColorBackGround,
     textState,
     setTextState,
     isDialogModalOpen,