Merge branch 'dev' into dev-yj

# Conflicts:
#	src/locales/ja.json
#	src/locales/ko.json

public/static/images/main/login_email.svg

@@ -0,0 +1,10 @@
+<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon" clip-path="url(#clip0_4212_2156)">
+<path id="Vector" d="M1.125 0C0.503906 0 0 0.503906 0 1.125C0 1.47891 0.166406 1.81172 0.45 2.025L5.55 5.85C5.81719 6.04922 6.18281 6.04922 6.45 5.85L11.55 2.025C11.8336 1.81172 12 1.47891 12 1.125C12 0.503906 11.4961 0 10.875 0H1.125ZM0 2.625V7.5C0 8.32734 0.672656 9 1.5 9H10.5C11.3273 9 12 8.32734 12 7.5V2.625L6.9 6.45C6.36562 6.85078 5.63438 6.85078 5.1 6.45L0 2.625Z" fill="#A8B6C7"/>
+</g>
+<defs>
+<clipPath id="clip0_4212_2156">
+<rect width="12" height="9" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/static/images/sub/address_search.svg

@@ -0,0 +1,11 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4220_3331)">
+<path d="M17.8789 17.9736L19.8789 19.9736" stroke="#364864" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M9.98926 18.4036C14.6837 18.4036 18.4893 14.5986 18.4893 9.90494C18.4893 5.21124 14.6837 1.40625 9.98926 1.40625C5.29484 1.40625 1.48926 5.21124 1.48926 9.90494C1.48926 14.5986 5.29484 18.4036 9.98926 18.4036Z" stroke="#364864" stroke-width="1.5"/>
+</g>
+<defs>
+<clipPath id="clip0_4220_3331">
+<rect width="21" height="21" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/static/images/sub/information_help.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.9598 10.4707C21.0134 11.3009 21.0134 12.1606 20.9598 12.9908C20.6856 17.2332 17.3536 20.6124 13.1706 20.8905C11.7435 20.9853 10.2536 20.9851 8.8294 20.8905C8.33896 20.8579 7.8044 20.7408 7.34401 20.5512C6.83177 20.3402 6.5756 20.2347 6.44544 20.2507C6.31527 20.2668 6.1264 20.406 5.74868 20.6846C5.08268 21.1757 4.24367 21.5284 2.99943 21.4981C2.37026 21.4828 2.05568 21.4751 1.91484 21.235C1.77401 20.9949 1.94941 20.6625 2.30021 19.9978C2.78674 19.0758 3.09501 18.0202 2.62791 17.1745C1.82343 15.9665 1.1401 14.5359 1.04024 12.9908C0.986587 12.1606 0.986587 11.3009 1.04024 10.4707C1.31441 6.22831 4.64639 2.84907 8.8294 2.57101C10.0318 2.49108 10.2812 2.4785 11.5 2.53362" stroke="#45576F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.9996 5C20.9996 6.933 19.4326 8.5 17.4996 8.5C15.5666 8.5 13.9996 6.933 13.9996 5C13.9996 3.067 15.5666 1.5 17.4996 1.5C19.4326 1.5 20.9996 3.067 20.9996 5Z" stroke="#45576F" stroke-width="1.5"/>
+</svg>

src/app/layout.js

@@ -75,7 +75,7 @@ export default async function RootLayout({ children }) {
             <QcastProvider>{children}</QcastProvider>
           )}
           <ToastContainer />
-          <QModal />
+          {/* <QModal /> */}
         </body>
       </html>
     </RecoilRootWrapper>

src/components/Main.jsx

@@ -1,9 +1,169 @@
 'use client'
+import React, { useEffect, useState } from 'react'
+
+import { useRouter } from 'next/navigation'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { modalContent, modalState, modalProps } from '@/store/modalAtom'
+import { sessionStore } from '@/store/commonAtom'
+import { useAxios } from '@/hooks/useAxios'
+import { globalLocaleStore } from '@/store/localeAtom'
+import MainContents from './main/MainContents'
+import { useMessage } from '@/hooks/useMessage'
+import { stuffSearchState } from '@/store/stuffAtom'
+import { useForm } from 'react-hook-form'
+import '@/styles/contents.scss'
+import ChangePasswordPop from './main/ChangePasswordPop'
+export default function MainPage() {
+  const [sessionState, setSessionState] = useRecoilState(sessionStore)
+
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+
+  const { get } = useAxios(globalLocaleState)
+  const router = useRouter()
+  const { getMessage } = useMessage()
+
+  const [searchTxt, setSearchTxt] = useState('')
+
+  const [searchRadioType, setSearchRadioType] = useState('object')
+  //컨텐츠 관련
+  const [saleStoreId, setSaleStoreId] = useState('')
+  const [saleStoreName, setSaleStoreName] = useState('')
+
+  const [objectList, setObjectList] = useState([])
+  const [businessCharger, setBusinessCharger] = useState('')
+  const [businessChargerMail, setBusinessChargerMail] = useState('')
+  const [businessChargerTel, setBusinessChargerTel] = useState('')
+
+  const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
+
+  useEffect(() => {
+    if (sessionState.pwdInitYn === 'Y') {
+      fetchObjectList()
+    }
+  }, [sessionState])
+
+  const fetchObjectList = async () => {
+    try {
+      // const apiUrl = `/api/main-page/object/X167/list`
+      const apiUrl = `/api/main-page/object/${sessionState?.storeId}/list`
+      const res = await get({ url: apiUrl })
+      if (res) {
+        setSaleStoreId(res.saleStoreId)
+        setSaleStoreName(res.saleStoreName)
+        setObjectList(res.objectList)
+        setBusinessCharger(res.businessCharger)
+        setBusinessChargerMail(res.businessChargerMail)
+        setBusinessChargerTel(res.businessChargerTel)
+      }
+    } catch (error) {
+      console.error('MAIN API fetching error:', error)
+    }
+  }
+
+  // 엔터 이벤트
+  const handleByOnKeyUp = (e) => {
+    if (e.key === 'Enter') {
+      //물건번호 일떄
+      if (searchRadioType === 'object') {
+        setStuffSearch({
+          ...stuffSearch,
+          schObjectNo: searchTxt,
+          code: 'M',
+        })
+        router.push('/management/stuff')
+      } else {
+        alert('작업중')
+        return
+
+        //FAQ일떄
+        //faq리코일에
+        //searchValue= e.target.value
+        //mainFlag:'Y'
+        // router.push('/community/faq')
+      }
+    }
+  }
+
+  // 라디오 변경 이벤트
+  const handleOnChangeRadio = (e) => {
+    setSearchRadioType(e.target.value)
+  }
+
+  // 돋보기 클릭
+  const handleOnSubmit = () => {
+    if (searchRadioType === 'object') {
+      setStuffSearch({
+        ...stuffSearch,
+        schObjectNo: searchTxt,
+        code: 'M',
+      })
+
+      router.push('/management/stuff')
+    } else {
+      alert('작업중')
+      return
+      //FAQ일떄
+      //faq리코일에
+      //searchValue= e.target.value
+      //mainFlag:'Y'
+      // router.push('/community/faq')
+    }
+  }
 
-export default function MainPage(props) {
   return (
     <>
-      <h1>Main page</h1>
+      {(sessionState?.pwdInitYn !== 'N' && (
+        <>
+          <div className="background-bord"></div>
+          <div className="main-contents">
+            <div className="store-id-wrap">
+              <div className="store-id-box">
+                <div className="store-id-title">
+                  {getMessage('main.storeId')}/ {getMessage('main.storeName')}
+                </div>
+              </div>
+              <span className="store-arr"></span>
+              <div className="store-id-name">
+                {saleStoreId} / {saleStoreName}
+              </div>
+            </div>
+            <div className="main-search-wrap">
+              <div className="search-raido-wrap">
+                <div className="d-check-radio">
+                  <input type="radio" name="radio01" id="object" value="object" defaultChecked onChange={handleOnChangeRadio} />
+                  <label htmlFor="object">{getMessage('main.objectNo')}</label>
+                </div>
+                <div className="d-check-radio">
+                  <input type="radio" name="radio01" id="faq" value="faq" onChange={handleOnChangeRadio} />
+                  <label htmlFor="faq">{getMessage('main.faq')}</label>
+                </div>
+              </div>
+              <div className="search-input-box">
+                <input
+                  type="text"
+                  className="main-search"
+                  placeholder=""
+                  onKeyUp={handleByOnKeyUp}
+                  onChange={(e) => {
+                    setSearchTxt(e.target.value)
+                  }}
+                />
+                <button className="search-icon" onClick={handleOnSubmit}></button>
+              </div>
+            </div>
+            <MainContents
+              objectList={objectList}
+              businessCharger={businessCharger}
+              businessChargerMail={businessChargerMail}
+              businessChargerTel={businessChargerTel}
+            />
+          </div>
+        </>
+      )) || (
+        <>
+          <ChangePasswordPop />
+        </>
+      )}
     </>
   )
 }

src/components/common/context-menu/QContextMenu.jsx

@@ -1,5 +1,6 @@
 'use client'
-import { Children, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
+import '@/styles/contents.scss'
 
 export default function QContextMenu(props) {
   const { contextRef, canvasProps } = props
@@ -7,7 +8,7 @@ export default function QContextMenu(props) {
   //   const children = useRecoilValue(modalContent)
   const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 })
 
-  const activeObject = canvasProps.getActiveObject() //액티브된 객체를 가져옴
+  const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
 
   let contextType = ''
 
@@ -26,7 +27,8 @@ export default function QContextMenu(props) {
     const handleContextMenu = (e) => {
       e.preventDefault() //기존 contextmenu 막고
       setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
-      canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
+      console.log(111, canvasProps)
+      canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
     }
 
     const handleClick = (e) => {
@@ -41,7 +43,7 @@ export default function QContextMenu(props) {
       }
     }
 
-    canvasProps.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
+    canvasProps?.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
     document.addEventListener('click', handleClick)
     document.addEventListener('click', handleOutsideClick)
 
@@ -57,7 +59,7 @@ export default function QContextMenu(props) {
       lockMovementY: false, // Y 축 이동 잠금
     })
 
-    canvasProps.on('object:modified', function (e) {
+    canvasProps?.on('object:modified', function (e) {
       activeObject.set({
         lockMovementX: true, // X 축 이동 잠금
         lockMovementY: true, // Y 축 이동 잠금
@@ -89,19 +91,19 @@ export default function QContextMenu(props) {
   return (
     <>
       {contextMenu.visible && (
-        <div style={{ position: 'absolute', top: contextMenu.y, left: contextMenu.x, zIndex: 2000 }}>
+        <div className="context-menu-wrap" style={{ position: 'fixed', top: contextMenu.y, left: contextMenu.x, zIndex: 2000 }}>
-          <ul style={{ listStyle: 'none', margin: 0, padding: '5px' }}>
+          {/*<ul>*/}
-            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectMove()}>
+          {/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectMove()}>*/}
-              이동
+          {/*  이동*/}
-            </li>
+          {/*</li>*/}
-            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectDelete()}>
+          {/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectDelete()}>*/}
-              삭제
+          {/*  삭제*/}
-            </li>
+          {/*</li>*/}
-            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectCopy()}>
+          {/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectCopy()}>*/}
-              복사
+          {/*  복사*/}
-            </li>
+          {/*</li>*/}
+          {/*</ul>*/}
           {props.children}
-          </ul>
         </div>
       )}
     </>

src/components/floor-plan/CanvasFrame.jsx

@@ -1,13 +1,19 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import { useCanvas } from '@/hooks/useCanvas'
 import { useEvent } from '@/hooks/useEvent'
+import QContextMenu from '@/components/common/context-menu/QContextMenu'
+import { useRecoilValue } from 'recoil'
+import { currentMenuState } from '@/store/canvasAtom'
+import { MENU } from '@/common/common'
 
 export default function CanvasFrame({ plan }) {
   const canvasRef = useRef(null)
   const { canvas } = useCanvas('canvas')
+  const currentMenu = useRecoilValue(currentMenuState)
+  const [contextMenu, setContextMenu] = useState([[]])
   useEvent()
 
   const loadCanvas = () => {
@@ -25,9 +31,142 @@ export default function CanvasFrame({ plan }) {
     loadCanvas()
   }, [plan])
 
+  useEffect(() => {
+    switch (currentMenu) {
+      case MENU.PLAN_DRAWING:
+        setContextMenu([
+          [
+            {
+              name: '그리드 이동',
+            },
+            {
+              name: '그리드 복사',
+            },
+            {
+              name: '그리드 색 변경',
+            },
+            {
+              name: '삭제',
+            },
+            {
+              name: '전체 삭제',
+            },
+          ],
+        ])
+        break
+      case MENU.ROOF_COVERING.EXTERIOR_WALL_LINE:
+      case MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS:
+      case MENU.ROOF_COVERING.ROOF_SHAPE_PASSIVITY_SETTINGS:
+      case MENU.ROOF_COVERING.ROOF_SHAPE_EDITING:
+      case MENU.ROOF_COVERING.HELP_LINE_DRAWING:
+      case MENU.ROOF_COVERING.EAVES_KERAVA_EDIT:
+      case MENU.ROOF_COVERING.MOVEMENT_SHAPE_UPDOWN:
+      case MENU.ROOF_COVERING.OUTLINE_EDIT_OFFSET:
+      case MENU.ROOF_COVERING.ROOF_SHAPE_ALLOC:
+      case MENU.ROOF_COVERING.DEFAULT:
+        console.log('지붕덮개')
+        setContextMenu([
+          [
+            {
+              name: '지붕재 배치',
+            },
+            {
+              name: '지붕재 삭제',
+            },
+            {
+              name: '지붕재 전체 삭제',
+            },
+            {
+              name: '선택・이동',
+            },
+            {
+              name: '외벽선 삭제',
+            },
+          ],
+          [
+            {
+              name: '사이즈 변경',
+            },
+            {
+              name: '보조선 이동(M)',
+            },
+            {
+              name: '보조선 복사(C)',
+            },
+            {
+              name: '보조선 삭제(D)',
+            },
+            {
+              name: '보조선 수직이등분선',
+            },
+            {
+              name: '보조선 절삭',
+            },
+            {
+              name: '보조선 전체 삭제',
+            },
+          ],
+        ])
+        break
+      case MENU.BATCH_CANVAS.SLOPE_SETTING:
+      case MENU.BATCH_CANVAS.BATCH_DRAWING:
+      case MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH:
+      case MENU.BATCH_CANVAS.OBJECT_BATCH:
+      case MENU.BATCH_CANVAS.ALL_REMOVE:
+      case MENU.BATCH_CANVAS.DEFAULT:
+        console.log('배치면')
+        setContextMenu([
+          [
+            {
+              name: '사이즈 변경',
+            },
+            {
+              name: '삭제(D)',
+            },
+            {
+              name: '이동(M)',
+            },
+            {
+              name: '복사(C)',
+            },
+          ],
+          [
+            {
+              name: '지붕재 변경',
+            },
+            {
+              name: '각 변 속성 변경',
+            },
+            {
+              name: '흐름 방향 변경',
+            },
+          ],
+        ])
+        break
+      default:
+        console.log('default')
+        setContextMenu([])
+        break
+    }
+  }, [currentMenu])
+
+  useEffect(() => {
+    console.log('currentMenu', currentMenu)
+    console.log('contextMenu', contextMenu)
+  }, [contextMenu])
+
   return (
     <div className="canvas-frame flex justify-center">
       <canvas ref={canvasRef} id={'canvas'}></canvas>
+      <QContextMenu contextRef={canvasRef} canvasProps={canvas}>
+        {contextMenu.map((menus, index) => (
+          <ul key={index}>
+            {menus.map((menu) => (
+              <li>{menu.name}</li>
+            ))}
+          </ul>
+        ))}
+      </QContextMenu>
     </div>
   )
 }

src/components/floor-plan/CanvasMenu.jsx

@@ -44,7 +44,9 @@ export default function CanvasMenu(props) {
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
     setShowEavesGableEditModal,
+    setShowMovementModal,
     setShowWallLineOffsetSettingModal,
+    setShowRoofAllocationSettingModal,
   } = props
 
   const [menuNumber, setMenuNumber] = useState(null)
@@ -93,10 +95,12 @@ export default function CanvasMenu(props) {
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
     setShowEavesGableEditModal,
+    setShowMovementModal,
     setShowSlopeSettingModal,
     setShowPlacementSurfaceSettingModal,
     setShowPlaceShapeDrawingModal,
     setShowWallLineOffsetSettingModal,
+    setShowRoofAllocationSettingModal,
     setShowObjectSettingModal,
     type,
   }
@@ -125,6 +129,7 @@ export default function CanvasMenu(props) {
     setShowOutlineModal(false)
     setShowCanvasSettingModal(false)
     setShowEavesGableEditModal(false)
+    setShowMovementModal(false)
     setShowPlaceShapeModal(true)
   }
 

src/components/floor-plan/FloorPlan.jsx

@@ -23,6 +23,9 @@ import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableE
 import WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting'
 import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting'
 import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting'
+import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting'
+import MovementSetting from '@/components/floor-plan/modal/movement/MovementSetting'
+import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
 
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
@@ -37,7 +40,9 @@ export default function FloorPlan() {
   const [showPlaceShapeDrawingModal, setShowPlaceShapeDrawingModal] = useState(false)
   const [showObjectSettingModal, setShowObjectSettingModal] = useState(false)
   const [showEavesGableEditModal, setShowEavesGableEditModal] = useState(false)
+  const [showMovementModal, setShowMovementModal] = useState(false)
   const [showWallLineOffsetSettingModal, setShowWallLineOffsetSettingModal] = useState(false)
+  const [showRoofAllocationSettingModal, setShowRoofAllocationSettingModal] = useState(false)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
 
@@ -73,7 +78,9 @@ export default function FloorPlan() {
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
     setShowEavesGableEditModal,
+    setShowMovementModal,
     setShowWallLineOffsetSettingModal,
+    setShowRoofAllocationSettingModal,
   }
 
   useEffect(() => {
@@ -132,13 +139,18 @@ export default function FloorPlan() {
           {showDotLineGridModal && <DotLineGrid {...dotLineProps} />}
           {showColorPickerModal && <GridColorSetting {...gridColorProps} />}
           {showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
+
           {showPlaceShapeModal && <PlacementShapeSetting setShowPlaceShapeModal={setShowPlaceShapeModal} />}
           {showRoofShapeSettingModal && <RoofShapeSetting setShowRoofShapeSettingModal={setShowRoofShapeSettingModal} />}
+          {showRoofShapePassivitySettingModal && (
+            <RoofShapePassivitySetting setShowRoofShapePassivitySettingModal={setShowRoofShapePassivitySettingModal} />
+          )}
           {showAuxiliaryModal && <AuxiliaryDrawing setShowAuxiliaryModal={setShowAuxiliaryModal} />}
           {showSlopeSettingModal && <Slope setShowSlopeSettingModal={setShowSlopeSettingModal} />}
           {showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
           {showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />}
-          {/*<Movement />*/}
+          {showMovementModal && <MovementSetting setShowMovementModal={setShowMovementModal} />}
+          {showRoofAllocationSettingModal && <RoofAllocationSetting setShowRoofAllocationSettingModal={setShowRoofAllocationSettingModal} />}
           {showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
           {showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
           {showPlacementSurfaceSettingModal && <PlacementSurfaceSetting setShowPlacementSurfaceSettingModal={setShowPlacementSurfaceSettingModal} />}

src/components/floor-plan/MenuDepth01.jsx

@@ -15,10 +15,12 @@ export default function MenuDepth01(props) {
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
     setShowEavesGableEditModal,
+    setShowMovementModal,
     setShowSlopeSettingModal,
     setShowPlacementSurfaceSettingModal,
     setShowPlaceShapeDrawingModal,
     setShowWallLineOffsetSettingModal,
+    setShowRoofAllocationSettingModal,
     setShowObjectSettingModal,
   } = props
   const { getMessage } = useMessage()
@@ -28,19 +30,29 @@ export default function MenuDepth01(props) {
     setActiveMenu(menu)
     setShowOutlineModal(menu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
     setCurrentMenu(menu)
-
-    if (type === 'outline') {
     setShowPlaceShapeModal(false)
+    if (type === 'outline') {
       setShowOutlineModal(id === 0)
       setShowRoofShapeSettingModal(id === 1)
       setShowRoofShapePassivitySettingModal(id === 2)
       setShowAuxiliaryModal(id === 3)
       setShowEavesGableEditModal(id === 4)
+      setShowMovementModal(id === 5)
       setShowWallLineOffsetSettingModal(id === 6)
+      setShowRoofAllocationSettingModal(id === 7)
       setShowPlaceShapeDrawingModal(false)
     }
 
     if (type === 'surface') {
+      setShowOutlineModal(false)
+      setShowRoofShapeSettingModal(false)
+      setShowRoofShapePassivitySettingModal(false)
+      setShowAuxiliaryModal(false)
+      setShowEavesGableEditModal(false)
+      setShowMovementModal(false)
+      setShowWallLineOffsetSettingModal(false)
+      setShowRoofAllocationSettingModal(false)
+
       setShowSlopeSettingModal(id === 0)
       setShowPlaceShapeDrawingModal(id === 1)
       setShowPlacementSurfaceSettingModal(id === 2)

src/components/floor-plan/modal/movement/MovementSetting.jsx

@@ -1,21 +1,25 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useState } from 'react'
+import FlowLine from '@/components/floor-plan/modal/movement/type/FlowLine'
+import Updown from '@/components/floor-plan/modal/movement/type/Updown'
 
-export default function Movement({}) {
+export default function MovementSetting({ setShowMovementModal }) {
   const { getMessage } = useMessage()
   const [buttonAct, setButtonAct] = useState(1)
   const buttonMenu = [
-    { id: 1, name: '銅線の移動軒' },
+    { id: 1, name: getMessage('modal.movement.flow.line.move') },
-    { id: 2, name: '型上げ・降り' },
+    { id: 2, name: getMessage('modal.movement.flow.line.updown') },
   ]
 
   return (
     <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
       <div className={`modal-pop-wrap r`}>
         <div className="modal-head">
-          <h1 className="title">軒・ケラバ変更</h1>
+          <h1 className="title">{getMessage('plan.menu.roof.cover.movement.shape.updown')}</h1>
-          <button className="modal-close">닫기</button>
+          <button className="modal-close" onClick={() => setShowMovementModal(false)}>
+            닫기
+          </button>
         </div>
         <div className="modal-body">
           <div className="modal-btn-wrap">
@@ -26,12 +30,12 @@ export default function Movement({}) {
             ))}
           </div>
           <div className="properties-setting-wrap outer">
-            <div className="setting-tit">設定</div>
+            <div className="setting-tit">{getMessage('setting')}</div>
-            {/*{buttonAct === 1 && <MovingTab01 />}*/}
+            {buttonAct === 1 && <FlowLine />}
-            {/*{buttonAct === 2 && <MovingTab02 />}*/}
+            {buttonAct === 2 && <Updown />}
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">保存</button>
+            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
           </div>
         </div>
       </div>

src/components/floor-plan/modal/movement/type/FlowLine.jsx

@@ -0,0 +1,46 @@
+import { useMessage } from '@/hooks/useMessage'
+
+export default function FlowLine({}) {
+  const { getMessage } = useMessage()
+
+  return (
+    <>
+      <div className="outline-wrap">
+        <div className="guide">{getMessage('modal.movement.flow.line.info')}</div>
+        <div className="eaves-keraba-table">
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="d-check-radio pop">
+                <input type="radio" name="radio01" id="ra01" />
+                <label htmlFor="ra01">{getMessage('modal.movement.flow.line.bottom.left')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="outline-form">
+                <div className="input-grid mr5" style={{ width: '100px' }}>
+                  <input type="text" className="input-origin block" defaultValue={100} />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="d-check-radio pop">
+                <input type="radio" name="radio01" id="ra02" />
+                <label htmlFor="ra02">{getMessage('modal.movement.flow.line.top.right')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="outline-form">
+                <div className="input-grid mr5" style={{ width: '100px' }}>
+                  <input type="text" className="input-origin block" defaultValue={100} />
+                </div>
+                <span className="thin">mm</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/floor-plan/modal/movement/type/Updown.jsx

@@ -0,0 +1,46 @@
+import { useMessage } from '@/hooks/useMessage'
+
+export default function Updown({}) {
+  const { getMessage } = useMessage()
+
+  return (
+    <>
+      <div className="outline-wrap">
+        <div className="guide">{getMessage('modal.movement.flow.line.updown.info')}</div>
+        <div className="eaves-keraba-table">
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="d-check-radio pop">
+                <input type="radio" name="radio01" id="ra01" />
+                <label htmlFor="ra01">{getMessage('modal.movement.flow.line.updown.up')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="outline-form">
+                <div className="input-grid mr5" style={{ width: '100px' }}>
+                  <input type="text" className="input-origin block" defaultValue={100} />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="d-check-radio pop">
+                <input type="radio" name="radio01" id="ra02" />
+                <label htmlFor="ra02">{getMessage('modal.movement.flow.line.updown.down')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="outline-form">
+                <div className="input-grid mr5" style={{ width: '100px' }}>
+                  <input type="text" className="input-origin block" defaultValue={100} />
+                </div>
+                <span className="thin">mm</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx

@@ -0,0 +1,222 @@
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useState } from 'react'
+import QSelectBox from '@/components/common/select/QSelectBox'
+
+export default function RoofAllocationSetting({ setShowRoofAllocationSettingModal }) {
+  const { getMessage } = useMessage()
+  const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(null)
+  const [values, setValues] = useState([
+    {
+      id: '1',
+      type: 'A',
+      roofMaterial: { name: '기와1' },
+      width: { name: '200' },
+      length: { name: '250' },
+      rafter: { name: '300' },
+      alignType: 'stairs',
+    },
+  ])
+
+  const roofMaterials = [
+    {
+      id: 'A',
+      name: '기와1',
+      type: 'A',
+      width: '200',
+      length: '200',
+      alignType: 'parallel',
+    },
+    {
+      id: 'B',
+      name: '기와2',
+      type: 'B',
+      rafter: '200',
+      alignType: 'parallel',
+    },
+    {
+      id: 'C',
+      name: '기와3',
+      type: 'C',
+      hajebichi: '200',
+      alignType: 'stairs',
+    },
+    {
+      id: 'D',
+      name: '기와4',
+      type: 'D',
+      length: '200',
+      alignType: 'stairs',
+    },
+  ]
+  const widths = [
+    { name: '200', id: 'q' },
+    { name: '250', id: 'q1' },
+    { name: '300', id: 'q2' },
+  ]
+  const lengths = [
+    { name: '200', id: 'w' },
+    { name: '250', id: 'w1' },
+    { name: '300', id: 'w2' },
+  ]
+  const rafters = [
+    { name: '200', id: 'e' },
+    { name: '250', id: 'e1' },
+    { name: '300', id: 'e2' },
+  ]
+
+  const onAddRoofMaterial = () => {
+    setValues([...values, selectedRoofMaterial])
+  }
+
+  const onDeleteRoofMaterial = (id) => {
+    setValues(values.filter((value) => value.id !== id))
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+      <div className={`modal-pop-wrap ml`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
+          <button className="modal-close" onClick={() => setShowRoofAllocationSettingModal(false)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
+          <div className="allocation-select-wrap">
+            <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
+            <div className="grid-select">
+              <QSelectBox options={roofMaterials} value={selectedRoofMaterial} onChange={(e) => setSelectedRoofMaterial(e)} />
+            </div>
+            <button
+              className="allocation-edit"
+              onClick={() => {
+                onAddRoofMaterial()
+              }}
+            >
+              <i className="edit-ico"></i>
+              {getMessage('modal.common.add')}
+            </button>
+          </div>
+          <div className="grid-option-wrap">
+            {values.map((value, index) => (
+              <div className="grid-option-box" key={index}>
+                <div className="d-check-radio pop no-text">
+                  <input type="radio" name="radio01" id="ra01" />
+                  <label htmlFor="ra01"></label>
+                </div>
+                <div className="grid-option-block-form">
+                  <div className="block-box">
+                    <div className="flex-ment">
+                      <div className="grid-select" style={{ width: '248px' }}>
+                        <QSelectBox options={roofMaterials} value={value} />
+                      </div>
+                      {index === 0 && <span className="dec">基本屋根材</span>}
+                      {index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(value.id)}></button>}
+                    </div>
+                  </div>
+                  <div className="block-box">
+                    {value.type === 'A' ? (
+                      <>
+                        <div className="flex-ment">
+                          <span>W</span>
+                          <div className="select-wrap" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div>
+                        </div>
+                        <div className="flex-ment">
+                          <span>L</span>
+                          <div className="select-wrap" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>235</option>
+                            </select>
+                          </div>
+                        </div>
+                        <div className="flex-ment">
+                          <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                          <div className="select-wrap" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>455</option>
+                            </select>
+                          </div>
+                        </div>
+                      </>
+                    ) : value.type === 'B' ? (
+                      <>
+                        <div className="flex-ment">
+                          <span>{getMessage('hajebichi')}</span>
+                          <div className="grid-select no-flx" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div>
+                        </div>
+                        <div className="flex-ment">
+                          <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                          <div className="grid-select no-flx right" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div>
+                        </div>
+                      </>
+                    ) : value.type === 'C' ? (
+                      <>
+                        <div className="flex-ment">
+                          <span>{getMessage('hajebichi')}</span>
+                          <div className="grid-select no-flx" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div>
+                        </div>
+                      </>
+                    ) : value.type === 'D' ? (
+                      <>
+                        <div className="flex-ment">
+                          <span>L</span>
+                          <div className="grid-select no-flx" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div>
+                        </div>
+                        <div className="flex-ment">
+                          <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                          <div className="grid-select no-flx right" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div>
+                        </div>
+                      </>
+                    ) : (
+                      ''
+                    )}
+                  </div>
+                  <div className="block-box">
+                    <div className="icon-btn-wrap">
+                      <button className={value.alignType === 'parallel' ? 'act' : ''}>
+                        {getMessage('modal.roof.alloc.select.parallel')}
+                        <i className="allocation01"></i>
+                      </button>
+                      <button className={value.alignType === 'stairs' ? 'act' : ''}>
+                        {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">{getMessage('modal.roof.alloc.apply')}</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx

@@ -25,7 +25,7 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet
         <div className="modal-body">
           <div className="modal-btn-wrap">
             {buttons.map((button) => (
-              <button className={`btn-frame modal ${buttonAct === button.id ? 'act' : ''}`} onClick={() => setButtonAct(button.id)}>
+              <button id={button.id} className={`btn-frame modal ${buttonAct === button.id ? 'act' : ''}`} onClick={() => setButtonAct(button.id)}>
                 {button.name}
               </button>
             ))}

src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx

@@ -22,24 +22,6 @@ export default function Eaves() {
         </div>
         <span className="thin">mm</span>
       </div>
-      <div className="outline-form mb10">
-        <span className="mr10" style={{ width: '63px' }}>
-          {getMessage('gable.offset')}
-        </span>
-        <div className="input-grid mr5">
-          <input type="text" className="input-origin block" defaultValue={100} />
-        </div>
-        <span className="thin">mm</span>
-      </div>
-      <div className="outline-form mb10">
-        <span className="mr10" style={{ width: '63px' }}>
-          {getMessage('shed.width')}
-        </span>
-        <div className="input-grid mr5">
-          <input type="text" className="input-origin block" defaultValue={100} />
-        </div>
-        <span className="thin">mm</span>
-      </div>
     </>
   )
 }

src/components/main/ChangePasswordPop.jsx

@@ -0,0 +1,168 @@
+import React from 'react'
+import { useMessage } from '@/hooks/useMessage'
+import { useForm } from 'react-hook-form'
+import { sessionStore } from '@/store/commonAtom'
+import { useRecoilValue, useRecoilState } from 'recoil'
+import { useAxios } from '@/hooks/useAxios'
+import { globalLocaleStore } from '@/store/localeAtom'
+
+export default function ChangePasswordPop() {
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+
+  const { patch } = useAxios(globalLocaleState)
+  const { getMessage } = useMessage()
+  const [sessionState, setSessionState] = useRecoilState(sessionStore)
+
+  const formInitValue = {
+    password1: '',
+    password2: '',
+  }
+  const { register, setValue, getValues, handleSubmit, resetField, control, watch } = useForm({
+    defaultValues: formInitValue,
+  })
+
+  const form = { register, setValue, getValues, handleSubmit, resetField, control, watch }
+
+  //자리수체크
+  const checkLength = (pwd1) => {
+    let str = new String(pwd1)
+    let _byte = 0
+    if (str.length !== 0) {
+      for (let i = 0; i < str.length; i++) {
+        let str2 = str.charAt(i)
+        if (encodeURIComponent(str2).length > 4) {
+          _byte += 2
+        } else {
+          _byte++
+        }
+      }
+    }
+    return _byte
+  }
+
+  //공백제거
+  const checkValue = (e) => {
+    let spaceChk = /\s/
+    if (spaceChk.exec(e.target.value)) {
+      e.target.value = e.target.value.replace(/\s|/gi, '')
+      return false
+    }
+  }
+
+  //비밀번호 변경
+  const updateProcess = async () => {
+    const _password1 = form.watch('password1')
+    const _password2 = form.watch('password2')
+
+    if (_password1 !== _password2) {
+      alert(getMessage('main.popup.login.validate1'))
+      return false
+    }
+
+    //패스워드 길이수 체크
+    if (checkLength(_password1) > 10) {
+      alert(getMessage('main.popup.login.validate2'))
+    }
+
+    const param = {
+      loginId: sessionState.userId,
+      chgType: 'I',
+      chgPwd: _password1,
+    }
+    await patch({ url: '/api/login/v1.0/user/change-password', data: param }).then((res) => {
+      if (res) {
+        if (res.result.resultCode === 'S') {
+          alert(getMessage('main.popup.login.success'))
+          setSessionState({ ...sessionState, pwdInitYn: 'Y' })
+        } else {
+          alert(res.result.resultMsg)
+        }
+      }
+    })
+  }
+
+  return (
+    <div className="modal-popup">
+      <div className="modal-dialog">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h1 className="title">{getMessage('main.popup.login.popupTitle')}</h1>
+          </div>
+          <div className="modal-body">
+            <div className="modal-body-inner">
+              <div className="change-password-box">
+                <div className="form-table">
+                  <div className="table-item">
+                    <div className="table-item-th">
+                      <div className="change-password-tit">
+                        <div className="tit-b">
+                          {getMessage('main.popup.login.newPassword1')}
+                          <span className="important">*</span>
+                        </div>
+                        <div className="tit-s">{getMessage('main.popup.login.placeholder')}</div>
+                      </div>
+                    </div>
+                    <div className="table-item-td">
+                      <div className="change-password-input">
+                        <input
+                          type="text"
+                          className="change-password"
+                          {...form.register('password1')}
+                          autoComplete="off"
+                          onChange={checkValue}
+                          onKeyUp={checkValue}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="table-item">
+                    <div className="table-item-th">
+                      <div className="change-password-tit">
+                        <div className="tit-b">
+                          {getMessage('main.popup.login.newPassword2')}
+                          <span className="important">*</span>
+                        </div>
+                        <div className="tit-s">{getMessage('main.popup.login.placeholder')}</div>
+                      </div>
+                    </div>
+                    <div className="table-item-td">
+                      <div className="change-password-input">
+                        <input
+                          type="text"
+                          className="change-password"
+                          {...form.register('password2')}
+                          autoComplete="off"
+                          onChange={checkValue}
+                          onKeyUp={checkValue}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="change-password-guide">
+                <span>{getMessage('main.popup.login.guide1')}</span>
+                <span>{getMessage('main.popup.login.guide2')}</span>
+              </div>
+            </div>
+            <div className="footer-btn-wrap">
+              <button type="sumbit" className="btn-origin navy mr5" onClick={updateProcess}>
+                {getMessage('main.popup.login.btn1')}
+              </button>
+              <button
+                type="button"
+                className="btn-origin grey"
+                onClick={() => {
+                  router.push('/login')
+                  setOpen(false)
+                }}
+              >
+                {getMessage('main.popup.login.btn2')}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/main/MainContents.jsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useState } from 'react'
+import ProductItem from './ProductItem'
+import { useMessage } from '@/hooks/useMessage'
+import Image from 'next/image'
+import dayjs from 'dayjs'
+import { useAxios } from '@/hooks/useAxios'
+import { useRecoilValue } from 'recoil'
+import { useRouter } from 'next/navigation'
+import { globalLocaleStore } from '@/store/localeAtom'
+import { queryStringFormatter } from '@/util/common-utils'
+export default function MainContents({ objectList, businessCharger, businessChargerMail, businessChargerTel }) {
+  const { getMessage } = useMessage()
+  const router = useRouter()
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+  const { get } = useAxios(globalLocaleState)
+
+  //공지사항
+  const [recentNoticeList, setRecentNoticeList] = useState([])
+
+  //FAQ
+  const [recentFaqList, setRecentFaqList] = useState([])
+
+  useEffect(() => {
+    fetchNoticeList()
+    fetchFaqList()
+  }, [])
+
+  //공지사항 호출
+  const fetchNoticeList = async () => {
+    try {
+      const param = {
+        schNoticeTpCd: 'QC',
+        schNoticeClsCd: 'NOTICE',
+        startRow: 1,
+        endRow: 1,
+      }
+      // const noticeApiUrl = `api/board/list?schNoticeTpCd=QC&schNoticeClsCd=NOTICE&schTitle=&startRow=1&endRow=1`
+      const noticeApiUrl = `api/board/list?${queryStringFormatter(param)}`
+      const res = await get({ url: noticeApiUrl })
+      //console.log('공지res::', res)
+      if (res) {
+        if (res.data.length > 0) {
+          setRecentNoticeList(res.data)
+        }
+      }
+    } catch (error) {
+      console.error('NOTICE fetching error:', error)
+    }
+  }
+
+  //FAQ 호출
+  const fetchFaqList = async () => {
+    try {
+      const param = {
+        schNoticeTpCd: 'QC',
+        schNoticeClsCd: 'FAQ',
+        startRow: 1,
+        endRow: 3,
+      }
+      // const faqApiUrl = `api/board/list?schNoticeTpCd=QC&schNoticeClsCd=FAQ&schTitle=&startRow=1&endRow=1`
+      const faqApiUrl = `api/board/list?${queryStringFormatter(param)}`
+      const res = await get({ url: faqApiUrl })
+      //console.log('FAQres::', res)
+      if (res) {
+        if (res.data.length > 0) {
+          setRecentFaqList(res.data)
+        }
+      }
+    } catch (error) {
+      console.error('FAQ fetching error:', error)
+    }
+  }
+
+  return (
+    <div className="main-product-list-wrap">
+      <div className="main-product-list">
+        <ProductItem num={1} name={getMessage('main.content.objectList')}>
+          <ul className="recently-list">
+            {objectList?.length > 0 ? (
+              <>
+                {objectList.map((row) => {
+                  return (
+                    <li
+                      key={row.objectNo}
+                      className="recently-item"
+                      onClick={() => {
+                        if (row.objectNo.substring(0, 1) === 'R') {
+                          router.push(`/management/stuff/detail?objectNo=${row.objectNo.toString()}`)
+                        } else {
+                          router.push(`/management/stuff/tempdetail?objectNo=${row.objectNo.toString()}`)
+                        }
+                      }}
+                    >
+                      <div className="item-inner">
+                        <span className="time">{dayjs(row.lastEditDatetime).format('YYYY.MM.DD HH:mm:ss')}</span>
+                        <span>{row.objectNo}</span>
+                        <span>{row.objectName}</span>
+                        <span>{row.saleStoreName}</span>
+                      </div>
+                    </li>
+                  )
+                })}
+              </>
+            ) : (
+              <>
+                <li>
+                  <div className="item-inner">최근 갱신 물건이 없습니다</div>
+                </li>
+              </>
+            )}
+          </ul>
+        </ProductItem>
+        <ProductItem num={2} name={getMessage('main.content.notice')}>
+          <div className="notice-box">
+            {recentNoticeList.length > 0 ? (
+              <>
+                <div className="notice-day pre">{dayjs(recentNoticeList[0]?.regDt).format('YYYY.MM.DD')}</div>
+                <div className="notice-title">{recentNoticeList[0]?.title}</div>
+                <div className="notice-contents">{recentNoticeList[0]?.contents}</div>
+              </>
+            ) : null}
+          </div>
+        </ProductItem>
+      </div>
+      <div className="main-product-list">
+        <ProductItem num={3} name={getMessage('main.faq')}>
+          <ul className="faq-list">
+            {recentFaqList.length > 0 ? (
+              <>
+                {recentFaqList.map((row) => {
+                  return (
+                    <li key={row.rowNumber} className="faq-item">
+                      <div className="faq-item-inner">
+                        <div className="faq-num pre">FAQ {row.noticeNo}</div>
+                        <div className="faq-title pre">{row.title}</div>
+                        <div className="faq-day pre">{dayjs(row.regDt).format('YYYY.MM.DD')}</div>
+                      </div>
+                    </li>
+                  )
+                })}
+              </>
+            ) : null}
+          </ul>
+        </ProductItem>
+        <ProductItem num={4} name={'Data Download'}>
+          <div className="data-download-wrap">
+            <button className="data-down">
+              <span>{getMessage('main.content.download1')}</span>
+            </button>
+            <button className="data-down">
+              <span>{getMessage('main.content.download2')}</span>
+            </button>
+          </div>
+        </ProductItem>
+        <ProductItem num={5} name={'Sales Contact info'}>
+          <ul className="contact-info-list">
+            <li className="info-item">
+              <div className="icon-box">
+                <Image src="/static/images/main/user.svg" alt="react" width={20} height={20} />
+              </div>
+              <div className="infor-data">{businessCharger}</div>
+            </li>
+            <li className="info-item">
+              <div className="icon-box">
+                <Image src="/static/images/main/mail.svg" alt="react" width={20} height={20} />
+              </div>
+              <div className="infor-data pre">{businessChargerMail}</div>
+            </li>
+          </ul>
+        </ProductItem>
+      </div>
+    </div>
+  )
+}

src/components/main/ProductItem.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { useRouter } from 'next/navigation'
+export default function ProductItem({ num, name, children }) {
+  const router = useRouter()
+
+  // 더보기 페이지 이동
+  const pageMove = (num) => {
+    if (num === 1) {
+      router.push('/management/stuff')
+    } else if (num === 2) {
+      router.push('/community/notice')
+    } else {
+      router.push('/community/faq')
+    }
+  }
+  return (
+    <div className={`product-item item0${num}`}>
+      <div className="product-item-title-wrap">
+        <h2 className="product-item-title">
+          <span className={`item-logo ico0${num}`}></span>
+          {name}
+        </h2>
+        {num !== 4 && num !== 5 && (
+          <button
+            className="more-btn"
+            onClick={() => {
+              pageMove(num)
+            }}
+          ></button>
+        )}
+      </div>
+      <div className="product-item-content">{children}</div>
+    </div>
+  )
+}

src/components/management/Stuff.jsx

@@ -278,6 +278,54 @@ export default function Stuff() {
           // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(params)}`
           // const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(params)}`
           const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}`
+
+          await get({
+            url: apiUrl,
+          }).then((res) => {
+            if (!isEmptyArray(res)) {
+              setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
+              setGridCount(res[0].totCnt)
+            }
+          })
+        }
+        fetchData()
+      } else {
+        const params = {
+          schObjectNo: '',
+          schAddress: '',
+          schObjectName: '',
+          schSaleStoreName: '',
+          schReceiveUser: '',
+          schDispCompanyName: '',
+          schDateType: 'U',
+          schFromDt: dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'),
+          schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
+          startRow: (curPage - 1) * defaultSize + 1,
+          endRow: curPage * defaultSize,
+          schSelSaleStoreId: '',
+          schSortType: 'R',
+        }
+
+        async function fetchData() {
+          //api에 넘길값 startRow, endRow
+          // let startRow
+          // let endRow
+          // startRow = (curPage - 1) * size + 1
+          // endRow = curPage * size
+          // console.log('startrow::', startRow)
+          // console.log('endRow::', endRow)
+
+          // let curPage
+          // let totalpage
+          // let totalCount
+          // let size
+          // let pageCount
+
+          // console.log('화면진입 세션정보::::::::::', sessionState)
+          // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(params)}`
+          // const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(params)}`
+          const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}`
+
           await get({
             url: apiUrl,
           }).then((res) => {
@@ -294,10 +342,10 @@ export default function Stuff() {
 
   useEffect(() => {
     if (stuffSearchParams?.code === 'E') {
+      //console.log('조회누름::::::::', stuffSearchParams)
       stuffSearchParams.startRow = (curPage - 1) * defaultSize + 1
       stuffSearchParams.endRow = curPage * defaultSize
       stuffSearchParams.schSortType = defaultSortType
-      // console.log('조회누름::::::::', stuffSearchParams)
       async function fetchData() {
         // console.log('조회누름 세션정보:::::::::::::', sessionState)
         // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}`
@@ -378,6 +426,7 @@ export default function Stuff() {
       setAppMessageState(JA)
     }
   }, [globalLocaleState])
+
   return (
     <>
       {/* 퍼블시작 */}

src/components/management/StuffSearchCondition.jsx

@@ -182,7 +182,7 @@ export default function StuffSearchCondition() {
                       type="text"
                       className="input-light"
                       placeholder="물건번호 입력"
-                      value={stuffSearch?.code === 'E' ? stuffSearch.schObjectNo : objectNo}
+                      value={stuffSearch?.code === 'E' || stuffSearch?.code === 'M' ? stuffSearch.schObjectNo : objectNo}
                       onChange={(e) => {
                         setObjectNo(e.target.value)
                         setStuffSearch({ ...stuffSearch, code: 'S', schObjectNo: e.target.value })
@@ -255,9 +255,6 @@ export default function StuffSearchCondition() {
                 </td>
                 <th>판매대리점 선택</th>
                 <td>
-                  {/* <div className="select-wrap">
-                    <select className="select-light" name="" id=""></select>
-                  </div> */}
                   {schSelSaleStoreList?.length > 0 && (
                     <Select
                       options={schSelSaleStoreList}

src/locales/ja.json

@@ -40,9 +40,20 @@
   "plan.menu.roof.cover.outline.drawing": "外壁線を描",
   "plan.menu.roof.cover.roof.shape.setting": "屋根形状設定",
   "plan.menu.roof.cover.roof.shape.passivity.setting": "屋根形状設定",
-  "plan.menu.roof.cover.roof.shape.edit": "지붕형상 편집",
+  "plan.menu.roof.cover.eaves.kerava.edit": "처마·케라바 변경",
+  "plan.menu.roof.cover.movement.shape.updown": "동선이동·형올림내림(JA)",
+  "modal.movement.flow.line.move": "銅線の移動軒",
+  "modal.movement.flow.line.updown": "型上げ・降り",
+  "modal.movement.flow.line.updown.info": "を選択して幅を指定してください桁の異なる辺。",
+  "modal.movement.flow.line.updown.up": "桁を上げる",
+  "modal.movement.flow.line.updown.down": "桁数を下げる",
+  "modal.movement.flow.line.info": "家屋などの壁に面する屋根を作成します。",
+  "modal.movement.flow.line.bottom.left": "高さ変更：下、左",
+  "modal.movement.flow.line.top.right": "高さ変更：上、右",
+  "plan.menu.roof.cover.outline.edit.offset": "외벽선 편집 및 오프셋(JA)",
+  "plan.menu.roof.cover.roof.surface.alloc": "지붕면 할당(JA)",
+  "plan.menu.roof.cover.roof.shape.edit": "지붕형상 편집(JA)",
   "plan.menu.roof.cover.auxiliary.line.drawing": "補助線を描",
-  "plan.menu.roof.cover.roof.surface.alloc": "지붕면 할당",
   "modal.cover.outline.drawing": "外壁線を描",
   "modal.cover.outline": "外壁線",
   "modal.cover.outline.right.angle": "直角",
@@ -73,6 +84,11 @@
   "plan.menu.module.circuit.setting.plan.orientation": "図面方位の適用",
   "plan.menu.estimate": "見積",
   "plan.menu.estimate.roof.alloc": "屋根面の割り当て",
+  "modal.roof.alloc.info": "※配置面初期設定で保存した[基本屋根材]を変更したり、屋根材を追加して割り当てることができます。",
+  "modal.roof.alloc.select.roof.material": "屋根材の選択",
+  "modal.roof.alloc.select.parallel": "並列式",
+  "modal.roof.alloc.select.stairs": "カスケード",
+  "modal.roof.alloc.apply": "選択した屋根材として割り当て",
   "plan.menu.estimate.save": "保存",
   "plan.menu.estimate.reset": "初期化",
   "plan.menu.estimate.copy": "コピー",
@@ -109,6 +125,7 @@
   "modal.grid.copy.length": "長さ",
   "modal.grid.copy.save": "保存",
   "modal.common.save": "保存",
+  "modal.common.add": "追加",
   "modal.canvas.setting.font.plan.edit": "フォントとサイズの変更",
   "modal.canvas.setting.font.plan.edit.word": "文字フォントの変更",
   "modal.canvas.setting.font.plan.edit.flow": "フロー方向フォントの変更",
@@ -362,6 +379,17 @@
   "main.content.notice": "お知らせ",
   "main.content.download1": "操作マニュアル",
   "main.content.download2": "屋根の説明書",
+  "main.popup.login.popupTitle": "パスワード変更",
+  "main.popup.login.newPassword1": "新しいパスワードを入力",
+  "main.popup.login.newPassword2": "新規パスワード再入力",
+  "main.popup.login.placeholder": "半角10文字以内 ",
+  "main.popup.login.guide1": "初期化されたパスワードでログインした場合、パスワードを変更しなければサイト利用が可能です。",
+  "main.popup.login.guide2": "パスワードを変更しない場合は、ログイン画面に進みます。",
+  "main.popup.login.btn1": "変更",
+  "main.popup.login.btn2": "変更しない",
+  "main.popup.login.validate1": "入力したパスワードが異なります。",
+  "main.popup.login.validate2": "半角10文字以内で入力してください。",
+  "main.popup.login.success": "パスワードが変更されました。",
   "surface.shape.validate.size": "寸法を入力してください.",
   "surface.shape.validate.size.1to2": "①길이는 ②보다 큰 값을 넣어주세요.",
   "surface.shape.validate.size.1to3": "①길이는 ③보다 큰 값을 넣어주세요.",

src/locales/ko.json

@@ -42,6 +42,14 @@
   "plan.menu.roof.cover.roof.shape.passivity.setting": "지붕형상 수동 설정",
   "plan.menu.roof.cover.eaves.kerava.edit": "처마·케라바 변경",
   "plan.menu.roof.cover.movement.shape.updown": "동선이동·형올림내림",
+  "modal.movement.flow.line.move": "동선 이동",
+  "modal.movement.flow.line.updown": "형 올림·내림",
+  "modal.movement.flow.line.updown.info": "자릿수가 다른 변을 선택하고 폭을 지정하십시오.",
+  "modal.movement.flow.line.updown.up": "자릿수를 올리다",
+  "modal.movement.flow.line.updown.down": "자릿수를 낮추다",
+  "modal.movement.flow.line.info": "동선을 선택하고 이동 폭을 지정하십시오",
+  "modal.movement.flow.line.bottom.left": "높이 변경: 아래, 왼쪽",
+  "modal.movement.flow.line.top.right": "높이 변경: 위, 오른쪽",
   "plan.menu.roof.cover.outline.edit.offset": "외벽선 편집 및 오프셋",
   "plan.menu.roof.cover.roof.surface.alloc": "지붕면 할당",
   "plan.menu.roof.cover.roof.shape.edit": "지붕형상 편집",
@@ -79,6 +87,11 @@
   "plan.menu.module.circuit.setting.plan.orientation": "도면 방위 적용",
   "plan.menu.estimate": "견적서",
   "plan.menu.estimate.roof.alloc": "지붕면 할당",
+  "modal.roof.alloc.info": "※ 배치면 초기설정에서 저장한 [기본 지붕재]를 변경하거나,  지붕재를 추가하여 할당할 수 있습니다.",
+  "modal.roof.alloc.select.roof.material": "지붕재 선택",
+  "modal.roof.alloc.select.parallel": "병렬식",
+  "modal.roof.alloc.select.stairs": "계단식",
+  "modal.roof.alloc.apply": "선택한 지붕재로 할당",
   "plan.menu.estimate.save": "저장",
   "plan.menu.estimate.reset": "초기화",
   "plan.menu.estimate.copy": "복사",
@@ -115,6 +128,7 @@
   "modal.grid.copy.length": "길이",
   "modal.grid.copy.save": "저장",
   "modal.common.save": "저장",
+  "modal.common.add": "추가",
   "modal.canvas.setting.font.plan.edit": "글꼴 및 크기 변경",
   "modal.canvas.setting.font.plan.edit.word": "문자 글꼴 변경",
   "modal.canvas.setting.font.plan.edit.flow": "흐름 방향 글꼴 변경",
@@ -368,6 +382,17 @@
   "main.content.notice": "공지사항",
   "main.content.download1": "조작메뉴얼",
   "main.content.download2": "지붕설명서",
+  "main.popup.login.popupTitle": "비밀번호변경",
+  "main.popup.login.newPassword1": "새 비밀번호 입력",
+  "main.popup.login.newPassword2": "새 비밀번호 재입력",
+  "main.popup.login.placeholder": "반각 10자 이내",
+  "main.popup.login.guide1": "초기화된 비밀번호로 로그인한 경우 비밀번호를 변경하지 않으면 사이트 이용이 가능합니다.",
+  "main.popup.login.guide2": "비밀번호를 변경하지 않으려면 로그인 화면으로 이동합니다.",
+  "main.popup.login.btn1": "변경",
+  "main.popup.login.btn2": "변경안함",
+  "main.popup.login.validate1": "입력한 패스워드가 다릅니다.",
+  "main.popup.login.validate2": "반각 10자 이내로 입력해주세요.",
+  "main.popup.login.success": "비밀번호가 변경되었습니다.",
   "surface.shape.validate.size": "사이즈를 입력해 주세요.",
   "surface.shape.validate.size.1to2": "①길이는 ②보다 큰 값을 넣어주세요.",
   "surface.shape.validate.size.1to3": "①길이는 ③보다 큰 값을 넣어주세요.",

src/styles/_canvasside.scss

@@ -0,0 +1,106 @@
+// 패널 배치 집계
+.penal-wrap {
+  position: fixed;
+  top: 200px;
+  left: 50px;
+  z-index: 999999;
+  width: 237px;
+  height: 40px;
+  line-height: 40px;
+  background-color: #fff;
+  border: 1px solid #dfdfdf;
+  padding: 0 34px 0 10px;
+  border-radius: 2px;
+  box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    transform: translateY(-50%);
+    width: 10px;
+    height: 6px;
+    background: url(../../public/static/images/canvas/penal_arr.svg) no-repeat center;
+    background-size: cover;
+  }
+  h2 {
+    font-size: 12px;
+    font-weight: 500;
+    color: #3d3d3d;
+  }
+  .penal-table-wrap {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: -1px;
+    min-width: calc(100% + 2px);
+    background-color: #3d3d3d;
+    border: 1px solid #3d3d3d;
+    padding: 20px;
+    .penal-table {
+      table-layout: fixed;
+      border-collapse: collapse;
+      thead {
+        th {
+          text-align: center;
+          background-color: rgba(255, 255, 255, 0.05);
+          font-size: 12px;
+          font-weight: 500;
+          color: #fff;
+          border: 1px solid #505050;
+        }
+      }
+      tbody {
+        td {
+          font-size: 12px;
+          color: #fff;
+          font-weight: 400;
+          text-align: center;
+          padding: 0 10px;
+          border: 1px solid #505050;
+        }
+      }
+    }
+  }
+  &.act {
+    border: 1px solid #3d3d3d;
+    background-color: #3d3d3d;
+    h2 {
+      color: #fff;
+    }
+    &::before {
+      background: url(../../public/static/images/canvas/penal_arr_white.svg) no-repeat center;
+    }
+    .penal-table-wrap {
+      display: block;
+    }
+  }
+}
+
+// context menu
+.context-menu-wrap {
+  min-width: 238px;
+  border-radius: 4px;
+  border: 1px solid #e9e9e9;
+  background: #fff;
+  box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05);
+  ul {
+    padding: 17px 0;
+    border-bottom: 1px solid #e9e9e9;
+    &:last-child {
+      border: none;
+    }
+    li {
+      padding: 4px 30px;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 400;
+      color: #101010;
+      &:hover {
+        color: #fff;
+        background-color: #0d99ff;
+      }
+    }
+  }
+}

src/styles/_contents.scss

@@ -23,13 +23,13 @@
   width: 100%;
   padding-bottom: 0;
   background-color: #383838;
-    transition: padding .17s ease-in-out;
+  transition: padding 0.17s ease-in-out;
   .canvas-menu-inner {
     position: relative;
     display: flex;
     align-items: center;
     padding: 0 40px 0 20px;
-        background-color: #2C2C2C;
+    background-color: #2c2c2c;
     z-index: 999;
     .canvas-menu-list {
       display: flex;
@@ -48,7 +48,7 @@
           font-weight: 600;
           padding: 15px 20px;
           opacity: 0.55;
-                    transition: all .17s ease-in-out;
+          transition: all 0.17s ease-in-out;
           .menu-icon {
             display: block;
             width: 16px;
@@ -57,13 +57,27 @@
             background-position: center;
             background-size: cover;
             margin-right: 10px;
-                        &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
+            &.con00 {
-                        &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
+              background-image: url(/static/images/canvas/menu_icon00.svg);
-                        &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
+            }
-                        &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
+            &.con01 {
-                        &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
+              background-image: url(/static/images/canvas/menu_icon01.svg);
-                        &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
+            }
-                        &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
+            &.con02 {
+              background-image: url(/static/images/canvas/menu_icon02.svg);
+            }
+            &.con03 {
+              background-image: url(/static/images/canvas/menu_icon03.svg);
+            }
+            &.con04 {
+              background-image: url(/static/images/canvas/menu_icon04.svg);
+            }
+            &.con05 {
+              background-image: url(/static/images/canvas/menu_icon05.svg);
+            }
+            &.con06 {
+              background-image: url(/static/images/canvas/menu_icon06.svg);
+            }
           }
         }
         &.active {
@@ -94,25 +108,43 @@
           width: 30px;
           height: 30px;
           border-radius: 2px;
-                    background-color: #3D3D3D;
+          background-color: #3d3d3d;
           background-position: center;
           background-repeat: no-repeat;
           background-size: 15px 15px;
-                    transition: all .17s ease-in-out;
+          transition: all 0.17s ease-in-out;
-                    &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
+          &.btn01 {
-                    &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
+            background-image: url(../../public/static/images/canvas/side_icon03.svg);
-                    &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
+          }
-                    &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
+          &.btn02 {
-                    &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
+            background-image: url(../../public/static/images/canvas/side_icon02.svg);
-                    &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
+          }
-                    &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
+          &.btn03 {
-                    &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
+            background-image: url(../../public/static/images/canvas/side_icon01.svg);
-                    &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
+          }
+          &.btn04 {
+            background-image: url(../../public/static/images/canvas/side_icon04.svg);
+          }
+          &.btn05 {
+            background-image: url(../../public/static/images/canvas/side_icon05.svg);
+          }
+          &.btn06 {
+            background-image: url(../../public/static/images/canvas/side_icon06.svg);
+          }
+          &.btn07 {
+            background-image: url(../../public/static/images/canvas/side_icon07.svg);
+          }
+          &.btn08 {
+            background-image: url(../../public/static/images/canvas/side_icon08.svg);
+          }
+          &.btn09 {
+            background-image: url(../../public/static/images/canvas/side_icon09.svg);
+          }
           &:hover {
-                        background-color: #1083E3;
+            background-color: #1083e3;
           }
           &.active {
-                        background-color: #1083E3;
+            background-color: #1083e3;
           }
         }
       }
@@ -128,10 +160,18 @@
             background-repeat: no-repeat;
             background-position: center;
             background-size: contain;
-                        &.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);}
+            &.ico01 {
-                        &.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);}
+              background-image: url(../../public/static/images/canvas/ico-flx01.svg);
-                        &.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);}
+            }
-                        &.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);}
+            &.ico02 {
+              background-image: url(../../public/static/images/canvas/ico-flx02.svg);
+            }
+            &.ico03 {
+              background-image: url(../../public/static/images/canvas/ico-flx03.svg);
+            }
+            &.ico04 {
+              background-image: url(../../public/static/images/canvas/ico-flx04.svg);
+            }
           }
           .name {
             font-size: 12px;
@@ -161,16 +201,16 @@
         button {
           margin-left: auto;
           height: 100%;
-                    background-color: #4B4B4B;
+          background-color: #4b4b4b;
           font-size: 13px;
           font-weight: 400;
           color: #fff;
           padding: 0 7.5px;
-                    transition: all .17s ease-in-out;
+          transition: all 0.17s ease-in-out;
         }
         &.on {
           button {
-                        background-color: #1083E3;
+            background-color: #1083e3;
           }
         }
       }
@@ -179,7 +219,7 @@
         align-items: center;
         justify-content: center;
         gap: 10px;
-                background-color: #3D3D3D;
+        background-color: #3d3d3d;
         border-radius: 2px;
         width: 100px;
         height: 30px;
@@ -212,7 +252,7 @@
     background-color: #383838;
     width: 100%;
     height: 50px;
-        transition: all .17s ease-in-out;
+    transition: all 0.17s ease-in-out;
     .canvas-depth2-inner {
       display: flex;
       align-items: center;
@@ -264,7 +304,7 @@
           align-items: center;
           margin-right: 34px;
           height: 100%;
-                    transition: all .17s ease-in-out;
+          transition: all 0.17s ease-in-out;
           button {
             position: relative;
             font-size: 12px;
@@ -305,7 +345,7 @@
 .canvas-layout {
   .canvas-page-list {
     display: flex;
-        background-color: #1C1C1C;
+    background-color: #1c1c1c;
     border-top: 1px solid #000;
     width: 100%;
     .canvas-plane-wrap {
@@ -319,14 +359,14 @@
         padding: 9.6px 20px;
         border-right: 1px solid #000;
         min-width: 0;
-                transition: all .17s ease-in-out;
+        transition: all 0.17s ease-in-out;
         span {
           display: flex;
           align-items: center;
           width: 100%;
           font-size: 12px;
           font-family: 'Pretendard', sans-serif;
-                    color: #AAA;
+          color: #aaa;
           white-space: nowrap;
           text-overflow: ellipsis;
           overflow: hidden;
@@ -364,9 +404,9 @@
       justify-content: center;
       width: 45px;
       padding: 13.5px 0;
-            background-color: #1C1C1C;
+      background-color: #1c1c1c;
       border-right: 1px solid #000;
-            transition: all .17s ease-in-out;
+      transition: all 0.17s ease-in-out;
       span {
         display: block;
         width: 9px;
@@ -388,9 +428,10 @@
   canvas {
     position: absolute;
     top: 0;
-        left: 0;
+    left: 50%;
-        width: 100%;
+    transform: translateX(-50%);
-        height: 100%;
+    width: 1600px;
+    height: 1000px;
   }
 }
 
@@ -402,7 +443,7 @@
   width: 100%;
   height: 46px;
   border-bottom: 1px solid #000;
-    background: #2C2C2C;
+  background: #2c2c2c;
   z-index: 999;
   .sub-header-inner {
     display: flex;
@@ -425,7 +466,9 @@
             background-repeat: no-repeat;
             background-position: center;
             background-size: cover;
-                        &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
+            &.drawing {
+              background-image: url(../../public/static/images/main/drawing_icon.svg);
+            }
           }
         }
         &:after {
@@ -436,7 +479,7 @@
           transform: translateY(-50%);
           width: 1px;
           height: 16px;
-                    background-color: #D9D9D9;
+          background-color: #d9d9d9;
         }
         &:first-child {
           padding-left: 0;
@@ -466,7 +509,7 @@
         span {
           display: flex;
           font-size: 12px;
-                    color: #AAA;
+          color: #aaa;
           font-weight: normal;
           cursor: default;
         }
@@ -526,8 +569,8 @@
 .sub-table-box {
   padding: 20px;
   border-radius: 6px;
-    border: 1px solid #E9EAED;
+  border: 1px solid #e9eaed;
-    background: #FFF;
+  background: #fff;
   box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
   .table-box-title-wrap {
     display: flex;
@@ -543,6 +586,12 @@
         font-weight: 600;
         margin-right: 14px;
       }
+      .option {
+        padding-left: 5px;
+        font-size: 13px;
+        color: #101010;
+        font-weight: 400;
+      }
       .info-wrap {
         display: flex;
         align-items: center;
@@ -555,7 +604,7 @@
           span {
             font-weight: 600;
             &.red {
-                            color: #E23D70;
+              color: #e23d70;
             }
           }
           &:after {
@@ -566,10 +615,17 @@
             transform: translateY(-50%);
             width: 1px;
             height: 11px;
-                        background-color: #D9D9D9;
+            background-color: #d9d9d9;
+          }
+          &:first-child {
+            padding-left: 0;
+          }
+          &:last-child {
+            padding-right: 0;
+            &::after {
+              display: none;
+            }
           }
-                    &:first-child{padding-left: 0;}
-                    &:last-child{padding-right: 0;&::after{display: none;}}
         }
       }
     }
@@ -589,17 +645,27 @@
   .important {
     color: #f00;
   }
-    .sub-table-footer{
+  .sub-center-footer {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 20px;
   }
+  .sub-right-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
   .pagination-wrap {
     margin-top: 24px;
   }
 }
 
+.infomation-wrap {
+  margin-bottom: 30px;
+}
+
 .infomation-box-wrap {
   display: flex;
   align-items: center;
@@ -646,7 +712,7 @@
       width: 105px;
       height: 30px;
       line-height: 30px;
-            background-color: #F4F4F7;
+      background-color: #f4f4f7;
       border-radius: 100px;
       text-align: center;
       font-size: 13px;
@@ -670,7 +736,7 @@
   padding: 10px;
   .btn-area {
     padding-bottom: 15px;
-        border-bottom: 1px solid #ECF0F4;
+    border-bottom: 1px solid #ecf0f4;
   }
   .drag-file-area {
     position: relative;
@@ -692,7 +758,7 @@
       span {
         position: relative;
         font-size: 13px;
-                color: #45576F;
+        color: #45576f;
         font-weight: 400;
         white-space: nowrap;
         padding-right: 55px;
@@ -746,23 +812,23 @@
   table {
     table-layout: fixed;
     border-collapse: collapse;
-        border: 1px solid #ECF0F4;
+    border: 1px solid #ecf0f4;
     border-radius: 4px;
     thead {
       th {
         padding: 4.5px 0;
-                border-bottom: 1px solid #ECF0F4;
+        border-bottom: 1px solid #ecf0f4;
         text-align: center;
         font-size: 13px;
-                color: #45576F;
+        color: #45576f;
         font-weight: 500;
-                background-color: #F8F9FA;
+        background-color: #f8f9fa;
       }
     }
     tbody {
       td {
         font-size: 13px;
-                color: #45576F;
+        color: #45576f;
         text-align: center;
         padding: 4.5px 0;
       }
@@ -775,13 +841,13 @@
   padding: 20px;
   .simulation-tit-wrap {
     padding-right: 40px;
-        border-right: 1px solid #EEEEEE;
+    border-right: 1px solid #eeeeee;
     span {
       display: block;
       position: relative;
       padding-left: 60px;
       font-size: 15px;
-            color: #14324F;
+      color: #14324f;
       font-weight: 600;
       &::before {
         content: '';
@@ -808,7 +874,7 @@
       }
       dd {
         font-size: 12px;
-                color: #45576F;
+        color: #45576f;
         font-weight: 400;
         line-height: 24px;
       }
@@ -822,10 +888,10 @@
 .module-total {
   display: flex;
   align-items: center;
-    background-color: #F8F9FA;
+  background-color: #f8f9fa;
   padding: 9px 0;
   margin-right: 4px;
-    border: 1px solid #ECF0F4;
+  border: 1px solid #ecf0f4;
   border-top: none;
   .total-title {
     flex: 1;
@@ -844,83 +910,44 @@
   }
 }
 
-// 패널 배치 집계
+// 물건상세
-
+.information-help-wrap {
-.penal-wrap{
+  display: flex;
-    position: fixed;
+  padding: 24px;
-    top: 200px;
+  background-color: #f4f4f4;
-    left: 50px;
+  border-radius: 4px;
-    z-index: 999999;
+  margin-bottom: 15px;
-    width: 237px;
+  .information-help-tit-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-right: 40px;
+    border-right: 1px solid #e0e0e3;
+    .help-tit-icon {
+      width: 40px;
       height: 40px;
-    line-height: 40px;
+      border-radius: 50%;
-    background-color: #fff;
+      margin-right: 10px;
-    border: 1px solid #DFDFDF;
+      background: #fff url(../../public/static/images/sub/information_help.svg) no-repeat center;
-    padding: 0 34px 0 10px;
+      background-size: 20px 20px;
-    border-radius: 2px;
-    box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
-    cursor: pointer;
-    &::before{
-        content: '';
-        position: absolute;
-        top: 50%;
-        right: 12px;
-        transform: translateY(-50%);
-        width: 10px;
-        height: 6px;
-        background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center;
-        background-size: cover;
     }
-    h2{
+    .help-tit {
-        font-size: 12px;
+      font-size: 13px;
-        font-weight: 500;
+      font-weight: 600;
-        color: #3D3D3D;
+      color: #45576f;
-    }
-    .penal-table-wrap{
-        display: none;
-        position: absolute;
-        top: 100%;
-        left: -1px;
-        min-width: calc(100% + 2px);
-        background-color: #3D3D3D;
-        border: 1px solid #3D3D3D;
-        padding: 20px;
-        .penal-table{
-            table-layout: fixed;
-            border-collapse: collapse;
-            thead{
-                th{
-                    text-align: center;
-                    background-color:rgba(255, 255, 255, 0.05);
-                    font-size: 12px;
-                    font-weight: 500;
-                    color: #fff;
-                    border: 1px solid #505050;
     }
   }
-            tbody{
+  .information-help-guide {
-                td{
+    padding-left: 40px;
-                    font-size: 12px;
+    span {
-                    color: #fff;
-                    font-weight: 400;
-                    text-align: center;
-                    padding: 0 10px;
-                    border: 1px solid #505050;
-                }
-            }
-        }
-    }
-    &.act{
-        border: 1px solid #3D3D3D;
-        background-color: #3D3D3D;
-        h2{
-            color: #fff;
-        }
-        &::before{
-            background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center;
-        }
-        .penal-table-wrap{
       display: block;
+      font-size: 12px;
+      font-weight: 400;
+      color: #45576f;
+      margin-bottom: 7px;
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 }

src/styles/_main.scss

@@ -75,8 +75,8 @@
   height: 45px;
   border-radius: 100px;
   padding: 0 20px;
-    border: 1px solid rgba(255, 255, 255, 0.30);
+  border: 1px solid rgba(255, 255, 255, 0.3);
-    background: rgba(31, 31, 31, 0.30);
+  background: rgba(31, 31, 31, 0.3);
   .main-search {
     flex: 1;
     height: 100%;
@@ -110,13 +110,28 @@
       flex-direction: column;
       padding: 40px;
       border-radius: 6px;
-            background: #FFF;
+      background: #fff;
       box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-            &.item01{flex: 1; max-height: 400px;}
+      &.item01 {
-            &.item02{flex: none; width: 451px; max-height: 400px;}
+        flex: 1;
-            &.item03{flex: 1;}
+        max-height: 400px;
-            &.item04{flex: none; width: 351px;}
+      }
-            &.item05{flex: none; width: 451px;}
+      &.item02 {
+        flex: none;
+        width: 451px;
+        max-height: 400px;
+      }
+      &.item03 {
+        flex: 1;
+      }
+      &.item04 {
+        flex: none;
+        width: 351px;
+      }
+      &.item05 {
+        flex: none;
+        width: 451px;
+      }
       .product-item-title-wrap {
         display: flex;
         align-items: center;
@@ -131,16 +146,26 @@
             width: 40px;
             height: 40px;
             border-radius: 50px;
-                        background: #14324F;
+            background: #14324f;
             margin-right: 12px;
             background-repeat: no-repeat;
             background-size: 22px 22px;
             background-position: center;
-                        &.ico01{background-image: url(../../public/static/images/main/product_ico01.svg);}
+            &.ico01 {
-                        &.ico02{background-image: url(../../public/static/images/main/product_ico02.svg);}
+              background-image: url(../../public/static/images/main/product_ico01.svg);
-                        &.ico03{background-image: url(../../public/static/images/main/product_ico03.svg);}
+            }
-                        &.ico04{background-image: url(../../public/static/images/main/product_ico04.svg);}
+            &.ico02 {
-                        &.ico05{background-image: url(../../public/static/images/main/product_ico05.svg);}
+              background-image: url(../../public/static/images/main/product_ico02.svg);
+            }
+            &.ico03 {
+              background-image: url(../../public/static/images/main/product_ico03.svg);
+            }
+            &.ico04 {
+              background-image: url(../../public/static/images/main/product_ico04.svg);
+            }
+            &.ico05 {
+              background-image: url(../../public/static/images/main/product_ico05.svg);
+            }
           }
         }
         .more-btn {
@@ -156,7 +181,7 @@
         overflow: hidden;
         .recently-list {
           .recently-item {
-                        border: 1px solid #F2F2F2;
+            border: 1px solid #f2f2f2;
             background-color: transparent;
             padding: 29.9px 20px;
             margin-bottom: 5px;
@@ -193,7 +218,7 @@
                   transform: translateY(-50%);
                   width: 1px;
                   height: 10px;
-                                    background-color: #BBB;
+                  background-color: #bbb;
                 }
                 &:last-child {
                   &:after {
@@ -245,9 +270,15 @@
               }
             }
           }
-                    &::-webkit-scrollbar {width: 4px;  /* 스크롤바의 너비 */}
+          &::-webkit-scrollbar {
-                    &::-webkit-scrollbar-thumb {background: #697C8F; /* 스크롤바의 색상 */}
+            width: 4px; /* 스크롤바의 너비 */
-                    &::-webkit-scrollbar-track {background: transparent;  /*스크롤바 뒷 배경 색상*/}
+          }
+          &::-webkit-scrollbar-thumb {
+            background: #697c8f; /* 스크롤바의 색상 */
+          }
+          &::-webkit-scrollbar-track {
+            background: transparent; /*스크롤바 뒷 배경 색상*/
+          }
         }
         .faq-item {
           position: relative;
@@ -300,9 +331,9 @@
             padding: 20px;
             text-align: left;
             border-radius: 4px;
-                        background-color: #697C8F;
+            background-color: #697c8f;
             margin-bottom: 5px;
-                        transition: background .17s ease-in-out;
+            transition: background 0.17s ease-in-out;
             span {
               position: relative;
               display: block;
@@ -333,14 +364,19 @@
         .contact-info-list {
           padding: 25px 30px;
           border-radius: 4px;
-                    background-color: #F4F4F7;
+          background-color: #f4f4f7;
           .info-item {
             display: flex;
             align-items: center;
             padding: 15px 0;
             border-bottom: 1px solid #fff;
-                        &:first-child{padding-top: 0;}
+            &:first-child {
-                        &:last-child{padding-bottom: 0; border: none;}
+              padding-top: 0;
+            }
+            &:last-child {
+              padding-bottom: 0;
+              border: none;
+            }
             .icon-box {
               display: flex;
               margin-right: 12px;
@@ -388,12 +424,15 @@
         color: #364864;
         font-weight: 400;
         padding-bottom: 30px;
-                border-bottom: 1px solid #E5E9EF;
+        border-bottom: 1px solid #e5e9ef;
         span {
           display: block;
           font-weight: 600;
           margin-bottom: 5px;
         }
+        &.pw-reset {
+          font-size: 13px;
+        }
       }
       .login-input-wrap {
         margin-top: 30px;
@@ -401,7 +440,7 @@
           position: relative;
           display: flex;
           align-items: center;
-                    border: 1px solid #E5E9EF;
+          border: 1px solid #e5e9ef;
           height: 45px;
           padding-left: 40px;
           padding-right: 15px;
@@ -412,9 +451,11 @@
             background-color: transparent;
             font-size: 13px;
             font-weight: 400;
-                        color: #D1D7E0;
+            color: #6c819c;
             &::placeholder {
-                            color: #D1D7E0;
+              font-size: 13px;
+              font-weight: 400;
+              color: #d1d7e0;
             }
           }
           &::before {
@@ -442,6 +483,17 @@
               background-size: 17px 17px;
             }
           }
+          &.email {
+            &::before {
+              background: url(../../public/static/images/main/login_email.svg) no-repeat center;
+              width: 12px;
+              height: 9px;
+            }
+            .id-delete {
+              background-image: url(../../public/static/images/main/id_delete.svg);
+              background-size: 17px 17px;
+            }
+          }
           &.password {
             margin-bottom: 20px;
             &::before {
@@ -456,27 +508,35 @@
             }
           }
         }
-                .login-btn-box{
-                    margin-bottom: 20px;
         .login-btn {
           display: block;
           width: 100%;
           height: 45px;
-                        background-color: #5C6773;
+          background-color: #5c6773;
           color: #fff;
           font-size: 15px;
           font-weight: 600;
           border-radius: 4px;
-                        transition: background .15s ease-in-out;
+          transition: background 0.15s ease-in-out;
           &:hover {
             background-color: #717e8d;
           }
+          &.light {
+            background-color: #fff;
+            border: 1px solid #5c6773;
+            color: #5c6773;
           }
         }
+        .login-btn-box {
+          margin-bottom: 20px;
+        }
+        .pwreset-btn-box {
+          display: flex;
+        }
         .reset-password {
           width: 100%;
           text-align: center;
-                    a{ 
+          button {
             position: relative;
             font-size: 13px;
             color: #364864;
@@ -537,17 +597,17 @@
         width: 22px;
         height: 22px;
         top: -1px;
-                border-color: #A8B6C7;
+        border-color: #a8b6c7;
         border-radius: 3px;
-                transition: background .05s ease-in-out;
+        transition: background 0.05s ease-in-out;
       }
     }
   }
-    input[type=checkbox]:checked + label::before{
+  input[type='checkbox']:checked + label::before {
-        border-color: #A8B6C7;
+    border-color: #a8b6c7;
-        background-color: #A8B6C7;
+    background-color: #a8b6c7;
   }
-    input[type=checkbox]:checked + label::after{
+  input[type='checkbox']:checked + label::after {
     border-color: #fff;
     width: 7px;
     height: 11px;
@@ -555,3 +615,73 @@
     left: 1px;
   }
 }
+
+// 회원가입
+.center-page-wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  min-height: 100vh;
+  background-color: #f4f4f7;
+  overflow-x: hidden;
+  .center-page-inner {
+    width: 100%;
+    max-width: 1720px;
+    margin: 0 auto;
+    .center-page-tit {
+      font-size: 18px;
+      font-weight: 600;
+      color: #101010;
+      margin-bottom: 24px;
+    }
+    .sub-table-box {
+      &.signup {
+        margin-bottom: 20px;
+      }
+    }
+    .sign-up-btn-wrap {
+      display: flex;
+      justify-content: flex-end;
+    }
+    &.complete {
+      max-width: 1000px;
+    }
+  }
+}
+
+// 회원가입 완료
+.complete-box-wrap {
+  padding: 72px 80px;
+  .complete-tit {
+    font-size: 18px;
+    font-weight: 600;
+    color: #101010;
+    margin-bottom: 17px;
+  }
+  .complete-txt {
+    font-size: 13px;
+    font-weight: 400;
+    color: #101010;
+    margin-bottom: 27px;
+  }
+  .complete-email-wrap {
+    padding: 36px 30px;
+    border-radius: 2px;
+    background: #f4f4f7;
+    margin-bottom: 20px;
+    .email-info {
+      font-size: 13px;
+      font-weight: 400;
+      color: #000;
+      span {
+        color: #204af4;
+        font-weight: 500;
+      }
+    }
+  }
+  .complete-btn {
+    display: flex;
+    justify-content: flex-end;
+  }
+}

src/styles/_reset.scss

@@ -3,29 +3,100 @@
   -moz-text-size-adjust: none;
   -ms-text-size-adjust: none;
   text-size-adjust: none;
-    box-sizing: content-box
+  box-sizing: content-box;
 }
-*, ::after, ::before {
+*,
+::after,
+::before {
   box-sizing: border-box;
 }
-html, body{
+html,
+body {
   width: 100%;
   height: 100%;
   font-size: 16px;
 }
-html, body, div, span, applet, object, iframe,
+html,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+body,
-a, abbr, acronym, address, big, cite, code,
+div,
-del, dfn, em, img, ins, kbd, q, s, samp,
+span,
-small, strike, strong, sub, sup, tt, var,
+applet,
-b, u, i, center,
+object,
-dl, dt, dd, ol, ul, li,
+iframe,
-fieldset, form, label, legend,
+h1,
-table, caption, tbody, tfoot, thead, tr, th, td,
+h2,
-article, aside, canvas, details, embed, 
+h3,
-figure, figcaption, footer, header, hgroup, 
+h4,
-menu, nav, output, ruby, section, summary,
+h5,
-time, mark, audio, video {
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
   margin: 0;
   padding: 0;
   border: 0;
@@ -37,23 +108,38 @@ time, mark, audio, video {
   font-smooth: never;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
+article,
-footer, header, hgroup, menu, nav, section {
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
   display: block;
 }
 body {
   line-height: 1.4;
 }
-body:first-of-type caption { display:none;}
+body:first-of-type caption {
+  display: none;
+}
 
-ol, ul {
+ol,
+ul {
   list-style: none;
 }
-blockquote, q {
+blockquote,
+q {
   quotes: none;
 }
-blockquote:before, blockquote:after,
+blockquote:before,
-q:before, q:after {
+blockquote:after,
+q:before,
+q:after {
   content: '';
   content: none;
 }
@@ -63,7 +149,9 @@ table {
   border-spacing: 0;
   border: 0 none;
 }
-caption, th, td {
+caption,
+th,
+td {
   text-align: left;
   font-weight: normal;
   border: 0;
@@ -73,26 +161,38 @@ a {
   cursor: pointer;
   color: #000;
 }
-a, a:hover, a:active {
+a,
+a:hover,
+a:active {
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
 }
 /*form_style*/
-input, select, textarea, button, a, label {
+input,
+select,
+textarea,
+button,
+a,
+label {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-button,input[type=text], input[type=button] {
+button,
+input[type='text'],
+input[type='button'] {
   -webkit-appearance: none;
   -webkit-border-radius: 0;
   -webkit-appearance: none;
   appearance: none;
-    border-radius: 0
+  border-radius: 0;
 }
-input[type=checkbox], input[type=radio] {
+input[type='checkbox'],
+input[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
-input, select, button {
+input,
+select,
+button {
   border: 0 none;
   outline: none;
   margin: 0;
@@ -131,24 +231,53 @@ button{
 }
 
 // margin
-.mt5{margin-top: 5px !important;}
+.mt5 {
-.mt10{margin-top: 10px !important;}
+  margin-top: 5px !important;
-.mt15{margin-top: 15px !important;}
+}
-.mb5{margin-bottom: 5px !important;}
+.mt10 {
-.mb10{margin-bottom: 10px !important;}
+  margin-top: 10px !important;
-.mb15{margin-bottom: 15px !important;}
+}
-.mr5{margin-right: 5px !important;}
+.mt15 {
-.mr10{margin-right: 10px !important;}
+  margin-top: 15px !important;
-.mr15{margin-right: 15px !important;}
+}
-.ml5{margin-left: 5px !important;}
+.mb5 {
-.ml10{margin-left: 10px !important;}
+  margin-bottom: 5px !important;
-.ml15{margin-left: 15px !important;}
+}
+.mb10 {
+  margin-bottom: 10px !important;
+}
+.mb15 {
+  margin-bottom: 15px !important;
+}
+.mr5 {
+  margin-right: 5px !important;
+}
+.mr10 {
+  margin-right: 10px !important;
+}
+.mr15 {
+  margin-right: 15px !important;
+}
+.ml5 {
+  margin-left: 5px !important;
+}
+.ml10 {
+  margin-left: 10px !important;
+}
+.ml15 {
+  margin-left: 15px !important;
+}
 
 // align
-.al-l{text-align: left !important;}
+.al-l {
-.al-r{text-align: right !important;}
+  text-align: left !important;
-.al-c{text-align: center !important;}
+}
-
+.al-r {
+  text-align: right !important;
+}
+.al-c {
+  text-align: center !important;
+}
 
 // button
 .btn-frame {
@@ -163,7 +292,7 @@ button{
   border: 1px solid #000;
   text-align: center;
   font-family: 'Pretendard', sans-serif;
-    transition: all .17s ease-in-out;
+  transition: all 0.17s ease-in-out;
   cursor: pointer;
   &.block {
     width: 100%;
@@ -176,15 +305,15 @@ button{
   }
 
   &.deepgray {
-        background-color: #2C2C2C;
+    background-color: #2c2c2c;
     border: 1px solid #484848;
   }
   &.gray {
-        background-color: #3C3C3C;
+    background-color: #3c3c3c;
     border: 1px solid #545454;
   }
   &.dark {
-        background-color: #1C1C1C;
+    background-color: #1c1c1c;
     border: 1px solid #484848;
   }
   &.modal {
@@ -193,8 +322,8 @@ button{
     border: 1px solid #484848;
     color: #aaa;
     &:hover {
-            background-color: #1083E3;
+      background-color: #1083e3;
-            border: 1px solid #1083E3;
+      border: 1px solid #1083e3;
       color: #fff;
       font-weight: 500;
     }
@@ -204,21 +333,68 @@ button{
     padding: 0 10px;
     line-height: 28px;
     font-family: 'Noto Sans JP', sans-serif;
-        background-color: #2D2D2D;
+    background-color: #2d2d2d;
     border: 1px solid #393939;
     color: #aaa;
     &.act,
     &:hover {
-            background-color: #414E6C;
+      background-color: #414e6c;
-            border: 1px solid #414E6C;
+      border: 1px solid #414e6c;
       color: #fff;
       font-weight: 500;
     }
   }
+  &.roof {
+    height: 30px;
+    padding: 0 10px;
+    line-height: 28px;
+    font-family: 'Noto Sans JP', sans-serif;
+    background-color: transparent;
+    border: 1px solid #484848;
+    color: #fff;
+    &.blue {
+      background-color: #414e6c;
+      border: 1px solid #414e6c;
+      &:hover {
+        background-color: #414e6c;
+        border: 1px solid #414e6c;
+      }
+    }
+    &.white {
+      background-color: #fff;
+      border: 1px solid #fff;
+      color: #101010;
+      &:hover {
+        background-color: #fff;
+        border: 1px solid #fff;
+        color: #101010;
+      }
+    }
+    &:hover {
+      font-weight: 400;
+      background-color: transparent;
+      border: 1px solid #484848;
+      color: #fff;
+    }
+  }
+  &.self {
+    height: 30px;
+    padding: 0 10px;
+    line-height: 28px;
+    font-family: 'Noto Sans JP', sans-serif;
+    background-color: transparent;
+    border: 1px solid #676767;
+    color: #aaaaaa;
+    &:hover {
+      background-color: #272727;
+      border-color: #676767;
+      font-weight: 400;
+    }
+  }
   &:hover,
   &.act {
-        background-color: #1083E3;
+    background-color: #1083e3;
-        border: 1px solid #1083E3;
+    border: 1px solid #1083e3;
     color: #fff;
     font-weight: 500;
   }
@@ -242,23 +418,23 @@ button{
 .btn-origin {
   display: inline-block;
   height: 30px;
-    padding: 0 14px;
+  padding: 0 10px;
   border-radius: 2px;
   background-color: #101010;
   color: #fff;
   font-size: 13px;
   font-weight: 400;
-    transition: all .15s ease-in-out;
+  transition: all 0.15s ease-in-out;
   &.navy {
     background-color: #304961;
     &:hover {
-            background-color: #1083E3;
+      background-color: #233546;
     }
   }
   &.grey {
-        background-color: #94A0AD;
+    background-color: #94a0ad;
     &:hover {
-            background-color: #607F9A;
+      background-color: #607f9a;
     }
   }
 }
@@ -272,7 +448,7 @@ button{
   line-height: 30px;
   padding: 0 25px 0 10px;
   background-color: #373737;
-    border: 1px solid #3F3F3F;
+  border: 1px solid #3f3f3f;
   border-radius: 2px;
   border-top-left-radius: 2px;
   color: #fff;
@@ -292,7 +468,7 @@ button{
     max-height: 100px;
     overflow-y: auto;
     background-color: #373737;
-        border: 1px solid #3F3F3F;
+    border: 1px solid #3f3f3f;
     border-radius: 2px;
     transition: all 0.17s ease-in-out;
     visibility: hidden;
@@ -302,20 +478,19 @@ button{
       align-items: center;
       padding: 8px 20px;
       line-height: 1.4;
-            transition: all .17s ease-in-out;
+      transition: all 0.17s ease-in-out;
       button {
         font-size: 12px;
         color: #fff;
         line-height: 1.4;
       }
       &:hover {
-                background-color: #2C2C2C;
+        background-color: #2c2c2c;
       }
     }
     &::-webkit-scrollbar {
       width: 2px;
       background-color: transparent;
-            
     }
     &::-webkit-scrollbar-thumb {
       background-color: #5a5a5a;
@@ -335,7 +510,7 @@ button{
     height: 6px;
     background: url(/static/images/common/select-arr.svg) no-repeat center;
     background-size: cover;
-        transition: all .17s ease-in-out;
+    transition: all 0.17s ease-in-out;
   }
   &.active {
     .select-item-wrap {
@@ -353,17 +528,17 @@ button{
   display: block;
   width: 100%;
   height: 30px;
-    background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
+  background: #fff url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
   background-size: 10px 6px;
   border: 1px solid #eee;
   padding: 0 30px 0 10px;
   font-size: 13px;
-    color: #45576F;
+  color: #45576f;
   font-family: 'Noto Sans JP', sans-serif;
   cursor: pointer;
   &:disabled {
     opacity: 1;
-        background-color: #FAFAFA;
+    background-color: #fafafa;
     color: #999;
     cursor: default;
   }
@@ -379,7 +554,6 @@ button{
   }
 }
 
-
 // input
 .form-input {
   label {
@@ -390,8 +564,8 @@ button{
     margin-bottom: 10px;
   }
 }
-input[type=number],
+input[type='number'],
-input[type=text]{
+input[type='text'] {
   &.input-origin {
     display: inline-block;
     height: 30px;
@@ -414,7 +588,7 @@ input[type=text]{
       width: 100%;
     }
     &:read-only {
-            color: #AAA;
+      color: #aaa;
     }
     &.plane {
       font-family: 'Noto Sans JP', sans-serif;
@@ -432,27 +606,25 @@ input[type=text]{
     background-color: #fff;
     font-family: 'Noto Sans JP', sans-serif;
     font-size: 13px;
-        color: #45576F;
+    color: #45576f;
     font-weight: normal;
-        transition: border-color .17s ease-in-out;
+    transition: border-color 0.17s ease-in-out;
     text-align: left;
     &:read-only {
-            background-color: #FAFAFA;
+      background-color: #fafafa;
       color: #999999;
     }
   }
 }
 
-
-
 // check-btn
 .check-btn {
   display: flex;
   align-items: center;
   height: 30px;
-    background-color: #3A3A3A;
+  background-color: #3a3a3a;
   border-radius: 3px;
-    transition: all .17s ease-in-out;
+  transition: all 0.17s ease-in-out;
   .check-area {
     flex: none;
     width: 30px;
@@ -489,10 +661,10 @@ input[type=text]{
   display: block;
   height: 30px;
   border-radius: 3px;
-    background-color: #3A3A3A;
+  background-color: #3a3a3a;
   padding: 0 11px;
   text-align: left;
-    transition: all .17s ease-in-out;
+  transition: all 0.17s ease-in-out;
   span {
     position: relative;
     font-size: 12px;
@@ -526,15 +698,15 @@ input[type=text]{
     background-color: #272727;
     border: 1px solid #484848;
     span {
-            color: #Fff;
+      color: #fff;
       &:after {
         background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center;
       }
     }
     &:hover,
     &.act {
-            background-color: #1083E3;
+      background-color: #1083e3;
-            border: 1px solid #1083E3;
+      border: 1px solid #1083e3;
     }
   }
 }
@@ -544,8 +716,8 @@ input[type=text]{
 .d-check-box {
   line-height: 1.1;
   cursor: pointer;
-    input[type=checkbox],
+  input[type='checkbox'],
-    input[type=radio]{
+  input[type='radio'] {
     position: static;
     margin-left: 0;
     cursor: pointer;
@@ -568,7 +740,7 @@ input[type=text]{
   }
   &.light {
     label {
-            color: #45576F;
+      color: #45576f;
     }
   }
   &.no-text {
@@ -582,7 +754,7 @@ input[type=text]{
   label {
     &::before {
       cursor: pointer;
-            content: "";
+      content: '';
       display: inline-block;
       position: absolute;
       width: 17px;
@@ -596,11 +768,13 @@ input[type=text]{
       text-align: center;
       font-size: 13px;
       line-height: 1.4;
-            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+      transition:
+        border 0.15s ease-in-out,
+        color 0.15s ease-in-out;
     }
     &::after {
       cursor: pointer;
-            content: "";
+      content: '';
       display: inline-block;
       position: absolute;
       width: 9px;
@@ -616,20 +790,22 @@ input[type=text]{
       line-height: 1.4;
       opacity: 0;
       visibility: hidden;
-            transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
+      transition:
+        opacity 0.15s ease-in-out,
+        color 0.15s ease-in-out;
     }
   }
   &.light {
     label {
       &:before {
-                border-color: #D6D6D7;
+        border-color: #d6d6d7;
       }
       &:after {
-                background-color: #697C8F;
+        background-color: #697c8f;
       }
     }
   }
-    input[type=radio]:checked + label::after{
+  input[type='radio']:checked + label::after {
     opacity: 1;
     visibility: visible;
   }
@@ -653,9 +829,12 @@ input[type=text]{
 // check-box
 .d-check-box {
   label {
+    &.red {
+      color: #ffcaca;
+    }
     &::before {
       cursor: pointer;
-            content: "";
+      content: '';
       display: inline-block;
       position: absolute;
       width: 17px;
@@ -663,51 +842,71 @@ input[type=text]{
       top: 2px;
       left: 0;
       margin-left: -12px;
-            border: 1px solid #D6D6D7;
+      border: 1px solid #d6d6d7;
       background-color: transparent;
-            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+      transition:
+        border 0.15s ease-in-out,
+        color 0.15s ease-in-out;
     }
     &:after {
       cursor: pointer;
-            content: "";
+      content: '';
       display: inline-block;
       position: absolute;
       width: 16px;
       height: 16px;
       top: 0;
       left: 0;
-            margin-left: -.8rem;
+      margin-left: -0.8rem;
-            transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
+      transition:
+        border 0.05s ease-in-out,
+        color 0.05s ease-in-out;
     }
   }
-    input[type=checkbox]:checked + label::after{
+  input[type='checkbox']:checked + label::after {
-        content: "";
+    content: '';
     display: inline-block;
     position: absolute;
     top: 1px;
     left: -1px;
     width: 5px;
     height: 8px;
-        border: 2px solid #697C8F;
+    border: 2px solid #697c8f;
     border-left: none;
     border-top: none;
     transform: translate(7.75px, 4.5px) rotate(45deg);
     -ms-transform: translate(7.75px, 4.5px) rotate(45deg);
   }
   &.pop {
-        input[type=checkbox]:checked + label::after{
+    input[type='checkbox']:checked + label::after {
       border-color: #fff;
     }
+    &.no-text {
+      label {
+        padding-left: 0;
+      }
+    }
+  }
+  &.sel {
+    input[type='checkbox']:checked + label {
+      color: #d7c863;
+    }
+    input[type='checkbox']:checked + label::before,
+    input[type='checkbox']:checked + label::after {
+      border-color: #d7c863;
+    }
   }
 }
 
 // date-picker
 .date-picker {
-    svg{display: none;}
+  svg {
+    display: none;
+  }
   .react-datepicker-wrapper {
     width: 100%;
   }
-    input[type=text]{
+  input[type='text'] {
     display: block;
     width: 100%;
     height: 30px;
@@ -715,7 +914,7 @@ input[type=text]{
     border-radius: 2px;
     border: 1px solid #eee;
     font-size: 13px;
-        color: #45576F;
+    color: #45576f;
     font-weight: normal;
     font-family: 'Noto Sans JP', sans-serif;
     background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;

src/styles/_submodal.scss

@@ -0,0 +1,198 @@
+.modal-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: rgba(0, 0, 0, 0.75);
+  z-index: 110000;
+  .modal-dialog {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: calc(100% - (1.5rem * 2));
+    width: 680px;
+    z-index: 200000;
+    margin: 1.5rem auto;
+    pointer-events: none;
+    &.middle {
+      width: 800px;
+    }
+    &.big {
+      width: 1000px;
+    }
+    .modal-content {
+      flex: 1;
+      position: relative;
+      background-clip: padding-box;
+      background-color: transparent;
+      outline: 0 none;
+      pointer-events: auto;
+      border-radius: 4px;
+      .modal-header {
+        display: flex;
+        align-items: center;
+        padding: 10px 24px;
+        background-color: #7992ba;
+        border-radius: 4px 4px 0px 0px;
+        // overflow: hidden;
+        h1.title {
+          font-size: 13px;
+          color: $pop-color;
+          font-weight: 700;
+        }
+        .modal-close {
+          margin-left: auto;
+          color: transparent;
+          font-size: 0;
+          width: 10px;
+          height: 10px;
+          background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
+        }
+      }
+      .modal-body {
+        padding: 30px;
+        background-color: #fff;
+        border-radius: 0px 0px 4px 4px;
+        .modal-body-inner {
+          margin-bottom: 20px;
+          &.border {
+            padding-bottom: 20px;
+            border-bottom: 1px solid #ecf0f4;
+          }
+        }
+        .footer-btn-wrap {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+        }
+      }
+    }
+  }
+}
+
+// modal-contents
+
+//  비밀번호 변경
+.change-password-guide {
+  span {
+    display: block;
+    margin-bottom: 5px;
+    font-size: 13px;
+    font-weight: 400;
+    color: #101010;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.change-password-box {
+  padding: 30px;
+  border-radius: 4px;
+  background: #f4f4f7;
+  margin-bottom: 20px;
+  .change-password-tit {
+    .tit-b {
+      font-size: 13px;
+      font-weight: 500;
+      color: #344356;
+    }
+    .tit-s {
+      font-size: 12px;
+      font-weight: 400;
+      color: #898989;
+    }
+  }
+  .change-password-input {
+    width: 100%;
+    .change-password {
+      width: 100%;
+      height: 45px;
+      border-radius: 4px;
+      border: 1px solid #e9e9e9;
+      background-color: #fff;
+      padding: 0 10px;
+      font-size: 12px;
+      color: #364864;
+      font-family: 'Noto Sans JP', sans-serif;
+      &::placeholder {
+        font-size: 12px;
+      }
+    }
+  }
+  .table-item-th {
+    width: 145px;
+  }
+}
+.form-table {
+  display: table;
+  table-layout: auto;
+  width: 100%;
+  .table-item {
+    display: table-row;
+    .table-item-th,
+    .table-item-td {
+      display: table-cell;
+      vertical-align: middle;
+      padding-bottom: 10px;
+    }
+    &:last-child {
+      .table-item-th,
+      .table-item-td {
+        padding-bottom: 0;
+      }
+    }
+    .table-item-td {
+      padding-left: 10px;
+    }
+  }
+}
+
+// 주소찾기 팝업
+.address-input-wrap {
+  position: relative;
+  height: 45px;
+  padding: 0 40px 0 15px;
+  border-radius: 4px;
+  border: 1px solid #e9e9e9;
+  background: #fff;
+  margin-bottom: 20px;
+  input {
+    width: 100%;
+    height: 100%;
+    font-size: 13px;
+    font-weight: 400;
+    font-family: 'Noto Sans JP' sans-serif;
+    color: #868686;
+    &::placeholder {
+      color: #aeaeae;
+      font-size: 13px;
+      font-weight: 400;
+    }
+  }
+  .search-btn {
+    position: absolute;
+    top: 0;
+    right: 15px;
+    width: 21px;
+    height: 100%;
+    background: url(../../public/static/images/sub/address_search.svg) no-repeat center;
+    background-size: 21px 21px;
+  }
+}
+
+// 설계의뢰 불러오기
+.design-request-table {
+  margin-bottom: 20px;
+}
+.design-request-grid {
+  .design-request-grid-tit {
+    font-size: 13px;
+    font-weight: 600;
+    color: #101010;
+    margin-bottom: 15px;
+  }
+}

src/styles/_table.scss

@@ -14,10 +14,14 @@ table{
   }
 }
 
+.flx-box {
+  @include flexbox;
+}
+
 .common-table {
   table {
     table-layout: fixed;
-        border: 1px solid #ECF0F4;
+    border: 1px solid #ecf0f4;
     border-radius: 3px;
     border-collapse: collapse;
     tbody {
@@ -26,16 +30,16 @@ table{
         font-weight: 500;
         color: #344356;
         padding: 14px 12px;
-                border: 1px solid #ECF0F4 ;
+        border: 1px solid #ecf0f4;
-                background-color: #F7F9FA;
+        background-color: #f7f9fa;
         vertical-align: middle;
       }
       td {
         padding: 9px;
-                border: 1px solid #ECF0F4 ;
+        border: 1px solid #ecf0f4;
         font-size: 13px;
         font-weight: 400;
-                color: #45576F;
+        color: #45576f;
         vertical-align: middle;
         .radio-wrap {
           flex: none;
@@ -61,8 +65,8 @@ table{
 
 .infomation-table {
   table {
-        border-top: 1px solid #DEE3EA;
+    border-top: 1px solid #dee3ea;
-        border-bottom: 1px solid #DEE3EA;
+    border-bottom: 1px solid #dee3ea;
     border-collapse: collapse;
     tbody {
       tr {
@@ -71,34 +75,35 @@ table{
           color: #344356;
           font-weight: 500;
           padding: 18px 0;
-                    border-bottom: 1px solid #F4F4F7;
+          border-bottom: 1px solid #f4f4f7;
           .title {
             margin-right: 8px;
           }
         }
         td {
           padding: 0 0 0 15px;
-                    border-bottom: 1px solid #F4F4F7;
+          border-bottom: 1px solid #f4f4f7;
 
           .guide {
             font-size: 13px;
-                        color: #697C8F;
+            color: #697c8f;
             font-weight: normal;
             margin-left: 15px;
+            margin-bottom: 0;
           }
           span {
             font-size: 13px;
-                        color: #697C8F;
+            color: #697c8f;
             font-weight: normal;
           }
         }
         &:last-child {
-                    th,td{border-bottom: none;}
+          th,
+          td {
+            border-bottom: none;
           }
         }
       }
-        .flx-box{
-            @include flexbox;
     }
   }
   .tooltips {
@@ -125,7 +130,7 @@ table{
         font-size: 13px;
         color: #344356;
         font-weight: 500;
-                border-bottom: 2px solid #E0E5EB;
+        border-bottom: 2px solid #e0e5eb;
         text-align: center;
       }
     }
@@ -136,11 +141,11 @@ table{
         display: table;
         table-layout: fixed;
         width: 100%;
-                border: 1px solid #ECF0F4;
+        border: 1px solid #ecf0f4;
         td {
           padding: 10px 0px;
           font-size: 13px;
-                    color: #45576F;
+          color: #45576f;
           font-weight: 400;
           text-align: center;
         }
@@ -150,14 +155,16 @@ table{
         background-color: transparent;
       }
       &::-webkit-scrollbar-thumb {
-                background-color: #C1CCD7;
+        background-color: #c1ccd7;
       }
       &::-webkit-scrollbar-track {
         background-color: transparent;
       }
     }
     &.small {
-            tbody{height: 120px;}
+      tbody {
+        height: 120px;
+      }
     }
     &.big {
       td,
@@ -182,8 +189,9 @@ table{
     thead {
       th {
         height: 40px;
-                padding: 0 10px;
+        padding: 0px 10px;
         font-size: 12px;
+        line-height: 1.1;
         color: #fff;
         font-weight: 500;
         border: 1px solid #505050;
@@ -191,14 +199,82 @@ table{
         background-color: rgba(255, 255, 255, 0.05);
         text-align: center;
         word-break: keep-all;
+        .d-check-box {
+          opacity: 0.5;
+        }
       }
     }
     tbody {
+      tr {
+        cursor: pointer;
+        &.on {
+          background-color: #272727;
+        }
+      }
       td {
+        height: 40px;
+        vertical-align: middle;
         font-size: 12px;
         color: #fff;
         font-weight: 400;
         border: 1px solid #505050;
+        padding: 0 10px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        .warning {
+          color: PCSオプションマスター;
+        }
+        .color-wrap {
+          display: flex;
+          align-items: center;
+          .color-box {
+            width: 14px;
+            height: 14px;
+            margin-right: 8px;
+          }
+          .name {
+            width: 0;
+            flex: 1;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+  }
+  &.overflow-y {
+    table {
+      table-layout: fixed;
+      border-collapse: collapse;
+      thead {
+        display: table;
+        table-layout: fixed;
+        width: 100%;
+        border-collapse: collapse;
+      }
+      tbody {
+        display: block;
+        max-height: 81px;
+        overflow-y: auto;
+        tr {
+          display: table;
+          table-layout: fixed;
+          width: 100%;
+          border-collapse: collapse;
+          margin-top: -1px;
+        }
+        &::-webkit-scrollbar {
+          width: 2px;
+          background-color: rgba(255, 255, 255, 0.05);
+        }
+        &::-webkit-scrollbar-thumb {
+          background-color: #c1ccd7;
+        }
+        &::-webkit-scrollbar-track {
+          background-color: rgba(255, 255, 255, 0.05);
+        }
       }
     }
   }

src/styles/contents.scss

@@ -1,3 +1,5 @@
 @import '_contents.scss';
 @import '_modal.scss';
+@import '_submodal.scss';
 @import '_table.scss';
+@import '_canvasside.scss';

src/styles/style.scss

@@ -1 +1,2 @@
 @import '_main.scss';
+@import '_contents';