colorpicker 추가

package.json

@@ -34,6 +34,7 @@
     "postcss": "^8",
     "prettier": "^3.3.3",
     "prisma": "^5.18.0",
+    "react-color-palette": "^7.2.2",
     "sass": "^1.77.8",
     "tailwindcss": "^3.4.1"
   }

src/components/SettingsModal.jsx

@@ -4,6 +4,9 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 import { modalContent, modalState } from '@/store/modalAtom'
 import { guideLineState } from '@/store/canvasAtom'
 import { fabric } from 'fabric'
+import { ColorPicker, useColor } from 'react-color-palette'
+import 'react-color-palette/css'
+import { withRouter } from 'next/router'
 
 export default function SettingsModal(props) {
   const { canvasProps } = props
@@ -19,6 +22,15 @@ export default function SettingsModal(props) {
 
   const gridSettingArray = []
 
+  const [guideColor, setGuideColor] = useColor('rgb(200, 15, 15)')
+  const [colorPickerShow, setColorPickerShow] = useState(false)
+
+  const boxStyle = {
+    width: '50px',
+    height: '30px',
+    border: '1px solid black',
+    backgroundColor: guideColor.hex,
+  }
   useEffect(() => {
     moduleLength.current.value = 90
     customModuleHoriLength.current.value = 90
@@ -54,7 +66,7 @@ export default function SettingsModal(props) {
         const horizontalLine = new fabric.Line(
           [0, i * moduleVertLength - moduleVertLength / 2, canvasProps.width, i * moduleVertLength - moduleVertLength / 2],
           {
-            stroke: 'gray',
+            stroke: guideColor.hex,
             strokeWidth: 1,
             selectable: true,
             lockMovementX: true,
@@ -63,6 +75,8 @@ export default function SettingsModal(props) {
             lockScalingX: true,
             lockScalingY: true,
             name: 'guideLine',
+            strokeDashArray: [5, 2],
+            opacity: 0.3,
           },
         )
         canvasProps.add(horizontalLine)
@@ -73,7 +87,7 @@ export default function SettingsModal(props) {
         const verticalLine = new fabric.Line(
           [i * moduleHoriLength - moduleHoriLength / 2, 0, i * moduleHoriLength - moduleHoriLength / 2, canvasProps.height],
           {
-            stroke: 'gray',
+            stroke: guideColor.hex,
             strokeWidth: 1,
             selectable: true,
             lockMovementX: true,
@@ -82,6 +96,8 @@ export default function SettingsModal(props) {
             lockScalingX: true,
             lockScalingY: true,
             name: 'guideLine',
+            strokeDashArray: [5, 2],
+            opacity: 0.3,
           },
         )
         canvasProps.add(verticalLine)
@@ -104,7 +120,9 @@ export default function SettingsModal(props) {
     if (gridCheckedValue.includes('dot')) {
       const circle = new fabric.Circle({
         radius: 2,
-        fill: 'red',
+        fill: 'white',
+        stroke: guideColor.hex,
+        strokeWidth: 0.7,
         originX: 'center',
         originY: 'center',
         selectable: false,
@@ -200,10 +218,18 @@ export default function SettingsModal(props) {
             <Radio value="custom">임의간격</Radio>
           </RadioGroup>
         </div>
-        <div className="flex w-full flex-wrap md:flex-nowrap gap-4"></div>
-        <Checkbox value="linked" isDisabled={isCustomGridSetting}>
-          종횡연동
-        </Checkbox>
+        <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+          가이드컬러 <div style={boxStyle} onClick={() => setColorPickerShow(!colorPickerShow)}></div>
+        </div>
+        {colorPickerShow && (
+          <ColorPicker color={guideColor} onChange={setGuideColor} hideInput={['hsv', 'rgb', 'hex']} height={100} hideAlpha={true} />
+        )}
+
+        <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+          <Checkbox value="linked" isDisabled={isCustomGridSetting}>
+            종횡연동
+          </Checkbox>
+        </div>
       </div>
       <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
         <Input type="number" label="가로간격" ref={customModuleHoriLength} min={0} isDisabled={isCustomGridSetting} />
@@ -213,6 +239,7 @@ export default function SettingsModal(props) {
         <Input type="number" label="세로간격" ref={customModuleVertLength} min={0} isDisabled={isCustomGridSetting} />
         mm
       </div>
+
       <div className="flex gap-4 items-center">
         <Button size="sm">초기화</Button>
         <Button size="sm" color="secondary" onClick={drawGridSettings} isDisabled={gridCheckedValue.length === 0}>

src/components/ui/ThumbnailLIst.jsx

@@ -19,7 +19,7 @@ function ThumbnailList(props) {
       <div className="flex justify-center m-4 w-full">
         {thumbnails.length > 0 &&
           thumbnails.map((thumbnail, index) => (
-            <Card isFooterBlurred radius="lg" className="border-none m-2">
+            <Card isFooterBlurred radius="lg" key={index} className="border-none m-2">
               <Image
                 alt="Woman listing to music"
                 className="object-cover"

yarn.lock

@@ -5465,6 +5465,11 @@ rbush@^3.0.1:
   dependencies:
     quickselect "^2.0.0"
 
+react-color-palette@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/react-color-palette/-/react-color-palette-7.2.2.tgz#84d209a425887dce9955466682db353144ab1bb1"
+  integrity sha512-SHLPS3JO+xECRtWB14dAgUPranQMDiGWqn2QVPppAzqWhbUtsg2uVTUd3cpiK3OEa66j7xIDGa/RPjCw98D61g==
+
 react-datepicker@^7.3.0:
   version "7.3.0"
   resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.3.0.tgz"