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-29 16:09:17 +09:00
parent 672a0344fe
commit cbdb367b75
3 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/assets/images/common/pw_hide_icon.svg Normal file
View File

@ -0,0 +1,16 @@
<svg width="19" height="14" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_243_508)">
<path d="M9.5 0.5C7.44666 0.503119 5.44191 1.12498 3.74727 2.28447C2.05263 3.44397 0.74676 5.08726 0 7C0.743991 8.91467 2.04917 10.5598 3.74441 11.7199C5.43966 12.8799 7.44586 13.5005 9.5 13.5005C11.5541 13.5005 13.5603 12.8799 15.2556 11.7199C16.9508 10.5598 18.256 8.91467 19 7C18.2532 5.08726 16.9474 3.44397 15.2527 2.28447C13.5581 1.12498 11.5533 0.503119 9.5 0.5ZM9.5 11.333C8.64238 11.336 7.80317 11.0844 7.08864 10.6101C6.37411 10.1358 5.81641 9.46007 5.48615 8.66859C5.1559 7.8771 5.06794 7.00541 5.23344 6.16391C5.39893 5.3224 5.81042 4.54893 6.4158 3.94145C7.02118 3.33397 7.79322 2.9198 8.63414 2.75139C9.47507 2.58298 10.3471 2.66791 11.1397 2.99541C11.9323 3.32292 12.6099 3.87828 13.0867 4.59116C13.5635 5.30404 13.818 6.14238 13.818 7C13.8196 8.14707 13.3657 9.24784 12.556 10.0604C11.7463 10.8729 10.6471 11.3306 9.5 11.333ZM9.5 4.4C8.98539 4.39822 8.48182 4.54919 8.05307 4.8338C7.62432 5.1184 7.28967 5.52384 7.09151 5.99877C6.89334 6.4737 6.84056 6.99675 6.93987 7.5017C7.03917 8.00664 7.28608 8.47075 7.64934 8.83527C8.01259 9.19979 8.47585 9.44831 8.98045 9.54936C9.48504 9.65042 10.0083 9.59946 10.4839 9.40294C10.9595 9.20642 11.3661 8.87317 11.6522 8.44541C11.9383 8.01765 12.091 7.51461 12.091 7C12.0921 6.65903 12.0258 6.32119 11.8961 6.00586C11.7664 5.69052 11.5757 5.40388 11.335 5.16236C11.0943 4.92084 10.8083 4.72917 10.4935 4.59835C10.1786 4.46754 9.84098 4.40013 9.5 4.4Z" fill="#C6D2E0"/>
<mask id="mask0_243_508" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="19" height="14">
<path d="M9.5 0.5C7.44666 0.503119 5.44191 1.12498 3.74727 2.28447C2.05263 3.44397 0.74676 5.08726 0 7C0.743991 8.91467 2.04917 10.5598 3.74441 11.7199C5.43966 12.8799 7.44586 13.5005 9.5 13.5005C11.5541 13.5005 13.5603 12.8799 15.2556 11.7199C16.9508 10.5598 18.256 8.91467 19 7C18.2532 5.08726 16.9474 3.44397 15.2527 2.28447C13.5581 1.12498 11.5533 0.503119 9.5 0.5ZM9.5 11.333C8.64238 11.336 7.80317 11.0844 7.08864 10.6101C6.37411 10.1358 5.81641 9.46007 5.48615 8.66859C5.1559 7.8771 5.06794 7.00541 5.23344 6.16391C5.39893 5.3224 5.81042 4.54893 6.4158 3.94145C7.02118 3.33397 7.79322 2.9198 8.63414 2.75139C9.47507 2.58298 10.3471 2.66791 11.1397 2.99541C11.9323 3.32292 12.6099 3.87828 13.0867 4.59116C13.5635 5.30404 13.818 6.14238 13.818 7C13.8196 8.14707 13.3657 9.24784 12.556 10.0604C11.7463 10.8729 10.6471 11.3306 9.5 11.333ZM9.5 4.4C8.98539 4.39822 8.48182 4.54919 8.05307 4.8338C7.62432 5.1184 7.28967 5.52384 7.09151 5.99877C6.89334 6.4737 6.84056 6.99675 6.93987 7.5017C7.03917 8.00664 7.28608 8.47075 7.64934 8.83527C8.01259 9.19979 8.47585 9.44831 8.98045 9.54936C9.48504 9.65042 10.0083 9.59946 10.4839 9.40294C10.9595 9.20642 11.3661 8.87317 11.6522 8.44541C11.9383 8.01765 12.091 7.51461 12.091 7C12.0921 6.65903 12.0258 6.32119 11.8961 6.00586C11.7664 5.69052 11.5757 5.40388 11.335 5.16236C11.0943 4.92084 10.8083 4.72917 10.4935 4.59835C10.1786 4.46754 9.84098 4.40013 9.5 4.4Z" fill="white"/>
</mask>
<g mask="url(#mask0_243_508)">
<path d="M15.3699 -0.375707L17.3752 1.56459L3.91121 14.7797L1.90586 12.8394L15.3699 -0.375707Z" fill="white"/>
</g>
</g>
<defs>
<clipPath id="clip0_243_508">
<rect width="19" height="13" fill="white" transform="translate(0 0.5)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

9
src/app/login/page.tsx
View File

@ -1,6 +1,11 @@
'use client'
import Footer from "@/components/layouts/Footer";
import { useState } from "react";
export default function LoginPage(){
const [pwShow, setPwShow] = useState(false); //비밀번호 보이기 숨기기
return(
<div className="wrap">
<div className="container">
@ -15,8 +20,8 @@ export default function LoginPage(){
</div>
<div className="login-form">
<div className="login-input pw">
<input type="password" className="login-frame" placeholder="Input Frame PW"/>
<button className="login-icon act"><i className="show-icon"></i></button>
<input type={`${pwShow ? 'text': 'password'}`} className="login-frame" placeholder="Input Frame PW"/>
<button className={`login-icon ${pwShow ? 'act' : ''}`} onClick={() => setPwShow(!pwShow)}><i className="show-icon"></i></button>
</div>
</div>
<div className="login-check-warp">

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

@ -190,7 +190,7 @@ input::-webkit-inner-spin-button {
}
&.act{
.show-icon{
background: url(/assets/images/common/pw_show_icon.svg)no-repeat center;
background: url(/assets/images/common/pw_hide_icon.svg)no-repeat center;
}
}
}