Merge feat(FE) : Main Page Swipe 기능 변경(#164)

feat(FE) : Main Page Swipe 기능 변경(#164)
softeerbootcamp · Feb 20, 2023 · 974e04b · 974e04b
2 parents 2e7a09f + b196e52
commit 974e04b
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 100 deletions.
diff --git a/client/src/apis/firebase.js b/client/src/apis/firebase.js
@@ -0,0 +1,7 @@
+import client from './client';
+
+export const fcmToken = (tokens) => {
+  const response = client.post('/fcm/token', { token: tokens });
+
+  return response.data;
+};
diff --git a/client/src/components/auth/login.js b/client/src/components/auth/login.js
@@ -1,12 +1,12 @@
+import { initializeApp } from 'firebase/app';
+import { getMessaging, getToken } from 'firebase/messaging';
 import { inputForm } from '@/components/common';
 import { loginU } from '@/apis/auth';
 import { navigate } from '@/core/router';
 import { INPUT } from '@/constants/constant';
 import { $ } from '@/utils';
 import { _ } from '@/utils/customFx';
-
-import { initializeApp } from "firebase/app";
-import { getMessaging, getToken } from "firebase/messaging";
+import { fcmToken } from '@/apis/firebase';
 
 const login = () => {
   const LOGIN_INPUT_TYPE = ['email', 'password'];
@@ -33,14 +33,6 @@ const login = () => {
   const addInputForm = (fragment) => (input) => inputForm({ ...input, target: fragment })();
   const loginInputs = ({ type }) => LOGIN_INPUT_TYPE.includes(type);
 
-  // const handleChange = EventMonad.of(({ target }) => {
-  //   if (!target.validity.valid) return;
-
-  //   const updatedUserData = setUserData(userData, target);
-  //   userData = updatedUserData;
-  //   console.log(userData);
-  // });
-
   const handleChange = ({ target }) => {
     if (!target.validity.valid) return;
 
@@ -56,29 +48,29 @@ const login = () => {
     navigate('/card');
 
     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);
 
-    Notification.requestPermission().then((res)=>{
-      console.log(res);
-      if(res == 'granted') {
-        getToken(messaging, {vapidKey: "BPTfJAoUaJeyzryOu29dcccPl_1Db8OC4I_yBCC4qRTn_CfSHa_F10PoafMgkUkc7ynARCpU1RGyWRb-kAoDN4Q"})
-        .then((res)=>{
-          console.log(res);})
-        }
-      if(res == 'denied') {
-        window.alert("알림을 받으시려면 알림을 허용해주세요");
-      }  
-    }).catch((err)=>{console.log(err)});
+    Notification.requestPermission().then((res) => {
+      if (res === 'granted') {
+        getToken(messaging, {
+          vapidKey:
+            'BPTfJAoUaJeyzryOu29dcccPl_1Db8OC4I_yBCC4qRTn_CfSHa_F10PoafMgkUkc7ynARCpU1RGyWRb-kAoDN4Q',
+        }).then((tokens) => {
+          fcmToken('/fcm/token', tokens);
+        });
+      }
+      if (res === 'denied') window.alert('알림을 받으시려면 알림을 허용해주세요');
+    });
   };
 
   // prettier-ignore

diff --git a/client/src/components/main/cardDetail.js b/client/src/components/main/cardDetail.js
@@ -1,8 +1,8 @@
-const cardDetail = (props) => {
+const cardDetail = (props) => (idx) => {
   const { image, thumbnail, brandName, itemName, expiresAt, price } = props;
 
   const cardDetailTemplate = `
-    <article class='card-lists'>
+    <article class='card-lists' data-idx="${idx}">
       <section class='one-card-section'>
         <img class='card-image' src=${thumbnail} alt='card-image' />
         <section class='card-info'>

diff --git a/client/src/main.js b/client/src/main.js
@@ -12,9 +12,10 @@ routes.push(
   { path: '/card', component: navigateMain },
   { path: '/post', component: initiatePostPage },
 );
-
 const path = window.location.pathname;
+
 navigate(path);
+
 window.addEventListener('resize', setScreenSize);
 
 const firebaseConfig = {
@@ -30,10 +31,15 @@ const firebaseConfig = {
 const app = initializeApp(firebaseConfig);
 const messaging = getMessaging(app);
 
-onMessage(messaging, (payload) => {
-  console.log('foreground', payload);
-  const option = {
-    body: payload.notification.body,
-  };
-  return new Notification(payload.notification.title, option);
+navigator.serviceWorker.register('../firebase-messaging-sw.js').then((res) => {
+  onMessage(messaging, (payload) => {
+    const option = {
+      body: payload.notification.body,
+      icon: payload.notification.icon,
+      badge: 'https://amatta-icons.s3.ap-northeast-2.amazonaws.com/logo/logo-pink.png',
+      vibrate: [2000, 2000, 2000],
+      sound: 'https://amatta-sound.s3.ap-northeast-2.amazonaws.com/logo/push.mp3',
+    };
+    res.showNotification(payload.notification.title, option);
+  });
 });
diff --git a/client/src/pages/MainPage.js b/client/src/pages/MainPage.js
@@ -12,6 +12,7 @@ const PLUS_ICON_URL = `${SERVER_URL.IMG}icon/plus.svg`;
 
 let touchStartX = 0;
 let touchEndX = 0;
+let idx = 0;
 let isSwipping = false;
 let cardDatas = [];
 
@@ -21,8 +22,7 @@ const detailTemp = () => `
   <div class='cards-detail-container'>
     ${_.go(
       cardDatas,
-      _.map((card) => cardDetail(card)),
-      // _.flatOne,
+      _.map((card) => cardDetail(card)(idx++)),
       _.reduce((a, b) => `${a}${b}`),
     )}
   </div>

diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
@@ -165,6 +165,7 @@
       .card-lists {
         position: relative;
         perspective: 800px;
+        // width: calc(90vw - 2.5rem - 2px);
 
         &.is-flipped {
           .one-card-section {
@@ -199,7 +200,7 @@
         transition: transform 0.6s ease-out;
         border-radius: 1.25rem;
         border: 1px $primary-color solid;
-        margin-right: 2.5rem;
+        // margin-right: 2.5rem;
         width: calc(90vw - 2.5rem - 2px);
         left: 0;
 

diff --git a/client/src/utils/slider.js b/client/src/utils/slider.js
@@ -1,82 +1,53 @@
 import { $ } from '@/utils';
 import { _ } from '@/utils/customFx';
-const slider = () => {
-  //slider.js 리팩토링하려다 실패한 부분 => 2/13 완료!!
-  const mainArticle = $.qs('.main-card-article');
-  const slide = $.qs('.cards-detail-container');
-
-  const slideWidth = mainArticle.clientWidth;
-  const slideItems = $.qsa('.one-card-section');
-  const maxSlide = slideItems.length;
-
-  let currentSlide = 1;
-  let startPoint = 0;
-  let endPoint = 0;
-
-  const setWidth = (slideWidth) => (slide.style.width = `${slideWidth * slideItems.length}px`);
 
+const slider = () => {
   const parent = document.querySelector('.cards-section');
   const children = parent.querySelectorAll('.card-lists');
-  const childCount = children.length;
+  const childrenCount = children.length;
   const parentWidth = parent.offsetWidth;
-
-  const childWidth = children[0].offsetWidth;
-  const spaceBetweenChildren = (parentWidth - childCount * childWidth) / (childCount - 1);
+  const spaceBetweenChildren = 35;
 
   children.forEach((child, index) => {
-    const left = index * (childWidth + spaceBetweenChildren);
-    left !== 0 && (child.style.left = `calc(${left}px + 2.5rem)`);
+    const left = index * (parentWidth + spaceBetweenChildren);
+    left !== 0 && (child.style.left = `calc(${left}px)`);
   });
 
-  const setOffset = () => {
-    const offset = slideWidth * 0.95 - 20;
-    const newOffset = offset * (currentSlide - 1);
-
-    slide.style.transform = `translateX(-${newOffset}px)`;
-  };
-
-  const nextMove = () => {
-    currentSlide++;
-    if (currentSlide <= maxSlide) {
-      setOffset();
-    } else {
-      currentSlide--;
-    }
+  let startX = 0;
+  let cardIdx = 0;
+  let leftMargin = 0;
+  let rightMargin = 0;
+
+  const touchStartEvent = (e) => {
+    startX = e.touches[0].pageX;
+    cardIdx = parseInt(e.target.closest('.card-lists').dataset.idx, 10) + 1;
+    leftMargin = (parentWidth + spaceBetweenChildren) * cardIdx;
+    rightMargin = (parentWidth + spaceBetweenChildren) * (cardIdx - 2);
   };
 
-  const prevMove = () => {
-    currentSlide--;
-    if (currentSlide > 0) {
-      setOffset();
-    } else {
-      currentSlide++;
-    }
+  const touchEndEvent = () => {
+    startX = 0;
+    cardIdx = 0;
+    leftMargin = 0;
+    rightMargin = 0;
   };
-  let startX = 0;
-  const touchStartEvent = ({ touches }) => (startX = touches[0].pageX);
-  const touchEndEvent = () => (startX = 0);
 
-  const touchMoveEvent = ({ touches }) => {
-    const left = childWidth + spaceBetweenChildren;
-    startX - touches[0].clientX > 7 &&
-      (parent.style.transform = `translateX(calc(-${left}px - 2.5rem))`);
+  const touchMoveEvent = (e) => {
+    if (childrenCount !== cardIdx && startX - e.touches[0].clientX > 7)
+      parent.style.transform = `translateX(-${leftMargin}px)`;
+    e.touches[0].clientX - startX > -7 &&
+      (parent.style.transform = `translateX(-${rightMargin}px)`);
   };
 
   // const left = index * (childWidth + spaceBetweenChildren);
 
   // prettier-ignore
   const cardSlider = () => 
-  // _.go(
-  //   $.qs('.cards-section'),
-  //   console.log,
-  // )
-  _.go(
-    // setWidth(slideWidth),
-    $.qs('.cards-section'),
-    _.tap($.on('touchstart', touchStartEvent)),
-    _.tap($.on('touchmove', touchMoveEvent)),
-    _.tap($.on('touchend', touchEndEvent)),
-  );
+    _.go(
+      $.qs('.cards-section'),
+      _.tap($.on('touchstart', touchStartEvent)),
+      _.tap($.on('touchmove', touchMoveEvent)),
+      _.tap($.on('touchend', touchEndEvent)));
 
   return cardSlider;
 };