- 외벽선 그리기 화면 추가

- Canvas 설정 화면 다국어 적용

src/app/layout.js

@@ -4,7 +4,6 @@ import RecoilRootWrapper from './RecoilWrapper'
 import UIProvider from './UIProvider'
 
 import { ToastContainer } from 'react-toastify'
-import QModal from '@/components/common/modal/QModal'
 
 import './globals.css'
 import '../styles/style.scss'
@@ -30,7 +29,7 @@ export default function RootLayout({ children }) {
             </div>
           </div>
           <ToastContainer />
-          <QModal />
+          {/*<QModal />*/}
         </RecoilRootWrapper>
       </body>
     </html>

src/components/floor-plan/FloorPlan.jsx

@@ -1,20 +1,23 @@
 'use client'
 
 import CanvasMenu from '@/components/floor-plan/CanvasMenu'
-import SettingModal01 from '@/components/floor-plan/modal/settoing01/SettingModal01'
+import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
-import { useState } from 'react'
 import CanvasLayout from '@/components/floor-plan/CanvasLayout'
 import '@/styles/contents.scss'
+import { modalState } from '@/store/modalAtom'
+import { useRecoilValue } from 'recoil'
+import OuterLineWall from '@/components/floor-plan/modal/outerlinesetting/OuterLineWall'
 
 export default function FloorPlan() {
-  const [modalOpen, setModalOpen] = useState('option')
+  const modalOption = useRecoilValue(modalState)
   return (
     <>
       <div className="canvas-wrap">
-        <CanvasMenu modalOpen={modalOpen} setModalOpen={setModalOpen} />
+        <CanvasMenu />
         <div className="canvas-content">
           <CanvasLayout />
-          {modalOpen === 'option' && <SettingModal01 modalOpen={modalOpen} setModalOpen={setModalOpen} />}
+          {modalOption.option && <SettingModal01 />}
+          {modalOption.outerwall && <OuterLineWall />}
         </div>
       </div>
     </>

src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { useState } from 'react'
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { modalState } from '@/store/modalAtom'
+import { useRecoilState } from 'recoil'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function OuterLineWall() {
+  const [modalOption, setModalOption] = useRecoilState(modalState) //modal 열림닫힘 state
+  const [buttonAct, setButtonAct] = useState(1)
+  const [close, setClose] = useState(false)
+  const { getMessage } = useMessage()
+  const HandleClickClose = () => {
+    setClose(true)
+    setTimeout(() => {
+      setModalOption({ ...modalOption, outerwall: false })
+      setClose(false)
+    }, 180)
+  }
+  return (
+    <WithDraggable isShow={true}>
+      <div className={`modal-pop-wrap ssm ${modalOption.outerwall ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
+          <button className="modal-close" onClick={HandleClickClose}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="modal-btn-wrap">
+            <button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => setButtonAct(1)}>
+              {getMessage('modal.cover.outline')}
+            </button>
+
+            <button className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} onClick={() => setButtonAct(2)}>
+              {getMessage('modal.cover.outline.right.angle')}
+            </button>
+            <button className={`btn-frame modal ${buttonAct === 3 ? 'act' : ''}`} onClick={() => setButtonAct(3)}>
+              {getMessage('modal.cover.outline2')}
+            </button>
+            <button className={`btn-frame modal ${buttonAct === 4 ? 'act' : ''}`} onClick={() => setButtonAct(4)}>
+              {getMessage('modal.cover.outline.angle')}
+            </button>
+            <button className={`btn-frame modal ${buttonAct === 5 ? 'act' : ''}`} onClick={() => setButtonAct(5)}>
+              {getMessage('modal.cover.outline.diagonal')}
+            </button>
+          </div>
+          <div className="modal-check-btn-wrap">
+            <h3 className="check-wrap-title">{getMessage('modal.cover.outline.setting')}</h3>
+            <div className="outer-line-wrap">
+              <div className="form-input">
+                <label htmlFor="">{getMessage('modal.cover.outline.length')}</label>
+                <input type="text" className="input-origin block" placeholder="320mm" />
+              </div>
+              <div className="form-input">
+                <label htmlFor="">{getMessage('modal.cover.outline.arrow')}</label>
+                <input type="text" className="input-origin block" placeholder="320mm" />
+              </div>
+            </div>
+            <div className="flex-check-box for2 btn">
+              <button className="arr-btn dark">
+                <span>{getMessage('modal.cover.outline.fix')}</span>
+              </button>
+              <button className="arr-btn dark act">
+                <span>{getMessage('modal.cover.outline.rollback')}</span>
+              </button>
+              <button className="arr-btn dark">
+                <span>{getMessage('modal.cover.outline.remove')}</span>
+              </button>
+              <button className="arr-btn dark">
+                <span>{getMessage('modal.cover.outline.select.move')}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/setting01/SecondOption.jsx

@@ -1,9 +1,11 @@
 import { useRecoilState } from 'recoil'
 import { settingModalSecondOptionsState } from '@/store/settingAtom'
+import { useMessage } from '@/hooks/useMessage'
 
 export default function SecondOption() {
   const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalSecondOptionsState)
   const { option1, option2 } = settingsModalOptions
+  const { getMessage } = useMessage()
   const onClickOption = (option) => {
     option.selected = !option.selected
 
@@ -12,31 +14,31 @@ export default function SecondOption() {
   return (
     <>
       <div className="modal-check-btn-wrap">
-        <h3 className="check-wrap-title">フォントとサイズの変更</h3>
+        <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.font.plan.edit')}</h3>
         <div className="flex-check-box for2">
           {settingsModalOptions.option1.map((item) => (
             <button className="arr-btn">
-              <span>{item.name}</span>
+              <span>{getMessage(item.name)}</span>
             </button>
           ))}
         </div>
       </div>
       <div className="modal-check-btn-wrap">
-        <h3 className="check-wrap-title">吸着範囲の設定</h3>
+        <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.font.plan.absorption')}</h3>
         <div className="flex-check-box for-line">
           {settingsModalOptions.option2.map((item) => (
             <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={() => onClickOption(item)}>
               <span className="check-area"></span>
-              <span className="title-area">{item.name}</span>
+              <span className="title-area">{getMessage(item.name)}</span>
             </button>
           ))}
         </div>
         <div className="flex-check-box for-line">
           <button className="arr-btn">
-            <span>寸法線の設定</span>
+            <span>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')}</span>
           </button>
           <button className="arr-btn">
-            <span>図面サイズの設定</span>
+            <span>{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</span>
           </button>
         </div>
       </div>

src/components/floor-plan/modal/setting01/SettingModal01.jsx

@@ -3,7 +3,7 @@
 import { useState } from 'react'
 import FirstOption from './FirstOption'
 import WithDraggable from '@/components/common/draggable/withDraggable'
-import SecondOption from '@/components/floor-plan/modal/settoing01/SecondOption'
+import SecondOption from '@/components/floor-plan/modal/setting01/SecondOption'
 import { useMessage } from '@/hooks/useMessage'
 
 export default function SettingModal01({ modalOpen, setModalOpen }) {

src/locales/ja.json

@@ -16,17 +16,20 @@
   "plan.menu.plan.drawing": "도면작성",
   "plan.menu.placement.surface.initial.setting": "配置面 初期設定",
   "plan.menu.root.cover": "지붕덮개",
-  "plan.menu.root.cover.outline.drawing": "외벽선 그리기",
+  "plan.menu.root.cover.outline.drawing": "外壁線を描",
-  "modal.cover.outline.drawing": "외벽선 그리기",
+  "modal.cover.outline.drawing": "外壁線を描",
-  "modal.cover.outline": "외벽선",
+  "modal.cover.outline": "外壁線",
-  "modal.cover.outline.right.angle": "직각",
+  "modal.cover.outline.right.angle": "直角",
-  "modal.cover.outline2": "이구배",
+  "modal.cover.outline2": "イ・グベ",
-  "modal.cover.outline.angle": "각도",
+  "modal.cover.outline.angle": "角度",
-  "modal.cover.outline.diagonal": "대각선",
+  "modal.cover.outline.diagonal": "対角線",
   "modal.cover.outline.setting": "설정",
-  "modal.cover.outline.length": "길이",
+  "modal.cover.outline.length": "長さ (mm)",
-  "modal.cover.outline.arrow": "방향(화살표)",
+  "modal.cover.outline.arrow": "方向 (矢印)",
-  "modal.cover.outline.fix": "외벽선 확정",
+  "modal.cover.outline.fix": "外壁線確定",
+  "modal.cover.outline.rollback": "一変戦に戻る",
+  "modal.cover.outline.remove": "外壁の削除",
+  "modal.cover.outline.select.move": "外壁の選択、移動",
   "plan.menu.root.cover.roof.setting": "屋根形状設定",
   "plan.menu.root.cover.roof.edit": "지붕형상 편집",
   "plan.menu.root.cover.sub.line": "補助線を描",
@@ -49,6 +52,18 @@
   "modal.canvas.setting": "Canvas設定",
   "modal.canvas.setting.display": "ディスプレイ設定",
   "modal.canvas.setting.font.plan": " フォントと図面サイズの設定",
+  "modal.canvas.setting.font.plan.edit": "フォントとサイズの変更",
+  "modal.canvas.setting.font.plan.edit.word": "文字フォントの変更",
+  "modal.canvas.setting.font.plan.edit.flow": "フロー方向フォントの変更",
+  "modal.canvas.setting.font.plan.edit.dimension": "寸法フォントの変更",
+  "modal.canvas.setting.font.plan.edit.circuit.num": "回路番号フォントの変更",
+  "modal.canvas.setting.font.plan.absorption": "吸着範囲の設定",
+  "modal.canvas.setting.font.plan.absorption.small": "極小",
+  "modal.canvas.setting.font.plan.absorption.small.semi": "牛",
+  "modal.canvas.setting.font.plan.absorption.medium": "中",
+  "modal.canvas.setting.font.plan.absorption.large": "ティーン",
+  "modal.canvas.setting.font.plan.absorption.dimension.line": "寸法線の設定",
+  "modal.canvas.setting.font.plan.absorption.plan.size.setting": "図面サイズの設定",
   "modal.canvas.setting.first.option.info": "※図面に表示する項目をクリックすると適用されます。",
   "modal.canvas.setting.first.option.alloc": "할당표시",
   "modal.canvas.setting.first.option.outline": "외벽선표시",

src/locales/ko.json

@@ -17,16 +17,19 @@
   "plan.menu.placement.surface.initial.setting": "배치면 초기 설정",
   "plan.menu.root.cover": "지붕덮개",
   "plan.menu.root.cover.outline.drawing": "외벽선 그리기",
-  "modal.cover.outline.drawing": "외벽선 그리기",
+  "modal.cover.outline.drawing": "외벽선 작성",
   "modal.cover.outline": "외벽선",
   "modal.cover.outline.right.angle": "직각",
   "modal.cover.outline2": "이구배",
   "modal.cover.outline.angle": "각도",
   "modal.cover.outline.diagonal": "대각선",
   "modal.cover.outline.setting": "설정",
-  "modal.cover.outline.length": "길이",
+  "modal.cover.outline.length": "길이 (mm)",
   "modal.cover.outline.arrow": "방향(화살표)",
   "modal.cover.outline.fix": "외벽선 확정",
+  "modal.cover.outline.rollback": "일변전으로 돌아가기",
+  "modal.cover.outline.remove": "외벽 제거",
+  "modal.cover.outline.select.move": "외벽 선택, 이동",
   "plan.menu.root.cover.roof.setting": "지붕형상 설정",
   "plan.menu.root.cover.roof.edit": "지붕형상 편집",
   "plan.menu.root.cover.sub.line": "보조선 그리기",
@@ -49,6 +52,18 @@
   "modal.canvas.setting": "Canvas 설정",
   "modal.canvas.setting.display": "디스플레이 설정",
   "modal.canvas.setting.font.plan": "글꼴 및 도면 크기 설정",
+  "modal.canvas.setting.font.plan.edit": "글꼴 및 크기 변경",
+  "modal.canvas.setting.font.plan.edit.word": "문자 글꼴 변경",
+  "modal.canvas.setting.font.plan.edit.flow": "흐름 방향 글꼴 변경",
+  "modal.canvas.setting.font.plan.edit.dimension": "치수 글꼴변경",
+  "modal.canvas.setting.font.plan.edit.circuit.num": "회로번호 글꼴변경",
+  "modal.canvas.setting.font.plan.absorption": "흡착범위 설정",
+  "modal.canvas.setting.font.plan.absorption.small": "극소",
+  "modal.canvas.setting.font.plan.absorption.small.semi": "소",
+  "modal.canvas.setting.font.plan.absorption.medium": "중",
+  "modal.canvas.setting.font.plan.absorption.large": "대",
+  "modal.canvas.setting.font.plan.absorption.dimension.line": "치수선 설정",
+  "modal.canvas.setting.font.plan.absorption.plan.size.setting": "도면크기 설정",
   "modal.canvas.setting.first.option.info": "※도면에 표시하는 항목을 클릭하면 적용됩니다.",
   "modal.canvas.setting.first.option.alloc": "할당표시",
   "modal.canvas.setting.first.option.outline": "외벽선표시",

src/store/modalAtom.js

@@ -2,14 +2,8 @@ import { atom } from 'recoil'
 
 export const modalState = atom({
   key: 'modalState',
-  default: false,
+  default: {
-})
+    option: true,
-
+    outerwall: true,
-export const modalContent = atom({
+  },
-  key: 'modalContent',
-  default: (
-    <>
-      <div>test</div>
-    </>
-  ),
 })

src/store/settingAtom.js

@@ -29,16 +29,16 @@ export const settingModalSecondOptionsState = atom({
   key: 'settingModalSecondOptions',
   default: {
     option1: [
-      { id: 1, name: '文字フォントの変更' },
+      { id: 1, name: 'modal.canvas.setting.font.plan.edit.word' },
-      { id: 2, name: 'フロー方向フォントの変更' },
+      { id: 2, name: 'modal.canvas.setting.font.plan.edit.flow' },
-      { id: 3, name: '寸法フォントの変更' },
+      { id: 3, name: 'modal.canvas.setting.font.plan.edit.dimension' },
-      { id: 4, name: '回路番号フォントの変更' },
+      { id: 4, name: 'modal.canvas.setting.font.plan.edit.circuit.num' },
     ],
     option2: [
-      { id: 1, name: '極小', selected: false },
+      { id: 1, name: 'modal.canvas.setting.font.plan.absorption.small', selected: false },
-      { id: 2, name: '牛', selected: false },
+      { id: 2, name: 'modal.canvas.setting.font.plan.absorption.small.semi', selected: false },
-      { id: 3, name: '中', selected: false },
+      { id: 3, name: 'modal.canvas.setting.font.plan.absorption.medium', selected: false },
-      { id: 4, name: 'ティーン', selected: false },
+      { id: 4, name: 'modal.canvas.setting.font.plan.absorption.large', selected: false },
     ],
   },
   dangerouslyAllowMutability: true,