qcast3/qcast-pub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

내정보 조회 팝업 추가

Browse Source
This commit is contained in:
김창수 2024-10-11 17:43:23 +09:00
parent ac88179ac9
commit fc17388186
6 changed files with 187 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/myprofile/page.jsx Normal file
View File

@ -0,0 +1,18 @@
import Footer from "@/components/layout/Footer";
import Header from "@/components/layout/Header";
import MyProfilePop from "@/components/sub/myprofile/MyProfilePop";
import '@/styles/contents.scss'
export default function MyProfilePage(){
return(
<div className="wrap">
<Header/>
<div className="content">
</div>
<Footer/>
{/* 내정보 조회 팝업 */}
<MyProfilePop/>
</div>
)
}

2
src/components/canvas/estimatepop/FileDownOptionPop.jsx
View File

@ -10,7 +10,7 @@ export default function FileDownOptionPop(){
<div className="modal-body">
<div className="modal-body-inner">
<div className="explane">ダウンロードする文書のオプションを選択したら、 [文書のダウンロード]ボタンをクリックします。</div>
<div className="common-table bt-able">
<div className="common-table">
<table>
<colgroup>
<col style={{width: '260px'}}/>

9
src/components/publishpage/PublishPage.jsx
View File

@ -98,6 +98,15 @@ export default function PublishPage() {
</td>
<td className="t-center">2024-10-10</td>
</tr>
<tr>
<td className="t-center"><strong>MyProFilePage</strong></td>
<td><strong className="title">내정보 조회 팝업</strong></td>
<td><Link href="/myprofile" target="_blank">MyProFile</Link></td>
<td className="coding_stat_web">
<span></span>
</td>
<td className="t-center">2024-10-11</td>
</tr>
<tr>
<td className="t-center" rowSpan={3}><strong>LoginPage</strong></td>
<td><strong className="title">로그인</strong></td>

117
src/components/sub/myprofile/MyProfilePop.jsx Normal file
View File

@ -0,0 +1,117 @@
'use client'
import { useState } from "react"
export default function MyProfilePop(){
const [blink, setBlink] = useState(false);
return(
<div className="modal-popup">
<div className="modal-dialog ">
<div className="modal-content">
<div className="modal-header">
<h1 className="title">My profile </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="modal-body-inner">
<div className="common-table">
<table>
<colgroup>
<col style={{width: '170px'}}/>
<col />
</colgroup>
<tbody>
<tr>
<th>ユーザーID</th>
<td>
<div className="input-wrap">
<input type="text" className="input-light" defaultValue='nakazawaESS' readOnly/>
</div>
</td>
</tr>
<tr>
<th>担当者名ふりがな</th>
<td>
<div className="input-wrap">
<input type="text" className="input-light" defaultValue='セキヤミツヒロ' readOnly/>
</div>
</td>
</tr>
<tr>
<th>担当者名</th>
<td>
<div className="input-wrap">
<input type="text" className="input-light" defaultValue='関谷充弘' readOnly/>
</div>
</td>
</tr>
<tr>
<th>パスワード</th>
<td>
<div className="form-flex-wrap">
<div className="password-input mr10">
<input type={`${blink ? 'text':'password'}`} />
<button className={`blink ${blink ? 'on':''}`} onClick={() => setBlink(!blink)}></button>
</div>
<span className="mr10">※半角10文字以内</span>
<button className="btn-origin grey mr5">パスワード変更</button>
</div>
</td>
</tr>
<tr>
<th>変更パスワードの入力 <span className="red">*</span></th>
<td>
<div className="form-flex-wrap">
<div className="input-wrap mr10" style={{flex: 1}}>
<input type="password" className="input-light" />
</div>
<button className="btn-origin grey mr5">変更</button>
<button className="btn-origin white ">変更しない</button>
</div>
</td>
</tr>
<tr>
<th>部署名</th>
<td>
<div className="input-wrap">
<input type="text" className="input-light" defaultValue='エコ事業部' readOnly/>
</div>
</td>
</tr>
<tr>
<th>電話番号</th>
<td>
<div className="input-wrap">
<input type="text" className="input-light" defaultValue='07-0000-0000' readOnly/>
</div>
</td>
</tr>
<tr>
<th>FAX番号</th>
<td>
<div className="input-wrap">
<input type="text" className="input-light" defaultValue='07-0000-0000' readOnly/>
</div>
</td>
</tr>
<tr>
<th>メールアドレス</th>
<td>
<div className="input-wrap">
<input type="text" className="input-light" defaultValue='test.test@nakazawa-kenpan.co.jp' readOnly/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="footer-btn-wrap">
<button className="btn-origin navy ">確認</button>
</div>
</div>
</div>
</div>
</div>
)
}

9
src/styles/_reset.scss
View File

@ -308,6 +308,14 @@ button{
background-color: #607F9A;
}
}
&.white{
border: 1px solid #94A0AD;
background-color: #fff;
color: #94A0AD;
&:hover{
background-color: #fff;
}
}
}
// select
@ -437,6 +445,7 @@ button{
margin-bottom: 10px;
}
}
input[type=password],
input[type=number],
input[type=text]{
&.input-origin{

34
src/styles/_submodal.scss
View File

@ -216,4 +216,36 @@
}
}
// 문서 다운로드 옵션
// 내정보 조회 팝업
.password-input{
flex: 1;
display: flex;
align-items: center;
height: 30px;
border: 1px solid #EEE;
padding: 0 10px;
border-radius: 2px;
input{
width: 100%;
height: 100%;
font-size: 13px;
color: #45576F;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
&::placeholder{
color: #D1D7E0;
}
}
.blink{
flex: none;
width: 19px;
height: 100%;
background-image: url(../../public/static/images/main/password_hidden.svg);
background-size: 19px 13px;
background-repeat: no-repeat;
background-position: center;
&.on{
background-image: url(../../public/static/images/main/password_visible.svg);
}
}
}