diff --git a/src/app/[locale]/initSettingsModal/page.jsx b/src/app/[locale]/initSettingsModal/page.jsx
new file mode 100644
index 00000000..a081ef47
--- /dev/null
+++ b/src/app/[locale]/initSettingsModal/page.jsx
@@ -0,0 +1,16 @@
+import Hero from '@/components/Hero'
+import InitSettingsModal from '@/components/InitSettingsModal'
+import { initCheck } from '@/util/session-util'
+
+export default async function InitSettingsModalPage() {
+  await initCheck()
+
+  return (
+    <>
+      <Hero title="Basic Settings" />
+      <div className="flex flex-col justify-center my-8">
+        <InitSettingsModal />
+      </div>
+    </>
+  )
+}
diff --git a/src/components/Headers.jsx b/src/components/Headers.jsx
index 331e899c..02859c96 100644
--- a/src/components/Headers.jsx
+++ b/src/components/Headers.jsx
@@ -10,6 +10,7 @@ export default function Headers() {
         <div className="space-x-4 text-xl">
           <Link href="/intro">Intro</Link>
           <Link href="/playground">Playground</Link>
+          <Link href="/initSettingsModal">Basic Settings</Link>
           <Link href="/settings">Canvas Settings</Link>
           <Link href="/roof">Roof</Link>
           <Link href="/roof2">Roof2</Link>
diff --git a/src/components/InitSettingsModal.jsx b/src/components/InitSettingsModal.jsx
index a79c7a9e..1deb81a7 100644
--- a/src/components/InitSettingsModal.jsx
+++ b/src/components/InitSettingsModal.jsx
@@ -1,22 +1,31 @@
+'use client'
+
 import { useEffect, useState, memo, useCallback } from 'react'
 import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input, Select, SelectItem } from '@nextui-org/react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { modalContent, modalState } from '@/store/modalAtom'
 import { canvasSettingState } from '@/store/canvasAtom'
 import { useAxios } from '@/hooks/useAxios'
+import { get, post } from '@/lib/Axios'
 
 export default function InitSettingsModal(props) {
+  const [objectNo, setObjectNo] = useState('test123240909001') // 후에 삭제 필요
   const [open, setOpen] = useRecoilState(modalState)
   const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
   const [roofMaterials, setRoofMaterials] = useState([])
   const [basicSetting, setBasicSettings] = useState({
-    type: '1',
-    inputType: '1',
-    angleType: 'slope',
+    roofDrawingSet: '1',
+    roofSizeSet: '1',
+    roofAngleSet: 'slope',
     roofs: [],
   })
 
-  const { get, post } = useAxios()
+  const modelProps = {
+    open,
+    setOpen,
+  }
+
+  //const { get, post } = useAxios()
 
   useEffect(() => {
     get({ url: '/api/roof-material/roof-material-infos' }).then((res) => {
@@ -26,6 +35,41 @@ export default function InitSettingsModal(props) {
       setRoofMaterials(res)
     })
 
+    get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${objectNo}` }).then((res) => {
+      if (!res) return
+
+      // 'roofs' 배열을 생성하여 각 항목을 추가
+      const roofsRow = res.map((item) => {
+        return {
+          roofDrawingSet: String(item.roofDrawingSet),
+          roofSizeSet: String(item.roofSizeSet),
+          roofAngleSet: item.roofAngleSet,
+        }
+      })
+
+      const roofsArray = res.map((item) => {
+        return {
+          roofSeq: String(item.roofSeq),
+          roofType: String(item.roofType),
+          roofWidth: String(item.roofWidth),
+          roofHeight: String(item.roofHeight),
+          roofGap: String(item.roofGap),
+          roofLayout: item.roofLayout,
+        }
+      })
+
+      // 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
+      const patternData = {
+        roofDrawingSet: roofsRow[0].roofDrawingSet, // 첫 번째 항목의 값을 사용
+        roofSizeSet: roofsRow[0].roofSizeSet, // 첫 번째 항목의 값을 사용
+        roofAngleSet: roofsRow[0].roofAngleSet, // 첫 번째 항목의 값을 사용
+        roofs: roofsArray, // 만들어진 roofs 배열
+      }
+
+      // 데이터 설정
+      setBasicSettings({ ...patternData })
+    })
+
     if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
       setBasicSettings({ ...canvasSetting })
     }
@@ -46,12 +90,12 @@ export default function InitSettingsModal(props) {
 
     //기본값
     const newRoofSettings = {
-      id: basicSetting.roofs.length + 1,
-      roofId: '3',
-      width: '200',
-      height: '200',
-      gap: '0',
-      layout: 'parallel',
+      roofSeq: basicSetting.roofs.length + 1,
+      roofType: '3',
+      roofWidth: '200',
+      roofHeight: '200',
+      roofGap: '0',
+      roofLayout: 'parallel',
     }
 
     setBasicSettings((prevState) => ({
@@ -62,19 +106,45 @@ export default function InitSettingsModal(props) {
 
   //배열 값 변경 함수
   const handleRoofSettings = (id, event) => {
-    const roof = basicSetting.roofs.map((roof, i) => (id === roof.id ? { ...roof, [event.target.name]: event.target.value } : roof))
+    const roof = basicSetting.roofs.map((roof, i) => (id === roof.roofSeq ? { ...roof, [event.target.name]: event.target.value } : roof))
     setBasicSettings((prevState) => ({
       ...prevState,
       roofs: [...roof],
     }))
   }
 
-  const submitCanvasConfig = () => {
-    post({ url: '/api/canvas-config', data: basicSetting }).then((res) => {
-      if (!res) {
-        setCanvasSetting({ ...basicSetting })
-      }
-    })
+  //저장
+  const submitCanvasConfig = async () => {
+    if (!objectNo) {
+      alert('object_no를 입력하세요.')
+      return
+    }
+
+    const patternData = {
+      objectNo,
+      roofDrawingSet: basicSetting.roofDrawingSet,
+      roofSizeSet: basicSetting.roofSizeSet,
+      roofAngleSet: basicSetting.roofAngleSet,
+      roofMaterialsAddList: basicSetting.roofs,
+    }
+    await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData })
+
+    //Recoil 설정
+    setCanvasSetting({ ...basicSetting })
+
+    // 저장 후 재조회
+    //await handleSelect()
+  }
+
+  // 삭제버튼 클릭시 해당 요소 id를 targetId로 전달받음
+  const onRemove = async (targetId) => {
+    console.log(targetId)
+
+    setBasicSettings((prevState) => ({
+      ...prevState,
+      roofs: prevState.roofs.filter((roof) => roof.roofSeq !== targetId),
+    }))
+    // setBasicSettings({ ...newRoofSettings }) // 삭제한 데이터 배열을 setData()에 상태를 변화시킴
   }
 
   return (
@@ -84,7 +154,13 @@ export default function InitSettingsModal(props) {
 
         <div className="mb-6">
           <div className="flex space-x-4">
-            <RadioGroup label="도면 작성방법" name="type" orientation="horizontal" value={basicSetting.type} onChange={handleBasicSetting}>
+            <RadioGroup
+              label="도면 작성방법"
+              name="roofDrawingSet"
+              orientation="horizontal"
+              value={basicSetting.roofDrawingSet}
+              onChange={handleBasicSetting}
+            >
               <Radio value="1">치수 입력에 의한 물건작성</Radio>
             </RadioGroup>
           </div>
@@ -92,7 +168,13 @@ export default function InitSettingsModal(props) {
 
         <div className="mb-6">
           <div className="flex space-x-4">
-            <RadioGroup label="치수 입력방법" name="inputType" orientation="horizontal" value={basicSetting.inputType} onChange={handleBasicSetting}>
+            <RadioGroup
+              label="치수 입력방법"
+              name="roofSizeSet"
+              orientation="horizontal"
+              value={basicSetting.roofSizeSet}
+              onChange={handleBasicSetting}
+            >
               <Radio value="1">복사도 입력</Radio>
               <Radio value="2">실측값 입력</Radio>
               <Radio value="3">육지붕</Radio>
@@ -102,13 +184,20 @@ export default function InitSettingsModal(props) {
 
         <div className="mb-6">
           <div className="flex space-x-4">
-            <RadioGroup label="지붕각도 설정" name="angleType" orientation="horizontal" value={basicSetting.angleType} onChange={handleBasicSetting}>
+            <RadioGroup
+              label="지붕각도 설정"
+              name="roofAngleSet"
+              orientation="horizontal"
+              value={basicSetting.roofAngleSet}
+              onChange={handleBasicSetting}
+            >
               <Radio value="slope">경사</Radio>
               <Radio value="angle">각도</Radio>
             </RadioGroup>
           </div>
         </div>
 
+        <div className="flex space-x-4">지붕재 추가(단위 : mm)</div>
         <div className="flex items-center mb-4">
           <button className="px-3 py-1 bg-blue-500 text-white rounded mr-3" onClick={addRoofSetting}>
             Add
@@ -118,7 +207,7 @@ export default function InitSettingsModal(props) {
 
         {basicSetting.roofs &&
           basicSetting.roofs.map((roof, index) => {
-            return <RoofSelectBox roofMaterials={roofMaterials} roof={roof} key={index} onChange={handleRoofSettings} />
+            return <RoofSelectBox roofMaterials={roofMaterials} roof={roof} key={index} onChange={handleRoofSettings} onRemove={onRemove} />
           })}
 
         <div className="flex gap-4 items-right">
@@ -128,6 +217,7 @@ export default function InitSettingsModal(props) {
           <Button size="sm" onClick={() => setOpen(!open)}>
             취소
           </Button>
+          <input type="text" placeholder="Object No 입력" value={objectNo} onChange={(e) => setObjectNo(e.target.value)} />
         </div>
       </div>
     </>
@@ -137,15 +227,16 @@ export default function InitSettingsModal(props) {
 const RoofSelectBox = (props) => {
   return (
     <div className="mb-4 flex flex-wrap items-center space-x-4" style={{ border: '1px solid black' }}>
+      <span> 타입 : </span>
       <Select
         aria-label="roofMaterial"
         className={'w-52'}
-        name="roofId"
-        onChange={(e) => props.onChange(props.roof.id, e)}
+        name="roofType"
+        onChange={(e) => props.onChange(props.roof.roofSeq, e)}
         items={props.roofMaterials}
-        defaultSelectedKeys={props.roof.roofId ? props.roof.roofId : ''}
-        selectedKeys={props.roof.roofId}
-        value={props.roof.roofId}
+        defaultSelectedKeys={props.roof.roofType ? props.roof.roofType : ''}
+        selectedKeys={props.roof.roofType}
+        value={props.roof.roofType}
       >
         {(roofMaterial) => (
           <SelectItem key={roofMaterial.id} value={roofMaterial.id}>
@@ -153,37 +244,58 @@ const RoofSelectBox = (props) => {
           </SelectItem>
         )}
       </Select>
+      <span> 너비 : </span>
       <Input
         type="text"
-        name="width"
+        name="roofWidth"
         placeholder="너비"
-        value={props.roof.width}
+        value={props.roof.roofWidth}
         className="w-24"
-        onChange={(e) => props.onChange(props.roof.id, e)}
-      />
-      <Input
-        type="text"
-        name="height"
-        placeholder="높이"
-        value={props.roof.height}
-        className="w-24"
-        onChange={(e) => props.onChange(props.roof.id, e)}
+        onChange={(e) => props.onChange(props.roof.roofSeq, e)}
       />
       mm
-      <Input type="text" name="gap" placeholder="간격" value={props.roof.gap} className="w-24" onChange={(e) => props.onChange(props.roof.id, e)} />
+      <span> 높이 : </span>
+      <Input
+        type="text"
+        name="roofHeight"
+        placeholder="높이"
+        value={props.roof.roofHeight}
+        className="w-24"
+        onChange={(e) => props.onChange(props.roof.roofSeq, e)}
+      />
+      mm
+      <span> 서까래 간격 : </span>
+      <Input
+        type="text"
+        name="roofGap"
+        placeholder="간격"
+        value={props.roof.roofGap}
+        className="w-24"
+        onChange={(e) => props.onChange(props.roof.roofSeq, e)}
+      />
       mm
       <div className="flex space-x-4">
         <RadioGroup
           orientation="horizontal"
-          name="layout"
-          value={props.roof.layout}
+          name="roofLayout"
+          value={props.roof.roofLayout}
           defaultValue="parallel"
-          onChange={(e) => props.onChange(props.roof.id, e)}
+          onChange={(e) => props.onChange(props.roof.roofSeq, e)}
         >
           <Radio value="parallel">병렬식</Radio>
           <Radio value="cascade">계단식</Radio>
         </RadioGroup>
       </div>
+      <div className="flex space-x-4">
+        <Button
+          size="sm"
+          onClick={() => {
+            props.onRemove(props.roof.roofSeq)
+          }}
+        >
+          삭제
+        </Button>
+      </div>
     </div>
   )
 }
diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx
index 2d6e5142..43288dbe 100644
--- a/src/components/Settings.jsx
+++ b/src/components/Settings.jsx
@@ -6,12 +6,57 @@ import { Button } from '@nextui-org/react'
 import { get, post } from '@/lib/Axios'
 import { useRecoilState } from 'recoil'
 import { customSettingsState } from '@/store/canvasAtom'
+import { modalContent, modalState } from '@/store/modalAtom'
+
+import ColorPicker from './common/color-picker/ColorPicker'
 
 export default function Settings() {
   const [objectNo, setObjectNo] = useState('test123240829010')
   const [error, setError] = useState(null)
   const [customSettings, setCustomSettings] = useRecoilState(customSettingsState)
 
+  const [color, setColor] = useState('#ff0000')
+
+  const [open, setOpen] = useRecoilState(modalState)
+  const [contents, setContent] = useRecoilState(modalContent)
+
+  const handleSavePopup = () => {
+    console.log('color ', color)
+  }
+
+  const handleClosePopup = () => {
+    setContent('')
+    setOpen(false)
+    console.log('colorSetting ', color)
+  }
+
+  const colorSetting = (
+    <>
+      <br />
+      <h1>React ColorPicker</h1>
+      <ColorPicker color={color} setColor={setColor} />
+      <div className="p-4">{color}</div>
+      <div>
+        <button onClick={handleSavePopup}>저장</button> <p />
+        <button onClick={handleClosePopup}>취소</button>
+      </div>
+    </>
+  )
+
+  const customStyles = {
+    overlay: {
+      backgroundColor: 'rgba(0,0,0,0.5)',
+    },
+    content: {
+      width: '300px',
+      height: '400px',
+      margin: 'auto',
+      borderRadius: '4px',
+      boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
+      padding: '20px',
+    },
+  }
+
   // 상태를 하나의 객체로 관리
   const [settings, setSettings] = useState({
     display1: Array(11).fill(false), // 화면 표시1
@@ -48,6 +93,21 @@ export default function Settings() {
 
   // 클릭 시 상태 변경 함수
   const handleToggle = (type, index) => {
+    // '실선 그리드' 클릭 시 팝업 열기
+    if (type === 'gridSettings' && gridItems.gridSettings[index] === '실선 그리드') {
+      //openGridPopup()
+    }
+
+    // '그리드 색 설정' 클릭 시 팝업 열기
+    if (type === 'gridSettings' && gridItems.gridSettings[index] === '그리드 색 설정') {
+      //setSelectedGridSetting(gridItems.gridSettings[index])
+      //setIsPopupOpen(true)
+      //return prevSettings // 설정은 변경하지 않음
+
+      setOpen(true)
+      setContent({ ...colorSetting })
+    }
+
     setSettings((prevSettings) => {
       // prevSettings[type]이 배열인지 확인하고, 그렇지 않은 경우 빈 배열로 초기화
       let updated = Array.isArray(prevSettings[type]) ? [...prevSettings[type]] : []
@@ -61,6 +121,24 @@ export default function Settings() {
     })
   }
 
+  // '실선 그리드' 클릭 시 팝업을 열기 위한 함수
+  const openGridPopup = () => {
+    const popupWidth = 500
+    const popupHeight = 300
+
+    // 팝업 창 위치를 화면 중앙으로 조정하기 위해 계산
+    const left = window.innerWidth / 2 - popupWidth / 2
+    const top = window.innerHeight / 2 - popupHeight / 2
+
+    // 새 창 열기
+    window
+      .open
+      //'./components/intro', // 팝업으로 띄울 페이지의 URL
+      //'_blank', // 새 창으로 열기
+      //`width=${popupWidth},height=${popupHeight},top=${top},left=${left}`, // 크기와 위치 지정
+      ()
+  }
+
   // Canvas Setting 조회 및 초기화
   const handleSelect = async () => {
     try {
@@ -221,6 +299,10 @@ export default function Settings() {
             <div className="grid-item">흡착점 ON</div>
           </div>
           <h1>[그리드 설정]</h1>
+          <div>
+            <ColorPicker color={color} setColor={setColor} />
+            <div className="p-4">{color}</div>
+          </div>
           <div className="grid-container2">
             {gridItems.gridSettings.map((item, index) => (
               <div