frontend refactoring done

backend/src/index.js

@@ -12,11 +12,13 @@ import articleService from './data/articleService.js';
 const app = express();
 const PORT = 8080;
 
+const sessionTime = 5; // 세션시간(임시)
+
 connectDB();
 
 app.use(express.static(path.join(process.cwd(), '../frontend/build')));
 
-const maxAge = 1000 * 60 * 60; // 5분(임시)
+const maxAge = 1000 * 60 * sessionTime; 
 
 app.use(session({
     secret: '12345',
@@ -42,29 +44,12 @@ app.listen(PORT, () => {
   console.log(`Listening on port ${PORT}`);
 }); // 서버 실행
 
-
-function b64_to_utf8( str ) {
-  return decodeURIComponent(escape(window.atob( str )));
-}
-
-function b64DecodeUnicode(str) {
-  // Going backwards: from bytestream, to percent-encoding, to original string.
-  return decodeURIComponent(atob(str)
-    .split('').map(function (c) {
-      return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
-    }).join(''));
-}
-
-function encode_utf8(s) {
-  return unescape(encodeURIComponent(s));
-}
-
 app.post('/login', async (req, res) => {
 	/*
 	TODO: 토큰의 무결성 체크
 	토큰이 이상이 없다면, 로그인/회원가입 로직을 수행 후 jwt 쿠키를 보낸다.
 	*/
-	const expires =  moment().add('60','m').toDate();
+	const expires =  moment().add(sessionTime.toString(),'m').toDate();
 
 	// 정보가 없다면 회원 가입 (강제?)
   const user = await userService.findUserByEmail(req.body.email);
@@ -82,16 +67,11 @@ app.post('/login', async (req, res) => {
 	}
 	console.log('login done')
 
-	req.session.sessionid = req.body; //세션 생성
+	req.session.sessionid = req.body; //프론트에서 건네받은 JWT로 세션 생성
 	res.cookie('name', req.body.name, {expires}); //사용자 이름 쿠키
 	
-	if(req.session.sessionid){
-		//console.log(req.session.sessionid);
-		//res.send('세션 o');
-	}
 
-	//통과 못하면 에러를 뱉는다
-	res.send(req.body.name);
+	res.send(req.body.name); // 이름 보내서 뭐하게?
 
 });
 
@@ -120,25 +100,54 @@ app.post("/post", async (req, res) => {
 	if(!req.session.sessionid){
 		// 세션이 없엉
 	}
-	console.log(db)
 
 	const inputTitle = req.body.title
 	const inputContent = req.body.content
 	const inputImage = []
 	const useremail = req.session.sessionid.email
   const author = await userService.findUserByEmail(useremail);
+  console.log(author)
   await articleService.createArticle({
 		title: inputTitle,
 		content: inputContent,
 		imageUrls: inputImage,
-		author: author[0],
+		author: author,
 		comments: [],
 		likes: []
 	});
+  
 	console.log('saved.')
 	res.send();
 });
 
+app.get("/check", (req, res) => {
+	if(req.session.sessionid){
+	  res.send(true);
+	}
+  else {
+	  res.send(false);
+  }
+/*
+	console.log("로그아웃");
+	if (req.session.sessionid) {
+		
+		console.log("로그아웃중입니다!");
+		req.session.destroy((err) => {
+			if (err) {
+				console.log("세션 삭제시에 에러가 발생했습니다.");
+				return;
+			}
+			console.log("세션이 삭제됐습니다.");
+		});
+		res.clearCookie('name');
+		res.send(req.body.name);
+	} else {
+		console.log("로그인이 안돼있으시네요?");
+		res.send(req.body.name);
+	}
+  */
+});
+
 /*
 
 const ArticleSchema = new mongoose.Schema({

frontend/src/App.js

 import "./css/App.css";
-import {Routes, Route } from 'react-router-dom';
+import {Routes, Route, Link, useNavigate, Navigate  } from 'react-router-dom';
+import React, { useEffect, useState, useContext} from 'react';
+import { UserContext } from './Usercontext.js';
 
 import Main from "./pages/Main.js";
 import Login from "./pages/Login.js";
@@ -8,17 +10,57 @@ import PostWrite from "./pages/PostWrite.js"
 
 import Header from "./components/Header.js";
 import GoogleLoginButton from "./components/GoogleLoginButton.js";
-import React, { useEffect, useState, useContext} from 'react';
-import { UserContext } from './Usercontext.js';
+
+import axios from 'axios';
+axios.defaults.withCredentials = true;
 
 function App() {
 	
-	const [ myName, setMyName] = useState(null);
+	const [ isloggedIn, SetIsloggedIn] = useState(false);
+	const [ userName, setUserName] = useState(null);
+	const navigate = useNavigate();
+	function MoveTo(link){
+		navigate(link)
+	}	
+	// 헤더 업데이트
+	const LogIn = (name)=>{
+		// API 로그아웃 요청
+		// 로그아웃 성공시 헤더 반영
+		SetIsloggedIn(true)
+		setUserName(name)
+
+		console.log("Usercontext:LogIn")
+		console.log(isloggedIn)
+	};
 	
+	const LogOut = ()=>{
+		// API 로그아웃 요청
+		requestLogout().then(
+			(response) => {
+				// 로그아웃 성공시 헤더 반영
+				SetIsloggedIn(false)
+				setUserName(null)
+				console.log("Usercontext:LogOut")
+				console.log(userName)
+				alert("정상적으로 로그아웃 되었습니다.")	
+				MoveTo('/')			
+			}
+		)
+		.catch((response)=>{
+			console.log("error!:LogOut")
+			console.log(response)
+		})
+	};
+
+	const CheckSession = ()=>{
+		return requestCheckSession();
+	};
+
+
   return(
     <div className="App">
-		<UserContext.Provider value={setMyName}>
-			<Header user={myName}></Header>
+		<UserContext.Provider value={{isloggedIn, userName, LogIn, LogOut, CheckSession}}>
+		<Header islogged={isloggedIn} username={userName}></Header>
 			<Routes>
 				<Route path="/" element={<Main/>}></Route>
 				<Route path="/login" element={<Login/>}></Route>
@@ -31,4 +73,20 @@ function App() {
     );
 }
 
+async function requestLogout() {
+	const response = await axios({
+	  url: 'http://localhost:8080/logout', // 통신할 웹문서
+	  method: 'get', // 통신할 방식
+	});
+	return response;
+  }
+
+async function requestCheckSession() {
+	const response = await axios({
+	  url: 'http://localhost:8080/check', // 통신할 웹문서
+	  method: 'get', // 통신할 방식
+	});
+	return response;
+  }
+
 export default App;
\ No newline at end of file

frontend/src/Usercontext.js

 import { createContext } from 'react';
 
-export const UserContext = createContext(null);
\ No newline at end of file
+export const UserContext = createContext({
+    IsloggedIn : false,
+    UserName : "",
+    LogIn : ()=>{},
+    LogOut : ()=>{},
+    CheckSession : ()=>{}
+});
\ No newline at end of file

frontend/src/components/GoogleLoginButton.js

@@ -16,8 +16,7 @@ axios.defaults.withCredentials = true;
 
 const GoogleLoginButton = () => {
 	
-  const setUserName = useContext(UserContext);
-
+  const userContext = useContext(UserContext);
   const [cookies, setCookie, removeCookie] = useCookies();
   const clientId = '716858812522-rb0pfisq317unkh4so5hvbu16p19kqp8.apps.googleusercontent.com'
   const navigate = useNavigate();
@@ -30,20 +29,16 @@ const GoogleLoginButton = () => {
       <GoogleOAuthProvider clientId={clientId}>
         <GoogleLogin
           onSuccess={(res) => {
-			
             let datas = res.credential.split('.')
             const obj = JSON.parse(b64DecodeUnicode(datas[1]));
 	
-			// 토큰을 보내 로그인 로직 처리
-			// 로그인이 정상적으로 되었다면 쿠키를 등록
-
-            let response = requestLogin(obj).then(
-				(val) => {
-					setUserName(val)
-					goMain();
-				}
-			);
-			
+            requestLogin(obj).then(
+              (response) => {
+                console.log(response);
+                userContext.LogIn(response.data);
+                goMain();
+              }
+            )
           }}
           onFailure={(err) => {
             console.log("Login Failed");
@@ -69,12 +64,7 @@ async function requestLogin(payloadObj) {
     method: 'post', // 통신할 방식
     data: payloadObj
   });
-  if (response.status === 200) {
-    return response.data;
-  }
-  else {
-    return null;
-  }
+  return response;
 }
 
 export default GoogleLoginButton
\ No newline at end of file

frontend/src/components/Header.js

 import logo from '../logo.png';
 import '../css/Header.css';
-import cookie from 'react-cookies';
+
+import { UserContext } from '../Usercontext.js';
+
 import React, { useEffect, useState, useContext} from 'react';
 import { Link, useNavigate, Navigate } from "react-router-dom";
-import { UserContext } from '../Usercontext.js';
-import axios from 'axios';
-axios.defaults.withCredentials = true;
+import cookie from 'react-cookies';
+
 
 
 function Welcome(props){
@@ -16,80 +17,50 @@ function Welcome(props){
 	)
 }
 
-function ButtonLink({link, onclick, children}){
-	
-	return (
-		<botton onClick = {()=>{
-			onclick(link)}}>
-			{children}
-		</botton>
-	)
-}
+function ButtonLink({link, status, children}){
 
-function Header({user}){
-	//console.log(cookie.load('name'))
-	const [currentSession, setCurrentSession] = useState(false)
-	
-	const setUserName = useContext(UserContext);
+	const userContext = useContext(UserContext);
 	const navigate = useNavigate();
-	function checkSession_And_Navigate(link){
-		if (cookie.load('name')) {
-			navigate(link);
-			setCurrentSession(true)
-		}
-		else {
-			setUserName(null)
-			if (currentSession){
-				alert('세션이 만료되었습니다. 로그인 후 이용해 주세요.')
-			}
-			else {
-				alert('로그인 후 이용해 주세요.')
-			}
-			
-			navigate("/login");
-			setCurrentSession(false)
-		}
+	function MoveTo(link){
+		navigate(link)
 	}
 	
-	function dont_CheckSession_And_Navigate(link){
-		if (cookie.load('name')) {
-			setCurrentSession(true)
-		}
-		else {
-			setUserName(null)
-			if (currentSession){
-				alert('세션이 만료되었습니다. 자동으로 로그아웃됩니다.')
-			}
-			setCurrentSession(false)
-		}
-		navigate(link);
+	if (status) {
+		return (
+			<botton onClick = {()=>{userContext.LogOut()}}>
+				{children}
+			</botton>
+		)
 	}
-
-	function logOut(){
-		let response = requestLogout();
-		if (response){
-			setUserName(null)
-			alert('로그아웃되었습니다. 메인 화면으로 돌아갑니다..')
-			setCurrentSession(false)
-			navigate('/');		
-		}	
+	else {
+		return (
+			<botton onClick = {()=>{MoveTo(link)}}>
+				{children}
+			</botton>
+		)
 	}
-	
+
+}
+
+function Header({islogged, username}){
+	//console.log(cookie.load('name'))
+	const [currentSession, setCurrentSession] = useState({
+		IsValid : false,
+		userName : ""
+	})
+
     return(
         <div className="header">
-			<ButtonLink link='/' onclick={dont_CheckSession_And_Navigate}>
+			<ButtonLink link='/'>
 				<img className="logo_image" alt="logo" src={logo}/>
 			</ButtonLink>
-
 			<ul>
-
-				<Welcome name={user}></Welcome>
-
+				<p>{islogged?`${username}님, 환영합니다`:'로그인하세요.'}</p>
 				<ul className="menu_list">
-					<li><ButtonLink link='/' onclick={dont_CheckSession_And_Navigate}>Home</ButtonLink></li>
-					<li><ButtonLink link='/search' onclick={checkSession_And_Navigate}>검색</ButtonLink></li>
-					<li><ButtonLink link='/postwrite' onclick={checkSession_And_Navigate}>포스트 작성</ButtonLink></li>
-					<li><ButtonLink link='/login' onclick={user?logOut:dont_CheckSession_And_Navigate}>{user?'로그아웃':'로그인'}</ButtonLink></li> {/*로그인 여부 로직 구현 필요*/}
+					<li><ButtonLink link='/'>Home</ButtonLink></li>
+					<li><ButtonLink link='/search'>검색</ButtonLink></li>
+					<li><ButtonLink link='/postwrite'>포스트 작성</ButtonLink></li>
+					<li><ButtonLink link={islogged?'/':'/login'} status={islogged}>{islogged?'로그아웃':'로그인'}</ButtonLink></li> {/*로그인 여부 로직 구현 필요*/}
 					{/* { Object.keys(user).length != 0 ? 
 						<li><Link to={`/profile/${getUserId()}`}>profile</Link>/<span onClick={logout}>logout</span></li> :
 						<li><Link to="/login">login</Link></li>
@@ -100,17 +71,6 @@ function Header({user}){
     );
 }
 
-async function requestLogout() {
-  const response = await axios({
-    url: 'http://localhost:8080/logout', // 통신할 웹문서
-    method: 'get', // 통신할 방식
-  });
-  if (response.status === 200) {
-    return response.data;
-  }
-  else {
-    return null;
-  }
-}
+
 
 export default Header;

frontend/src/index.js

@@ -6,9 +6,9 @@ import App from "./App";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
+//  <React.StrictMode>
     <BrowserRouter>
 		<App/>
     </BrowserRouter>
-  </React.StrictMode>
+//  </React.StrictMode>
 );

frontend/src/pages/Login.js

 import { useNavigate } from 'react-router-dom';
 import GoogleLoginButton from "../components/GoogleLoginButton.js";
+import React, { useState, useEffect, useContext } from 'react';
 
+import { UserContext } from '../Usercontext.js';
 function Button({history, children}){
   const navigate = useNavigate();
   return(
@@ -11,6 +13,13 @@ function Button({history, children}){
 }
 
 function Login() {
+
+  const userContext = useContext(UserContext);
+
+  useEffect(() => {
+    // console.log(userContext)
+  });
+
   return(
     <div className="App">
       <h1>로그인 '해줘'</h1>

frontend/src/pages/Main.js

 import { useNavigate } from 'react-router-dom';
 import cookie from 'react-cookies';
-import React, { useState, useEffect, useContext } from 'react';
+import { UserContext } from '../Usercontext.js';
+
+import React, { useEffect, useState, useContext} from 'react';
 
 function Button({history, children}){
   const navigate = useNavigate(); 
@@ -13,8 +15,10 @@ function Button({history, children}){
 
 function Main() {
 
+  const userContext = useContext(UserContext);
+
   useEffect(() => {
-    // 컴포넌트가 불러와지면 실행이 되는군.
+    // console.log(userContext)
   });
   return(
     <div className="App">

frontend/src/pages/PostWrite.js

-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import axios from 'axios';
 import { Map, MapMarker } from "react-kakao-maps-sdk";
+import React, { useState, useEffect, useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
 
-const {kakao} = window;
+import { UserContext } from '../Usercontext.js';
+import axios from 'axios';
 axios.defaults.withCredentials = true;
 
+const {kakao} = window;
 function SearchMap({loc, setLoc}){
     // 아주대학교를 기본 위치로 설정
 
@@ -68,6 +69,25 @@ function PostWrite(){
     // const [title, setTitle] = useState('');
     // const [content, setContent] = useState('');
     // const [imageUrls, setImageUrls] = useState([]);
+    const userContext = useContext(UserContext);
+	const navigate = useNavigate();
+	function MoveTo(link){
+		navigate(link)
+	}	
+    useEffect(() => {
+        const session = userContext.CheckSession()
+        .then((response) => {
+            if (!response.data) {
+                alert("세션이 만료되었습니다. 다시 로그인 바랍니다.")
+                MoveTo('/login')
+             }
+		})
+		.catch((response)=>{
+			console.log("error!:LogOut")
+			console.log(response)
+		})
+      });
+
 
     const [location, setLocation] = useState({
         center: { lat: 37.28238488648025, lng: 127.04350967609274 },
@@ -82,11 +102,7 @@ function PostWrite(){
     });
 
     const {title, content, imageUrls} = inputs; // 비구조화 할당;
-	
-	//console.log(title)
-	//console.log(content)
-	//console.log(imageUrls)
-	
+
     const handleSubmit= async (event) => {
         event.preventDefault();
 		
@@ -152,5 +168,4 @@ function PostWrite(){
 
 }
 
-
 export default PostWrite;
\ No newline at end of file

frontend/src/pages/Search.js

-import React, {useState} from "react";
 import { Map, MapMarker } from "react-kakao-maps-sdk";
+import React, { useState, useEffect, useContext } from 'react';
+import {Routes, Route, Link, useNavigate, Navigate  } from 'react-router-dom';
 
+import { UserContext } from '../Usercontext.js';
 const {kakao} = window;
 
 //카카오 지도 API를 이용한 검색(예정)
@@ -51,6 +53,26 @@ function SearchMap(props){
 }
 
 function Search(props) {
+
+    const userContext = useContext(UserContext);
+	const navigate = useNavigate();
+	function MoveTo(link){
+		navigate(link)
+	}	
+    useEffect(() => {
+        const session = userContext.CheckSession()
+        .then((response) => {
+            if (!response.data) {
+                alert("세션이 만료되었습니다. 다시 로그인 바랍니다.")
+                MoveTo('/login')
+             }
+		})
+		.catch((response)=>{
+			console.log("error!:LogOut")
+			console.log(response)
+		})
+      });
+
     return (
 		<div className="search">
 			<h1>검색페이지입니다.</h1>
@@ -59,4 +81,6 @@ function Search(props) {
     );
 }
 
+
+
 export default Search;
\ No newline at end of file