From c74dec07a1f6d996ad36c60b48f4edd2b7ecd944 Mon Sep 17 00:00:00 2001 From: minsik Date: Wed, 11 Sep 2024 18:06:00 +0900 Subject: [PATCH] =?UTF-8?q?-=20=EC=99=B8=EB=B2=BD=EC=84=A0=20=EA=B7=B8?= =?UTF-8?q?=EB=A6=AC=EA=B8=B0=20=ED=99=94=EB=A9=B4=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?-=20Canvas=20=EC=84=A4=EC=A0=95=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EB=8B=A4=EA=B5=AD=EC=96=B4=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.js | 3 +- src/components/floor-plan/FloorPlan.jsx | 13 +-- .../modal/outerlinesetting/OuterLineWall.jsx | 80 +++++++++++++++++++ .../{settoing01 => setting01}/FirstOption.jsx | 0 .../SecondOption.jsx | 14 ++-- .../SettingModal01.jsx | 2 +- src/locales/ja.json | 35 +++++--- src/locales/ko.json | 19 ++++- src/store/modalAtom.js | 14 +--- src/store/settingAtom.js | 16 ++-- 10 files changed, 152 insertions(+), 44 deletions(-) create mode 100644 src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx rename src/components/floor-plan/modal/{settoing01 => setting01}/FirstOption.jsx (100%) rename src/components/floor-plan/modal/{settoing01 => setting01}/SecondOption.jsx (68%) rename src/components/floor-plan/modal/{settoing01 => setting01}/SettingModal01.jsx (95%) diff --git a/src/app/layout.js b/src/app/layout.js index 90a46e6e..4d4a4f21 100644 --- a/src/app/layout.js +++ b/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 }) { - + {/**/} diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index e7fe4225..1577227d 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/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 { useState } from 'react' +import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01' 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 ( <>
- +
- {modalOpen === 'option' && } + {modalOption.option && } + {modalOption.outerwall && }
diff --git a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx b/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx new file mode 100644 index 00000000..1ba1c597 --- /dev/null +++ b/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 ( + +
+
+

{getMessage('modal.cover.outline.drawing')}

+ +
+
+
+ + + + + + +
+
+

{getMessage('modal.cover.outline.setting')}

+
+
+ + +
+
+ + +
+
+
+ + + + +
+
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/settoing01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx similarity index 100% rename from src/components/floor-plan/modal/settoing01/FirstOption.jsx rename to src/components/floor-plan/modal/setting01/FirstOption.jsx diff --git a/src/components/floor-plan/modal/settoing01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx similarity index 68% rename from src/components/floor-plan/modal/settoing01/SecondOption.jsx rename to src/components/floor-plan/modal/setting01/SecondOption.jsx index 5b417f2b..499b316c 100644 --- a/src/components/floor-plan/modal/settoing01/SecondOption.jsx +++ b/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 ( <>
-

フォントとサイズの変更

+

{getMessage('modal.canvas.setting.font.plan.edit')}

{settingsModalOptions.option1.map((item) => ( ))}
-

吸着範囲の設定

+

{getMessage('modal.canvas.setting.font.plan.absorption')}

{settingsModalOptions.option2.map((item) => ( ))}
diff --git a/src/components/floor-plan/modal/settoing01/SettingModal01.jsx b/src/components/floor-plan/modal/setting01/SettingModal01.jsx similarity index 95% rename from src/components/floor-plan/modal/settoing01/SettingModal01.jsx rename to src/components/floor-plan/modal/setting01/SettingModal01.jsx index 6c9969d2..6350438d 100644 --- a/src/components/floor-plan/modal/settoing01/SettingModal01.jsx +++ b/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 }) { diff --git a/src/locales/ja.json b/src/locales/ja.json index 50172c83..f4132734 100644 --- a/src/locales/ja.json +++ b/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": "외벽선 그리기", - "modal.cover.outline.drawing": "외벽선 그리기", - "modal.cover.outline": "외벽선", - "modal.cover.outline.right.angle": "직각", - "modal.cover.outline2": "이구배", - "modal.cover.outline.angle": "각도", - "modal.cover.outline.diagonal": "대각선", + "plan.menu.root.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.arrow": "방향(화살표)", - "modal.cover.outline.fix": "외벽선 확정", + "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": "외벽선표시", diff --git a/src/locales/ko.json b/src/locales/ko.json index f519d872..cf7d758f 100644 --- a/src/locales/ko.json +++ b/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": "외벽선표시", diff --git a/src/store/modalAtom.js b/src/store/modalAtom.js index a9a708ac..fe3b6716 100644 --- a/src/store/modalAtom.js +++ b/src/store/modalAtom.js @@ -2,14 +2,8 @@ import { atom } from 'recoil' export const modalState = atom({ key: 'modalState', - default: false, -}) - -export const modalContent = atom({ - key: 'modalContent', - default: ( - <> -
test
- - ), + default: { + option: true, + outerwall: true, + }, }) diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js index 3f91f509..2899dd4e 100644 --- a/src/store/settingAtom.js +++ b/src/store/settingAtom.js @@ -29,16 +29,16 @@ export const settingModalSecondOptionsState = atom({ key: 'settingModalSecondOptions', default: { option1: [ - { id: 1, name: '文字フォントの変更' }, - { id: 2, name: 'フロー方向フォントの変更' }, - { id: 3, name: '寸法フォントの変更' }, - { id: 4, name: '回路番号フォントの変更' }, + { id: 1, name: 'modal.canvas.setting.font.plan.edit.word' }, + { id: 2, name: 'modal.canvas.setting.font.plan.edit.flow' }, + { id: 3, name: 'modal.canvas.setting.font.plan.edit.dimension' }, + { id: 4, name: 'modal.canvas.setting.font.plan.edit.circuit.num' }, ], option2: [ - { id: 1, name: '極小', selected: false }, - { id: 2, name: '牛', selected: false }, - { id: 3, name: '中', selected: false }, - { id: 4, name: 'ティーン', selected: false }, + { id: 1, name: 'modal.canvas.setting.font.plan.absorption.small', selected: false }, + { id: 2, name: 'modal.canvas.setting.font.plan.absorption.small.semi', selected: false }, + { id: 3, name: 'modal.canvas.setting.font.plan.absorption.medium', selected: false }, + { id: 4, name: 'modal.canvas.setting.font.plan.absorption.large', selected: false }, ], }, dangerouslyAllowMutability: true,