From 196f4f3ca27f2b032c18c9497049e3f5fafabc2b Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Wed, 11 Sep 2024 15:00:50 +0900
Subject: [PATCH] =?UTF-8?q?-=20=EB=8B=A4=EA=B5=AD=EC=96=B4=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasMenu.jsx      | 131 ++++++++++++------
 src/components/floor-plan/MenuDepth01.jsx     |   4 +-
 .../modal/settoing01/FirstOption.jsx          |  10 +-
 .../modal/settoing01/SettingModal01.jsx       |   8 +-
 src/components/header/Header.jsx              |  22 +--
 src/locales/ja.json                           |  69 ++++++++-
 src/locales/ko.json                           |  69 ++++++++-
 src/store/settingAtom.js                      |  28 ++--
 8 files changed, 258 insertions(+), 83 deletions(-)

diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 4533747a..cf5ada46 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -1,11 +1,16 @@
 'use client'
 import { useState } from 'react'
 import MenuDepth01 from './MenuDepth01'
+import { useRecoilState } from 'recoil'
+import { modalState } from '@/store/modalAtom'
 import QSelectBox from '@/components/common/select/QSelectBox'
+import { useMessage } from '@/hooks/useMessage'
 
-export default function CanvasMenu({ setModalOpen }) {
+export default function CanvasMenu() {
+  const [modalOption, setModalOption] = useRecoilState(modalState) //modal 열림닫힘 state
   const [menuNumber, setMenuNumber] = useState(null)
   const [vertical, setVertical] = useState(true)
+  const { getMessage } = useMessage()
   const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
   const onClickNav = (number) => {
     setMenuNumber(number)
@@ -14,83 +19,127 @@ export default function CanvasMenu({ setModalOpen }) {
     }
   }
   return (
-    <div className={`canvas-menu-wrap ${menuNumber !== null ? 'active' : ''}`}>
+    <div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
       <div className="canvas-menu-inner">
         <ul className="canvas-menu-list">
           <li className={`canvas-menu-item ${menuNumber === 0 ? 'active' : ''}`} onClick={() => onClickNav(0)}>
             <button>
-              <span className="menu-icon con00"></span>配置面 初期設定
+              <span className="menu-icon con00"></span>
+              {getMessage('plan.menu.plan.drawing')}
             </button>
           </li>
           <li className={`canvas-menu-item ${menuNumber === 1 ? 'active' : ''}`} onClick={() => onClickNav(1)}>
             <button>
-              <span className="menu-icon con01"></span>配置面 初期設定
+              <span className="menu-icon con01"></span>
+              {getMessage('plan.menu.placement.surface.initial.setting')}
             </button>
           </li>
           <li className={`canvas-menu-item ${menuNumber === 2 ? 'active' : ''}`} onClick={() => onClickNav(2)}>
             <button>
-              <span className="menu-icon con02"></span>配置面 初期設定
+              <span className="menu-icon con02"></span>
+              {getMessage('plan.menu.root.cover')}
             </button>
           </li>
           <li className={`canvas-menu-item ${menuNumber === 3 ? 'active' : ''}`} onClick={() => onClickNav(3)}>
             <button>
-              <span className="menu-icon con03"></span>配置面
+              <span className="menu-icon con03"></span>
+              {getMessage('plan.menu.placement.surface')}
             </button>
           </li>
           <li className={`canvas-menu-item ${menuNumber === 4 ? 'active' : ''}`} onClick={() => onClickNav(4)}>
             <button>
-              <span className="menu-icon con04"></span>モジュール回路構成
+              <span className="menu-icon con04"></span>
+              {getMessage('plan.menu.module.circuit.setting')}
             </button>
           </li>
           <li className={`canvas-menu-item ${menuNumber === 5 ? 'active' : ''}`} onClick={() => onClickNav(5)}>
             <button>
-              <span className="menu-icon con06"></span>見積
+              <span className="menu-icon con06"></span>
+              {getMessage('plan.menu.estimate')}
             </button>
           </li>
           <li className={`canvas-menu-item ${menuNumber === 6 ? 'active' : ''}`} onClick={() => onClickNav(6)}>
             <button>
-              <span className="menu-icon con05"></span>発展シミュレーション
+              <span className="menu-icon con05"></span>
+              {getMessage('plan.menu.simulation')}
             </button>
           </li>
         </ul>
         <div className="canvas-side-btn-wrap">
-          <div className="btn-from">
-            <button className="btn01 "></button>
-            <button className="btn02 active"></button>
-            <button className="btn03"></button>
-          </div>
-          <div className="vertical-horizontal">
-            <span>垂直水平モード</span>
-            <button onClick={() => setVertical(!vertical)}>{vertical ? 'ON' : 'OFF'}</button>
-          </div>
-          <div className="select-box">
-            <QSelectBox title={'瓦53A'} option={SelectOption} />
-          </div>
-          <div className="btn-from">
-            <button className="btn04" onClick={() => setModalOpen('option')}></button>
-            <button className="btn05"></button>
-            <button className="btn06"></button>
-          </div>
-          <div className="size-control">
-            <button className="control-btn minus"></button>
-            <span>100%</span>
-            <button className="control-btn plus"></button>
-          </div>
-          <div className="btn-from">
-            <button className="btn07"></button>
-            <button className="btn08"></button>
-            <button className="btn09"></button>
-          </div>
+          {menuNumber !== 6 && menuNumber !== 5 && (
+            <>
+              <div className="btn-from">
+                <button className="btn01"></button>
+                <button className="btn02 active"></button>
+                <button className="btn03 "></button>
+              </div>
+              <div className={`vertical-horizontal ${vertical ? 'on' : ''}`}>
+                <span>{getMessage('plan.mode.vertical.horizontal')}</span>
+                <button onClick={() => setVertical(!vertical)}>{vertical ? 'ON' : 'OFF'}</button>
+              </div>
+              <div className="select-box">
+                <QSelectBox title={'瓦53A'} option={SelectOption} />
+              </div>
+              <div className="btn-from">
+                <button className="btn04" onClick={() => setModalOption({ ...modalOption, option: true })}></button>
+                <button className="btn05"></button>
+                <button className="btn06"></button>
+              </div>
+              <div className="size-control">
+                <button className="control-btn minus"></button>
+                <span>100%</span>
+                <button className="control-btn plus"></button>
+              </div>
+              <div className="btn-from">
+                <button className="btn07"></button>
+                <button className="btn08"></button>
+                <button className="btn09"></button>
+              </div>
+            </>
+          )}
+
+          {menuNumber === 5 && (
+            <>
+              <div className="ico-btn-from">
+                <button className="btn-frame gray ico-flx act">
+                  <span className="ico ico01"></span>
+                  <span>{getMessage('plan.menu.estimate.roof.alloc')}</span>
+                </button>
+                <button className="btn-frame gray ico-flx">
+                  <span className="ico ico02"></span>
+                  <span>{getMessage('plan.menu.estimate.save')}</span>
+                </button>
+                <button className="btn-frame gray ico-flx">
+                  <span className="ico ico03"></span>
+                  <span>{getMessage('plan.menu.estimate.reset')}</span>
+                </button>
+                <button className="btn-frame gray ico-flx">
+                  <span className="ico ico04"></span>
+                  <span>{getMessage('plan.menu.estimate.copy')}</span>
+                </button>
+              </div>
+            </>
+          )}
+          {menuNumber === 6 && (
+            <>
+              <div className="ico-btn-from">
+                <button className="btn-frame gray ico-flx">
+                  <span className="ico ico01"></span>
+                  <span>{getMessage('plan.menu.simulation.excel')}</span>
+                </button>
+                <button className="btn-frame gray ico-flx">
+                  <span className="ico ico01"></span>
+                  <span>{getMessage('plan.menu.simulation.pdf')}</span>
+                </button>
+              </div>
+            </>
+          )}
         </div>
       </div>
-      <div className={`canvas-depth2-wrap ${menuNumber !== null ? 'active' : ''}`}>
-        {menuNumber === 0 && <MenuDepth01 />}
-        {menuNumber === 1 && <MenuDepth01 />}
+      <div className={`canvas-depth2-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
         {menuNumber === 2 && <MenuDepth01 />}
         {menuNumber === 3 && <MenuDepth01 />}
         {menuNumber === 4 && <MenuDepth01 />}
-        {menuNumber === 5 && <MenuDepth01 />}
-        {menuNumber === 6 && <MenuDepth01 />}
       </div>
     </div>
   )
diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx
index 90ba4e60..ce4bd6a4 100644
--- a/src/components/floor-plan/MenuDepth01.jsx
+++ b/src/components/floor-plan/MenuDepth01.jsx
@@ -1,8 +1,10 @@
 'use client'
 
 import { ToggleonMouse } from '@/components/header/Header'
+import { useMessage } from '@/hooks/useMessage'
 
 export default function MenuDepth01() {
+  const { getMessage } = useMessage()
   return (
     <div className="canvas-depth2-inner">
       <ul className="canvas-depth2-list">
@@ -30,7 +32,7 @@ export default function MenuDepth01() {
       </ul>
       <ul className="canvas-depth2-btn-list">
         <li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
-          <button>屋根面の割り当て</button>
+          <button>{getMessage('plan.menu.estimate.roof.alloc')}</button>
         </li>
         <li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
           <button>屋根材の設定と変更</button>
diff --git a/src/components/floor-plan/modal/settoing01/FirstOption.jsx b/src/components/floor-plan/modal/settoing01/FirstOption.jsx
index e91f81ab..cddab6c0 100644
--- a/src/components/floor-plan/modal/settoing01/FirstOption.jsx
+++ b/src/components/floor-plan/modal/settoing01/FirstOption.jsx
@@ -1,9 +1,11 @@
 import { useRecoilState } from 'recoil'
 import { settingModalFirstOptionsState } from '@/store/settingAtom'
+import { useMessage } from '@/hooks/useMessage'
 
 export default function FirstOption() {
   const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState)
   const { option1, option2 } = settingsModalOptions
+  const { getMessage } = useMessage()
   const onClickOption = (option) => {
     option.selected = !option.selected
 
@@ -13,23 +15,23 @@ export default function FirstOption() {
   return (
     <>
       <div className="modal-check-btn-wrap">
-        <h3 className="check-wrap-title light">※図面に表示する項目をクリックすると適用されます。</h3>
+        <h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.first.option.info')}</h3>
         <div className="flex-check-box for2">
           {settingsModalOptions?.option1?.map((item) => (
             <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => 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>
       <div className="modal-check-btn-wrap">
-        <h3 className="check-wrap-title">画面表示</h3>
+        <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.display')}</h3>
         <div className="flex-check-box for-line">
           {settingsModalOptions?.option2?.map((item) => (
             <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
               <span className="check-area"></span>
-              <span className="title-area">{item.name}</span>
+              <span className="title-area">{getMessage(item.name)}</span>
             </button>
           ))}
         </div>
diff --git a/src/components/floor-plan/modal/settoing01/SettingModal01.jsx b/src/components/floor-plan/modal/settoing01/SettingModal01.jsx
index 5a79c795..6c9969d2 100644
--- a/src/components/floor-plan/modal/settoing01/SettingModal01.jsx
+++ b/src/components/floor-plan/modal/settoing01/SettingModal01.jsx
@@ -4,6 +4,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 { useMessage } from '@/hooks/useMessage'
 
 export default function SettingModal01({ modalOpen, setModalOpen }) {
   const [buttonAct, setButtonAct] = useState(1)
@@ -15,12 +16,13 @@ export default function SettingModal01({ modalOpen, setModalOpen }) {
       setClose(false)
     }, 180)
   }
+  const { getMessage } = useMessage()
 
   return (
     <WithDraggable isShow={true}>
       <div className={`modal-pop-wrap sm ${modalOpen === 'option' && close === false ? 'mount' : ''}${close ? 'unmount' : ''} `}>
         <div className="modal-head">
-          <h1 className="title">Canvas設定</h1>
+          <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
           <button className="modal-close" onClick={HandleClickClose}>
             닫기
           </button>
@@ -28,11 +30,11 @@ export default function SettingModal01({ modalOpen, setModalOpen }) {
         <div className="modal-body">
           <div className="modal-btn-wrap">
             <button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => setButtonAct(1)}>
-              ディスプレイ設定
+              {getMessage('modal.canvas.setting.display')}
             </button>
 
             <button className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} onClick={() => setButtonAct(2)}>
-              フォントと図面サイズの設定
+              {getMessage('modal.canvas.setting.font.plan')}
             </button>
           </div>
           {buttonAct === 1 && <FirstOption />}
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
index 028ef6ed..f81a0ca7 100644
--- a/src/components/header/Header.jsx
+++ b/src/components/header/Header.jsx
@@ -2,6 +2,7 @@
 import Link from 'next/link'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { usePathname } from 'next/navigation'
+import { useMessage } from '@/hooks/useMessage'
 
 export const ToggleonMouse = (e, act, target) => {
   const listWrap = e.target.closest(target)
@@ -19,6 +20,7 @@ export const ToggleonMouse = (e, act, target) => {
 }
 
 export default function Header() {
+  const { getMessage } = useMessage()
   const pathName = usePathname()
   if (pathName.includes('login') || pathName.includes('join')) {
     return null
@@ -39,28 +41,28 @@ export default function Header() {
                 onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
                 onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
               >
-                <Link href={'#'}>ホームへ</Link>
+                <Link href={'#'}>{getMessage('header.menus.home')}</Link>
               </li>
               <li
                 className="nav-item"
                 onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
                 onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
               >
-                <button>物品及び図面管理</button>
+                <button>{getMessage('header.menus.management')}</button>
                 <ul className="nav-depth2">
                   <li
                     className="nav-depth2-item"
                     onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
                     onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                   >
-                    <Link href={'#'}>新規物件登録</Link>
+                    <Link href={'#'}>{getMessage('header.menus.management.stuff')}</Link>
                   </li>
                   <li
                     className="nav-depth2-item"
                     onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
                     onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                   >
-                    <Link href={'#'}>モノ/図面管理</Link>
+                    <Link href={'#'}>{getMessage('header.menus.management.plan')}</Link>
                   </li>
                 </ul>
               </li>
@@ -69,28 +71,28 @@ export default function Header() {
                 onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
                 onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
               >
-                <button>コミュニティ</button>
+                <button>{getMessage('header.menus.community')}</button>
                 <ul className="nav-depth2">
                   <li
                     className="nav-depth2-item"
                     onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
                     onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                   >
-                    <Link href={'#'}>お知らせ</Link>
+                    <Link href={'#'}>{getMessage('header.menus.community.notice')}</Link>
                   </li>
                   <li
                     className="nav-depth2-item"
                     onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
                     onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                   >
-                    <Link href={'#'}>FAQ</Link>
+                    <Link href={'#'}>{getMessage('header.menus.community.faq')}</Link>
                   </li>
                   <li
                     className="nav-depth2-item"
                     onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
                     onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                   >
-                    <Link href={'#'}>素材のダウンロード</Link>
+                    <Link href={'#'}>{getMessage('header.menus.community.archive')}</Link>
                   </li>
                 </ul>
               </li>
@@ -102,13 +104,13 @@ export default function Header() {
             <button className="profile">Kim Ji Young</button>
           </div>
           <div className="sign-out-box">
-            <button className="sign-out">ログアウト</button>
+            <button className="sign-out">{getMessage('header.logout')}</button>
           </div>
           <div className="select-box">
             <QSelectBox title={'Q.ORDER'} option={SelectOption} />
           </div>
           <div className="btn-wrap">
-            <button className="btn-frame small dark">移動</button>
+            <button className="btn-frame small dark">{getMessage('header.go')}</button>
           </div>
         </div>
       </div>
diff --git a/src/locales/ja.json b/src/locales/ja.json
index ecc55327..50172c83 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -1,6 +1,70 @@
 {
   "hi": "こんにちは",
   "welcome": "환영합니다. {0}님",
+  "header.menus.home": "ホームへv",
+  "header.menus.management": "物品及び図面管理",
+  "header.menus.management.stuff": "新規物件登録",
+  "header.menus.management.plan": "モノ/図面管理",
+  "header.menus.community": "コミュニティ",
+  "header.menus.community.notice": "お知らせ",
+  "header.menus.community.faq": "FAQ",
+  "header.menus.community.archive": "素材のダウンロード",
+  "header.logout": "ログアウト",
+  "header.go": "移動",
+  "header.online.warranty.system": "オンライン保証シ",
+  "header.stem": "ステム",
+  "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": "대각선",
+  "modal.cover.outline.setting": "설정",
+  "modal.cover.outline.length": "길이",
+  "modal.cover.outline.arrow": "방향(화살표)",
+  "modal.cover.outline.fix": "외벽선 확정",
+  "plan.menu.root.cover.roof.setting": "屋根形状設定",
+  "plan.menu.root.cover.roof.edit": "지붕형상 편집",
+  "plan.menu.root.cover.sub.line": "補助線を描",
+  "plan.menu.placement.surface": "配置面",
+  "plan.menu.placement.surface.drawing": "배치면 그리기",
+  "plan.menu.placement.surface.surface": "면형상 배치",
+  "plan.menu.placement.surface.object": "오브젝트 배치",
+  "plan.menu.module.circuit.setting": "モジュール回路構成",
+  "plan.menu.module.circuit.setting.default": "기본 설정",
+  "plan.menu.module.circuit.setting.circuit.trestle.setting": "회로 및 가대 설정",
+  "plan.menu.estimate": "見積",
+  "plan.menu.estimate.roof.alloc": "屋根面の割り当て",
+  "plan.menu.estimate.save": "保存",
+  "plan.menu.estimate.reset": "初期化",
+  "plan.menu.estimate.copy": "コピー",
+  "plan.menu.simulation": "発展シミュレーション",
+  "plan.menu.simulation.excel": "Excel",
+  "plan.menu.simulation.pdf": "PDF",
+  "plan.mode.vertical.horizontal": "垂直水平モード",
+  "modal.canvas.setting": "Canvas設定",
+  "modal.canvas.setting.display": "ディスプレイ設定",
+  "modal.canvas.setting.font.plan": " フォントと図面サイズの設定",
+  "modal.canvas.setting.first.option.info": "※図面に表示する項目をクリックすると適用されます。",
+  "modal.canvas.setting.first.option.alloc": "할당표시",
+  "modal.canvas.setting.first.option.outline": "외벽선표시",
+  "modal.canvas.setting.first.option.plan": "도면표시",
+  "modal.canvas.setting.first.option.roof.line": "지붕선표시",
+  "modal.canvas.setting.first.option.grid": "그리드표시",
+  "modal.canvas.setting.first.option.circuit.num": "회로 번호 표시",
+  "modal.canvas.setting.first.option.word": "문자 표시",
+  "modal.canvas.setting.first.option.trestle": "가대 표시",
+  "modal.canvas.setting.first.option.flow": "흐름방향 표시",
+  "modal.canvas.setting.first.option.total": "집계표 표시",
+  "modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시",
+  "modal.canvas.setting.first.option.display": "画面表示",
+  "modal.canvas.setting.first.option.border": "ボーダーのみ",
+  "modal.canvas.setting.first.option.line": "ラインハッチ",
+  "modal.canvas.setting.first.option.all": "All painted",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "ダウンロードするデータがありません",
   "common.message.noData": "表示するデータがありません",
@@ -88,18 +152,14 @@
   "common.message.writeToConfirm": "作成解除を実行しますか？",
   "common.message.password.init.success": "パスワード [{0}] に初期化されました。",
   "common.message.no.edit.save": "この文書は変更できません。",
-
   "common.require": "필수",
-
   "site.name": "Q.CAST III",
   "site.sub_name": "태양광 발전 시스템 도면관리 사이트",
-
   "login": "로그인",
   "login.init_password.btn": "비밀번호 초기화 ja",
   "login.init_password.title": "비밀번호 초기화",
   "login.init_password.sub_title": "비밀번호를 초기화할 아이디와 이메일 주소를 입력해 주세요.",
   "login.init_password.complete_message": "비밀번호가 초기화 되었습니다. 초기화된 비밀번호는 아이디와 같습니다.",
-
   "join.title": "Q.CAST3 로그인ID 발행 신청",
   "join.sub1.title": "판매대리점 정보",
   "join.sub1.comment": "※ 등록되는 리셀러의 회사 이름을 입력하십시오. (2차점은 「○○판매주식회사(2차점：××설비주식회사)」로 기입해 주세요.)",
@@ -141,7 +201,6 @@
   "join.complete.contents": "※ 신청한 ID가 승인되면, 담당자 정보에 입력한 이메일 주소로 로그인 관련 안내 메일이 전송됩니다.",
   "join.complete.email_comment": "담당자 이메일 주소",
   "join.complete.email": "test@naver.com",
-
   "stuff.gridHeader.lastEditDatetime": "갱신일시",
   "stuff.gridHeader.objectNo": "물건번호",
   "stuff.gridHeader.planTotCnt": "플랜 수",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 21b0115e..f519d872 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -1,6 +1,70 @@
 {
   "hi": "안녕하세요",
   "welcome": "환영합니다. {0}님",
+  "header.menus.home": "Home",
+  "header.menus.management": "물건 및 도면 관리",
+  "header.menus.management.stuff": "신규 물건 등록",
+  "header.menus.management.plan": "사물/도면 관리",
+  "header.menus.community": "커뮤니티",
+  "header.menus.community.notice": "공지",
+  "header.menus.community.faq": "FAQ",
+  "header.menus.community.archive": "자료 다운로드",
+  "header.logout": "로그아웃",
+  "header.go": "이동",
+  "header.online.warranty.system": "온라인 보증 시스템",
+  "header.stem": "Stem",
+  "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": "대각선",
+  "modal.cover.outline.setting": "설정",
+  "modal.cover.outline.length": "길이",
+  "modal.cover.outline.arrow": "방향(화살표)",
+  "modal.cover.outline.fix": "외벽선 확정",
+  "plan.menu.root.cover.roof.setting": "지붕형상 설정",
+  "plan.menu.root.cover.roof.edit": "지붕형상 편집",
+  "plan.menu.root.cover.sub.line": "보조선 그리기",
+  "plan.menu.placement.surface": "배치면",
+  "plan.menu.placement.surface.drawing": "배치면 그리기",
+  "plan.menu.placement.surface.surface": "면형상 배치",
+  "plan.menu.placement.surface.object": "오브젝트 배치",
+  "plan.menu.module.circuit.setting": "모듈,회로 구성",
+  "plan.menu.module.circuit.setting.default": "기본 설정",
+  "plan.menu.module.circuit.setting.circuit.trestle.setting": "회로 및 가대 설정",
+  "plan.menu.estimate": "견적서",
+  "plan.menu.estimate.roof.alloc": "지붕면 할당",
+  "plan.menu.estimate.save": "저장",
+  "plan.menu.estimate.reset": "초기화",
+  "plan.menu.estimate.copy": "복사",
+  "plan.menu.simulation": "발전 시뮬레이션",
+  "plan.menu.simulation.excel": "Excel",
+  "plan.menu.simulation.pdf": "PDF",
+  "plan.mode.vertical.horizontal": "수직 수평 모드",
+  "modal.canvas.setting": "Canvas 설정",
+  "modal.canvas.setting.display": "디스플레이 설정",
+  "modal.canvas.setting.font.plan": "글꼴 및 도면 크기 설정",
+  "modal.canvas.setting.first.option.info": "※도면에 표시하는 항목을 클릭하면 적용됩니다.",
+  "modal.canvas.setting.first.option.alloc": "할당표시",
+  "modal.canvas.setting.first.option.outline": "외벽선표시",
+  "modal.canvas.setting.first.option.plan": "도면표시",
+  "modal.canvas.setting.first.option.roof.line": "지붕선표시",
+  "modal.canvas.setting.first.option.grid": "그리드표시",
+  "modal.canvas.setting.first.option.circuit.num": "회로 번호 표시",
+  "modal.canvas.setting.first.option.word": "문자 표시",
+  "modal.canvas.setting.first.option.trestle": "가대 표시",
+  "modal.canvas.setting.first.option.flow": "흐름방향 표시",
+  "modal.canvas.setting.first.option.total": "집계표 표시",
+  "modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시",
+  "modal.canvas.setting.first.option.display": "화면 표시",
+  "modal.canvas.setting.first.option.border": "테두리만",
+  "modal.canvas.setting.first.option.line": "라인해치",
+  "modal.canvas.setting.first.option.all": "All painted",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "No data to download",
   "common.message.noData": "No data to display",
@@ -88,18 +152,14 @@
   "common.message.writeToConfirm": "작성 해제를 실행하시겠습니까?",
   "common.message.password.init.success": "비밀번호 [{0}]로 초기화 되었습니다.",
   "common.message.no.edit.save": "This document cannot be changed.",
-
   "common.require": "필수",
-
   "site.name": "Q.CAST III",
   "site.sub_name": "태양광 발전 시스템 도면관리 사이트",
-
   "login": "로그인",
   "login.init_password.btn": "비밀번호 초기화",
   "login.init_password.title": "비밀번호 초기화",
   "login.init_password.sub_title": "비밀번호를 초기화할 아이디와 이메일 주소를 입력해 주세요.",
   "login.init_password.complete_message": "비밀번호가 초기화 되었습니다. 초기화된 비밀번호는 아이디와 같습니다.",
-
   "join.title": "Q.CAST3 로그인ID 발행 신청",
   "join.sub1.title": "판매대리점 정보",
   "join.sub1.comment": "※ 등록되는 리셀러의 회사 이름을 입력하십시오. (2차점은 「○○판매주식회사(2차점：××설비주식회사)」로 기입해 주세요.)",
@@ -141,7 +201,6 @@
   "join.complete.contents": "※ 신청한 ID가 승인되면, 담당자 정보에 입력한 이메일 주소로 로그인 관련 안내 메일이 전송됩니다.",
   "join.complete.email_comment": "담당자 이메일 주소",
   "join.complete.email": "test@naver.com",
-
   "stuff.gridHeader.lastEditDatetime": "갱신일시",
   "stuff.gridHeader.objectNo": "물건번호",
   "stuff.gridHeader.planTotCnt": "플랜 수",
diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js
index 0ab99ea1..3f91f509 100644
--- a/src/store/settingAtom.js
+++ b/src/store/settingAtom.js
@@ -4,22 +4,22 @@ export const settingModalFirstOptionsState = atom({
   key: 'settingModalFirstOptions',
   default: {
     option1: [
-      { id: 1, name: '割り当て表示', selected: false },
-      { id: 2, name: '実寸表示', selected: false },
-      { id: 3, name: '図面表示', selected: false },
-      { id: 4, name: '寸法表示なし', selected: false },
-      { id: 5, name: 'グリッド表示', selected: false },
-      { id: 6, name: '架台表示', selected: false },
-      { id: 7, name: '文字表示', selected: false },
-      { id: 8, name: '座標表示', selected: false },
-      { id: 9, name: '流れ方向表示', selected: false },
-      { id: 10, name: '図面切替表示', selected: false },
-      { id: 11, name: 'ü廊下寸法表示', selected: false },
+      { id: 1, name: 'modal.canvas.setting.first.option.alloc', selected: false },
+      { id: 2, name: 'modal.canvas.setting.first.option.outline', selected: false },
+      { id: 3, name: 'modal.canvas.setting.first.option.plan', selected: false },
+      { id: 4, name: 'modal.canvas.setting.first.option.roof.line', selected: false },
+      { id: 5, name: 'modal.canvas.setting.first.option.grid', selected: false },
+      { id: 6, name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
+      { id: 7, name: 'modal.canvas.setting.first.option.word', selected: false },
+      { id: 8, name: 'modal.canvas.setting.first.option.trestle', selected: false },
+      { id: 9, name: 'modal.canvas.setting.first.option.flow', selected: false },
+      { id: 10, name: 'modal.canvas.setting.first.option.total', selected: false },
+      { id: 11, name: 'modal.canvas.setting.first.option.corridor.dimension', selected: false },
     ],
     option2: [
-      { id: 1, name: 'ボーダーのみ', selected: false },
-      { id: 2, name: 'ラインハッチ', selected: false },
-      { id: 3, name: 'All painted', selected: false },
+      { id: 1, name: 'modal.canvas.setting.first.option.border', selected: false },
+      { id: 2, name: 'modal.canvas.setting.first.option.line', selected: false },
+      { id: 3, name: 'modal.canvas.setting.first.option.all', selected: false },
     ],
   },
   dangerouslyAllowMutability: true,