Merge branch 'dev' into FE-feature/search

client/src/apis/card.js

@@ -19,3 +19,13 @@ export const usedCard = (data) => {
     console.error(e);
   }
 };
+
+export const getUsedCard = async () => {
+  try {
+    const response = await client.get(`gifticon/used`);
+
+    return response.data;
+  } catch (e) {
+    console.error(e);
+  }
+};

client/src/apis/user.js

@@ -0,0 +1,17 @@
+import client from './client';
+
+export const getUserInfo = async () => {
+  const response = await client.get(`user/mypage`);
+
+  return response.data;
+};
+
+export const changePassword = (data) => {
+  try {
+    const response = client.put('user/password', data);
+
+    return response.data;
+  } catch (e) {
+    console.error(e);
+  }
+};

client/src/components/auth/login.js

@@ -74,12 +74,6 @@ const login = () => {
     notification('로그인에 성공하였습니다.', 'login')();
   };
 
-  // prettier-ignore
-  const handleSubmission = (target) => 
-    _.go(
-      handleSubmitData(target),
-      () => notification('로그인', 'login')());
-
   // prettier-ignore
   const handleSubmitData = (target) => 
     _.pipe(
@@ -110,7 +104,6 @@ const login = () => {
       appendInputForm,
       () => handleChangeInput(document),
       () => handleSubmitData(fragment),
-      //() => handleSubmission(fragment),
       () => fragment);
 
   return appendLogin;

client/src/components/common/header.js

@@ -69,6 +69,11 @@ const header = (props) => {
     closeModal();
     logoutModal();
   };
+
+  const mypageEvent = () => navigate('/mypage');
+
+  const usedPageEvent = () => navigate('/used');
+
   // async
   const openMenuEvent = () => {
     const trigger = $.qs('.trigger');
@@ -77,7 +82,14 @@ const header = (props) => {
     const menuTarget = $.qs('.menu-section');
     toggleActive(menuTarget);
 
-    $.on('click', logoutEvent)($.qs('.logout-button'));
+    _.go(
+      $.qs('.logout-button'),
+      $.on('click', logoutEvent),
+      () => $.qs('.mypage-button'),
+      $.on('click', mypageEvent),
+      () => $.qs('.usedList-button'),
+      $.on('click', usedPageEvent),
+    );
   };
   // async
   const toggleActive = (target) => target.classList.toggle('active');

client/src/components/common/sideMenu.js

@@ -11,8 +11,8 @@ const sideMenu = () => {
       <section class='side-menu-section'>
         <section class="container">
           <ul class='menu-button'>
-            <li>마이페이지</li>
-            <li>사용 내역</li>
+            <li class='mypage-button'>마이페이지</li>
+            <li class='usedList-button'>사용 내역</li>
             <li class='logout-button'>로그아웃</li>
           </ul>
         </section>

client/src/constants/constant.js

@@ -79,7 +79,7 @@ export const INPUT = [
     label: '이메일',
     required: true,
     dataType: 'email',
-    pattern: EMAIL_REG,
+    // pattern: EMAIL_REG,
   },
   {
     type: 'userName',

client/src/main.js

@@ -2,7 +2,14 @@ import '@/styles/global.scss';
 import { initializeApp } from 'firebase/app';
 import { getMessaging, onMessage } from 'firebase/messaging';
 import { setScreenSize } from '@/utils';
-import { navigateHome, navigateAuth, navigateMain, initiatePostPage } from '@/pages';
+import {
+  navigateHome,
+  navigateMyPage,
+  navigateUsed,
+  navigateAuth,
+  navigateMain,
+  initiatePostPage,
+} from '@/pages';
 import { routes, navigate } from '@/core/router';
 
 routes.push(
@@ -11,6 +18,8 @@ routes.push(
   { path: '/login', component: navigateAuth },
   { path: '/card', component: navigateMain },
   { path: '/post', component: initiatePostPage },
+  { path: '/used', component: navigateUsed },
+  { path: '/mypage', component: navigateMyPage },
 );
 const path = window.location.pathname;
 

client/src/pages/AuthPage.js

@@ -14,6 +14,7 @@ AuthPage.temp = `
             <input type="submit" class="auth-button" name="auth-button" value="완료" />
           </div>
         </form>
+      </section>
     </article>
   `;
 

client/src/pages/MainPage.js

@@ -195,7 +195,6 @@ const navigateMain = async (newData = '') => {
   _.go(
     MainPage.render(),
     slider(),
-    //() => notification("logout", "logout")(),
     () => $.qsa('.mark-used-button'),
     makeUsedState,
     () => $.qs('.main-dropdown-button'),

client/src/pages/MyPage.js

@@ -0,0 +1,120 @@
+import { header } from '@/components/common';
+import { INPUT } from '@/constants/constant';
+import { navigate } from '@/core/router';
+import { _ } from '@/utils/customFx';
+import { $ } from '@/utils';
+import { getUserInfo, changePassword } from '@/apis/user';
+import { inputForm, notification } from '@/components/common';
+
+const MYPAGE_INPUT_TYPE = ['userName', 'tel', 'email', 'password'];
+const addInputForm = (fragment) => (input) => inputForm({ ...input, target: fragment })();
+const userPageInputs = ({ type }) => MYPAGE_INPUT_TYPE.includes(type);
+
+const MyPage = {};
+
+MyPage.temp = `
+    <article class="auth-article">
+      <section class="auth-form-section">
+        <form class="input-section">
+          <div class="auth-button-container">
+            <input type="submit" class="auth-button" name="auth-button" value="완료" />
+          </div>
+        </form>
+      </section>
+    </article>
+  `;
+
+// prettier-ignore
+const setInputValue = async () =>{
+  const userData = await getUserInfo();
+  console.log(userData);
+
+  const changeColor = (type, target) => {
+    type === 'input' 
+    ? target.style.borderBottom = '1px solid #92b8b1'
+    : target.style.color = '#92b8b1'
+  }
+
+  const inputs = $.qsa('.text-input');
+  inputs.forEach(element => {
+    changeColor('input', element);
+  });
+
+  const labels = $.qsa('.input-label');
+  labels.forEach(element => {
+    changeColor('label', element);
+  })
+
+  const userName = $.qs('#user-name-input');
+  userName.value = userData.name;
+  userName.disabled = true;
+
+  const email = $.qs('#email-input');
+  email.value = userData.email;
+  email.disabled = true;
+
+  const phoneNumber = $.qs('#phone-input');
+  phoneNumber.value = userData.phonenumber;
+  phoneNumber.disabled = true;
+
+  const verifyButton = $.qs('.verify-button');
+  verifyButton.remove();
+
+
+  handleSubmitData();
+}
+
+const submitData = async () => {
+  const password = $.qs('#password-input');
+
+  if (password.value === $.qs('#password-check-input').value) {
+    changePassword({ password: password.value });
+    mainpageEvent();
+  }
+};
+
+const mainpageEvent = () => navigate('/card');
+
+// prettier-ignore
+const handleSubmitData = () => 
+  _.go(
+    $.qs('.auth-button'), 
+    $.on('click', submitData));
+
+// prettier-ignore
+const appendInputForm = (fragment) => 
+  _.go(
+    INPUT,
+    _.filter(userPageInputs),
+    ([passwordCheck, password, email, tel, userName]) => [passwordCheck, password, email, tel, userName],
+    _.map(addInputForm(fragment)),
+    _.flatOne);
+
+// prettier-ignore
+const navigateMyPage = () => {
+  _.go(
+    MyPage.temp,
+    $.el,
+    $.replace($.qs('#root')),
+    appendInputForm,
+    () => setInputValue());
+
+    header({color: 'white', label:'마이페이지', path:'/card' })();
+}
+
+export default navigateMyPage;
+
+// {
+//   type: 'password',
+//   name: 'new-password-input',
+//   label: '비밀번호 변경(영문, 숫자, 특수문자)',
+//   required: true,
+//   dataType: 'password',
+// },
+// {
+//   type: 'password',
+//   name: 'new-password-check-input',
+//   label: '비밀번호 확인을 위해 한번 더 입력해주세요.',
+//   required: true,
+//   dataType: 'passwordCheck',
+// },

client/src/pages/UsedCardPage.js

@@ -0,0 +1,52 @@
+import { $ } from '@/utils';
+import { _ } from '@/utils/customFx';
+import { getUsedCard } from '@/apis/card';
+import { header } from '@/components/common';
+import { cardDetail } from '@/components/main';
+
+let cardDatas = [];
+const setCardDatas = (cardData) => (cardDatas = [...cardData]);
+
+const detailTemp = (newCardDatas) => {
+  let idx = 0;
+
+  return `
+    ${_.go(
+      newCardDatas,
+      _.map((card) => cardDetail(card)(idx++)),
+      _.reduce((a, b) => `${a}${b}`),
+    )}
+`;
+};
+
+const UsedCardPage = {};
+
+UsedCardPage.temp = () => `
+    <article class='main-card-article'>
+      <div class='main-card-container'>
+        <div class="main-card-box">
+          <section class='cards-section list'>
+            ${detailTemp(cardDatas)}
+          </section>
+        </div>
+      </div>
+    </article>
+`;
+
+// prettier-ignore
+UsedCardPage.render = () => 
+  _.go(
+    UsedCardPage.temp(), 
+    $.el, 
+    $.replace($.qs('#root')));
+
+const navigateUsed = async () => {
+  setCardDatas(await getUsedCard());
+  //cardDatas = await getUsedCard();
+
+  _.go(UsedCardPage.render());
+
+  header({ color: 'mint' })();
+};
+
+export default navigateUsed;

client/src/pages/index.js

@@ -1,6 +1,8 @@
 export { default as navigateHome } from './HomePage';
 export { default as navigateAuth } from './AuthPage';
 export { default as navigateMain } from './MainPage';
+export { default as navigateUsed } from './UsedCardPage';
+export { default as navigateMyPage } from './MyPage';
 export { default as initiatePostPage } from './PostPage';
 
 export { default as NotFound } from './NotFoundPage';