Skip to content

Commit

Permalink
Merge feat(FE) : Main Page Flip 기능 추가(#164)
Browse files Browse the repository at this point in the history 
feat(FE) : Main Page Flip 기능 추가(#164)
  • Loading branch information
@SUMMERLOVE7
SUMMERLOVE7 authored Feb 20, 2023
2 parents c172385 + f22af46 commit 8709cce
Show file tree
Hide file tree
Showing 9 changed files with 185 additions and 188 deletions.
20 changes: 17 additions & 3 deletions client/src/apis/card.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,21 @@
import client from './client';

export const getCardList = async (data) => {
const response = await client.get(`gifticon/test`);
export const getCardList = async () => {
try {
const response = await client.get(`gifticon/test`);

return response.data;
return response.data;
} catch (e) {
console.error(e);
}
};

export const usedCard = (data) => {
try {
const response = client.put('gifticon/used', data);

return response.data;
} catch (e) {
console.error(e);
}
};
1 change: 1 addition & 0 deletions client/src/apis/client.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,5 @@ const client = axios.create({
});

client.defaults.withCredentials = true;

export default client;
0 client/src/assets/starbucks3.jpeg → client/src/assets/starbucks3.jpg
View file
File renamed without changes
35 changes: 19 additions & 16 deletions client/src/components/main/cardDetail.js
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
import { SERVER_URL } from '@/constants/constant.js';

const cardDetail = (props) => {
const { image, shopName, itemName, dateOfUse, itemPrice, required } = props;
const { image, thumbnail, brandName, itemName, expiresAt, price } = props;

const cardDetailTemplate = `
<section class='one-card-section'>
<img class='card-image' src="${image}" alt='card-image' />
<section class='card-info'>
<div class='card-text'>
<div class='date-of-use'>${dateOfUse} </div>
<div class='shop-name'> ${shopName} </div>
<div class='item-name'> ${itemName} </div>
<div class='item-price'> ${itemPrice.toLocaleString('ko-KR')} WON</div>
</div>
<div class='card-button'>
<button type="button" class='mark-used-button' name='mark-used-button'>사용 완료</button>
</div>
<article class='card-lists'>
<section class='one-card-section'>
<img class='card-image' src=${thumbnail} alt='card-image' />
<section class='card-info'>
<div class='card-text'>
<div class='date-of-use'>${expiresAt} </div>
<div class='shop-name'> ${brandName} </div>
<div class='item-name'> ${itemName} </div>
<div class='item-price'> ${price.toLocaleString('ko-KR')} WON</div>
</div>
<div class='card-button'>
<button type="button" class='mark-used-button' name='mark-used-button'>사용 완료</button>
</div>
</section>
</section>
<section class='one-card-section-back'>
<img class='card-image' src=${image} alt='card-image' />
</section>
</section>
</article>
`;

return cardDetailTemplate;
Expand Down
Empty file added client/src/components/main/cardSearch.js
View file
Empty file.
31 changes: 14 additions & 17 deletions client/src/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
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 { routes, navigate } from '@/core/router';

import { initializeApp } from "firebase/app";
import { getMessaging, onMessage } from "firebase/messaging";


routes.push(
{ path: '/', component: navigateHome },
{ path: '/register', component: navigateAuth },
Expand All @@ -19,24 +17,23 @@ const path = window.location.pathname;
navigate(path);
window.addEventListener('resize', setScreenSize);


const firebaseConfig = {
apiKey: "AIzaSyCsLBsvozvTnYlDH-5cS0A8X_AjV5o4jjM",
authDomain: "amatta-4934f.firebaseapp.com",
projectId: "amatta-4934f",
storageBucket: "amatta-4934f.appspot.com",
messagingSenderId: "196308516589",
appId: "1:196308516589:web:64545440aa5021e8a496e4",
measurementId: "G-4JBCQPF50K"
apiKey: 'AIzaSyCsLBsvozvTnYlDH-5cS0A8X_AjV5o4jjM',
authDomain: 'amatta-4934f.firebaseapp.com',
projectId: 'amatta-4934f',
storageBucket: 'amatta-4934f.appspot.com',
messagingSenderId: '196308516589',
appId: '1:196308516589:web:64545440aa5021e8a496e4',
measurementId: 'G-4JBCQPF50K',
};

const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

onMessage(messaging, (payload)=>{
console.log("foreground", payload);
onMessage(messaging, (payload) => {
console.log('foreground', payload);
const option = {
body: payload.notification.body
}
body: payload.notification.body,
};
return new Notification(payload.notification.title, option);
})
});
155 changes: 63 additions & 92 deletions client/src/pages/MainPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,36 @@
import { SERVER_URL } from '@/constants/constant';
import { cardDetail, cardList } from '@/components/main';
import { dropdownMenu, header } from '@/components/common';
import { $, slider } from '@/utils';
import { IO, $, slider } from '@/utils';
import { _ } from '@/utils/customFx';
import { navigate } from '@/core/router';
import { getCardList } from '@/apis/card';

const ONE_CARD_ICON_URL = `${SERVER_URL.IMG}icon/image-icon.svg`;
const LIST_ICON_URL = `${SERVER_URL.IMG}icon/list-icon.svg`;
const DROP_DOWN_ICON_URL = `${SERVER_URL.IMG}icon/angle-down.svg`;
const PLUS_ICON_URL = `${SERVER_URL.IMG}icon/plus.svg`;

let touchStartX = 0;
let touchEndX = 0;
let isSwipping = false;
let cardDatas = [];

const cards = [
{
image: `${SERVER_URL.IMG}images/starbucks2.jpg`,
shopName: 'TWOSOME PLACE',
itemName: 'Americano & Tiramisu',
itemPrice: 11000,
dateOfUse: '2023-07-07',
},
{
image: `${SERVER_URL.IMG}images/starbucks3.jpeg`,
shopName: 'STARBUCKS',
itemName: 'Latte',
itemPrice: 5000,
dateOfUse: '2023-07-22',
},
{
image: `${SERVER_URL.IMG}images/starbucks2.jpg`,
shopName: 'THE VENTI',
itemName: 'Vanilla Latte',
itemPrice: 3500,
dateOfUse: '2023-09-01',
},
{
image: `${SERVER_URL.IMG}images/starbucks3.jpeg`,
shopName: 'twosome place',
itemName: 'Americano & Tiramisu',
itemPrice: 11000,
dateOfUse: '2023-11-01',
},
{
image: `${SERVER_URL.IMG}images/starbucks2.jpg`,
shopName: 'starbucks',
itemName: 'Latte',
itemPrice: 5000,
dateOfUse: '2023-07-07',
},
{
image: `${SERVER_URL.IMG}images/starbucks2.jpg`,
shopName: 'THE VENTI',
itemName: 'Vanilla Latte',
itemPrice: 3500,
dateOfUse: '2023-09-01',
},
];

const detailTemp = `
const setCardDatas = (cardData) => (cardDatas = [...cardData]);

const detailTemp = () => `
<div class='cards-detail-container'>
${cards.map((detail) => cardDetail(detail)).join('')}
${_.go(
cardDatas,
_.map((card) => cardDetail(card)),
// _.flatOne,
_.reduce((a, b) => `${a}${b}`),
)}
</div>
`;

const MainPage = {};

MainPage.temp = `
MainPage.temp = () => `
<article class='main-card-article'>
<div class='main-card-container'>
<div class="main-card-box">
Expand All @@ -82,7 +44,7 @@ MainPage.temp = `
</section>
</div>
<section class='cards-section'>
${detailTemp}
${detailTemp()}
</section>
<ul class="card-pagination"></ul>
<button type="button" id="plus-button">
Expand All @@ -92,7 +54,6 @@ MainPage.temp = `
</div>
</article>
`;
// ${cards.map((detail) => cardDetail(detail)).join('')}

const toggleDropdown = () => {
const dropdownSection = $.qs('.main-dropdown-section');
Expand Down Expand Up @@ -162,10 +123,8 @@ const handleTouchEnd = (e) => {

const changeToList = (cardsSection) => cardsSection.classList.add('list');

// const scrollEvent = (target) => target.scrollIntoView(true);

const renderListTpl = () =>
_.go(cards.map(cardList).join(''), $.el, $.replace($.qs('.cards-section')));
_.go(cardDatas.map(cardList).join(''), $.el, $.replace($.qs('.cards-section')));

// prettier-ignore
const renderList = () =>
Expand All @@ -185,9 +144,7 @@ const renderList = () =>
$.on('click', priceComparison),
() => $.qs('.due-date-button'),
$.on('click', dateComparison));
// ,
// () => $.qsa('.one-list-section'),
// scrollEvent

const findCardIndex = (target) => {
const cards = [...$.qsa('.one-list-section')];
const card = target.closest('.one-list-section');
Expand All @@ -198,16 +155,14 @@ const findCardIndex = (target) => {
const deleteCard = (target) => {
const index = findCardIndex(target);
target.closest('.one-list-section').remove();
cards.splice(index, 1);
console.log(cards);
cardDatas.splice(index, 1);
};

const deleteListEvent = (targets) => {
targets.forEach((target) => target.addEventListener('click', (e) => deleteCard(e.target)));
};

const usedStateCard = (target) => {
const index = findCardIndex(target);
const list = target.closest('.one-list-section');
list.classList.add('gray');
list.style.transform = 'translateX(0)';
Expand All @@ -218,15 +173,39 @@ const usedCardEvent = (targets) =>
targets.forEach((target) => target.addEventListener('click', (e) => usedStateCard(e.target)));

const priceComparison = () => {
cards.sort((comp1, comp2) => comp1.itemPrice - comp2.itemPrice);
cardDatas.sort((comp1, comp2) => comp1.itemPrice - comp2.itemPrice);
renderListTpl();
};

const dateComparison = () => {
cards.sort((comp1, comp2) => new Date(comp1.dateOfUse) - new Date(comp2.dateOfUse));
cardDatas.sort((comp1, comp2) => new Date(comp1.dateOfUse) - new Date(comp2.dateOfUse));
renderListTpl();
};

const findTarget = (child, parent) => () => $.qsa(child, parent);
const eventTrigger = (type, targets, fn) => () =>
targets.forEach((target) => $.on(type, fn)(target));
const setEvent = (type, fn) => (target) => IO.of(eventTrigger(type, target, fn));

// prettier-ignore
const addEvents = (target) => {
IO.of(findTarget('.card-lists', target))
.chain(setEvent('click', handleClickOneCard))
.run();

IO.of(findTarget('.one-list-section', target))
.chain(setEvent('click', handleClickListCard))
.run();
};

const handleClickOneCard = (e) => {
const a = e.target.closest('.card-lists');
a.classList.toggle('is-flipped');
};
const handleClickListCard = () => {
console.log(2);
};

const navigateToPost = () => navigate('/post');

// prettier-ignore
Expand All @@ -238,39 +217,31 @@ MainPage.handleClickaddCard = (target) =>
// prettier-ignore
MainPage.render = () =>
_.go(
MainPage.temp,
MainPage.temp(),
$.el,
$.replace($.qs('#root')));

// prettier-ignore
const navigateMain = async () => {
_.go(
MainPage.render(),
slider(),
() => $.qsa('.mark-used-button'),
makeUsedState,
() => $.qs('.main-dropdown-button'),
$.on('click', toggleDropdown),
() => $.qs('.one-card-button'),
$.on('click', renderDetail),
() => $.qs('.list-card-button'),
$.on('click', renderList),
() => MainPage.handleClickaddCard());

header({color: 'mint'})();
const test = await getCardList();
console.log(test[0].thumbnail);

const binaryData = test[0].thumbnail;

const reader = new FileReader();
reader.onload = function(event) {
const base64Data = event.target.result;
const imgTag = document.querySelector('.card-image');
imgTag.src = `data:image/png;base64, ${base64Data}`;
};

reader.readAsDataURL(new Blob([binaryData], { type: 'image/png' }));
}
setCardDatas(await getCardList());

_.go(
MainPage.render(),
addEvents,
slider(),
() => $.qsa('.mark-used-button'),
makeUsedState,
() => $.qs('.main-dropdown-button'),
$.on('click', toggleDropdown),
() => $.qs('.one-card-button'),
$.on('click', renderDetail),
() => $.qs('.list-card-button'),
$.on('click', renderList),
() => MainPage.handleClickaddCard());

header({color: 'mint'})();
}

export default navigateMain;
// one - list - section;
// one - card - section;
Loading

0 comments on commit 8709cce

Please sign in to comment.