비밀번호 변경 팝업 추가

src/app/canvas/page.jsx

@@ -104,7 +104,7 @@ export default function CanvasPage() {
                     {/* <AuxiliarylineOption/> */}
 
                     {/* 처마∙케라바 변경 */}
-                    {/* <EvaseKerabaOption/> */}
+                    <EvaseKerabaOption/>
 
                     {/* 동선이동∙형 올림 내림 */}
                     {/* <MovingUpDonw/> */}

src/app/main/page.jsx

@@ -1,7 +1,9 @@
 import Footer from "@/components/layout/Footer";
 import Header from "@/components/layout/Header";
+import ChangePasswordPop from "@/components/main/ChangePasswordPop";
 import MainContents from "@/components/main/MainContents";
 import '@/styles/style.scss'
+import '@/styles/contents.scss'
 
 export default function MainPage() {
     return(
@@ -37,6 +39,9 @@ export default function MainPage() {
                 </div>
             </div>
             <Footer/>
+
+            {/* 비밀번호 변경팝업 */}
+            <ChangePasswordPop/>
         </div>
     )
 }

src/components/main/ChangePasswordPop.jsx

@@ -0,0 +1,57 @@
+
+export default function ChangePasswordPop(){
+    return(
+        <div className="modal-popup">
+            <div className="modal-dialog">
+                <div className="modal-content">
+                    <div className="modal-header">
+                        <h1 className="title">パスワード変更 </h1>
+                        <button className="modal-close">닫기</button>
+                    </div>
+                    <div className="modal-body">
+                        <div className="modal-body-inner">
+                            <div className="change-password-box">
+                                <div className="form-table">
+                                    <div className="table-item">
+                                        <div className="table-item-th">
+                                            <div className="change-password-tit">
+                                                <div className="tit-b">新しいパスワードを入力</div>
+                                                <div className="tit-s">半角10文字以内 </div>
+                                            </div>
+                                        </div>
+                                        <div className="table-item-td">
+                                            <div className="change-password-input">
+                                                <input type="text" className="change-password"/>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="table-item">
+                                        <div className="table-item-th">
+                                            <div className="change-password-tit">
+                                                <div className="tit-b">新規パスワード再入力</div>
+                                                <div className="tit-s">半角10文字以内 </div>
+                                            </div>
+                                        </div>
+                                        <div className="table-item-td">
+                                            <div className="change-password-input">
+                                                <input type="text" className="change-password"/>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="change-password-guide">
+                                <span>初期化されたパスワードでログインした場合、パスワードを変更しなければサイト利用が可能です。</span>
+                                <span>パスワードを変更しない場合は、ログイン画面に進みます。</span>
+                            </div>
+                        </div>
+                        <div className="footer-btn-wrap">
+                            <button className="btn-origin navy mr5">変更</button>
+                            <button className="btn-origin grey">変更しない</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

src/styles/_reset.scss

@@ -289,7 +289,7 @@ button{
 .btn-origin{
     display: inline-block;
     height: 30px;
-    padding: 0 14px;
+    padding: 0 10px;
     border-radius: 2px;
     background-color: #101010;
     color: #fff;
@@ -299,7 +299,7 @@ button{
     &.navy{
         background-color: #304961;
         &:hover{
-            background-color: #1083E3;
+            background-color: #233546;
         }
     }
     &.grey{

src/styles/_submodal.scss

@@ -0,0 +1,147 @@
+.modal-popup{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width:100%;
+    height:100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background:rgba(0,0,0,.75);
+    z-index:110000;
+    .modal-dialog {
+        position: relative;
+        display: flex;
+        align-items: center;
+        min-height: calc(100% - (1.5rem * 2));
+        width: 680px;
+        z-index:200000;
+        margin: 1.5rem auto;
+        pointer-events: none;
+        .modal-content{
+            flex:1;
+            position: relative;
+            background-clip: padding-box;
+            background-color: transparent;
+            outline: 0 none;
+            pointer-events: auto;
+            border-radius: 4px;
+            .modal-header{
+                display: flex;
+                align-items: center;
+                padding: 10px 24px;
+                background-color: #364864;
+                border-radius: 4px 4px 0px 0px;
+                // overflow: hidden;
+                h1.title{
+                    font-size: 13px;
+                    color: $pop-color;
+                    font-weight: 700;
+                }
+                .modal-close{
+                    margin-left: auto;
+                    color: transparent;
+                    font-size: 0;
+                    width: 10px;
+                    height: 10px;
+                    background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
+                }
+            }
+            .modal-body{
+                padding: 30px;
+                background-color: #fff;
+                border-radius: 0px 0px 4px 4px;
+                .modal-body-inner{
+                    margin-bottom: 20px;
+                    &.border{
+                        padding-bottom: 20px;
+                        border-bottom: 1px solid #ECF0F4;
+                    }
+                }
+                .footer-btn-wrap{
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-end;
+                }
+            }
+        }
+    }
+}
+
+// modal-contents
+
+//  비밀번호 변경
+.change-password-guide{
+
+    span{
+        display: block;
+        margin-bottom: 5px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #101010;
+        &:last-child{
+            margin-bottom: 0;
+        }
+    }
+}
+
+.change-password-box{
+    padding: 30px;
+    border-radius: 4px;
+    background: #F4F4F7;
+    margin-bottom: 20px;
+    .change-password-tit{
+        .tit-b{
+            font-size: 13px;
+            font-weight: 500;
+            color: #344356;
+        }
+        .tit-s{
+            font-size: 12px;
+            font-weight: 400;
+            color: #898989;
+        }
+    }
+    .change-password-input{
+        width: 100%;
+        .change-password{
+            width: 100%;
+            height: 45px;
+            border-radius: 4px;
+            border: 1px solid #E9E9E9;
+            background-color: #fff;
+            padding: 0 10px;
+            font-size: 12px;
+            color: #364864;
+            font-family: 'Noto Sans JP', sans-serif;
+            &::placeholder{
+                font-size: 12px;
+            }
+        }
+    }
+    .table-item-th{
+        width: 145px;
+    }
+}
+.form-table{
+    display: table;
+    table-layout: auto;
+    width: 100%;
+    .table-item{
+        display: table-row;
+        .table-item-th,
+        .table-item-td{
+            display: table-cell;
+            vertical-align: middle;
+            padding-bottom: 10px;
+        }
+        &:last-child{
+            .table-item-th,
+            .table-item-td{
+                padding-bottom: 0;
+            }
+        }
+        .table-item-td{
+            padding-left: 10px;
+        }
+    }
+}

src/styles/contents.scss

@@ -1,4 +1,5 @@
 @import '_contents.scss';
 @import '_modal.scss';
+@import '_submodal.scss';
 @import '_table.scss';
 @import '_canvasside.scss';