From cbdb367b75a9a4cdf403e151570a46b99714a4fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= <chang9811@interplug.co.kr>
Date: Tue, 29 Apr 2025 16:09:17 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EB=B9=84?=
 =?UTF-8?q?=EB=B0=80=EB=B2=88=ED=98=B8=20=EB=B3=B4=EC=9D=B4=EA=B8=B0=20?=
 =?UTF-8?q?=EC=88=A8=EA=B8=B0=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/assets/images/common/pw_hide_icon.svg | 16 ++++++++++++++++
 src/app/login/page.tsx                       |  9 +++++++--
 src/styles/base/_inputs.scss                 |  2 +-
 3 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 public/assets/images/common/pw_hide_icon.svg

diff --git a/public/assets/images/common/pw_hide_icon.svg b/public/assets/images/common/pw_hide_icon.svg
new file mode 100644
index 0000000..c7565e0
--- /dev/null
+++ b/public/assets/images/common/pw_hide_icon.svg
@@ -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>
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 4620f47..d629df5 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -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">
diff --git a/src/styles/base/_inputs.scss b/src/styles/base/_inputs.scss
index c8cf32d..7bc0784 100644
--- a/src/styles/base/_inputs.scss
+++ b/src/styles/base/_inputs.scss
@@ -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;
       }
     }
   }