Skip to content
Snippets Groups Projects
Commit 1d93704f authored by Jaeyong Lee's avatar Jaeyong Lee
Browse files

Resolve Merge

parents e9a7dc82 fc4f3804
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/pages/Main.js
+ 52
− 57
View file @ 1d93704f
...@@ -2,84 +2,79 @@ import { useNavigate } from 'react-router-dom'; ...@@ -2,84 +2,79 @@ import { useNavigate } from 'react-router-dom';
import { UserContext } from '../Context.js'; import { UserContext } from '../Context.js';
import Article from '../components/Article.js'; import Article from '../components/Article.js';
import React, { useEffect, useState, useContext} from 'react'; import React, { useEffect, useState, useContext } from 'react';
import '../css/Main.css'
import axios from 'axios'; import axios from 'axios';
axios.defaults.withCredentials = true; axios.defaults.withCredentials = true;
function Button({ history, children }) {
function Button({history, children}){ const navigate = useNavigate();
const navigate = useNavigate(); return (
return( <button style={{ width: '40px', height: '30px' }} onClick={() => { navigate('/search'); }}>
<button onClick={() => {navigate('/search');}}> {children}
{children} </button>
</button> );
);
} }
function Main() { function Main() {
const userContext = useContext(UserContext); const userContext = useContext(UserContext);
const [articleList, setArticleList] = useState([]) const [articleList, setArticleList] = useState([]);
let listItem = []; let listItem = [];
listItem = articleList.map((article)=>{ listItem = articleList.map((article) => {
return( return (
<Article <Article
key={article._id} key={article._id}
data={article} data={article}
></Article> ></Article>
) )
} }
) )
useEffect(() => { useEffect(() => {
requestLoadArticle() requestSortArticle("time")
.then((response) => { .then((response) => {
console.log(response) console.log(response)
setArticleList(response.data) setArticleList(response.data)
}) })
}, []); }, []);
const handleSortChange = (event) => { const handleSortChange = (event) => {
console.log(event.target.value)
requestSortArticle(event.target.value) requestSortArticle(event.target.value)
.then((response) => { .then((response) => {
console.log(response) console.log(response)
setArticleList(response.data) setArticleList(response.data)
}) })
}; };
return( return (
<div className="App"> <div className="App">
<h1>식도락에 오신 것을 환영합니다. </h1> <h1>모두의 食道樂</h1>
<div className="intro"> <div className="introduction">
<p>식당 리뷰를 손쉽게 모아볼 수 있는 서비스</p> 가보고 싶은 식당을 찾아보고, 가본 식당을 기록해보세요!
</div> </div>
<div style={{display: 'flex'}}> <div style={{ display: 'flex' }}>
<Button>검색</Button> <select id="addInputPrior" defaultValue={"time"} onChange={handleSortChange}>
<select id="addInputPrior" onChange={handleSortChange}> <option value="time">최신순</option>
<option value="time">최신순</option> <option value="like">인기순</option>
<option value="like">인기순</option> </select>
</select> </div>
</div> {listItem}
</div>);
{listItem}
</div>)
;
} }
async function requestLoadArticle() { async function requestLoadArticle() {
const response = await axios({ const response = await axios({
url: 'http://localhost:8080/article', // 통신할 웹문서 url: 'http://localhost:8080/article', // 통신할 웹문서
method: 'get', // 통신할 방식 method: 'get', // 통신할 방식
}); });
return response; return response;
} }
async function requestSortArticle(crit) { async function requestSortArticle(crit) {
const response = await axios({ const response = await axios({
url: `http://localhost:8080/article/sort/${crit}`, // 통신할 웹문서 url: `http://localhost:8080/article/sort/${crit}`, // 통신할 웹문서
method: 'get', // 통신할 방식 method: 'get', // 통신할 방식
}); });
return response; return response;
} }
export default Main; export default Main;
frontend/src/pages/PostRead.js
+ 76
− 79
View file @ 1d93704f
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import React, { useEffect, useState, useContext} from 'react'; import React, { useEffect, useState, useContext } from 'react';
import Article from '../components/Article.js'; import Article from '../components/Article.js';
import { UserContext, ArticleContext } from '../Context.js'; import { UserContext, ArticleContext } from '../Context.js';
import MapLocator from '../components/MapForLoaction.js'; import MapLocator from '../components/MapForLoaction.js';
...@@ -18,48 +18,47 @@ function PostRead() { ...@@ -18,48 +18,47 @@ function PostRead() {
const [inputComment, setInputComment] = useState("") const [inputComment, setInputComment] = useState("")
const [commentList, setCommentList] = useState("") const [commentList, setCommentList] = useState("")
const navigate = useNavigate(); const navigate = useNavigate();
function MoveTo(link){ function MoveTo(link) {
navigate(link) navigate(link)
} }
useEffect(() => { useEffect(() => {
console.log(userinfo);
userContext.CheckSession() userContext.CheckSession()
.then((response) => { .then((response) => {
if (!response.data) { if (!response.data) {
alert("세션이 만료되었습니다. 다시 로그인 바랍니다.") alert("로그인 바랍니다.");
MoveTo('/login') MoveTo('/login');
} }
else{ else {
return requestLoadArticleById(params.id) return requestLoadArticleById(params.id)
} }
}) })
.then((response) => { .then((response) => {
console.log(response) console.log(response)
setArticle(response.data) setArticle(response.data)
})
}) .catch((response) => {
.catch((response)=>{ console.log("error!:LogOut")
console.log("error!:LogOut") console.log(response)
console.log(response) })
})
}, []); }, []);
function SetLike(){ function SetLike() {
axios.put(`http://localhost:8080/article/${params.id}/like`) axios.put(`http://localhost:8080/article/${params.id}/like`)
.then(res => { .then(res => {
alert("The comment is successfully uploaded"); return requestLoadArticleById(params.id)
return requestLoadArticleById(params.id) })
}) .then(res => {
.then(res => { setArticle(res.data)
setArticle(res.data) })
}) .catch(err => {
.catch(err => { console.error(err);
console.error(err); });
});
} }
const onTextChange = (e) => { const onTextChange = (e) => {
const {value} = e.target; const { value } = e.target;
setInputComment(value); setInputComment(value);
} }
...@@ -69,79 +68,77 @@ function PostRead() { ...@@ -69,79 +68,77 @@ function PostRead() {
alert("댓글을 작성해주세요."); alert("댓글을 작성해주세요.");
return return
} }
const data = {content: inputComment} const data = { content: inputComment }
axios.post(`http://localhost:8080/article/${params.id}/comment`, data, axios.post(`http://localhost:8080/article/${params.id}/comment`, data,
{ {
headers: {"Content-Type": 'application/json'} headers: { "Content-Type": 'application/json' }
}) })
.then(res => { .then(res => {
alert("The comment is successfully uploaded"); return requestLoadArticleById(params.id)
return requestLoadArticleById(params.id) })
}) .then(res => {
.then(res => { setArticle(res.data)
setArticle(res.data) })
}) .catch(err => {
.catch(err => { console.error(err);
console.error(err); });
});
}; };
function DelButton({isThatYou, target}){ function DelButton({ isThatYou, target }) {
function deleteArticle(){ function deleteArticle() {
console.log(target._id) console.log(target._id)
requestDeleteArticleById(target._id).then(res => { requestDeleteArticleById(target._id).then(res => {
alert("The article is successfully deleted"); alert("게시글이 삭제되었습니다");
MoveTo('/') MoveTo('/')
}) })
.catch(err => { .catch(err => {
console.error(err); console.error(err);
}); });
} }
if (isThatYou) { if (isThatYou) {
return(<button onClick={deleteArticle}>지우기</button>) return (<button onClick={deleteArticle}>지우기</button>)
} }
else { else {
return null return null
} }
} }
if (article) { if (article) {
return( return (
<> <>
<div className="introduction" style={{display: 'flex'}}> <div className="introduction" style={{ display: 'flex' }}>
<MapLocator loc={{lat: article.latitude, lng: article.longitude}} keyword={article.keyword}></MapLocator> <MapLocator loc={{ lat: article.latitude, lng: article.longitude }} keyword={article.keyword}></MapLocator>
<div> <div>
<Article data={article}></Article> <Article data={article}></Article>
<div style={{display: 'flex'}}> <div style={{ display: 'flex' }}>
<button onClick={SetLike}>조와요</button> <button onClick={SetLike}>좋아요</button>
<DelButton isThatYou={userinfo.id === article.author.user_id} target={article}></DelButton> <DelButton isThatYou={userinfo.id === article.author.google.id} target={article}></DelButton>
</div> </div>
<ArticleContext.Provider value={{ requestLoadArticleById, setArticle }}>
{
article.comments.map((el) => {
return (
<Comment key={el._id} data={el}></Comment>
)
})
}
</ArticleContext.Provider>
</div> </div>
</div> </div>
<form onSubmit={onSubmit}> <form onSubmit={onSubmit}>
<div style={{display: 'flex'}}> <div style={{ display: 'flex' }}>
<button>댓글 작성</button> <button>댓글 작성</button>
<input type="text" onChange={onTextChange}></input> <input type="text" onChange={onTextChange}></input>
</div> </div>
</form> </form>
<ArticleContext.Provider value={{requestLoadArticleById, setArticle}}>
{
article.comments.map((el)=>{
return(
<Comment key={el._id} data={el}></Comment>
)
})
}
</ArticleContext.Provider>
</> </>
) )
} }
else { else {
return( return (
<div className="introduction" style={{display: 'flex'}}> <div className="introduction" style={{ display: 'flex' }}>
<p>로딩준</p> <p>로딩중입니다...</p>
</div> </div>
) )
} }
......
frontend/src/pages/PostWrite.js
+ 151
− 158
View file @ 1d93704f
...@@ -6,178 +6,171 @@ import SearchMap from '../components/SearchMapByKeyword.js' ...@@ -6,178 +6,171 @@ import SearchMap from '../components/SearchMapByKeyword.js'
import axios from 'axios'; import axios from 'axios';
axios.defaults.withCredentials = true; axios.defaults.withCredentials = true;
function PostWrite(){ function PostWrite() {
const [location, setLocation] = useState({ const [location, setLocation] = useState({
keyword: "", keyword: "",
center: { lat: null, lng: null } center: { lat: null, lng: null }
}); });
const navigate = useNavigate(); const navigate = useNavigate();
function MoveTo(link){ function MoveTo(link) {
navigate(link) navigate(link)
} }
const userContext = useContext(UserContext); const userContext = useContext(UserContext);
useEffect(() => { useEffect(() => {
userContext.CheckSession() userContext.CheckSession()
.then((response) => { .then((response) => {
if (!response.data) { if (!response.data) {
alert("세션이 만료되었습니다. 다시 로그인 바랍니다.") alert("로그인 바랍니다.");
MoveTo('/login') MoveTo('/login');
}
})
.catch((response)=>{
console.log("error!:LogOut")
console.log(response)
})
});
const [previewImg, setPreviewImg] = useState({
imageUrls: [],
});
const [content, setContent] = useState("");
const [inputs, setInputs] = useState({
title: "",
content: "",
});
const onTextChange = (e) => {
const {value, name} = e.target;
setInputs({
...inputs,
[name]: value
});
}
const onImgChange = e => {
let temp = []
for (let i=0; i< e.target.files.length; i++) {
temp.push(e.target.files[i])
} }
})
setContent(e.target.files); .catch((response) => {
console.log("error!:LogOut")
Array.from(e.target.files).forEach((file) => { console.log(response)
const reader = new FileReader(); })
console.log(file) });
reader.readAsDataURL(file);
reader.onloadend = () => { const [previewImg, setPreviewImg] = useState({
previewImg.imageUrls.push(reader.result); imageUrls: [],
setPreviewImg({ });
imageUrls: previewImg.imageUrls
}); const [content, setContent] = useState("");
}; const [inputs, setInputs] = useState({
title: "",
content: "",
});
const onTextChange = (e) => {
const { value, name } = e.target;
setInputs({
...inputs,
[name]: value
});
}
const onImgChange = e => {
let temp = []
for (let i = 0; i < e.target.files.length; i++) {
temp.push(e.target.files[i])
}
setContent(e.target.files);
Array.from(e.target.files).forEach((file) => {
const reader = new FileReader();
console.log(file)
reader.readAsDataURL(file);
reader.onloadend = () => {
previewImg.imageUrls.push(reader.result);
setPreviewImg({
imageUrls: previewImg.imageUrls
}); });
}; };
});
};
let imglist = [];
imglist = previewImg.imageUrls.map((image) => {
return (
<img
src={image ? image : null}
alt="이미지"
style={{ width: "100px", height: "100px" }}
/>
)
}
);
let imglist = []; const onSubmit = e => {
imglist = previewImg.imageUrls.map((image)=>{
return(
<img
src={image ? image :null}
alt="이미지"
style={{ width: "100px", height: "100px"}}
/>
)
}
);
const onSubmit = e => {
e.preventDefault();
if (!location.keyword) {
alert("위치를 알려주세요.");
return
}
if (!inputs.title) { e.preventDefault();
alert("제목을 입력해주세요.");
return
}
if (!inputs.content) { if (!location.keyword) {
alert("내용을 입력해주세요."); alert("위치를 입력해주세요.");
return return;
} }
const formData = new FormData(); if (!inputs.title) {
Array.from(content).forEach((el) => { alert("제목을 입력해주세요.");
formData.append("img", el); return;
}); }
formData.append("title", inputs.title);
formData.append("content", inputs.content);
formData.append("keyword", location.keyword);
formData.append("latitude", location.center.lat);
formData.append("longitude", location.center.lng);
axios
.post("http://localhost:8080/article", formData,
{
headers: {"Content-Type": "multipart/form-data"}
})
.then(res => {
alert("The file is successfully uploaded");
MoveTo('/')
})
.catch(err => {
console.error(err);
});
};
// <input readOnly={true} type="text" placeholder="장소 키워드" value={location.keyword} /> if (!inputs.content) {
// <input readOnly={true} type="text" placeholder="위도" value={location.center.lat} /> alert("내용을 입력해주세요.");
// <input readOnly={true} type="text" placeholder="경도" value={location.center.lng} /> return;
}
return( const formData = new FormData();
Array.from(content).forEach((el) => {
formData.append("img", el);
});
formData.append("title", inputs.title);
formData.append("content", inputs.content);
formData.append("keyword", location.keyword);
formData.append("latitude", location.center.lat);
formData.append("longitude", location.center.lng);
axios
.post("http://localhost:8080/article", formData,
{
headers: { "Content-Type": "multipart/form-data" }
})
.then(res => {
MoveTo('/')
})
.catch(err => {
console.error(err);
});
};
return (
<> <>
<section style={{display: "flex"}}> <section style={{ display: "flex" }}>
<div> <div>
<SearchMap loc={location} setLoc={setLocation}></SearchMap> <SearchMap loc={location} setLoc={setLocation}></SearchMap>
</div> </div>
<div> <div>
<form onSubmit={onSubmit}> <form onSubmit={onSubmit}>
<div style={{display: "flex"}}> <div style={{ display: "flex" }}>
<input readOnly={true} type="text" placeholder="장소 키워드" value={location.keyword} /> <input readOnly={true} type="text" placeholder="장소 키워드" value={location.keyword} />
<button type="button" onClick={()=>{ <button type="button" onClick={() => {
setLocation({ setLocation({
keyword: "", keyword: "",
center: { lat: null, lng: null } center: { lat: null, lng: null }
})}}>선택 해제</button> })
</div> }}>선택 해제</button>
<div style={{display: "grid"}}> </div>
<label>제목</label> <div style={{ display: "grid" }}>
<input <label>제목</label>
type="text" <input
name='title' type="text"
onChange={onTextChange} name='title'
/> onChange={onTextChange}
</div> />
<div style={{display: "grid"}}> </div>
<label>Content</label> <div style={{ display: "grid" }}>
<input <label>Content</label>
type="text" <input
name='content' type="text"
onChange={onTextChange} name='content'
/> onChange={onTextChange}
</div> />
<div style={{display: "grid"}}> </div>
<div style={{display: "flex"}}> <div style={{ display: "grid" }}>
{imglist} <div style={{ display: "flex" }}>
</div> {imglist}
<label htmlFor="profileImg">이미지 업로드</label> </div>
<input style={{ display: "none"}} id="profileImg" type="file" onChange={onImgChange} multiple/> <label htmlFor="profileImg">이미지 업로드</label>
</div> <input style={{ display: "none" }} id="profileImg" type="file" onChange={onImgChange} multiple />
<button type="submit">포스팅!</button> </div>
<button type="submit">포스팅!</button>
</form> </form>
</div> </div>
</section>
</section> </>
</> )
)
} }
/* /*
......
frontend/src/pages/Search.js
+ 87
− 88
View file @ 1d93704f
import { Map, MapMarker } from "react-kakao-maps-sdk"; import { Map, MapMarker } from "react-kakao-maps-sdk";
import React, { useState, useEffect, useContext } from 'react'; import React, { useState, useEffect, useContext } from 'react';
import {Routes, Route, Link, useNavigate, Navigate } from 'react-router-dom'; import { Routes, Route, Link, useNavigate, Navigate } from 'react-router-dom';
import SearchMap from '../components/SearchMapByKeyword.js' import SearchMap from '../components/SearchMapByKeyword.js'
import { UserContext } from '../Context.js'; import { UserContext } from '../Context.js';
import Article from '../components/Article.js'; import Article from '../components/Article.js';
import axios from 'axios'; import axios from 'axios';
axios.defaults.withCredentials = true; axios.defaults.withCredentials = true;
const {kakao} = window; const { kakao } = window;
function Search(props) { function Search(props) {
const [articleList, setArticleList] = useState([]) const [articleList, setArticleList] = useState([])
const userContext = useContext(UserContext); const userContext = useContext(UserContext);
const navigate = useNavigate(); const navigate = useNavigate();
function MoveTo(link){ function MoveTo(link) {
navigate(link) navigate(link)
} }
const [location, setLocation] = useState({
keyword: "",
center: { lat: null, lng: null }
});
useEffect(() => { const [location, setLocation] = useState({
const session = userContext.CheckSession() keyword: "",
.then((response) => { center: { lat: null, lng: null }
if (!response.data) { });
alert("세션이 만료되었습니다. 다시 로그인 바랍니다.")
MoveTo('/login')
}
else {
// requestLoadArticle()
// .then((response) => {
// console.log(response)
// setArticleList(response.data)
// })
}
})
.catch((response)=>{
console.log("error!:LogOut")
console.log(response)
})
}, []);
let listItem = []; useEffect(() => {
listItem = articleList.map((article)=>{ const session = userContext.CheckSession()
return( .then((response) => {
<Article if (!response.data) {
key={article._id} alert("로그인 바랍니다.");
data={article} MoveTo('/login');
></Article> }
) else {
// requestLoadArticle()
// .then((response) => {
// console.log(response)
// setArticleList(response.data)
// })
}
})
.catch((response) => {
console.log("error!:LogOut")
console.log(response)
}) })
}, []);
const onSubmit = e => { useEffect(() => {
e.preventDefault(); if (!location.keyword) {
if (!location.keyword){ return;
alert("검색대상을지정해주세요"); }
return requestLoadArticleByKeyword(location.keyword)
} .then((response) => {
requestLoadArticleByKeyword(location.keyword) console.log(response);
.then((response) => { setArticleList(response.data);
console.log(response) });
setArticleList(response.data) }, [location.keyword]);
})
}; let listItem = [];
listItem = articleList.map((article) => {
return (
<Article
key={article._id}
data={article}
></Article>
)
})
const onSubmit = (e) => {
e.preventDefault();
if (!location.keyword) {
alert("검색대상을지정해주세요");
return;
}
requestLoadArticleByKeyword(location.keyword)
.then((response) => {
console.log(response);
setArticleList(response.data);
});
};
return ( return (
<div style={{display: 'flex'}}> <div style={{ display: 'flex' }}>
<div className="search"> <div className="search">
<h1>검색페이지입니다.</h1> <h1 style={{ textAlign: 'center' }}>검색</h1>
<p>무엇을 드시고 싶나요? 어디 계시죠?</p> <SearchMap loc={location} setLoc={setLocation}></SearchMap>
<SearchMap loc={location} setLoc={setLocation}></SearchMap> </div>
</div> <div className="searchresult">
<h3>{(articleList.length === 0 ? '검색결과 없음' : (`검색결과 ${listItem.length} 개 확인`))}</h3>
{listItem}
</div>
</div>
<div className="searchresult">
<p>선택한 키워드로 검색합니다.</p>
<form onSubmit={onSubmit} style={{display: 'flex'}}>
<input readonly value={location.keyword} type="text"></input>
<button type="submit">검색!</button>
<button type="button" onClick={()=>{
setLocation({
keyword: "",
center: { lat: null, lng: null }
})}}>선택 해제</button>
</form>
<h1>검색결과 {listItem.length} 개 확인</h1>
{listItem}
</div>
</div>
); );
} }
async function requestLoadArticle() { async function requestLoadArticle() {
const response = await axios({ const response = await axios({
url: 'http://localhost:8080/article', // 통신할 웹문서 url: 'http://localhost:8080/article', // 통신할 웹문서
method: 'get', // 통신할 방식 method: 'get', // 통신할 방식
}); });
return response; return response;
} }
async function requestLoadArticleByKeyword(keyword) { async function requestLoadArticleByKeyword(keyword) {
const response = await axios({ const response = await axios({
url: `http://localhost:8080/article/search/${keyword}`, // 통신할 웹문서 url: `http://localhost:8080/article/search/${keyword}`, // 통신할 웹문서
method: 'get', // 통신할 방식 method: 'get', // 통신할 방식
}); });
return response; return response;
} }
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