Skip to content
Snippets Groups Projects
Commit 333763e8 authored by Hyun Woo Jeong's avatar Hyun Woo Jeong
Browse files

frontend refactoring done

parent 81baa52f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 222 additions and 147 deletions
backend/src/index.js
+ 37
− 28
View file @ 333763e8
...@@ -12,11 +12,13 @@ import articleService from './data/articleService.js'; ...@@ -12,11 +12,13 @@ import articleService from './data/articleService.js';
const app = express(); const app = express();
const PORT = 8080; const PORT = 8080;
const sessionTime = 5; // 세션시간(임시)
connectDB(); connectDB();
app.use(express.static(path.join(process.cwd(), '../frontend/build'))); app.use(express.static(path.join(process.cwd(), '../frontend/build')));
const maxAge = 1000 * 60 * 60; // 5분(임시) const maxAge = 1000 * 60 * sessionTime;
app.use(session({ app.use(session({
secret: '12345', secret: '12345',
...@@ -42,29 +44,12 @@ app.listen(PORT, () => { ...@@ -42,29 +44,12 @@ app.listen(PORT, () => {
console.log(`Listening on port ${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) => { app.post('/login', async (req, res) => {
/* /*
TODO: 토큰의 무결성 체크 TODO: 토큰의 무결성 체크
토큰이 이상이 없다면, 로그인/회원가입 로직을 수행 후 jwt 쿠키를 보낸다. 토큰이 이상이 없다면, 로그인/회원가입 로직을 수행 후 jwt 쿠키를 보낸다.
*/ */
const expires = moment().add('60','m').toDate(); const expires = moment().add(sessionTime.toString(),'m').toDate();
// 정보가 없다면 회원 가입 (강제?) // 정보가 없다면 회원 가입 (강제?)
const user = await userService.findUserByEmail(req.body.email); const user = await userService.findUserByEmail(req.body.email);
...@@ -82,16 +67,11 @@ app.post('/login', async (req, res) => { ...@@ -82,16 +67,11 @@ app.post('/login', async (req, res) => {
} }
console.log('login done') console.log('login done')
req.session.sessionid = req.body; //세션 생성 req.session.sessionid = req.body; //프론트에서 건네받은 JWT로 세션 생성
res.cookie('name', req.body.name, {expires}); //사용자 이름 쿠키 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) => { ...@@ -120,25 +100,54 @@ app.post("/post", async (req, res) => {
if(!req.session.sessionid){ if(!req.session.sessionid){
// 세션이 없엉 // 세션이 없엉
} }
console.log(db)
const inputTitle = req.body.title const inputTitle = req.body.title
const inputContent = req.body.content const inputContent = req.body.content
const inputImage = [] const inputImage = []
const useremail = req.session.sessionid.email const useremail = req.session.sessionid.email
const author = await userService.findUserByEmail(useremail); const author = await userService.findUserByEmail(useremail);
console.log(author)
await articleService.createArticle({ await articleService.createArticle({
title: inputTitle, title: inputTitle,
content: inputContent, content: inputContent,
imageUrls: inputImage, imageUrls: inputImage,
author: author[0], author: author,
comments: [], comments: [],
likes: [] likes: []
}); });
console.log('saved.') console.log('saved.')
res.send(); 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({ const ArticleSchema = new mongoose.Schema({
......
frontend/src/App.js
+ 64
− 6
View file @ 333763e8
import "./css/App.css"; 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 Main from "./pages/Main.js";
import Login from "./pages/Login.js"; import Login from "./pages/Login.js";
...@@ -8,17 +10,57 @@ import PostWrite from "./pages/PostWrite.js" ...@@ -8,17 +10,57 @@ import PostWrite from "./pages/PostWrite.js"
import Header from "./components/Header.js"; import Header from "./components/Header.js";
import GoogleLoginButton from "./components/GoogleLoginButton.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() { 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( return(
<div className="App"> <div className="App">
<UserContext.Provider value={setMyName}> <UserContext.Provider value={{isloggedIn, userName, LogIn, LogOut, CheckSession}}>
<Header user={myName}></Header> <Header islogged={isloggedIn} username={userName}></Header>
<Routes> <Routes>
<Route path="/" element={<Main/>}></Route> <Route path="/" element={<Main/>}></Route>
<Route path="/login" element={<Login/>}></Route> <Route path="/login" element={<Login/>}></Route>
...@@ -31,4 +73,20 @@ function App() { ...@@ -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; export default App;
\ No newline at end of file
frontend/src/Usercontext.js
+ 7
− 1
View file @ 333763e8
import { createContext } from 'react'; import { createContext } from 'react';
export const UserContext = createContext(null); export const UserContext = createContext({
\ No newline at end of file IsloggedIn : false,
UserName : "",
LogIn : ()=>{},
LogOut : ()=>{},
CheckSession : ()=>{}
});
\ No newline at end of file
frontend/src/components/GoogleLoginButton.js
+ 9
− 19
View file @ 333763e8
...@@ -16,8 +16,7 @@ axios.defaults.withCredentials = true; ...@@ -16,8 +16,7 @@ axios.defaults.withCredentials = true;
const GoogleLoginButton = () => { const GoogleLoginButton = () => {
const setUserName = useContext(UserContext); const userContext = useContext(UserContext);
const [cookies, setCookie, removeCookie] = useCookies(); const [cookies, setCookie, removeCookie] = useCookies();
const clientId = '716858812522-rb0pfisq317unkh4so5hvbu16p19kqp8.apps.googleusercontent.com' const clientId = '716858812522-rb0pfisq317unkh4so5hvbu16p19kqp8.apps.googleusercontent.com'
const navigate = useNavigate(); const navigate = useNavigate();
...@@ -30,20 +29,16 @@ const GoogleLoginButton = () => { ...@@ -30,20 +29,16 @@ const GoogleLoginButton = () => {
<GoogleOAuthProvider clientId={clientId}> <GoogleOAuthProvider clientId={clientId}>
<GoogleLogin <GoogleLogin
onSuccess={(res) => { onSuccess={(res) => {
let datas = res.credential.split('.') let datas = res.credential.split('.')
const obj = JSON.parse(b64DecodeUnicode(datas[1])); const obj = JSON.parse(b64DecodeUnicode(datas[1]));
// 토큰을 보내 로그인 로직 처리 requestLogin(obj).then(
// 로그인이 정상적으로 되었다면 쿠키를 등록 (response) => {
console.log(response);
let response = requestLogin(obj).then( userContext.LogIn(response.data);
(val) => { goMain();
setUserName(val) }
goMain(); )
}
);
}} }}
onFailure={(err) => { onFailure={(err) => {
console.log("Login Failed"); console.log("Login Failed");
...@@ -69,12 +64,7 @@ async function requestLogin(payloadObj) { ...@@ -69,12 +64,7 @@ async function requestLogin(payloadObj) {
method: 'post', // 통신할 방식 method: 'post', // 통신할 방식
data: payloadObj data: payloadObj
}); });
if (response.status === 200) { return response;
return response.data;
}
else {
return null;
}
} }
export default GoogleLoginButton export default GoogleLoginButton
\ No newline at end of file
frontend/src/components/Header.js
+ 38
− 78
View file @ 333763e8
import logo from '../logo.png'; import logo from '../logo.png';
import '../css/Header.css'; import '../css/Header.css';
import cookie from 'react-cookies';
import { UserContext } from '../Usercontext.js';
import React, { useEffect, useState, useContext} from 'react'; import React, { useEffect, useState, useContext} from 'react';
import { Link, useNavigate, Navigate } from "react-router-dom"; import { Link, useNavigate, Navigate } from "react-router-dom";
import { UserContext } from '../Usercontext.js'; import cookie from 'react-cookies';
import axios from 'axios';
axios.defaults.withCredentials = true;
function Welcome(props){ function Welcome(props){
...@@ -16,80 +17,50 @@ function Welcome(props){ ...@@ -16,80 +17,50 @@ function Welcome(props){
) )
} }
function ButtonLink({link, onclick, children}){ function ButtonLink({link, status, children}){
return (
<botton onClick = {()=>{
onclick(link)}}>
{children}
</botton>
)
}
function Header({user}){ const userContext = useContext(UserContext);
//console.log(cookie.load('name'))
const [currentSession, setCurrentSession] = useState(false)
const setUserName = useContext(UserContext);
const navigate = useNavigate(); const navigate = useNavigate();
function checkSession_And_Navigate(link){ function MoveTo(link){
if (cookie.load('name')) { navigate(link)
navigate(link);
setCurrentSession(true)
}
else {
setUserName(null)
if (currentSession){
alert('세션이 만료되었습니다. 로그인 후 이용해 주세요.')
}
else {
alert('로그인 후 이용해 주세요.')
}
navigate("/login");
setCurrentSession(false)
}
} }
function dont_CheckSession_And_Navigate(link){ if (status) {
if (cookie.load('name')) { return (
setCurrentSession(true) <botton onClick = {()=>{userContext.LogOut()}}>
} {children}
else { </botton>
setUserName(null) )
if (currentSession){
alert('세션이 만료되었습니다. 자동으로 로그아웃됩니다.')
}
setCurrentSession(false)
}
navigate(link);
} }
else {
function logOut(){ return (
let response = requestLogout(); <botton onClick = {()=>{MoveTo(link)}}>
if (response){ {children}
setUserName(null) </botton>
alert('로그아웃되었습니다. 메인 화면으로 돌아갑니다..') )
setCurrentSession(false)
navigate('/');
}
} }
}
function Header({islogged, username}){
//console.log(cookie.load('name'))
const [currentSession, setCurrentSession] = useState({
IsValid : false,
userName : ""
})
return( return(
<div className="header"> <div className="header">
<ButtonLink link='/' onclick={dont_CheckSession_And_Navigate}> <ButtonLink link='/'>
<img className="logo_image" alt="logo" src={logo}/> <img className="logo_image" alt="logo" src={logo}/>
</ButtonLink> </ButtonLink>
<ul> <ul>
<p>{islogged?`${username}님, 환영합니다`:'로그인하세요.'}</p>
<Welcome name={user}></Welcome>
<ul className="menu_list"> <ul className="menu_list">
<li><ButtonLink link='/' onclick={dont_CheckSession_And_Navigate}>Home</ButtonLink></li> <li><ButtonLink link='/'>Home</ButtonLink></li>
<li><ButtonLink link='/search' onclick={checkSession_And_Navigate}>검색</ButtonLink></li> <li><ButtonLink link='/search'>검색</ButtonLink></li>
<li><ButtonLink link='/postwrite' onclick={checkSession_And_Navigate}>포스트 작성</ButtonLink></li> <li><ButtonLink link='/postwrite'>포스트 작성</ButtonLink></li>
<li><ButtonLink link='/login' onclick={user?logOut:dont_CheckSession_And_Navigate}>{user?'로그아웃':'로그인'}</ButtonLink></li> {/*로그인 여부 로직 구현 필요*/} <li><ButtonLink link={islogged?'/':'/login'} status={islogged}>{islogged?'로그아웃':'로그인'}</ButtonLink></li> {/*로그인 여부 로직 구현 필요*/}
{/* { Object.keys(user).length != 0 ? {/* { Object.keys(user).length != 0 ?
<li><Link to={`/profile/${getUserId()}`}>profile</Link>/<span onClick={logout}>logout</span></li> : <li><Link to={`/profile/${getUserId()}`}>profile</Link>/<span onClick={logout}>logout</span></li> :
<li><Link to="/login">login</Link></li> <li><Link to="/login">login</Link></li>
...@@ -100,17 +71,6 @@ function Header({user}){ ...@@ -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; export default Header;
frontend/src/index.js
+ 2
− 2
View file @ 333763e8
...@@ -6,9 +6,9 @@ import App from "./App"; ...@@ -6,9 +6,9 @@ import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root")); const root = ReactDOM.createRoot(document.getElementById("root"));
root.render( root.render(
<React.StrictMode> // <React.StrictMode>
<BrowserRouter> <BrowserRouter>
<App/> <App/>
</BrowserRouter> </BrowserRouter>
</React.StrictMode> // </React.StrictMode>
); );
frontend/src/pages/Login.js
+ 9
− 0
View file @ 333763e8
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import GoogleLoginButton from "../components/GoogleLoginButton.js"; import GoogleLoginButton from "../components/GoogleLoginButton.js";
import React, { useState, useEffect, useContext } from 'react';
import { UserContext } from '../Usercontext.js';
function Button({history, children}){ function Button({history, children}){
const navigate = useNavigate(); const navigate = useNavigate();
return( return(
...@@ -11,6 +13,13 @@ function Button({history, children}){ ...@@ -11,6 +13,13 @@ function Button({history, children}){
} }
function Login() { function Login() {
const userContext = useContext(UserContext);
useEffect(() => {
// console.log(userContext)
});
return( return(
<div className="App"> <div className="App">
<h1>로그인 '해줘'</h1> <h1>로그인 '해줘'</h1>
......
frontend/src/pages/Main.js
+ 6
− 2
View file @ 333763e8
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import cookie from 'react-cookies'; 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}){ function Button({history, children}){
const navigate = useNavigate(); const navigate = useNavigate();
...@@ -13,8 +15,10 @@ function Button({history, children}){ ...@@ -13,8 +15,10 @@ function Button({history, children}){
function Main() { function Main() {
const userContext = useContext(UserContext);
useEffect(() => { useEffect(() => {
// 컴포넌트가 불러와지면 실행이 되는군. // console.log(userContext)
}); });
return( return(
<div className="App"> <div className="App">
......
frontend/src/pages/PostWrite.js
+ 25
− 10
View file @ 333763e8
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import { Map, MapMarker } from "react-kakao-maps-sdk"; 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; axios.defaults.withCredentials = true;
const {kakao} = window;
function SearchMap({loc, setLoc}){ function SearchMap({loc, setLoc}){
// 아주대학교를 기본 위치로 설정 // 아주대학교를 기본 위치로 설정
...@@ -68,6 +69,25 @@ function PostWrite(){ ...@@ -68,6 +69,25 @@ function PostWrite(){
// const [title, setTitle] = useState(''); // const [title, setTitle] = useState('');
// const [content, setContent] = useState(''); // const [content, setContent] = useState('');
// const [imageUrls, setImageUrls] = 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({ const [location, setLocation] = useState({
center: { lat: 37.28238488648025, lng: 127.04350967609274 }, center: { lat: 37.28238488648025, lng: 127.04350967609274 },
...@@ -82,11 +102,7 @@ function PostWrite(){ ...@@ -82,11 +102,7 @@ function PostWrite(){
}); });
const {title, content, imageUrls} = inputs; // 비구조화 할당; const {title, content, imageUrls} = inputs; // 비구조화 할당;
//console.log(title)
//console.log(content)
//console.log(imageUrls)
const handleSubmit= async (event) => { const handleSubmit= async (event) => {
event.preventDefault(); event.preventDefault();
...@@ -152,5 +168,4 @@ function PostWrite(){ ...@@ -152,5 +168,4 @@ function PostWrite(){
} }
export default PostWrite; export default PostWrite;
\ No newline at end of file
frontend/src/pages/Search.js
+ 25
− 1
View file @ 333763e8
import React, {useState} from "react";
import { Map, MapMarker } from "react-kakao-maps-sdk"; 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; const {kakao} = window;
//카카오 지도 API를 이용한 검색(예정) //카카오 지도 API를 이용한 검색(예정)
...@@ -51,6 +53,26 @@ function SearchMap(props){ ...@@ -51,6 +53,26 @@ function SearchMap(props){
} }
function Search(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 ( return (
<div className="search"> <div className="search">
<h1>검색페이지입니다.</h1> <h1>검색페이지입니다.</h1>
...@@ -59,4 +81,6 @@ function Search(props) { ...@@ -59,4 +81,6 @@ function Search(props) {
); );
} }
export default Search; export default Search;
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr