File name
Commit message
Commit date
2023-05-06
2023-04-18
File name
Commit message
Commit date
2023-04-18
File name
Commit message
Commit date
2023-04-18
2023-04-18
/**
* @author : 최정우
* @since : 2022.09.20
* @dscription : React를 활용한 Client단 구현 대상인 Application의 시작점(Index) Component 입니다.
*/
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { useLocation, /* useNavigate */ } from "react-router";
//Application의 전역 상태값(변수) 저장소(Store) 관리 Component
import { setLoginUser, setSeniorList } from "./AppStore.jsx";
//Application의 Route 정보를 관리하는 Component
import {AdminApp, GovernmentApp, AgencyApp, GuardianApp} from "./AppRoute.jsx";
//Test Layout
import Header from "../layout/Header.jsx";
import Menu from "../layout/Menu.jsx";
import Login from "./login/Login.jsx";
import Weather from "./main/Weather.jsx";
import CommonUtil from "../../resources/js/CommonUtil.js";
/**************** Firebase 푸시 설정 (시작) ****************/
//Firebase 푸시 설정 모듈
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getMessaging, getToken, onMessage, onBackgroundMessage } from "firebase/messaging";
//Firebase 인증 키
const firebaseConfig = {
apiKey: "AIzaSyC7ir2BiRRIUYdwrfQVbzCIP7-nrOV1hIg",
authDomain: "senior-care-system-7723e.firebaseapp.com",
projectId: "senior-care-system-7723e",
storageBucket: "senior-care-system-7723e.appspot.com",
messagingSenderId: "687439442500",
appId: "1:687439442500:web:caf4f935a8deb0fee0c211",
measurementId: "G-0E4G93904K"
};
// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
const analytics = getAnalytics(firebaseApp);
/**************** Firebase 푸시 설정 (종료) ****************/
function App() {
/**************** Firebase 푸시 설정 (시작) ****************/
const messaging = getMessaging();
onMessage(messaging, (payload) => {
console.log('Message received. ', payload);
});
/* onBackgroundMessage(messaging, (payload) => {
console.log('Message received. ', payload);
}); */
const [token, setToken] = React.useState(null);
const requestToken = (loginUser) => {
if (!window.Notification) {
console.log('[requestToken()] 푸쉬 알람을 지원하지 않는 브라우저라, 푸쉬 토큰을 가지고오지 않습니다.');
} else {
if (Notification.permission == "granted") {
getToken(messaging, {
vapidKey: 'BCVKYse4XZVC_IZHOBdq99RtUVHDtOwaPSv2tK3NNaJve2f-UTqmqOfQuJ-eZZbHDuPPeJyeStJtFjlACqtwz8s'
}).then((currentToken) => {
console.log('currentToken : ', currentToken);
if (currentToken) {
setToken(currentToken);
if (CommonUtil.isEmpty(loginUser) == false
&& (CommonUtil.isEmpty(loginUser['push_token']) || loginUser['push_token'] != currentToken)) {
loginUser['push_token'] = currentToken
userUpdateForPushToken(loginUser);
}
/* navigator.clipboard.writeText(currentToken).then(() => {
console.log("Text copied to clipboard... : ", currentToken);
}).catch(err => {
console.log('Something went wrong', err);
}); */
} else {
// Show permission request UI
console.log('No registration token available. Request permission to generate one.');
// ...
}
}).catch((err) => {
console.log('Firebase getToken Error ', err);
});
} else {
console.log('[requestToken()] 푸쉬 알람을 권한 : ', Notification.permission);
}
}
}
const [isPush, setIsPush] = React.useState(null);
const requestPermission = (loginUser) => {
try {
if (!window.Notification) {
alert('푸쉬 알람을 지원하지 않는 브라우저입니다.');
} else {
Notification.requestPermission().then((permission) => {
console.log('permission : ', permission);
if (permission == "granted") {
setIsPush(true);
// FCM 메세지 처리
if (CommonUtil.isEmpty(loginUser) == false
&& (CommonUtil.isEmpty(loginUser['is_push']) || loginUser['is_push'] == false)) {
loginUser['is_push'] = true;
userUpdateForIsPush(loginUser);
}
} else {
setIsPush(false);
if (CommonUtil.isEmpty(loginUser) == false
&& (CommonUtil.isEmpty(loginUser['is_push']) || loginUser['is_push'] == true)) {
loginUser['is_push'] = false;
userUpdateForIsPush(loginUser);
}
}
});
}
} catch (e) {
console.error(e);
}
}
/**************** Firebase 푸시 설정 (종료) ****************/
const location = useLocation();
//const navigate = useNavigate();
//전역 변수 저장 객체
const state = useSelector((state) => {return state});
const dispatch = useDispatch();
//로그인 여부
const [isLogin, setIsLogin] = React.useState(false);
//로그인에 따라 각기 다른 App 주입 대상 변수(AdminApp, GovernmentApp, AgencyApp, GuardianApp)
const [appRoute, setAppRoute] = React.useState(null);
const [menuItems, setMenuItems] = React.useState(null);
//로그인 사용자 조회
const loginUserSelectOne = (clientLoginCheck) => {
fetch("/user/loginUserSelectOne.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({}),
}).then((response) => response.json()).then((data) => {
console.log("로그인 결과 : ", data);
//로그인 사용자 정보 전역 변수에 저장
dispatch(setLoginUser(data));
//클라이언트 로그인 체크 (콜백)
if (CommonUtil.isEmpty(clientLoginCheck) == false) {
clientLoginCheck(data);
}
}).catch((error) => {
console.log('login() /user/loginUserSelectOne.json error : ', error);
});
};
//사용자 수정 (푸시 알림 여부)
const userUpdateForIsPush = (loginUser) => {
fetch("/user/userUpdateForIsPush.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(loginUser),
}).then((response) => response.json()).then((data) => {
console.log("사용자 수정 (푸시 알림 여부) : ", data);
loginUserSelectOne();
}).catch((error) => {
console.log('login() /user/userUpdateForIsPush.json error : ', error);
});
};
//사용자 수정 (푸시 알림 토큰)
const userUpdateForPushToken = (loginUser) => {
fetch("/user/userUpdateForPushToken.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(loginUser),
}).then((response) => response.json()).then((data) => {
console.log("사용자 수정 (푸시 알림 토큰) : ", data);
loginUserSelectOne();
}).catch((error) => {
console.log('login() /user/userUpdateForPushToken.json error : ', error);
});
};
//특정 보호자의 대상자(시니어) 목록 조회
const seniorSelectListByGuardian = (loginUser) => {
fetch("/user/seniorSelectListByGuardian.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify({
'guardian_id': loginUser['user_id']
}),
}).then((response) => response.json()).then((data) => {
console.log("특정 보호자의 대상자(시니어) 목록 조회 : ", data);
//로그인 사용자 정보 전역 변수에 저장
dispatch(setSeniorList(data));
}).catch((error) => {
console.log('login() /user/seniorSelectListByGuardian.json error : ', error);
});
};
//URL 변경 시, 발생 이벤트(hook)
React.useEffect(() => {
loginUserSelectOne((loginResultData) => {
//console.log('loginResultData : ', loginResultData);
//console.log('isLogin : ', isLogin, ', authority : ', loginResultData['authority']);
//로그인 유무(로그인 정보가 있으면 True, 없으면 False)
let isLogin = (loginResultData != null && loginResultData['user_id'] != null);
setIsLogin(isLogin);
//로그인 -> 권한에 따른 App 주입
if (isLogin == true) {
if (loginResultData['authority'] == 'ROLE_ADMIN') {
setMenuItems(AdminApp.menuItems);
setAppRoute(<AdminApp.AppRoute/>);
} else if (loginResultData['authority'] == 'ROLE_GOVERNMENT') {
setMenuItems(GovernmentApp.menuItems);
setAppRoute(<GovernmentApp.AppRoute/>);
} else if (loginResultData['authority'] == 'ROLE_AGENCY') {
setMenuItems(AgencyApp.menuItems);
setAppRoute(<AgencyApp.AppRoute/>);
} else if (loginResultData['authority'] == 'ROLE_GUARDIAN' || loginResultData['authority'] == 'ROLE_SENIOR') {
setMenuItems(GuardianApp.menuItems);
setAppRoute(<GuardianApp.AppRoute/>);
if (CommonUtil.isEmpty(state.seniorList) == true) {
seniorSelectListByGuardian(loginResultData);
}
} else {
alert('권한 관련 에러 - 관리자에게 문의바랍니다.');
console.log('권한 관련 에러 - 관리자에게 문의바랍니다 : ', loginResultData);
}
if (CommonUtil.isEmpty(isPush)) {
requestPermission(loginResultData);
}
if (CommonUtil.isEmpty(token)) {
requestToken(loginResultData);
}
} else {
setIsPush(null);
setToken(null);
}
});
}, [location]);
return (
<div id="App">
{isLogin == true ? (
<div id="layout">
<Header/>
<Menu items={menuItems != null ? menuItems : null}/>
<div id="pages">
{appRoute != null ? appRoute : null}
</div>
</div>
) : (<Login/>)}
</div>
);
}
export default App;