From fb1ab15c1e7d3bc4df7e40d68d7f25a0ea54cfcf Mon Sep 17 00:00:00 2001
From: SUMMERLOVE7 <wkdalswl77@naver.com>
Date: Wed, 22 Feb 2023 16:27:12 +0900
Subject: [PATCH] =?UTF-8?q?feat(FE)=20:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EB=8D=B0=EB=AA=A8=EC=9A=A9=20=EA=B0=92=20?=
 =?UTF-8?q?=EC=82=BD=EC=9E=85=20=EB=B0=8F=20=EB=B9=84=EB=B0=80=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=ED=99=95=EC=9D=B8=20=EC=9E=91=EB=8F=99(#36)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/apis/card.js             |  2 +-
 client/src/components/auth/login.js | 40 ++++++++++++++++++++++++++---
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/client/src/apis/card.js b/client/src/apis/card.js
index b7819c4..5022b07 100644
--- a/client/src/apis/card.js
+++ b/client/src/apis/card.js
@@ -2,7 +2,7 @@ import client from './client';
 
 export const getCardList = async (query = '') => {
   try {
-    const response = await client.get(`gifticon/test?keyword=${query}`);
+    const response = await client.get(`gifticon/list?keyword=${query}`);
 
     return response.data;
   } catch (e) {
diff --git a/client/src/components/auth/login.js b/client/src/components/auth/login.js
index 6bc7abe..cc74ea5 100644
--- a/client/src/components/auth/login.js
+++ b/client/src/components/auth/login.js
@@ -12,8 +12,8 @@ const login = () => {
   const LOGIN_INPUT_TYPE = ['email', 'password'];
 
   let userData = {
-    email: '',
-    password: '',
+    email: 'test@test.com',
+    password: 'testPassword',
   };
 
   const loginTemp = `
@@ -40,11 +40,38 @@ const login = () => {
     userData = updatedUserData;
   };
 
+  //데모용
+  const setInput = (fragment) => {
+    $.qs('#email-input', fragment).value = userData.email;
+    $.qs('#password-input', fragment).value = userData.password;
+
+    $.qs('.auth-button', fragment).classList.add('active');
+  };
+
+  const changeVisibility = ({ target }) => {
+    const inputTarget = target.closest('.input-section').querySelector('input');
+
+    if (target.src.includes('open')) {
+      target.src = target.src.replace('open', 'close');
+      inputTarget.type = 'password';
+    } else {
+      target.src = target.src.replace('close', 'open');
+      inputTarget.type = 'text';
+    }
+  };
+
+  const clickEyeEvent = (fragment) => {
+    _.go(
+      $.qs('.eye-icon', fragment),
+      $.on('click', (e) => changeVisibility(e)),
+    );
+  };
+
   const submitData = async (e) => {
     e.stopPropagation();
     e.preventDefault();
-    await loginU({ email: 'test@test.com', password: 'testPassword' });
-    // await loginU(userData);
+    //await loginU({ email: 'test@test.com', password: 'testPassword' });
+    await loginU(userData);
 
     const firebaseConfig = {
       apiKey: 'AIzaSyCsLBsvozvTnYlDH-5cS0A8X_AjV5o4jjM',
@@ -74,6 +101,8 @@ const login = () => {
     notification('로그인에 성공하였습니다.', 'login', true)();
   };
 
+  const deleteVerifyButton = (fragment) => $.qs('.verify-button', fragment).remove();
+
   // prettier-ignore
   const handleSubmitData = (target) => 
     _.pipe(
@@ -103,6 +132,9 @@ const login = () => {
       $.insert(loginTemp),
       appendInputForm,
       () => handleChangeInput(document),
+      () => deleteVerifyButton(fragment),
+      () => setInput(fragment),
+      () => clickEyeEvent(fragment),
       () => handleSubmitData(fragment),
       () => fragment);