- Canvas 메뉴 수정

src/components/floor-plan/CanvasMenu.jsx

@@ -1,5 +1,5 @@
 'use client'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import MenuDepth01 from './MenuDepth01'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMessage } from '@/hooks/useMessage'
@@ -8,14 +8,21 @@ export default function CanvasMenu(props) {
   const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props
   const [menuNumber, setMenuNumber] = useState(null)
   const [vertical, setVertical] = useState(true)
+  const [type, setType] = useState('')
   const { getMessage } = useMessage()
   const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
   const onClickNav = (number) => {
     setMenuNumber(number)
+    if (number === 2) setType('outline')
+    if (number === 3) setType('surface')
+    if (number === 4) setType('module')
   }
   const menuProps = {
     setShowOutlineModal,
+    type,
   }
+  useEffect(() => {}, [menuNumber, type])
+
   return (
     <div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
       <div className="canvas-menu-inner">
@@ -42,7 +49,7 @@ export default function CanvasMenu(props) {
           >
             <button>
               <span className="menu-icon con02"></span>
-              {getMessage('plan.menu.root.cover')}
+              {getMessage('plan.menu.roof.cover')}
             </button>
           </li>
           <li className={`canvas-menu-item ${menuNumber === 3 ? 'active' : ''}`} onClick={() => onClickNav(3)}>
@@ -143,8 +150,8 @@ export default function CanvasMenu(props) {
       </div>
       <div className={`canvas-depth2-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
         {menuNumber === 2 && <MenuDepth01 {...menuProps} />}
-        {menuNumber === 3 && <MenuDepth01 />}
-        {menuNumber === 4 && <MenuDepth01 />}
+        {menuNumber === 3 && <MenuDepth01 {...menuProps} />}
+        {menuNumber === 4 && <MenuDepth01 {...menuProps} />}
       </div>
     </div>
   )

src/components/floor-plan/MenuDepth01.jsx

@@ -5,7 +5,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useState } from 'react'
 
 export default function MenuDepth01(props) {
-  const { setShowOutlineModal } = props
+  const { setShowOutlineModal, type } = props
   const { getMessage } = useMessage()
   const [activeMenu, setActiveMenu] = useState(0)
   const onClickMenu = (menuNum) => {
@@ -23,6 +23,27 @@ export default function MenuDepth01(props) {
     { id: 6, name: '特殊コーナー形状' },
   ]
 
+  const menuInfo = {
+    outline: [
+      // 지붕덮개
+      { id: 0, name: 'plan.menu.roof.cover.outline.drawing' },
+      { id: 1, name: 'plan.menu.roof.cover.roof.shape.setting' },
+      { id: 2, name: 'plan.menu.roof.cover.roof.shape.edit' },
+      { id: 3, name: 'plan.menu.roof.cover.auxiliary.line.drawing' },
+    ],
+    surface: [
+      // 배치면
+      { id: 0, name: 'plan.menu.placement.surface.drawing' },
+      { id: 1, name: 'plan.menu.placement.surface.surface' },
+      { id: 2, name: 'plan.menu.placement.surface.object' },
+    ],
+    module: [
+      // 모듈, 회로 구성
+      { id: 0, name: 'plan.menu.module.circuit.setting.default' },
+      { id: 1, name: 'plan.menu.module.circuit.setting.circuit.trestle.setting' },
+    ],
+  }
+
   useEffect(() => {
     menus.forEach((menu) => {
       menu.isActive = menu.id === activeMenu
@@ -31,10 +52,10 @@ export default function MenuDepth01(props) {
   return (
     <div className="canvas-depth2-inner">
       <ul className="canvas-depth2-list">
-        {menus.map((menu) => {
+        {menuInfo[type].map((menu) => {
           return (
             <li key={menu.id} className={`canvas-depth2-item ${menu.id === activeMenu ? 'active' : ''}`}>
-              <button onClick={() => onClickMenu(menu.id)}>{menu.name}</button>
+              <button onClick={() => onClickMenu(menu.id)}>{getMessage(menu.name)}</button>
             </li>
           )
         })}

src/components/header/Header.jsx

@@ -3,6 +3,8 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useMessage } from '@/hooks/useMessage'
 import QSelectBox from '@/components/common/select/QSelectBox'
+import React from 'react'
+import { logout } from '@/lib/authActions'
 
 export const ToggleonMouse = (e, act, target) => {
   const listWrap = e.target.closest(target)
@@ -21,15 +23,74 @@ export const ToggleonMouse = (e, act, target) => {
 
 export default function Header(props) {
   const { loginedUserNm } = props
-  // console.log('loginedUserNm:', loginedUserNm)
   const { getMessage } = useMessage()
   const pathName = usePathname()
+
   if (pathName.includes('login') || pathName.includes('join')) {
     return null
   }
   const SelectOption = [{ name: 'オンライン保証シ' }, { name: 'ステム' }]
   const onLogout = () => {
-    // logout()
+    logout()
+  }
+  const menus = [
+    { name: 'header.menus.home', url: '/', children: [] },
+    {
+      name: 'header.menus.management',
+      url: '',
+      children: [
+        { name: 'header.menus.management.stuff', url: '/management/stuff', children: [] },
+        { name: 'header.menus.management.plan', url: '/floor-plan', children: [] },
+      ],
+    },
+    {
+      name: 'header.menus.community',
+      url: '',
+      children: [
+        { name: 'header.menus.community.notice', url: '/community/notice', children: [] },
+        { name: 'header.menus.community.faq', url: '/community/faq', children: [] },
+        { name: 'header.menus.community.archive', url: '/community/archive', children: [] },
+      ],
+    },
+  ]
+
+  const getMenuTemplate = (menus) => {
+    return menus.map((menu) => {
+      return (
+        <li
+          key={`${menu.name}-mn1`}
+          className={'nav-item'}
+          onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
+          onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
+        >
+          {menu.children.length === 0 ? (
+            <Link key={`${menu.name}-link`} href={menu.url}>
+              {getMessage(menu.name)}
+            </Link>
+          ) : (
+            <React.Fragment key={`${menu.name}-frag`}>
+              <button>{getMessage(menu.name)}</button>
+              <ul className="nav-depth2">
+                {menu.children.map((m) => {
+                  return (
+                    <li
+                      key={`${m.name}-mn2`}
+                      className={'nav-depth2-item'}
+                      onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
+                      onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
+                    >
+                      <Link key={`${m.name}-link`} href={m.url}>
+                        {getMessage(m.name)}
+                      </Link>
+                    </li>
+                  )
+                })}
+              </ul>
+            </React.Fragment>
+          )}
+        </li>
+      )
+    })
   }
 
   return (
@@ -40,68 +101,7 @@ export default function Header(props) {
             <Link href={'/'}></Link>
           </h1>
           <nav>
-            <ul className="nav-list ">
-              <li
-                className="nav-item "
-                onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
-                onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
-              >
-                <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>{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={'#'}>{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={'/floor-plan'}>{getMessage('header.menus.management.plan')}</Link>
-                  </li>
-                </ul>
-              </li>
-              <li
-                className="nav-item"
-                onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
-                onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
-              >
-                <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={'/community/notice'}>{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={'/community/faq'}>{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={'/community/archive'}>{getMessage('header.menus.community.archive')}</Link>
-                  </li>
-                </ul>
-              </li>
-            </ul>
+            <ul className="nav-list ">{getMenuTemplate(menus)}</ul>
           </nav>
         </div>
         <div className="header-left">

src/locales/ja.json

@@ -15,8 +15,12 @@
   "header.stem": "ステム",
   "plan.menu.plan.drawing": "도면작성",
   "plan.menu.placement.surface.initial.setting": "配置面 初期設定",
-  "plan.menu.root.cover": "지붕덮개",
-  "plan.menu.root.cover.outline.drawing": "外壁線を描",
+  "plan.menu.roof.cover": "지붕덮개",
+  "plan.menu.roof.cover.outline.drawing": "外壁線を描",
+  "plan.menu.roof.cover.roof.shape.setting": "屋根形状設定",
+  "plan.menu.roof.cover.roof.shape.edit": "지붕형상 편집",
+  "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": "直角",
@@ -30,9 +34,9 @@
   "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": "補助線を描",
+  "plan.menu.roof.cover.roof.setting": "屋根形状設定",
+  "plan.menu.roof.cover.roof.edit": "지붕형상 편집",
+  "plan.menu.roof.cover.sub.line": "補助線を描",
   "plan.menu.placement.surface": "配置面",
   "plan.menu.placement.surface.drawing": "배치면 그리기",
   "plan.menu.placement.surface.surface": "면형상 배치",

src/locales/ko.json

@@ -15,9 +15,12 @@
   "header.stem": "Stem",
   "plan.menu.plan.drawing": "도면작성",
   "plan.menu.placement.surface.initial.setting": "배치면 초기 설정",
-  "plan.menu.root.cover": "지붕덮개",
-  "plan.menu.root.cover.outline.drawing": "외벽선 그리기",
-  "plan.menu.root.cover.auxiliary.line.drawing": "보조선 그리기",
+  "plan.menu.roof.cover": "지붕덮개",
+  "plan.menu.roof.cover.outline.drawing": "외벽선 그리기",
+  "plan.menu.roof.cover.roof.shape.setting": "지붕형상 설정",
+  "plan.menu.roof.cover.roof.shape.edit": "지붕형상 편집",
+  "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": "직각",
@@ -31,9 +34,6 @@
   "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": "보조선 그리기",
   "plan.menu.placement.surface": "배치면",
   "plan.menu.placement.surface.drawing": "배치면 그리기",
   "plan.menu.placement.surface.surface": "면형상 배치",