내정보 조회 팝업 추가
This commit is contained in:
parent
ac88179ac9
commit
fc17388186
18
src/app/myprofile/page.jsx
Normal file
18
src/app/myprofile/page.jsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -10,7 +10,7 @@ export default function FileDownOptionPop(){
|
|||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
<div className="modal-body-inner">
|
<div className="modal-body-inner">
|
||||||
<div className="explane">ダウンロードする文書のオプションを選択したら、 [文書のダウンロード]ボタンをクリックします。</div>
|
<div className="explane">ダウンロードする文書のオプションを選択したら、 [文書のダウンロード]ボタンをクリックします。</div>
|
||||||
<div className="common-table bt-able">
|
<div className="common-table">
|
||||||
<table>
|
<table>
|
||||||
<colgroup>
|
<colgroup>
|
||||||
<col style={{width: '260px'}}/>
|
<col style={{width: '260px'}}/>
|
||||||
|
|||||||
@ -98,6 +98,15 @@ export default function PublishPage() {
|
|||||||
</td>
|
</td>
|
||||||
<td className="t-center">2024-10-10</td>
|
<td className="t-center">2024-10-10</td>
|
||||||
</tr>
|
</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>
|
<tr>
|
||||||
<td className="t-center" rowSpan={3}><strong>LoginPage</strong></td>
|
<td className="t-center" rowSpan={3}><strong>LoginPage</strong></td>
|
||||||
<td><strong className="title">로그인</strong></td>
|
<td><strong className="title">로그인</strong></td>
|
||||||
|
|||||||
117
src/components/sub/myprofile/MyProfilePop.jsx
Normal file
117
src/components/sub/myprofile/MyProfilePop.jsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -308,6 +308,14 @@ button{
|
|||||||
background-color: #607F9A;
|
background-color: #607F9A;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&.white{
|
||||||
|
border: 1px solid #94A0AD;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #94A0AD;
|
||||||
|
&:hover{
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// select
|
// select
|
||||||
@ -437,6 +445,7 @@ button{
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
input[type=password],
|
||||||
input[type=number],
|
input[type=number],
|
||||||
input[type=text]{
|
input[type=text]{
|
||||||
&.input-origin{
|
&.input-origin{
|
||||||
|
|||||||
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user