Skip to content

Commit

Permalink
Merge feat(FE) : 검색 기능 추가(#164)
Browse files Browse the repository at this point in the history
feat(FE) : 검색 기능 추가(#164)
  • Loading branch information
SUMMERLOVE7 authored Feb 22, 2023
2 parents 0667799 + 4f4d58f commit bafef17
Show file tree
Hide file tree
Showing 19 changed files with 146 additions and 184 deletions.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
10 changes: 5 additions & 5 deletions client/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,28 @@
"short_name": "Amatta",
"icons": [
{
"src": "https://amatta-icons.s3.ap-northeast-2.amazonaws.com/app/icon-x128.png",
"src": "assets/icon-x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "https://amatta-icons.s3.ap-northeast-2.amazonaws.com/app/icon-x192.png",
"src": "assets/icon-x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "https://amatta-icons.s3.ap-northeast-2.amazonaws.com/app/icon-x384.png",
"src": "assets/icon-x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "https://amatta-icons.s3.ap-northeast-2.amazonaws.com/app/icon-x512.png",
"src": "assets/icon-x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "https://amatta.site/",
"start_url": "/",
"display": "fullscreen",
"background_color": "#92b8b1",
"theme_color": "#ffffff"
Expand Down
94 changes: 41 additions & 53 deletions client/service-worker.js
Original file line number Diff line number Diff line change
@@ -1,61 +1,49 @@
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');

const CACHE = 'cache-offline-page';
const offlineFallbackPage = 'offline.html';

self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') {
self.skipWaiting();
}
});
const CACHE_NAME = 'my-pwa-cache';
const urlsToCache = ['/', '/offline.html'];

self.addEventListener('install', (event) => {
event.waitUntil(
caches
.open(CACHE)
.then((cache) =>
cache.addAll([
'https://amatta.site/',
'./offline.html',
'https://amatta-icons.s3.ap-northeast-2.amazonaws.com/app/icon-x128.png',
'https://amatta-icons.s3.ap-northeast-2.amazonaws.com/app/icon-x192.png',
'https://amatta-icons.s3.ap-northeast-2.amazonaws.com/app/icon-x384.png',
'https://amatta-icons.s3.ap-northeast-2.amazonaws.com/app/icon-x512.png',
]),
),
);
event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(urlsToCache)));
});

if (workbox.navigationPreload.isSupported()) {
workbox.navigationPreload.enable();
}

workbox.routing.registerRoute(
new RegExp('/*'),
new workbox.strategies.StaleWhileRevalidate({
cacheName: CACHE,
}),
);

self.addEventListener('fetch', (event) => {
if (event.request.mode === 'navigate') {
event.respondWith(
(async () => {
try {
const preloadResp = await event.preloadResponse;

if (preloadResp) {
return preloadResp;
event.respondWith(
caches
.match(event.request)
.then((response) => {
if (response) {
return response;
}
return fetch(event.request).then((response) => {
if (response.status === 404) {
return caches.match('/offline.html');
}
const responseToCache = response.clone();
caches.open(CACHE_NAME).then((cache) => {
cache.put(event.request, responseToCache);
});
return response;
});
})
.catch(() => {
return caches.match('/offline.html');
}),
);
});

const networkResp = await fetch(event.request);
return networkResp;
} catch (error) {
const cache = await caches.open(CACHE);
const cachedResp = await cache.match(offlineFallbackPage);
return cachedResp;
}
})(),
);
}
self.addEventListener('beforeinstallprompt', (event) => {
event.preventDefault();
const promptEvent = event;
const installButton = document.createElement('button');
installButton.textContent = 'Add to Home Screen';
document.body.appendChild(installButton);
installButton.addEventListener('click', () => {
promptEvent.prompt();
promptEvent.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the install prompt');
} else {
console.log('User dismissed the install prompt');
}
});
});
});
4 changes: 2 additions & 2 deletions client/src/apis/card.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import client from './client';

export const getCardList = async () => {
export const getCardList = async (query = '') => {
try {
const response = await client.get(`gifticon/test`);
const response = await client.get(`gifticon/test?keyword=${query}`);

return response.data;
} catch (e) {
Expand Down
24 changes: 24 additions & 0 deletions client/src/apis/client.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import axios from 'axios';
import { SERVER_URL } from '@/constants/constant';
import { navigate } from '@/core/router';
import { notification } from '@/components/common';

const baseURL = SERVER_URL.API;

Expand All @@ -9,4 +11,26 @@ const client = axios.create({

client.defaults.withCredentials = true;

client.interceptors.response.use(
(response) => response,
(error) => {
if (error.response && error.response.status) {
switch (error.response.status) {
case 401:
navigate('/');
notification('로그인이 필요합니다.', 'login')();
return new Promise(() => {});
case 400:
notification(`${error.response.data}`, 'login')();
return new Promise(() => {});
default:
return Promise.reject(error);
}
} else if (error.code === 'ERR_NETWORK') {
notification('올바르지 않은 이미지 형식입니다.', 'login')();
}
return Promise.reject(error);
},
);

export default client;
1 change: 0 additions & 1 deletion client/src/components/auth/login.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ const login = () => {
const submitData = async (e) => {
e.stopPropagation();
e.preventDefault();
console.log('뭔데');
await loginU({ email: '[email protected]', password: 'testPassword' });
// await loginU(userData);

Expand Down
22 changes: 18 additions & 4 deletions client/src/components/common/header.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { logoutU } from '@/apis/auth';
import { _ } from '@/utils/customFx';
import { IO, $ } from '@/utils';
import { sideMenu, modal } from '@/components/common';

// search-button //
const header = (props) => {
const { color, label, path } = props;
Expand All @@ -14,6 +15,7 @@ const header = (props) => {

const mintTemp = `
<img class='small-logo-white' src='${WHITE_LOGO_URL}' alt='amatta-small-logo'/>
<input class='search-card-input' autofocus placeholder='검색어를 입력해주세요.'/>
<section class='header-button-section'>
<img class="search-button" src='${SEARCH_ICON_URL}' alt='search-button' />
<section class="trigger">
Expand Down Expand Up @@ -108,12 +110,24 @@ const header = (props) => {
const setEvent = (type, fn) => (target) => IO.of(eventTrigger(type, target, fn));
const findTarget = (child, parent) => () => $.qs(child, parent);
const handleClickSearchIcon = (target) => (e) => {
target.style.filter =
'invert(0%) sepia(0%) saturate(7445%) hue-rotate(197deg) brightness(86%) contrast(93%)';
target.style.transform = 'translateY(50px)';
const inputTarget = $.qs('.search-card-input');
if (!target.classList.contains('searching')) {
target.style.filter =
'invert(66%) sepia(2%) saturate(19%) hue-rotate(334deg) brightness(97%) contrast(82%)';
inputTarget.style.animation = 'search 0.5s ease-in-out forwards';
target.classList.add('searching');
} else {
target.style.filter =
'invert(100%) sepia(0%) saturate(0%) hue-rotate(113deg) brightness(104%) contrast(101%)';
target.classList.remove('searching');
inputTarget.style.opacity = '0';
inputTarget.style.animation = '';
}
};

const addEvents = (target) => {
if (!$.qs('.search-button')) return;

IO.of(findTarget('.search-button', target))
.chain(setEvent('click', handleClickSearchIcon($.qs('.search-button'))))
.run();
Expand All @@ -135,7 +149,7 @@ const header = (props) => {
$.append($.qs('.header-main')),
() => $.qs('.trigger'),
$.on('click', openMenuEvent));
//addEvents(document);
addEvents(document);
}
return appendHeader;
};
Expand Down
29 changes: 0 additions & 29 deletions client/src/components/main/cardSearch.js

This file was deleted.

1 change: 0 additions & 1 deletion client/src/components/main/index.js
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
export { default as cardDetail } from './cardDetail';
export { default as searchCard } from './cardSearch';
4 changes: 2 additions & 2 deletions client/src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const messaging = getMessaging(app);
// if ('serviceWorker' in navigator) {
// window.addEventListener('load', () => {
// navigator.serviceWorker
// .register('../service-worker.js')
// .register('./service-worker.js')
// .then((reg) => {
// console.log('Service worker registered!!!!!!!.', reg);
// })
Expand All @@ -53,7 +53,7 @@ const messaging = getMessaging(app);
// });
// }

navigator.serviceWorker.register('../firebase-messaging-sw.js').then((res) => {
navigator.serviceWorker.register('./firebase-messaging-sw.js').then((res) => {
onMessage(messaging, (payload) => {
const option = {
body: payload.notification.body,
Expand Down
32 changes: 22 additions & 10 deletions client/src/pages/MainPage.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import JsBarcode from 'jsbarcode';
import { SERVER_URL } from '@/constants/constant';
import { cardDetail, searchCard } from '@/components/main';
import { cardDetail } from '@/components/main';
import { dropdownMenu, header, notification } from '@/components/common';
import { IO, $, slider } from '@/utils';
import { _ } from '@/utils/customFx';
Expand Down Expand Up @@ -80,7 +80,15 @@ const handleSortClick = ({ target }, dropdownSection) => {
dropdownSection.innerHTML = dropdownMenu(sortOption);
$.on('click', toggleDropdown)($.qs('.main-dropdown-button'));
dropdownSection.classList.remove('drop');
// changeCardData(cardDatas);
};

const handleClickSearchIcon = (target) => async (e) => {
e.preventDefault();
const inputTarget = $.qs('.search-card-input');

if (target.classList.contains('searching')) return;
const newData = await getCardList(inputTarget.value);
navigateMain(newData);
};

const toggleDropdown = () => {
Expand Down Expand Up @@ -150,6 +158,10 @@ const addEvents = (target) => {
IO.of(findTarget('.card-lists', target))
.chain(setEvent('click', handleClickOneCard))
.run();

IO.of(findTarget('.search-button', target))
.chain(setEvent('click', handleClickSearchIcon($.qs('.search-button'))))
.run();
};

const handleClickOneCard = ({ target }) => {
Expand All @@ -175,13 +187,13 @@ MainPage.render = () =>
$.replace($.qs('#root')));

// prettier-ignore
const navigateMain = async () => {
setCardDatas(await getCardList());
const navigateMain = async (newData = '') => {
newData = '/card' && (newData = '');
setCardDatas(await getCardList(newData));
dateComparison();

_.go(
MainPage.render(),
addEvents,
slider(),
() => $.qsa('.mark-used-button'),
makeUsedState,
Expand All @@ -192,10 +204,10 @@ const navigateMain = async () => {
() => $.qs('.list-card-button'),
$.on('click', switchLayout),
() => MainPage.handleClickaddCard());

header({color: 'mint'})();
createBarcode();
searchCard()();
createBarcode();
header({color: 'mint'})();
addEvents(document);
}

export default navigateMain;
2 changes: 0 additions & 2 deletions client/src/pages/PostPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,6 @@ const uploadImg = (file) => {
const imageData = { gifticonBase64: base64URL, format: imageType.replace('data:image/', '') };
const list = [];
const response = await sendImage(imageData);
console.log(response);
response.images[0].fields.forEach((field) => {
if (field.inferConfidence >= 0.92) {
const object = {};
Expand Down Expand Up @@ -143,7 +142,6 @@ const uploadImg = (file) => {
diff <= 10 ? (acc[acc.length - 1] += cur.text) : acc.push(cur.text);
return acc;
}, []);
console.log(lastArr);
const { itemName, brandName, expiresAt, barcode } = await sendImageInfo({ texts: lastArr });

changeHeader('white');
Expand Down
Loading

0 comments on commit bafef17

Please sign in to comment.