From 3da566232ca09ea26cc6c5b351f8a4bc3ccacb2f Mon Sep 17 00:00:00 2001 From: SUMMERLOVE7 Date: Tue, 21 Feb 2023 20:36:01 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat(FE)=20:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD(#182)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/apis/user.js | 17 ++++ client/src/components/auth/login.js | 7 -- client/src/components/common/header.js | 16 ++- client/src/components/common/sideMenu.js | 4 +- client/src/constants/constant.js | 2 +- client/src/main.js | 11 ++- client/src/pages/AuthPage.js | 1 + client/src/pages/MainPage.js | 1 - client/src/pages/MyPage.js | 120 +++++++++++++++++++++++ client/src/pages/UsedCardPage.js | 51 ++++++++++ client/src/pages/index.js | 2 + 11 files changed, 218 insertions(+), 14 deletions(-) create mode 100644 client/src/apis/user.js create mode 100644 client/src/pages/MyPage.js create mode 100644 client/src/pages/UsedCardPage.js diff --git a/client/src/apis/user.js b/client/src/apis/user.js new file mode 100644 index 0000000..c5fb65d --- /dev/null +++ b/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); + } +}; diff --git a/client/src/components/auth/login.js b/client/src/components/auth/login.js index 5f061e5..1e3fd50 100644 --- a/client/src/components/auth/login.js +++ b/client/src/components/auth/login.js @@ -75,12 +75,6 @@ const login = () => { }); }; - // prettier-ignore - const handleSubmission = (target) => - _.go( - handleSubmitData(target), - () => notification('로그인', 'login')()); - // prettier-ignore const handleSubmitData = (target) => _.pipe( @@ -111,7 +105,6 @@ const login = () => { appendInputForm, () => handleChangeInput(document), () => handleSubmitData(fragment), - //() => handleSubmission(fragment), () => fragment); return appendLogin; diff --git a/client/src/components/common/header.js b/client/src/components/common/header.js index 40b172c..4b79d8c 100644 --- a/client/src/components/common/header.js +++ b/client/src/components/common/header.js @@ -4,7 +4,7 @@ import { logoutU } from '@/apis/auth'; import { _ } from '@/utils/customFx'; import { IO, $ } from '@/utils'; import { sideMenu, modal } from '@/components/common'; -// search-button +// search-button // const header = (props) => { const { color, label, path } = props; const MINT_LOGO_URL = `${SERVER_URL.IMG}logo/logo-mint.png`; @@ -67,6 +67,11 @@ const header = (props) => { closeModal(); logoutModal(); }; + + const mypageEvent = () => navigate('/mypage'); + + const usedPageEvent = () => navigate('/used'); + // async const openMenuEvent = () => { const trigger = $.qs('.trigger'); @@ -75,7 +80,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'); diff --git a/client/src/components/common/sideMenu.js b/client/src/components/common/sideMenu.js index 82a1f32..0ea6d39 100644 --- a/client/src/components/common/sideMenu.js +++ b/client/src/components/common/sideMenu.js @@ -11,8 +11,8 @@ const sideMenu = () => {
    -
  • 마이페이지
    • -
  • 사용 내역
    • +
  • 마이페이지
    • +
  • 사용 내역
  • 로그아웃
diff --git a/client/src/constants/constant.js b/client/src/constants/constant.js index 8247532..3e1d802 100644 --- a/client/src/constants/constant.js +++ b/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', diff --git a/client/src/main.js b/client/src/main.js index e4a6e13..f88239a 100644 --- a/client/src/main.js +++ b/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; diff --git a/client/src/pages/AuthPage.js b/client/src/pages/AuthPage.js index 82b4f1b..65c679a 100644 --- a/client/src/pages/AuthPage.js +++ b/client/src/pages/AuthPage.js @@ -14,6 +14,7 @@ AuthPage.temp = ` +
`; diff --git a/client/src/pages/MainPage.js b/client/src/pages/MainPage.js index 87eee47..b2df997 100644 --- a/client/src/pages/MainPage.js +++ b/client/src/pages/MainPage.js @@ -183,7 +183,6 @@ const navigateMain = async () => { MainPage.render(), addEvents, slider(), - //() => notification("logout", "logout")(), () => $.qsa('.mark-used-button'), makeUsedState, () => $.qs('.main-dropdown-button'), diff --git a/client/src/pages/MyPage.js b/client/src/pages/MyPage.js new file mode 100644 index 0000000..8732b16 --- /dev/null +++ b/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 = ` +
+
+
+
+ +
+
+
+
+ `; + +// 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.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', +// }, diff --git a/client/src/pages/UsedCardPage.js b/client/src/pages/UsedCardPage.js new file mode 100644 index 0000000..bb64b68 --- /dev/null +++ b/client/src/pages/UsedCardPage.js @@ -0,0 +1,51 @@ +import { $ } from '@/utils'; +import { _ } from '@/utils/customFx'; +import { usedCard } 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 = () => ` +
+
+
+
+ ${detailTemp(cardDatas)} +
+
+
+
+`; + +// prettier-ignore +UsedCardPage.render = () => + _.go( + UsedCardPage.temp(), + $.el, + $.replace($.qs('#root'))); + +const navigateUsed = async () => { + ///////여기추가 + setCardDatas(await usedCard()); + + UsedCardPage.render(); + header({ color: 'mint' })(); +}; + +export default navigateUsed; diff --git a/client/src/pages/index.js b/client/src/pages/index.js index 8ab1d18..079866e 100644 --- a/client/src/pages/index.js +++ b/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'; From 20cb955e209b12db38803d39112e8eb13caa435f Mon Sep 17 00:00:00 2001 From: SUMMERLOVE7 Date: Tue, 21 Feb 2023 20:53:08 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat(FE)=20:=20=EB=B3=80=EA=B2=BD=EB=90=9C?= =?UTF-8?q?=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20json=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=A0=84=EB=8B=AC(#182)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/pages/MyPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/pages/MyPage.js b/client/src/pages/MyPage.js index 8732b16..991a1d2 100644 --- a/client/src/pages/MyPage.js +++ b/client/src/pages/MyPage.js @@ -68,7 +68,7 @@ const submitData = async () => { const password = $.qs('#password-input'); if (password.value === $.qs('#password-check-input').value) { - changePassword(password.value); + changePassword({ password: password.value }); mainpageEvent(); } }; From 0667799c4979fee45e0f3c58eab59a6b2837695d Mon Sep 17 00:00:00 2001 From: SUMMERLOVE7 Date: Tue, 21 Feb 2023 21:36:06 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat(FE)=20:=20=EC=82=AC=EC=9A=A9=EC=99=84?= =?UTF-8?q?=EB=A3=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80=EA=B5=AC=ED=98=84(#184)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/apis/card.js | 10 ++++++++++ client/src/pages/UsedCardPage.js | 9 +++++---- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/client/src/apis/card.js b/client/src/apis/card.js index ea55f40..df4b740 100644 --- a/client/src/apis/card.js +++ b/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); + } +}; diff --git a/client/src/pages/UsedCardPage.js b/client/src/pages/UsedCardPage.js index bb64b68..7d04465 100644 --- a/client/src/pages/UsedCardPage.js +++ b/client/src/pages/UsedCardPage.js @@ -1,6 +1,6 @@ import { $ } from '@/utils'; import { _ } from '@/utils/customFx'; -import { usedCard } from '@/apis/card'; +import { getUsedCard } from '@/apis/card'; import { header } from '@/components/common'; import { cardDetail } from '@/components/main'; @@ -41,10 +41,11 @@ UsedCardPage.render = () => $.replace($.qs('#root'))); const navigateUsed = async () => { - ///////여기추가 - setCardDatas(await usedCard()); + setCardDatas(await getUsedCard()); + //cardDatas = await getUsedCard(); + + _.go(UsedCardPage.render()); - UsedCardPage.render(); header({ color: 'mint' })(); };