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