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
Showing
with 282 additions and 338 deletions
backend/.gitignore → .gitignore
+ 3
− 2
View file @ 1d93704f
# compiled output
/dist
/node_modules
frontend/node_modules
backend/node_modules
# Logs
logs
......@@ -19,7 +20,7 @@ lerna-debug.log*
/.nyc_output
# production
/build
front/build
# IDEs and editors
/.idea
......
backend/src/article/article.js
+ 1
− 1
View file @ 1d93704f
......@@ -48,7 +48,7 @@ const ArticleSchema = new mongoose.Schema({
},
comments: {
type: [CommentSchema],
unique: false,
unique: false,
},
likes: [{
type: mongoose.Schema.Types.ObjectId,
......
backend/src/article/articleController.js
+ 6
− 6
View file @ 1d93704f
......@@ -121,11 +121,11 @@ router.put("/:id/like", async (req, res) => {
});
router.get("/search/:keyword", async (req, res) => {
if(req.session.sessionid){
console.log("세션 O")
if (req.session.sessionid) {
console.log("세션 O")
}
else {
console.log("세션 X")
console.log("세션 X")
}
console.log(req.params.keyword)
const articles = await articleService.findArticlesByKeyword(req.params.keyword);
......@@ -133,11 +133,11 @@ router.get("/search/:keyword", async (req, res) => {
});
router.get("/sort/:crit", async (req, res) => {
if(req.session.sessionid){
console.log("세션 O")
if (req.session.sessionid) {
console.log("세션 O")
}
else {
console.log("세션 X")
console.log("세션 X")
}
console.log(req.params.crit)
const articles = await articleService.findAllAndSortArticle(req.params.crit);
......
backend/src/article/articleService.js
+ 40
− 39
View file @ 1d93704f
......@@ -14,9 +14,9 @@ const articleService = {
async findAllArticle() {
try {
const articles = await Article
.find({})
.populate('author')
.populate('likes');
.find({})
.populate('author')
.populate('likes');
return articles;
} catch (err) {
throw err;
......@@ -24,26 +24,27 @@ const articleService = {
},
async findAllAndSortArticle(criteria) {
if (criteria==="time"){
if (criteria === "time") {
try {
const articles = await Article
.find({})
.populate('author')
.populate('likes')
.sort({"createdAt": -1});
.find({})
.populate('author')
.populate('likes')
.sort({ "createdAt": -1 });
return articles;
} catch (err) {
throw err;
}
}
else if (criteria==="like") {
else if (criteria === "like") {
try {
const agg =
await Article.aggregate(
[
{ "$project":
const agg =
await Article.aggregate(
[
{
"$project":
{
"title": 1,
"content": 1,
"imageUrls": 1,
......@@ -55,19 +56,19 @@ const articleService = {
"likes": 1,
"createdAt": 1,
"length": { "$size": "$likes" }
}
},
{ "$sort": { "length": -1 } },
]
)
let articles = null;
const result = await Article.populate(agg, {path: "author"}).then(
(res)=>{return Article.populate(res, {path: "likes"})}
).then(
(res)=>{articles = res;}
);
return articles;
}
},
{ "$sort": { "length": -1 } },
]
)
let articles = null;
const result = await Article.populate(agg, { path: "author" }).then(
(res) => { return Article.populate(res, { path: "likes" }) }
).then(
(res) => { articles = res; }
);
return articles;
} catch (err) {
throw err;
......@@ -83,10 +84,10 @@ const articleService = {
async findArticleById(articleId) {
try {
const article = await Article
.findById(articleId)
.populate('author')
.populate('comments.author')
.populate('likes');
.findById(articleId)
.populate('author')
.populate('comments.author')
.populate('likes');
return article;
} catch (err) {
throw err;
......@@ -96,21 +97,21 @@ const articleService = {
async findArticlesByAuthor(authorId) {
try {
const articles = await Article
.find({ author: authorId })
.populate('author')
.populate('likes');
.find({ author: authorId })
.populate('author')
.populate('likes');
return articles;
} catch (err) {
throw err;
}
},
async findArticlesByKeyword(keyword) {
try {
const articles = await Article
.find({ keyword: keyword })
.populate('author')
.populate('likes');
.find({ keyword: keyword })
.populate('author')
.populate('likes');
return articles;
} catch (err) {
throw err;
......@@ -151,7 +152,7 @@ const articleService = {
async setLike(articleId, userId) {
try {
const article = await Article.findById(articleId);
if(article.likes.includes(userId)) {
if (article.likes.includes(userId)) {
article.likes.pull({ _id: userId });
}
else {
......
backend/src/auth/authController.js
+ 31
− 31
View file @ 1d93704f
......@@ -8,16 +8,16 @@ export const router = express.Router();
const sessionTime = 60; // 세션시간(임시)
router.post('/login', async (req, res) => {
/*
TODO: 토큰의 무결성 체크
토큰이 이상이 없다면, 로그인/회원가입 로직을 수행 후 jwt 쿠키를 보낸다.
*/
const expires = moment().add(sessionTime.toString(),'m').toDate();
/*
TODO: 토큰의 무결성 체크
토큰이 이상이 없다면, 로그인/회원가입 로직을 수행 후 jwt 쿠키를 보낸다.
*/
const expires = moment().add(sessionTime.toString(), 'm').toDate();
// 정보가 없다면 회원 가입 (강제?)
// 정보가 없다면 회원 가입 (강제?)
const user = await userService.existsByEmail(req.body.email);
if (!user) { // 유저가 없다면 회원 가입 후 세션 생성
let userProfilePicture = req.body.picture || null;
if (!user) { // 유저가 없다면 회원 가입 후 세션 생성
let userProfilePicture = req.body.picture || null;
await userService.createUser({
nickname: req.body.name,
email: req.body.email,
......@@ -26,39 +26,39 @@ router.post('/login', async (req, res) => {
profileUrl: userProfilePicture,
},
});
console.log('new user saved!')
}
console.log('login done')
console.log('new user saved!')
}
console.log('login done')
req.session.sessionid = req.body; //프론트에서 건네받은 JWT로 세션 생성
res.cookie('name', JSON.stringify({ name: req.body.name, email: req.body.email, id: req.body.sub }), { expires }); //사용자 이름 쿠키
req.session.sessionid = req.body; //프론트에서 건네받은 JWT로 세션 생성
res.cookie('name', JSON.stringify({name:req.body.name, id:req.body.email}), {expires}); //사용자 이름 쿠키
res.send(req.body.name); // 이름 보내서 뭐하게?
res.send(req.body.name); // 이름 보내서 뭐하게?
});
router.get("/logout", (req, res) => {
res.clearCookie('name');
if (req.session.sessionid) {
req.session.destroy((err) => {
if (err) {
console.log(err)
return;
}
});
res.send(req.body.name);
} else {
res.send(req.body.name);
}
res.clearCookie('name');
if (req.session.sessionid) {
req.session.destroy((err) => {
if (err) {
console.log(err)
return;
}
});
res.send(req.body.name);
} else {
res.send(req.body.name);
}
});
router.get("/session", (req, res) => {
if(req.session.sessionid){
res.send(true);
}
if (req.session.sessionid) {
res.send(true);
}
else {
res.send(false);
res.send(false);
}
});
......
backend/src/db.js
+ 1
− 1
View file @ 1d93704f
......@@ -9,7 +9,7 @@ const connectDB = async () => {
await mongoose.connect(url, { useNewUrlParser: true, useUnifiedTopology: true });
console.log('Database connected');
} catch (error) {
console.error('Database connection failed',error);
console.error('Database connection failed', error);
}
};
......
backend/src/index.js
+ 8
− 8
View file @ 1d93704f
......@@ -20,15 +20,15 @@ const sessionTime = 60; // 세션시간(임시)
connectDB();
const maxAge = 1000 * 60 * sessionTime;
const maxAge = 1000 * 60 * sessionTime;
app.use(session({
secret: '12345',
resave: true,
saveUninitialized: true,
cookie: {
secure: false,
maxAge: maxAge
}
secret: '12345',
resave: true,
saveUninitialized: true,
cookie: {
secure: false,
maxAge: maxAge
}
}))
app.use(
cors({
......
backend/src/multer.js
+ 3
− 3
View file @ 1d93704f
......@@ -10,7 +10,7 @@ import multer from 'multer';
// memoryStorage를 사용할 경우
const multerStorage = multer.memoryStorage();
const upload = multer({storage: multerStorage});
const upload = multer({ storage: multerStorage });
// multer 라이브러리가 현재 텍스트를 latin1 으로 처리하여 한글로된 파일 이름이 깨지는 문제가 있다.
// Parser 함수를 따로 구현하여 사용하도록 한다.
......@@ -18,6 +18,6 @@ export const fileNameParser = fileName => Buffer.from(fileName, 'latin1').toStri
// 해당 예제에서는 파일 데이터 여러개, JSON으로 된 텍스트 데이터 하나를 받는 폼을 가정한다.
export const articleFormDataHandler = upload.fields([
{name: 'files', maxCount: 10},
{name: 'data', maxCount: 1},
{ name: 'files', maxCount: 10 },
{ name: 'data', maxCount: 1 },
]);
\ No newline at end of file
frontend/.gitignore deleted 100644 → 0
+ 0
− 41
View file @ e9a7dc82
# compiled output
/dist
/node_modules
# Logs
logs
*.log
npm-debug.log*
pnpm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# OS
.DS_Store
# Tests
/coverage
/.nyc_output
# production
/build
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
*.env
*.local.env
\ No newline at end of file
frontend/src/App.js
+ 66
− 66
View file @ 1d93704f
import "./css/App.css";
import {Routes, Route, Link, useNavigate, Navigate } from 'react-router-dom';
import React, { useEffect, useState, useContext} from 'react';
import { Routes, Route, Link, useNavigate, Navigate } from 'react-router-dom';
import React, { useEffect, useState, useContext } from 'react';
import cookie from 'react-cookies';
import { UserContext } from './Context.js';
......@@ -17,81 +17,81 @@ import axios from 'axios';
axios.defaults.withCredentials = true;
function App() {
const [ isloggedIn, SetIsloggedIn] = useState(false);
const [ userName, setUserName] = useState(null);
const navigate = useNavigate();
function MoveTo(link){
navigate(link)
}
const userinfo = cookie.load('name')
// 헤더 업데이트
const LogIn = (name)=>{
// API 로그아웃 요청
// 로그아웃 성공시 헤더 반영
SetIsloggedIn(true)
setUserName(name)
const [isloggedIn, SetIsloggedIn] = useState(false);
const [userName, setUserName] = useState(null);
const navigate = useNavigate();
function MoveTo(link) {
navigate(link)
}
const userinfo = cookie.load('name')
// 헤더 업데이트
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)
})
};
console.log("Usercontext:LogIn")
console.log(isloggedIn)
};
const CheckSession = ()=>{
return requestCheckSession();
};
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">
<UserContext.Provider value={{isloggedIn, userName, LogIn, LogOut, CheckSession}}>
<Header cookie={userinfo} username={userName}></Header>
<Routes>
<Route path="/" element={<Main/>}></Route>
<Route path="/login" element={<Login/>}></Route>
<Route path="/search" element={<Search/>}></Route>
<Route path="/postwrite" element={<PostWrite/>}></Route>
<Route path="/post/:id" element={<PostRead/>}></Route>
</Routes>
</UserContext.Provider>
{/* <Footer/> */}
<UserContext.Provider value={{ isloggedIn, userName, LogIn, LogOut, CheckSession }}>
<Header cookie={userinfo} username={userName}></Header>
<Routes>
<Route path="/" element={<Main />}></Route>
<Route path="/login" element={<Login />}></Route>
<Route path="/search" element={<Search />}></Route>
<Route path="/postwrite" element={<PostWrite />}></Route>
<Route path="/post/:id" element={<PostRead />}></Route>
</Routes>
</UserContext.Provider>
{/* <Footer/> */}
</div>
);
);
}
async function requestLogout() {
const response = await axios({
url: 'http://localhost:8080/auth/logout', // 통신할 웹문서
method: 'get', // 통신할 방식
});
return response;
}
const response = await axios({
url: 'http://localhost:8080/auth/logout', // 통신할 웹문서
method: 'get', // 통신할 방식
});
return response;
}
async function requestCheckSession() {
const response = await axios({
url: 'http://localhost:8080/auth/session', // 통신할 웹문서
method: 'get', // 통신할 방식
});
return response;
}
const response = await axios({
url: 'http://localhost:8080/auth/session', // 통신할 웹문서
method: 'get', // 통신할 방식
});
return response;
}
export default App;
\ No newline at end of file
frontend/src/Context.js
+ 7
− 7
View file @ 1d93704f
import { createContext } from 'react';
const UserContext = createContext({
IsloggedIn : false,
UserName : "",
LogIn : ()=>{},
LogOut : ()=>{},
CheckSession : ()=>{}
IsloggedIn: false,
UserName: "",
LogIn: () => { },
LogOut: () => { },
CheckSession: () => { }
});
const ArticleContext = createContext({
Aritcle: {}
Aritcle: {}
});
export {UserContext, ArticleContext}
\ No newline at end of file
export { UserContext, ArticleContext }
\ No newline at end of file
frontend/src/components/Article.js
+ 4
− 4
View file @ 1d93704f
......@@ -9,7 +9,7 @@ function Article({ data }) {
const {
_id, title, content, imageUrls, author,
keyword, latitude, longitude,
comments, likes, createdAt} = data;
comments, likes, createdAt } = data;
const navigate = useNavigate();
function MoveTo(link) {
......@@ -26,16 +26,16 @@ function Article({ data }) {
)
});
const date = DateTime.fromISO(createdAt).toFormat('yyyy년 MM월 dd일 HH:mm');
const date = DateTime.fromISO(createdAt).toFormat('yyyy-MM-dd HH:mm');
return (
<div className="article" onClick={() => { console.log(_id); MoveTo(`/post/${_id}`) }}>
<p>{keyword}</p>
<h1>{title}</h1>
<h2>{keyword}</h2>
<h3>{author.nickname} {date}</h3>
<p>{content}</p>
<p>{listItem}</p>
<p>댓글: {comments.length} // 조와요: {likes.length}</p>
<p>댓글 {comments.length} | 좋아요 {likes.length}</p>
</div>
);
}
......
frontend/src/components/Comment.js
+ 13
− 14
View file @ 1d93704f
import "../css/Article.css"
import React, { useEffect, useState, useContext} from 'react';
import React, { useEffect, useState, useContext } from 'react';
import cookie from 'react-cookies';
import {Routes, Route, Link, useNavigate, Navigate, useParams } from 'react-router-dom';
import { Routes, Route, Link, useNavigate, Navigate, useParams } from 'react-router-dom';
import { UserContext, ArticleContext } from '../Context.js';
......@@ -10,26 +10,25 @@ import { DateTime } from 'luxon';
import axios from 'axios';
axios.defaults.withCredentials = true;
function Comments({data}) {
function Comments({ data }) {
const {
_id, content, author, createdAt} = data;
_id, content, author, createdAt } = data;
let params = useParams();
const navigate = useNavigate();
function MoveTo(link){
function MoveTo(link) {
navigate(link)
}
}
const articleContext = useContext(ArticleContext);
const userinfo = cookie.load('name')
const date = DateTime.fromISO(createdAt).toFormat('yyyy년 MM월 dd일 HH:mm');
const date = DateTime.fromISO(createdAt).toFormat('yyyy-MM-dd HH:mm');
function DeleteComment(e) {
const data = {id: _id}
const data = { id: _id }
axios
.delete(`http://localhost:8080/article/${params.id}/comment/${_id}`, data,
{
headers: {"Content-Type": 'application/json'}
headers: { "Content-Type": 'application/json' }
})
.then(res => {
alert("The comment is successfully deleted");
return articleContext.requestLoadArticleById(params.id)
})
.then(res => {
......@@ -40,19 +39,19 @@ function Comments({data}) {
});
};
if (userinfo.id===author.email) {
if (userinfo.id === author.google.id) {
return (
<div class="comment" style={{display: 'flex'}}>
<div class="comment" style={{ display: 'flex' }}>
<p>{author.nickname}</p>
<p>{content}</p>
<p>{date}</p>
<button style={{height: '30px'}} onClick={DeleteComment} type="submit">지우기</button>
<button style={{ width: '30px', height: '30px' }} onClick={DeleteComment} type="submit">X</button>
</div>
);
}
else {
return (
<div class="comment" style={{display: 'flex'}}>
<div class="comment" style={{ display: 'flex' }}>
<p>{author.nickname}</p>
<p>{content}</p>
<p>{date}</p>
......
frontend/src/components/GoogleLoginButton.js
+ 23
− 23
View file @ 1d93704f
......@@ -2,7 +2,7 @@ import { GoogleLogin } from "@react-oauth/google";
import { GoogleOAuthProvider } from "@react-oauth/google";
import { useNavigate, Navigate } from "react-router-dom";
import { useCookies } from 'react-cookie'
import React, { useEffect, useState, useContext} from 'react';
import React, { useEffect, useState, useContext } from 'react';
import { UserContext } from '../Context.js';
// 안써도 자동으로 한국 시간을 불러온다. 명확하게 하기 위해 import
......@@ -15,37 +15,37 @@ import axios from 'axios';
axios.defaults.withCredentials = true;
const GoogleLoginButton = () => {
const userContext = useContext(UserContext);
const [cookies, setCookie, removeCookie] = useCookies();
const clientId = '716858812522-rb0pfisq317unkh4so5hvbu16p19kqp8.apps.googleusercontent.com'
const navigate = useNavigate();
const goMain = () => {
navigate("/");
}
return (
<GoogleOAuthProvider clientId={clientId}>
<GoogleLogin
onSuccess={(res) => {
let datas = res.credential.split('.')
const obj = JSON.parse(b64DecodeUnicode(datas[1]));
requestLogin(obj).then(
(response) => {
console.log(response);
userContext.LogIn(response.data);
goMain();
}
)
}}
onFailure={(err) => {
console.log("Login Failed");
console.log(err);
}}
/>
</GoogleOAuthProvider>
<GoogleOAuthProvider clientId={clientId}>
<GoogleLogin
onSuccess={(res) => {
let datas = res.credential.split('.')
const obj = JSON.parse(b64DecodeUnicode(datas[1]));
requestLogin(obj).then(
(response) => {
console.log(response);
userContext.LogIn(response.data);
goMain();
}
)
}}
onFailure={(err) => {
console.log("Login Failed");
console.log(err);
}}
/>
</GoogleOAuthProvider>
);
};
......
frontend/src/components/Header.js
+ 46
− 46
View file @ 1d93704f
......@@ -3,64 +3,64 @@ import '../css/Header.css';
import { UserContext } from '../Context.js';
import React, { useEffect, useState, useContext} from 'react';
import React, { useEffect, useState, useContext } from 'react';
import { Link, useNavigate, Navigate } from "react-router-dom";
function ButtonLink({link, status, children}){
function ButtonLink({ link, status, children }) {
const userContext = useContext(UserContext);
const navigate = useNavigate();
function MoveTo(link){
navigate(link)
}
if (status) {
return (
<div>
<label className='Labelheader' htmlFor={children}>{children}</label>
<button id={children} onClick = {()=>{userContext.LogOut()}} style={{ display: "none"}}>
{children}
</button>
</div>
const userContext = useContext(UserContext);
const navigate = useNavigate();
function MoveTo(link) {
navigate(link)
}
)
}
else {
return (
<div>
<label className='Labelheader' htmlFor={children}>{children}</label>
<button id={children} onClick = {()=>{MoveTo(link)}} style={{ display: "none"}}>
{children}
</button>
</div>
)
}
if (status) {
return (
<div>
<label className='Labelheader' htmlFor={children}>{children}</label>
<button id={children} onClick={() => { userContext.LogOut() }} style={{ display: "none" }}>
{children}
</button>
</div>
)
}
else {
return (
<div>
<label className='Labelheader' htmlFor={children}>{children}</label>
<button id={children} onClick={() => { MoveTo(link) }} style={{ display: "none" }}>
{children}
</button>
</div>
)
}
}
function Header({cookie}){
function Header({ cookie }) {
return(
<div className="header">
<ButtonLink link='/'>
<img className="logo_image" alt="logo" src={logo}/>
</ButtonLink>
<ul>
<p>{cookie?`${cookie.name}님, 환영합니다`:'로그인하세요.'}</p>
<ul className="menu_list">
<li><ButtonLink link='/'>Home</ButtonLink></li>
<li><ButtonLink link='/search'>검색</ButtonLink></li>
<li><ButtonLink link='/postwrite'>포스트 작성</ButtonLink></li>
<li><ButtonLink link={cookie?'/':'/login'} status={cookie?true:false}>{cookie?'로그아웃':'로그인'}</ButtonLink></li> {/*로그인 여부 로직 구현 필요*/}
{/* { Object.keys(user).length != 0 ?
return (
<div className="header">
<ButtonLink link='/'>
<img className="logo_image" alt="logo" src={logo} />
</ButtonLink>
<ul>
<p>{cookie ? `${cookie.name}님, 환영합니다` : '로그인하세요.'}</p>
<ul className="menu_list">
<li><ButtonLink link='/'>Home</ButtonLink></li>
<li><ButtonLink link='/search'>검색</ButtonLink></li>
<li><ButtonLink link='/postwrite'>포스트 작성</ButtonLink></li>
<li><ButtonLink link={cookie ? '/' : '/login'} status={cookie ? true : false}>{cookie ? '로그아웃' : '로그인'}</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>
} */}
</ul>
</ul>
</div>
);
</ul>
</ul>
</div>
);
}
......
frontend/src/components/MapForLoaction.js
+ 5
− 5
View file @ 1d93704f
......@@ -15,20 +15,20 @@ function MapLocator({ loc, keyword }) {
return (
<div className="UserInput">
<div style={{display: 'flex'}}>
<div style={{ display: 'flex' }}>
<Map // 지도를 표시할 Container
center={defaultCenter}
style={{
// 지도의 크기
width: "300px",
width: "450px",
height: "450px"
}}
onCreate={setMap}
isPanto={true}
level={3}>
<MapMarker position={defaultCenter}>
<div style={{color:"#000"}}>{keyword}</div>
</MapMarker>
<MapMarker position={defaultCenter}>
<div style={{ color: "#000" }}>{keyword}</div>
</MapMarker>
</Map>
</div>
</div>
......
frontend/src/components/SearchMapByKeyword.js
+ 8
− 20
View file @ 1d93704f
......@@ -4,13 +4,13 @@ import React, { useRef, useState, useEffect, useContext } from 'react';
const { kakao } = window;
function SearchMapByKeyword({ loc, setLoc }) {
// 아주대학교를 기본 위치로 설정
const [info, setInfo] = useState()
const [markers, setMarkers] = useState([])
const [pagination, setPagination] = useState()
const [map, setMap] = useState()
const [searchKeyword, setSearchKeyword] = useState(); //주소 입력
const [searchKeyword, setSearchKeyword] = useState();
// 아주대학교를 기본 위치로 설정
const defaultCenter = { lat: 37.28238488648025, lng: 127.04350967609274 }
const ps = new kakao.maps.services.Places()
......@@ -21,15 +21,12 @@ function SearchMapByKeyword({ loc, setLoc }) {
const handleSearch = () => {
ps.keywordSearch(searchKeyword, (data, status, _pagination) => {
if (status === kakao.maps.services.Status.OK) {
// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
// LatLngBounds 객체에 좌표를 추가합니다
const bounds = new kakao.maps.LatLngBounds()
let markers = []
setPagination(_pagination);
for (var i = 0; i < data.length; i++) {
// @ts-ignore
markers.push({
position: {
lat: data[i].y,
......@@ -37,14 +34,12 @@ function SearchMapByKeyword({ loc, setLoc }) {
},
content: data[i].place_name,
})
// @ts-ignore
bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x))
}
setMarkers(markers)
setMarkers(markers);
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
map.setBounds(bounds)
map.setBounds(bounds);
}
}, { category_group_code: 'FD6' })
}
......@@ -53,8 +48,8 @@ function SearchMapByKeyword({ loc, setLoc }) {
const links = [];
for (let i = 1; i <= pagination.last; i++) {
links.push(<a href="#" key={i}
style={{ textDecoration: "none", color: "black" }}
onClick={() => pagination.gotoPage(i)}>{i}</a>);
style={{ textDecoration: "none", color: "black" }}
onClick={() => pagination.gotoPage(i)}>{i}</a>);
}
return links;
......@@ -63,10 +58,7 @@ function SearchMapByKeyword({ loc, setLoc }) {
return (
<div className="UserInput">
<input onChange={handleInput} />
<button onClick={() => handleSearch()}>검색</button><br></br>
{/* <input readOnly={true} type="text" placeholder="장소 키워드" value={loc.keyword} />
<input readOnly={true} type="text" placeholder="위도" value={loc.center.lat} />
<input readOnly={true} type="text" placeholder="경도" value={loc.center.lng} /> */}
<button onClick={() => handleSearch()} style={{ width: '50px' }}>검색</button><br></br>
<div style={{ display: 'flex' }}>
<Map // 지도를 표시할 Container
center={info && info.position || defaultCenter}
......@@ -82,15 +74,11 @@ function SearchMapByKeyword({ loc, setLoc }) {
<MapMarker
key={`marker-${marker.content}-${marker.position.lat},${marker.position.lng}`}
position={marker.position}
clickable={true} // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
// 마커에 마우스오버 이벤트를 등록합니다
clickable={true}
onMouseOver={
// 마커에 마우스오버 이벤트가 발생하면 인포윈도우를 마커위에 표시합니다
() => setInfo(marker)
}
// 마커에 마우스아웃 이벤트를 등록합니다
onMouseOut={
// 마커에 마우스아웃 이벤트가 발생하면 인포윈도우를 제거합니다
() => setInfo({ position: marker.position })
}
onClick={() => {
......
frontend/src/css/Article.css
+ 5
− 4
View file @ 1d93704f
.article {
background-color: #ffffff;
border: 2px solid gray;
background-color: #ffffff;
border: 1px solid gray;
border-radius: 10px;
}
.article:hover {
background-color: #dddddd;
}
\ No newline at end of file
background-color: #dddddd;
}
\ No newline at end of file
frontend/src/index.js
+ 5
− 5
View file @ 1d93704f
......@@ -6,9 +6,9 @@ import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
// <React.StrictMode>
<BrowserRouter>
<App/>
</BrowserRouter>
// </React.StrictMode>
// <React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
// </React.StrictMode>
);
frontend/src/pages/Login.js
+ 7
− 12
View file @ 1d93704f
......@@ -3,10 +3,10 @@ import GoogleLoginButton from "../components/GoogleLoginButton.js";
import React, { useState, useEffect, useContext } from 'react';
import { UserContext } from '../Context.js';
function Button({history, children}){
function Button({ history, children }) {
const navigate = useNavigate();
return(
<button onClick={() => {navigate('/search');}}>
return (
<button onClick={() => { navigate('/search'); }}>
{children}
</button>
);
......@@ -16,16 +16,11 @@ function Login() {
const userContext = useContext(UserContext);
useEffect(() => {
// console.log(userContext)
});
return(
return (
<div className="App">
<h1>로그인 '해줘'</h1>
<GoogleLoginButton></GoogleLoginButton>
</div>)
;
<h1>로그인</h1>
<GoogleLoginButton></GoogleLoginButton>
</div>);
}
export default Login;
\ 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