공지사항 페이지 추가 및 기본모듈 설정 버튼 수정

public/static/images/sub/community_clip.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Vector" d="M6.05566 9.94445L9.94455 6.05556" stroke="#45576F" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector_2" d="M11.7693 10.0296L13.799 8C15.4003 6.39865 15.4003 3.80236 13.799 2.20101C12.1976 0.599663 9.60135 0.599663 8 2.20101L5.97035 4.23066M10.0296 11.7693L8 13.799C6.39865 15.4003 3.80236 15.4003 2.20101 13.799C0.599663 12.1976 0.599663 9.60135 2.20101 8L4.23066 5.97035" stroke="#45576F" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+</svg>

public/static/images/sub/community_pop_close.svg

@@ -0,0 +1,5 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Vector" d="M8.99915 9L1 1M1.00085 9L9 1" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

public/static/images/sub/community_search.svg

@@ -0,0 +1,11 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="element" clip-path="url(#clip0_4262_4496)">
+<path id="&#237;&#140;&#168;&#236;&#138;&#164; 171" d="M17.879 17.9735L19.879 19.9735" stroke="#101010" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector" d="M9.98901 18.4039C14.6834 18.4039 18.489 14.5989 18.489 9.90519C18.489 5.21149 14.6834 1.40649 9.98901 1.40649C5.29459 1.40649 1.48901 5.21149 1.48901 9.90519C1.48901 14.5989 5.29459 18.4039 9.98901 18.4039Z" stroke="#101010" stroke-width="1.5"/>
+</g>
+<defs>
+<clipPath id="clip0_4262_4496">
+<rect width="21" height="21" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/app/community/FAQ/page.jsx

@@ -0,0 +1,5 @@
+export default function FAQPage(){
+    return(
+        <div></div>
+    )
+}

src/app/community/notice/page.jsx

@@ -0,0 +1,48 @@
+import Footer from "@/components/layout/Footer";
+import Header from "@/components/layout/Header";
+import Image from "next/image";
+import Link from "next/link";
+import '@/styles/contents.scss';
+import NoticeTable from "@/components/sub/community/notice/NoticeTable";
+import NoticeDetailPop from "@/components/sub/community/notice/NoticeDetailPop";
+
+export default function NoticePage(){
+    return(
+        <div className="wrap">
+            <Header/>
+            <div className="content">
+                <div className="sub-header">
+                    <div className="sub-header-inner">
+                        <ul className="sub-header-title-wrap">
+                            <li className='title-item'>
+                                <Link className='sub-header-title' href={'#'}>お知らせ</Link>
+                            </li>
+                        </ul>
+                        <ul className="sub-header-location">
+                            <li className="location-item">
+                                <span className="home">
+                                    <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
+                                </span>
+                            </li>
+                            <li className="location-item">
+                                <span>物品及び図面管理</span>
+                            </li>
+                            <li className="location-item">
+                                <span>新規物件登録</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="sub-content">
+                    <div className="sub-content-inner">
+                        <NoticeTable/>
+                    </div>
+                </div>
+            </div>
+            <Footer/>
+
+            {/* 공지사항 상세 */}
+            <NoticeDetailPop/>
+        </div>
+    )
+}

src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab01.jsx

@@ -56,8 +56,7 @@ export default function HexagonalRoofTab01({setTabNum}){
                 </div>
             </div>
             <div className="grid-btn-wrap">
-                <button className="btn-frame modal act mr5">保存</button>
-                <button className="btn-frame modal" onClick={() => setTabNum(2)}>Next</button>
+                <button className="btn-frame modal act" onClick={() => setTabNum(2)}>Next</button>
             </div>
         </>
     )

src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab02.jsx

@@ -61,8 +61,7 @@ export default function HexagonalRoofTab02({setTabNum}){
             </div>
             <div className="grid-btn-wrap">
                 <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button>
-                <button className="btn-frame modal act mr5">保存</button>
-                <button className="btn-frame modal" onClick={() => setTabNum(3)}>Next</button>
+                <button className="btn-frame modal act" onClick={() => setTabNum(3)}>Next</button>
             </div>
         </>
     )

src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab01.jsx

@@ -56,8 +56,7 @@ export default function RoofModuleOptionTab01({setTabNum}){
                 </div>
             </div>
             <div className="grid-btn-wrap">
-                <button className="btn-frame modal act mr5">保存</button>
-                <button className="btn-frame modal" onClick={() => setTabNum(2)}>Next</button>
+                <button className="btn-frame modal act" onClick={() => setTabNum(2)}>Next</button>
             </div>
         </>
     )

src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab02.jsx

@@ -166,8 +166,7 @@ export default function RoofModuleOptionTab02({setTabNum}){
             </div>
             <div className="grid-btn-wrap">
                 <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button>
-                <button className="btn-frame modal act mr5">保存</button>
-                <button className="btn-frame modal" onClick={() => setTabNum(3)}>Next</button>
+                <button className="btn-frame modal act" onClick={() => setTabNum(3)}>Next</button>
             </div>
         </>
     )

src/components/publishpage/PublishPage.jsx

@@ -146,7 +146,19 @@ export default function PublishPage() {
                 <td className="coding_stat_web"></td>
                 <td className="t-center">2024-10-11</td>
               </tr>
-              
+              <tr>
+                <td className="t-center" rowSpan={2}><strong>커뮤니티</strong></td>			
+                <td><strong className="title">공지사항</strong></td>
+                <td><Link href="/community/notice" target="_blank">NoticePage</Link></td>
+                <td className="coding_stat_web"></td>
+                <td className="t-center">2024-10-14</td>
+              </tr>
+              <tr>
+                <td><strong className="title">FAQ</strong></td>
+                <td><Link href="/community/FAQ" target="_blank">FAQPage</Link></td>
+                <td className="coding_stat_web"></td>
+                <td className="t-center">2024-10-14</td>
+              </tr>
             </tbody>
           </table>
         </div>

src/components/sub/community/notice/NoticeDetailPop.jsx

@@ -0,0 +1,27 @@
+export default function NoticeDetailPop(){
+    return(
+        <div className="modal-popup community">
+            <div className="modal-dialog">
+                <div className="modal-content">
+                    <div className="modal-header">
+                        <button className="modal-close">닫기</button>
+                    </div>
+                    <div className="modal-body">
+                        <div className="community_detail">
+                            <div className="community_detail-tit">ドキュメントダウンロードオプションの設定</div>
+                            <dl className="community_detail-file-wrap">
+                                <dt>添付ファイル一覧</dt>
+                                <dd><button className="down">ファイルネーミング.pdf</button></dd>
+                                <dd><button className="down">ファイルネーミング.png</button></dd>
+                                <dd><button className="down">ファイルネーミング.jpeg</button></dd>
+                            </dl>
+                            <div className="community_detail-inner">
+                                お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されます お知らせ内容 表示されますお知らせ内容 表示されます お知らせ内容 表示されます
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/sub/community/notice/NoticeTable.jsx

@@ -0,0 +1,135 @@
+import Pagination from "@/components/common/grid/Pagination";
+
+export default function NoticeTable(){
+    return(
+        <div className="sub-table-box">
+            <div className="community-search-warp">
+                <div className="community-search-box">
+                    <input type="text" className="community-input" />
+                    <button className="community-search-ico"></button>
+                </div>
+                <div className="community-search-keyword"><span>qpeak</span> について銃 <span>5</span> 提案 投稿が検索されました.</div>
+            </div>
+            <div className="table-box-title-wrap">
+                <div className="title-wrap">
+                    <h3>お知らせリスト</h3>
+                    <ul className="info-wrap">
+                        <li>全体 <span className="red">6</span></li>
+                    </ul>
+                </div>
+                <div className="left-unit-box">
+                    <div className="select-box" style={{width : '80px'}}>
+                        <select className="select-light black" name="" id="">
+                            <option>100</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div className="community-table">
+                <table>
+                    <colgroup>
+                        <col width={100}/>
+                        <col />
+                        <col width={200}/>
+                    </colgroup>
+                    <tbody>
+                        <tr>
+                            <td className="al-c">99</td>
+                            <td>
+                                <div className="text-frame">
+                                    <div className="text-overflow">Solar システム所有者変更の</div>
+                                    <span className="clip"></span>
+                                </div>
+                            </td>
+                            <td className="al-c">2024.07.18</td>
+                        </tr>
+                        <tr>
+                            <td className="al-c">98</td>
+                            <td>
+                                <div className="text-frame">
+                                    <div className="text-overflow">Solar システム所有者変更の</div>
+                                </div>
+                            </td>
+                            <td className="al-c">2024.07.18</td>
+                        </tr>
+                        <tr>
+                            <td className="al-c">97</td>
+                            <td>
+                                <div className="text-frame">
+                                    <div className="text-overflow">Solar システム所有者変更の</div>
+                                </div>
+                            </td>
+                            <td className="al-c">2024.07.18</td>
+                        </tr>
+                        <tr>
+                            <td className="al-c">96</td>
+                            <td>
+                                <div className="text-frame">
+                                    <div className="text-overflow">Solar システム所有者変更の</div>
+                                    <span className="clip"></span>
+                                </div>
+                            </td>
+                            <td className="al-c">2024.07.18</td>
+                        </tr>
+                        <tr>
+                            <td className="al-c">95</td>
+                            <td>
+                                <div className="text-frame">
+                                    <div className="text-overflow">Solar システム所有者変更の</div>
+                                </div>
+                            </td>
+                            <td className="al-c">2024.07.18</td>
+                        </tr>
+                        <tr>
+                            <td className="al-c">94</td>
+                            <td>
+                                <div className="text-frame">
+                                    <div className="text-overflow">Solar システム所有者変更の</div>
+                                </div>
+                            </td>
+                            <td className="al-c">2024.07.18</td>
+                        </tr>
+                        <tr>
+                            <td className="al-c">93</td>
+                            <td>
+                                <div className="text-frame">
+                                    <div className="text-overflow">Solar システム所有者変更の</div>
+                                    <span className="clip"></span>
+                                </div>
+                            </td>
+                            <td className="al-c">2024.07.18</td>
+                        </tr>
+                        <tr>
+                            <td className="al-c">92</td>
+                            <td>
+                                <div className="text-frame">
+                                    <div className="text-overflow">Solar システム所有者変更の</div>
+                                </div>
+                            </td>
+                            <td className="al-c">2024.07.18</td>
+                        </tr>
+                        <tr>
+                            <td className="al-c">91</td>
+                            <td>
+                                <div className="text-frame">
+                                    <div className="text-overflow">Solar システム所有者変更の</div>
+                                </div>
+                            </td>
+                            <td className="al-c">2024.07.18</td>
+                        </tr>
+                        <tr>
+                            <td className="al-c">90</td>
+                            <td>
+                                <div className="text-frame">
+                                    <div className="text-overflow">Solar システム所有者変更の</div>
+                                </div>
+                            </td>
+                            <td className="al-c">2024.07.18</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <Pagination/>
+        </div>
+    )
+}

src/styles/_contents.scss

@@ -1093,4 +1093,55 @@
             }
         }
     }
+}
+
+.community-search-warp{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px 0 30px 0;
+    border-bottom: 1px solid #E5E5E5;
+    margin-bottom: 24px;
+    .community-search-box{
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: 580px;
+        height: 45px;
+        padding: 0 45px 0 20px;
+        margin-bottom: 20px;
+        border-radius: 2px;
+        border: 1px solid #101010;
+        .community-input{
+            width: 100%;
+            height: 100%;
+            font-size: 13px;
+            font-weight: 400;
+            color: #101010;
+            &::placeholder{
+                color: #C8C8C8;
+            }
+        }
+        .community-search-ico{
+            position: absolute;
+            top: 50%;
+            right: 20px;
+            transform: translateY(-50%);
+            flex: none;
+            width: 21px;
+            height: 100%;
+            background: url(../../public/static/images/sub/community_search.svg)no-repeat center;
+            background-size: 21px 21px;
+            z-index: 3;
+        }
+    }
+    .community-search-keyword{
+        font-size: 13px;
+        font-weight: 400;
+        color: #45576F;
+        span{
+            font-weight: 600;
+            color: #F16A6A;
+        }
+    }
 }

src/styles/_submodal.scss

@@ -71,6 +71,22 @@
             }
         }
     }
+    &.community{
+        .modal-dialog{
+            .modal-content{
+                .modal-header{
+                    padding: 19px 24px;
+                    background-color: #fff;
+                    .modal-close{
+                        background: url(../../public/static/images/sub/community_pop_close.svg)no-repeat center;
+                    }
+                }
+                .modal-body{
+                    padding: 0 30px 30px;
+                }
+            }
+        }
+    }
 }
 
 .explane{
@@ -248,4 +264,42 @@
             background-image: url(../../public/static/images/main/password_visible.svg);
         }
     }
+}
+
+// 커뮤니티
+.community_detail{
+    .community_detail-tit{
+        font-size: 16px;
+        color: #101010;
+        font-weight: 600;
+        padding-bottom: 14px;
+        border-bottom: 2px solid #101010;
+    }
+    .community_detail-file-wrap{
+        padding: 24px 0;
+        border-bottom: 1px solid #E5E5E5;
+        dt{
+            font-size: 13px;
+            color: #101010;
+            font-weight: 500;
+            margin-bottom: 15px;
+        }
+        dd{
+            font-size: 12px;
+            font-weight: 400;
+            margin-bottom: 3px;
+            color: #344356;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
+    }
+    .community_detail-inner{
+        padding-top: 24px;
+        padding-bottom: 20px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #45576F;
+        line-height: 26px;
+    }
 }

src/styles/_table.scss

@@ -299,4 +299,52 @@ table{
             }
         }
     }
+}
+
+// 커뮤니티 테이블
+.community-table{
+    margin-bottom: 24px;
+    table{
+        table-layout: fixed;
+        border-collapse: collapse;
+        border-top: 2px solid #101010;
+        tbody{
+            td{
+                font-size: 13px;
+                font-weight: 400;
+                color: #45576F;
+                padding: 10.5px 10px;
+                border-bottom: 1px solid #ECF0F4;
+                vertical-align: middle;
+                .text-frame{
+                    display: flex;
+                    align-items: center;
+                    .text-overflow{
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 1;
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                    }
+                    .clip{
+                        flex: none;
+                        display: block;
+                        margin-left: 10px;
+                        width: 14px;
+                        height: 14px;
+                        background: url(../../public/static/images/sub/community_clip.svg)no-repeat center;
+                        background-size: cover;
+                    }
+                }
+            }
+            tr{
+                background-color: transparent;
+                transition: all .15s ease-in-out;
+                cursor: pointer;
+                &:hover{
+                    background: #F7F9FA;
+                }
+            }
+        }
+    }
 }

src/styles/contents.scss

@@ -2,4 +2,5 @@
 @import '_modal.scss';
 @import '_submodal.scss';
 @import '_table.scss';
-@import '_canvasside.scss';
+@import '_canvasside.scss';
+@import '_pagination.scss';

src/styles/grid.scss

@@ -1,2 +1 @@
 @import '_grid-detail.scss';
-@import '_pagination.scss';