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

비밀번호 변경 페이지 추가

Browse Source
This commit is contained in:
김창수 2025-04-30 14:51:13 +09:00
parent 73f7f842a5
commit 2ab2b9faf6
6 changed files with 120 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/inputcommon/page.tsx
View File

@ -32,7 +32,11 @@ export default function InputCommonPage() {
<button className="login-icon"><i className="del-icon"></i></button>
</div>
<div className="login-input pw">
<input type="text" className="login-frame" placeholder="Input Frame PW"/>
<input type="password" className="login-frame" placeholder="Input Frame PW"/>
<button className="login-icon act"><i className="show-icon"></i></button>
</div>
<div className="login-input pw change">
<input type="password" className="login-frame" placeholder="Input Frame PW"/>
<button className="login-icon act"><i className="show-icon"></i></button>
</div>
</div>

24
src/app/pwchange/page.tsx Normal file
View File

@ -0,0 +1,24 @@
import Footer from "@/components/layouts/Footer";
import Header from "@/components/layouts/Header";
import PwChangeForm from "@/components/pwchange/PwChangeForm";
export default function PwChangePage(){
return(
<div className="wrap">
<Header name={"パスワードリセット"} backBtn={true}/>
<div className="container">
<div className="sale-contents">
<div className="border-frame">
<div className="pw-guide">
<div className="pw-guide-tit">パスワードをリセットする</div>
<div className="pw-guide-txt">新しいパスワードを入力してください.</div>
</div>
</div>
<PwChangeForm/>
</div>
</div>
<Footer/>
<button className="top-btn"></button>
</div>
)
}

14
src/components/PublishList/PublishList.tsx
View File

@ -14,7 +14,7 @@ export default function PublishList (){
<div className="p-guide-content">
<p>※ className은 케밥 케이스 사용 <span>ex) "sample-class"</span></p>
<p>※ img네이밍은 "_"로 사용, 번호 사용시 01, 02 와 같이 2자리 숫자 사용 <span>ex) "img_sample01"</span></p>
<p>※ button, select, checkbox, radio... 등 기본 설정은 <span>InputCommon.jsx</span>에 정의된 내용만 사용</p>
<p>※ button, select, checkbox, radio... 등 기본 설정은 <span>InputCommon.jsx</span>에 정의된 내용만 사용 (icon버튼 제외)</p>
<p>※ scss파일 생성시 "_"를 앞에 붙힌 후 생성, 또한 해당 카테고리에 적합한 폴더에 생성</p>
<div className='p-guide-inputcommon'>
<h3>기본 SetUp Input 모음</h3>
@ -176,6 +176,18 @@ export default function PublishList (){
</td>
<td className='c red'>2025/04/30</td>
</tr>
<tr>
<td>비밀번호 변경</td>
<td>비밀번호 변경 페이지</td>
<td>
<Link href={'pwchange'}>PwChangePage.tsx</Link>
</td>
<td className='c'>
</td>
<td className='c'>
</td>
<td className='c red'>2025/04/30</td>
</tr>
</tbody>
</table>
</div>

42
src/components/pwchange/PwChangeForm.tsx Normal file
View File

@ -0,0 +1,42 @@
'use client'
import { useState } from "react";
export default function PwChangeForm(){
const [pwShow01, setPwShow01] = useState(false); //비밀번호 확인 보이기 숨기기
const [pwShow02, setPwShow02] = useState(false); //비밀번호 재확인 보이기 숨기기
return(
<div className="border-frame">
<div className="data-form-wrap">
<div className="data-input-form-bx">
<div className="data-input-form-tit">新規パスワード再入力 <i className="import">*</i></div>
<div className="data-input">
<div className="login-input pw change">
<input type={`${pwShow01 ? 'text': 'password'}`} className="login-frame" placeholder="●●●●"/>
<button className={`login-icon ${pwShow01 ? 'act' : ''}`} onClick={() => setPwShow01(!pwShow01)}><i className="show-icon"></i></button>
</div>
</div>
<div className="data-input-guide">10文字以内</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">新規パスワード入力 <i className="import">*</i></div>
<div className="data-input">
<div className="login-input pw change">
<input type={`${pwShow02 ? 'text': 'password'}`} className="login-frame" placeholder="●●●●"/>
<button className={`login-icon ${pwShow02 ? 'act' : ''}`} onClick={() => setPwShow02(!pwShow02)}><i className="show-icon"></i></button>
</div>
</div>
<div className="data-input-guide">10文字以内</div>
</div>
</div>
<div className="btn-flex-wrap">
<div className="btn-bx">
<button className="btn-frame n-blue icon">戻る<i className="btn-arr"></i></button>
</div>
<div className="btn-bx">
<button className="btn-frame red icon">リセットする<i className="btn-arr"></i></button>
</div>
</div>
</div>
)
}

13
src/styles/base/_inputs.scss
View File

@ -82,13 +82,13 @@ input::-webkit-inner-spin-button {
width: 100%;
padding: 0 10px;
height: 40px;
font-size: $font-s-13;
color: $font-c;
font-weight: $font-w-400;
background-color: $white-fff;
border: 1px solid #D5DEE8;
border-radius: 4px;
input{
font-size: $font-s-13;
color: $font-c;
font-weight: $font-w-400;
width: 100%;
height: 100%;
background-color: transparent;
@ -194,4 +194,11 @@ input::-webkit-inner-spin-button {
}
}
}
&.change{
height: 40px;
padding-left: 10px;
&::before{
display: none;
}
}
}

26
src/styles/components/_sub.scss
View File

@ -17,6 +17,10 @@
@include defaultFont($font-s-13, $font-w-400, #A8B6C7);
}
}
.data-input-guide{
margin-top: 8px;
@include defaultFont($font-s-13, $font-w-400, #A8B6C7);
}
}
.btn-flex-wrap{
@ -417,3 +421,25 @@
@include defaultFont($font-s-13, $font-w-400, #F86A56);
}
}
// 비밀번호 변경
.border-frame{
padding: 20px;
border-top: 1px solid #ECECEC;
border-bottom: 1px solid #ECECEC;
background-color: #fff;
margin-bottom: 10px;
&:last-child{
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
}
.pw-guide{
.pw-guide-tit{
@include defaultFont($font-s-16, $font-w-500, #1259CB);
}
.pw-guide-txt{
@include defaultFont($font-s-13, $font-w-400, #417DDC);
}
}