Skip to content
Snippets Groups Projects
Commit fc4f3804 authored by Gwangbin's avatar Gwangbin
Browse files

Fix: code beautify

parent c20349e0
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 @ fc4f3804
# 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 @ fc4f3804
......@@ -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 @ fc4f3804
......@@ -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 @ fc4f3804
......@@ -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 @ fc4f3804
......@@ -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 @ fc4f3804
......@@ -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 @ fc4f3804
......@@ -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 @ fc4f3804
......@@ -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 @ c20349e0
# 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 @ fc4f3804
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 @ fc4f3804
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 @ fc4f3804
......@@ -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 @ fc4f3804
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 @ fc4f3804
......@@ -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 @ fc4f3804
......@@ -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 @ fc4f3804
......@@ -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 @ fc4f3804
......@@ -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 @ fc4f3804
.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 @ fc4f3804
......@@ -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 @ fc4f3804
......@@ -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