canvas menu, header menu hover 기능 수정 및 추가

src/app/inputwrap/page.jsx

@@ -5,6 +5,9 @@ import Qselect from "@/components/common/select/Qselect";
 import '@/styles/_inputcommon.scss'
 
 export default function InputWrapPage (){
+    const SelectOption = [
+        {name: 'オンライン保証シ',}, {name: 'ステム'}
+    ]
     return(
         <div className="input-content">
             <div className="input-wrap">
@@ -18,7 +21,7 @@ export default function InputWrapPage (){
             <div className="input-wrap">
                 <h1>Select WRAP</h1>
                 <div className="form-select">
-                    <Qselect/>
+                    <Qselect title={'Q.ORDER'} option={SelectOption}/>
                 </div>
             </div>
             <div className="input-wrap">

src/app/main/page.jsx

@@ -0,0 +1,6 @@
+export default function MainPage(){
+    return(
+        <>
+        </>
+    )
+}

src/components/canvas/MenuDepth01.jsx

@@ -1,5 +1,9 @@
+'use client'
+
+import { ToggleonMouse } from "../header/Header"
+
 export default function MenuDepth01(){
-    return(
+    return( 
         <div className="canvas-depth2-inner">
             <ul className="canvas-depth2-list">
                 <li className="canvas-depth2-item active"><button>外壁線を描</button></li>
@@ -10,17 +14,26 @@ export default function MenuDepth01(){
                 <li className="canvas-depth2-item"><button>銅線移動</button></li>
                 <li className="canvas-depth2-item"><button>特殊コーナー形状</button></li>
             </ul>
-            <div className="canvas-depth2-btn-list">
+            <ul className="canvas-depth2-btn-list">
-                <div className="depth2-btn-box">
+                <li className="depth2-btn-box"
+                    onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')}
+                    onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}
+                >
                     <button>屋根面の割り当て</button>
-                </div>
+                </li>
-                <div className="depth2-btn-box">
+                <li className="depth2-btn-box"
+                    onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')}
+                    onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}
+                >
                     <button>屋根材の設定と変更</button>
-                </div>
+                </li>
-                <div className="depth2-btn-box">
+                <li className="depth2-btn-box"
+                    onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')}
+                    onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}
+                >
                     <button>屋根面全体削除</button>
-                </div>
+                </li>
-            </div>
+            </ul>
         </div>
     )
 }

src/components/header/Header.jsx

@@ -2,24 +2,25 @@
 import Link from "next/link";
 import Qselect from "../common/select/Qselect";
 
+export const ToggleonMouse = (e, act, target) => {
+    const listWrap = e.target.closest(target);
+    const ListItem = Array.from(listWrap.childNodes)
+    ListItem.forEach(el => {
+        if(act === 'add'){
+            el.classList.add('mouse');
+        }else{
+            el.classList.remove('mouse');
+        }
+    })
+    if(act === 'add'){
+        e.target.parentElement.classList.remove('mouse')
+    }
+}
+
 export default function Header() {
     const SelectOption = [
         {name: 'オンライン保証シ',}, {name: 'ステム'}
     ]
-    const ToggleonMouse = (e, act) => {
-        const listWrap = e.target.parentElement.parentElement;
-        const ListItem = Array.from(listWrap.childNodes)
-        ListItem.forEach(el => {
-            if(act === 'add'){
-                el.classList.add('mouse');
-            }else{
-                el.classList.remove('mouse');
-            }
-        })
-        if(act === 'add'){
-            e.target.parentElement.classList.remove('mouse')
-        }
-    }
     return(
         <header>
             <div className="header-inner">
@@ -31,32 +32,47 @@ export default function Header() {
                         <ul className="nav-list ">
                             <li 
                             className="nav-item " 
-                            onMouseEnter={(e) => ToggleonMouse(e, 'add')} 
+                            onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')} 
-                            onMouseLeave={(e) => ToggleonMouse(e, 'remove')}
+                            onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
                             >
                                 <Link href={'#'}>ホームへ</Link>
                             </li>
                             <li 
                             className="nav-item" 
-                            onMouseEnter={(e) => ToggleonMouse(e, 'add')} 
+                            onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')} 
-                            onMouseLeave={(e) => ToggleonMouse(e, 'remove')}
+                            onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
                             >
                                 <button>物品及び図面管理</button>
                                 <ul className="nav-depth2">
-                                    <li className="nav-depth2-item"><Link href={'#'}>新規物件登録</Link></li>
+                                    <li className="nav-depth2-item"
-                                    <li className="nav-depth2-item"><Link href={'#'}>モノ/図面管理</Link></li>
+                                        onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')} 
+                                        onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
+                                    ><Link href={'#'}>新規物件登録</Link></li>
+                                    <li className="nav-depth2-item"
+                                        onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')} 
+                                        onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
+                                    ><Link href={'#'}>モノ/図面管理</Link></li>
                                 </ul>
                             </li>
                             <li 
                             className="nav-item" 
-                            onMouseEnter={(e) => ToggleonMouse(e, 'add')} 
+                            onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')} 
-                            onMouseLeave={(e) => ToggleonMouse(e, 'remove')}
+                            onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
                             >
                                 <button>コミュニティ</button>
                                 <ul className="nav-depth2">
-                                    <li className="nav-depth2-item"><Link href={'#'}>お知らせ</Link></li>
+                                    <li className="nav-depth2-item"
-                                    <li className="nav-depth2-item"><Link href={'#'}>FAQ</Link></li>
+                                        onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')} 
-                                    <li className="nav-depth2-item"><Link href={'#'}>素材のダウンロード</Link></li>
+                                        onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
+                                    ><Link href={'#'}>お知らせ</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></li>
+                                    <li className="nav-depth2-item"
+                                        onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')} 
+                                        onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
+                                    ><Link href={'#'}>素材のダウンロード</Link></li>
                                 </ul>
                             </li>
                         </ul>

src/components/publishpage/PublishPage.jsx

@@ -81,7 +81,7 @@ export default function PublishPage() {
                 <td><strong className="title"></strong></td>
                 <td><Link href="/canvas" target="_blank">CanvasPage</Link></td>
                 <td className="coding_stat_web"></td>
-                <td className="t-center">2024-09-05</td>
+                <td className="t-center">2024-09-06</td>
               </tr> 
             </tbody>
           </table>

src/styles/_contents.scss

@@ -199,6 +199,7 @@
                     align-items: center;
                     margin-right: 34px;
                     height: 100%;
+                    transition: all .17s ease-in-out;
                     button{
                         position: relative;
                         font-size: 12px;
@@ -220,6 +221,9 @@
                     &:last-child{
                         margin-right: 0;
                     }
+                    &.mouse{
+                        opacity: 0.55;
+                    }
                 }
             }
         }

src/styles/_inputcommon.scss

@@ -11,6 +11,12 @@
                 margin-right: 10px;
             }
         }
+        .form-select{
+            width: 168px;
+            > div{
+                width: 100%;
+            }
+        }
         .form-datepicker{
             div{
                 margin-bottom: 10px;

src/styles/_layout.scss

@@ -96,6 +96,7 @@ header{
                             transition: all .17s ease-in-out;
                             .nav-depth2-item{
                                 margin-bottom: 10px;
+                                transition: all .17s ease-in-out;
                                 a{
                                     font-size: 13px;
                                     font-weight: normal;
@@ -104,6 +105,9 @@ header{
                                 &:last-child{
                                     margin-bottom: 0;
                                 }
+                                &.mouse{
+                                    opacity: 0.55;
+                                }
                             }
                             &::before{
                                 content: '';

src/styles/_reset.scss

@@ -171,30 +171,43 @@ button{
     height: 30px;
     line-height: 30px;
     padding: 0 10px;
-    font-size: 13px;
     background-color: #373737;
     border: 1px solid #3F3F3F;
     border-radius: 2px;
     border-top-left-radius: 2px;
     color: #fff;
     cursor: pointer;
+    p{
+        font-size: 13px;
+        color: #fff;
+        height: 100%;
+    }
     .select-item-wrap{
         position: absolute;
         top: 100%;
         left: -1px;
         clip-path:inset(0 0 100% 0);
         width: calc(100% + 2px);
-        padding: 12px 20px;
+        padding: 8px 0;
         background-color: #373737;
         border: 1px solid #3F3F3F;
         border-radius: 2px;
         transition: all 0.17s ease-in-out;
         visibility: hidden;
         .select-item{
-            font-size: 12px;
+            display: flex;
-            color: #fff;
+            align-items: center;
+            padding: 8px 20px;
             line-height: 1.4;
-            padding: 8px 0;
+            transition: all .17s ease-in-out;
+            button{
+                font-size: 12px;
+                color: #fff;
+                line-height: 1.4;
+            }
+            &:hover{
+                background-color: #2C2C2C;
+            }
         }
     }
     &::after{

src/styles/publishpage.scss

@@ -12,7 +12,7 @@ table { margin-bottom: 150px; border-collapse: collapse; border-spacing: 0; }
 .contents h3{font-size: 16px; margin: 10px 0;}
 .red { color: #ff0000;}
 .blues { color: #001aff;}
-.guide_table tbody td a{color: #001aff; text-decoration: underline;}
+.guide_table tbody td a{color: #001aff; text-decoration: underline; font-size: 12px;}
 .design_summary_web,
 .design_summary_tab,
 .design_summary_mob { display: inline-block; color: rosybrown; font-weight: bold; font-size: 12px; margin-right: 30px; }
@@ -33,7 +33,7 @@ table { margin-bottom: 150px; border-collapse: collapse; border-spacing: 0; }
 .tab_li > li { float: left; width: 90px; height: 30px; line-height: 30px; text-align: center; background: #424242; color: #fff; margin-right: 5px; margin-bottom: 5px; }
 .tab_li > li > a { color: #fff; text-decoration: none; display: block; }
 .tab_li > li.on { font-weight: bold; text-decoration: underline; font-size: 16px; }
-td strong {font-size:14px;font-weight:600; color: rgb(0, 0, 0); }
+td strong {font-size:12px;font-weight:600; color: rgb(0, 0, 0); }
 td strong.title { color: #000; }
 .auto-style1 { height: 20px; }
 .auto-style2 { background: #ddffca; height: 20px; }