diff --git a/backend/app.js b/backend/app.js
index c7e506f4d688519dd7acedbc504651b9448b9b32..253eff5b2adab8b31fb858f18f19abd41e9d91fc 100644
--- a/backend/app.js
+++ b/backend/app.js
@@ -61,7 +61,7 @@ app.use(express.static(path.join(__dirname, 'public')));
app.use(authRouter);
//밑에 라우터에 대해 미들웨어 적용
-app.use(authUtil.checkToken);
+//app.use(authUtil.checkToken);
app.use(usersRouter);
app.use(postRouter);
diff --git a/backend/routers/auth.js b/backend/routers/auth.js
index b86d350f3d638b29ce6478c857a0960190b823ba..f159d75bc50453d7ed95356c24c0c3a8bf80c4b0 100644
--- a/backend/routers/auth.js
+++ b/backend/routers/auth.js
@@ -8,7 +8,7 @@ const authController = require('../src/controllers/authController');
router.post('/auth/register', authController.register);
router.post('/auth/login', authController.login);
router.post('/auth/send-email/:email', authController.sendEmail);
-router.post('/verify',authController.verify);
+router.post('/verify', authController.verify);
module.exports = router;
\ No newline at end of file
diff --git a/backend/routers/post.js b/backend/routers/post.js
index 9da4a45c7acc03b42bb7bc739aed93ab9eb20c3e..af91f4a45786e0be287c7e788977e6832a88a071 100644
--- a/backend/routers/post.js
+++ b/backend/routers/post.js
@@ -13,6 +13,8 @@ router.put('/updatePost/:id', postController.updatePost)
router.delete('/deletePost/:id', postController.deletePost);
// 내 모든 게시글 조회
router.get('/posts', postController.getPostsByUser);
+// 내 모든 게시글 조회(페이지 네이션)
+router.get('/postPage', postController.getPostPageByUserPage);
// 특정 유저의 최신 게시물 3개 조회
router.get('/posts/latest', postController.getLatestPostsByUser);
// 특정 유저의 특정 월의 감정 조회
diff --git a/backend/src/controllers/postController.js b/backend/src/controllers/postController.js
index b4a24d3dbdcb7922da5367b3b6c17856f04f3bc1..93f79429a0339354af930fdb18ac87eb1b851f71 100644
--- a/backend/src/controllers/postController.js
+++ b/backend/src/controllers/postController.js
@@ -4,7 +4,7 @@ const jwt = require('../../utils/jwt');
// 게시글 생성
exports.createPost = async (req, res) => {
try {
- const { title, content, images, mood } = req.body;
+ const { title, content, images, mood, weather } = req.body;
// JWT 토큰에서 user_id 추출
const token = req.headers.authorization.split(' ')[1];
@@ -17,7 +17,8 @@ exports.createPost = async (req, res) => {
title: title,
content: content,
images: images || '', // 옵셔널 필드, 값이 없으면 빈 문자열 또는 기본값 사용
- mood: mood || 'Neutral' // 옵셔널 필드, 값이 없으면 'Neutral' 또는 다른 기본값 사용
+ mood: mood || 'Neutral', // 옵셔널 필드, 값이 없으면 'Neutral' 또는 다른 기본값 사용
+ weather: weather || '맑음'
};
const newPost = await postService.createPost(postData);
res.status(201).json(newPost);
@@ -95,4 +96,22 @@ exports.getEmotionsByMonth = async (req, res) => {
} catch (error) {
res.status(400).json({ message: error.message });
}
+};
+
+// 한 유저의 모든 게시글 조회 (페이지네이션 추가)
+exports.getPostPageByUserPage = async (req, res) => {
+ try {
+ const token = req.headers.authorization.split(' ')[1];
+ const decoded = await jwt.verify(token);
+
+ // 페이지네이션을 위한 변수 추가
+ const page = parseInt(req.query.page) || 1; // 페이지 번호 (기본값: 1)
+ const limit = parseInt(req.query.limit) || 10; // 한 페이지당 게시글 수 (기본값: 10)
+ const skip = (page - 1) * limit; // 건너뛸 게시글 수 계산
+
+ const posts = await postService.getPostPageByUser(decoded.user_id, skip, limit);
+ res.status(200).json(posts);
+ } catch (error) {
+ res.status(400).json({ message: error.message });
+ }
};
\ No newline at end of file
diff --git a/backend/src/middleware/auth.js b/backend/src/middleware/auth.js
index 3991141c31c553c71581262868ccb83d15799dde..209a5f4741cc438fcd3e86739b214649b1d35307 100644
--- a/backend/src/middleware/auth.js
+++ b/backend/src/middleware/auth.js
@@ -2,16 +2,21 @@ const jwt = require('../../utils/jwt');
const MSG = require('../../utils/responseMessage');
const CODE = require('../../utils/statusCode');
const util = require('../../utils/util');
-const {secretKey} = require("../../config/secretkey");
+const { secretKey } = require("../../config/secretkey");
const TOKEN_EXPIRED = -3;
const TOKEN_INVALID = -2;
const authUtil = {
checkToken: async (req, res, next) => {
- var token = req.headers.authorization;
- if (token.startsWith('Bearer ')) {
- // 토큰에서 'Bearer ' 제거
- token = token.slice(7, token.length).trimLeft();
+ const token = req.headers.authorization;
+ // 토큰 존재 여부 확인
+ if (!token) {
+ return res.status(401).json({ error: "No token provided" });
+ }
+
+ // "Bearer"로 시작하는지 확인
+ if (!token.startsWith('Bearer')) {
+ return res.status(401).json({ error: "Invalid token format" });
}
console.log(token)
@@ -29,8 +34,6 @@ const authUtil = {
console.error(err);
return res.json(util.fail(CODE.UNAUTHORIZED, MSG.INVALID_TOKEN));
}
-
-
}
}
diff --git a/backend/src/models/Post.js b/backend/src/models/Post.js
index f4a8292e9f09c829b4658304f92e013ece809c48..a49ab8d4465a5722ddd6331e77b671f80b14ea78 100644
--- a/backend/src/models/Post.js
+++ b/backend/src/models/Post.js
@@ -4,11 +4,15 @@ const postSchema = new mongoose.Schema({
author_id: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },
title: { type: String, required: true },
content: { type: String, required: true },
- images: { type: String },
+ images: { type: String },
mood: {
type: String,
- enum: ['Happy', 'Sad', 'Angry', 'Neutral'],
+ enum: ['행복', '슬픔', '분노', '평범'],
+ },
+ weather: {
+ type: String,
+ enum: ['맑음', '흐림', '비/눈'],
}
}, { timestamps: true });
-module.exports = mongoose.model("Post",postSchema);
\ No newline at end of file
+module.exports = mongoose.model("Post", postSchema);
\ No newline at end of file
diff --git a/backend/src/services/authService.js b/backend/src/services/authService.js
index 66323f9057a8c72987160e173b1e19d687258547..18b31c299e4e715bb3852b0457270720c87b83a1 100644
--- a/backend/src/services/authService.js
+++ b/backend/src/services/authService.js
@@ -6,18 +6,18 @@ const util = require('../../utils/util')
const responseMsg = require('../../utils/responseMessage')
const User = require('../models/User')
const redis = require('redis')
-const { promisify} = require('util')
+const { promisify } = require('util')
const dotenv = require('dotenv')
-exports.register = async ({ username,email, password },res) => {
+exports.register = async ({ username, email, password }, res) => {
const finduser = await User.findOne({ email: email });
- if(finduser){
+ if (finduser) {
console.log('already')
return res.status(statusCode.CONFLICT).send('Already exists');
}
- const hashedPassword = await hashUtil.hashPassword(password);
+ const hashedPassword = await hashUtil.hashPassword(password);
const user = new User({
username,
email,
@@ -25,38 +25,38 @@ exports.register = async ({ username,email, password },res) => {
});
const saveduser = await user.save();
console.log(saveduser)
- return saveduser;
+ return saveduser;
};
-exports.login = async ( {email,password},res) => {
+exports.login = async ({ email, password }, res) => {
// try {
- console.log(email)
- const user = await User.findOne({ email: email });
+ console.log(email)
+ const user = await User.findOne({ email: email });
- if (!user) {
- console.log('exists');
- throw new Error('User already exists');
- }
+ if (!user) {
+ console.log('exists');
+ throw new Error('User already exists');
+ }
- const isValid = await hashUtil.comparePassword(password, user.password);
- if (!isValid) {
- return res.status(statusCode.UNAUTHORIZED).send(util.fail(statusCode.UNAUTHORIZED, 'Authentication failed'));
- }
- else(console.log('Success!'))
- const jwtToken = await jwt.sign(user)
- // JWT 시크릿을 안전하게 관리해야 합니다.
+ const isValid = await hashUtil.comparePassword(password, user.password);
+ if (!isValid) {
+ return res.status(statusCode.UNAUTHORIZED).send(util.fail(statusCode.UNAUTHORIZED, 'Authentication failed'));
+ }
+ else (console.log('Success!'))
+ const jwtToken = await jwt.sign(user)
+ // JWT 시크릿을 안전하게 관리해야 합니다.
- console.log(jwtToken)
+ console.log(jwtToken)
- return jwtToken;
+ return jwtToken;
// } catch (error) {
// console.log('실패')
// return res.status(statusCode.INTERNAL_SERVER_ERROR).send(util.fail(statusCode.INTERNAL_SERVER_ERROR, error.message));
// }
};
-var generateRandomNumber = function(min, max) {
- return Math.floor(Math.random() * (max-min+1)) + min;
+var generateRandomNumber = function (min, max) {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
}
@@ -66,7 +66,7 @@ exports.emailAuth = async (email) => {
const authNumber = generateRandomNumber(111111, 999999);
console.log(authNumber);
const client = redis.createClient({
- host: 'localhost',
+ host: '3.38.218.162',
port: 6379,
legacyMode: true
});
@@ -112,7 +112,7 @@ exports.emailAuth = async (email) => {
exports.checkAuthNumber = async (email, authNumber) => {
const client = redis.createClient({
- host: 'localhost',
+ host: '3.38.218.162',
port: 6379,
legacyMode: true
});
diff --git a/backend/src/services/postService.js b/backend/src/services/postService.js
index 42c1627135c6d838777f7cb84607a58f4ff6e1ea..f7783c0ee31a9630dc355f908f0644fb7ec75c7d 100644
--- a/backend/src/services/postService.js
+++ b/backend/src/services/postService.js
@@ -45,6 +45,11 @@ exports.getPostsByUser = async (userId) => {
return await Post.find({ author_id: userId });
};
+// postService 내부의 getPostsByUser 함수
+exports.getPostPageByUser = async (userId, skip, limit) => {
+ return await Post.find({ user_id: userId }).skip(skip).limit(limit);
+};
+
// 특정 유저의 최신 게시물 3개 조회
exports.getLatestPostsByUser = async (userId, limit) => {
return await Post.find({ author_id: userId })
diff --git a/backend/utils/jwt.js b/backend/utils/jwt.js
index 403d22baff277bc9191aa0a3592f86b4c13ebff2..94c833ced9dda65b595067f1280e3450222d4597 100644
--- a/backend/utils/jwt.js
+++ b/backend/utils/jwt.js
@@ -10,7 +10,7 @@ module.exports = {
console.log(user.username);
const payload = {
user_email: user.email,
- _id: user._id,
+ user_id: user._id,
};
const result = {
//sign메소드를 통해 access token 발급!
@@ -19,7 +19,7 @@ module.exports = {
};
return result;
},
- verify: async (token,secretKey) => {
+ verify: async (token) => {
let decoded;
try {
console.log(token)
@@ -44,6 +44,5 @@ module.exports = {
return TOKEN_INVALID; // 또는 적절한 다른 값을 반환
}
}
-
}
}
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b5c51d812c70fab2c6a1451d6a097404ceb10ab7..005df4b82ab3d0acba20ca594e72326613e4ed1f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -29,6 +29,7 @@
"react-calendar": "^4.6.1",
"react-cookie": "^6.1.1",
"react-dom": "^18.2.0",
+ "react-js-pagination": "^3.0.3",
"react-model": "^4.3.1",
"react-quill": "^2.0.0",
"react-router": "^6.20.0",
@@ -6587,6 +6588,17 @@
"node": ">=8"
}
},
+ "node_modules/block-stream": {
+ "version": "0.0.9",
+ "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
+ "integrity": "sha512-OorbnJVPII4DuUKbjARAe8u8EfqOmkEEaSFIyoQ7OjTHn6kafxWl0wLgoZ2rXaYd7MyLcDaU4TmhfxtwgcccMQ==",
+ "dependencies": {
+ "inherits": "~2.0.0"
+ },
+ "engines": {
+ "node": "0.4 || >=0.5.8"
+ }
+ },
"node_modules/bluebird": {
"version": "3.7.2",
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -6941,6 +6953,11 @@
"resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz",
"integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ=="
},
+ "node_modules/classnames": {
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+ "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+ },
"node_modules/clean-css": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -9712,6 +9729,31 @@
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
+ "node_modules/fstream": {
+ "version": "1.0.12",
+ "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
+ "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
+ "dependencies": {
+ "graceful-fs": "^4.1.2",
+ "inherits": "~2.0.0",
+ "mkdirp": ">=0.5 0",
+ "rimraf": "2"
+ },
+ "engines": {
+ "node": ">=0.6"
+ }
+ },
+ "node_modules/fstream/node_modules/rimraf": {
+ "version": "2.7.1",
+ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+ "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+ "dependencies": {
+ "glob": "^7.1.3"
+ },
+ "bin": {
+ "rimraf": "bin.js"
+ }
+ },
"node_modules/function-bind": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -14029,6 +14071,11 @@
"node": ">=6"
}
},
+ "node_modules/paginator": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/paginator/-/paginator-1.0.0.tgz",
+ "integrity": "sha512-j2Y5AtF/NrXOEU9VVOQBGHnj81NveRQ/cDzySywqsWrAj+cxivMpMCkYJOds3ulQiDU4rQBWc0WoyyXMXOmuMA=="
+ },
"node_modules/param-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -16026,6 +16073,32 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
+ "node_modules/react-js-pagination": {
+ "version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/react-js-pagination/-/react-js-pagination-3.0.3.tgz",
+ "integrity": "sha512-podyA6Rd0uxc8uQakXWXxnonoOPI6NnFOROXfc6qPKNYm44s+Bgpn0JkyflcfbHf/GFKahnL8JN8rxBHZiBskg==",
+ "dependencies": {
+ "classnames": "^2.2.5",
+ "fstream": "1.0.12",
+ "paginator": "^1.0.0",
+ "prop-types": "15.x.x - 16.x.x",
+ "react": "15.x.x - 16.x.x",
+ "tar": "2.2.2"
+ }
+ },
+ "node_modules/react-js-pagination/node_modules/react": {
+ "version": "16.14.0",
+ "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+ "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+ "dependencies": {
+ "loose-envify": "^1.1.0",
+ "object-assign": "^4.1.1",
+ "prop-types": "^15.6.2"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -17807,6 +17880,17 @@
"node": ">=6"
}
},
+ "node_modules/tar": {
+ "version": "2.2.2",
+ "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
+ "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
+ "deprecated": "This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.",
+ "dependencies": {
+ "block-stream": "*",
+ "fstream": "^1.0.12",
+ "inherits": "2"
+ }
+ },
"node_modules/temp-dir": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index b4acfc605f352d01fa50c8c1e0f1acc606155a27..fa2afb082f05fa6198cf319c758dc053d6a57c76 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,6 +24,7 @@
"react-calendar": "^4.6.1",
"react-cookie": "^6.1.1",
"react-dom": "^18.2.0",
+ "react-js-pagination": "^3.0.3",
"react-model": "^4.3.1",
"react-quill": "^2.0.0",
"react-router": "^6.20.0",
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 2e598cbc30986cd4c841cd5da9e121028125f766..6adfc1e103594be0bf128f0d45c8beb8e125efe6 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -14,7 +14,6 @@
<title>BLOGGER</title>
</head>
<body>
- <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 99a64f96369c9b8396b827599370f813209edcdd..ed17741ca065a5d494e6b03a9bc7ddbf73fa6ec9 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
import Router from "./Pages/Router";
function App() {
diff --git a/frontend/src/Components/DiaryList.js b/frontend/src/Components/DiaryList.js
index e91c30298cac27d1899d4100bbf7dcf12b816606..237e0c2d8bd28d3d82c6a9cc06498c4cffcfe1fe 100644
--- a/frontend/src/Components/DiaryList.js
+++ b/frontend/src/Components/DiaryList.js
@@ -1,13 +1,34 @@
+import React, { useState, useEffect } from 'react';
import Diarybox from "./Diarybox.js";
+import postService from '../Services/post'
+import Pagination from "./Pagination.js";
const DiaryList = () => {
+ const total = 12;
+ const [postList, setpostList] = useState([]);
+
+ useEffect(() => {
+ const fetchPostList = async () => {
+ try {
+ const posts = await postService.getPostsByUser();
+ setpostList(posts);
+ console.log(postList);
+ } catch (error) {
+ console.error('Error fetching latest posts:', error);
+ }
+ };
+
+ fetchPostList();
+ }, []);
+
return(
- <div className="container mx-auto px-5 flex flex-wrap flex-col sm:flex-row">
- <Diarybox/>
- <Diarybox/>
- <Diarybox/>
- <Diarybox/>
- <Diarybox/>
+ <div className="w-full container mx-auto px-5 flex flex-wrap flex-col sm:flex-row">
+ <div className='w-full'>
+ {postList.map((post, index) => (
+ <Diarybox key={index} title={post.title} content={post.content} imgUrl={post.images} date={post.createdAt} />
+ ))}
+ </div>
+ <Pagination total={total}/>
</div>
);
}
diff --git a/frontend/src/Components/Diarybox.js b/frontend/src/Components/Diarybox.js
index e231034bf474ea8ce34f11dbdf0311f0e4528ae5..c25587056951ca86d14e556108f81626640192a8 100644
--- a/frontend/src/Components/Diarybox.js
+++ b/frontend/src/Components/Diarybox.js
@@ -1,31 +1,21 @@
import React, { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
-import WrapComments from './WrapComments.js'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHeart } from '@fortawesome/free-solid-svg-icons';
-import GuestBook from './GuestBook.js';
-import { IconButton } from '@mui/material';
-import { Favorite, FavoriteBorder } from '@mui/icons-material';
+import GuestBook from './GuestBook.js'
-const Diarybox = () => {
+const Diarybox = ({title, date, content, imgUrl}) => {
+ const removeTags = (html) => {
+ const doc = new DOMParser().parseFromString(html, 'text/html');
+ return doc.body.textContent || '';
+ }
// backend에서 fetch해야할 data들임 !!
- const title = "어 그래그래 형은 웹시를 했어";
- const content = "이 편지는 영국에서 최초로 시작되어 일년에 한바퀴를 돌면서 받는 사람에게 행운을 주었고 지금은 당신에게로 옮겨진 이 편지는 4일 안에 당신 곁을 떠나야 합니다. 이 편지를 포함해서 7통을 행운이 필요한 사람에게 보내 주셔야 합니다. 복사를 해도 좋습니다. 혹 미신이라 하실지 모르지만 사실입니다. 영국에서 HGXWCH이라는 사람은 1930년에 이 편지를 받았습니다. 그는 비서에게 복사해서 보내라고 했습니다. 며칠 뒤에 복권이 당첨되어 20억을 받았습니다. 어떤 이는 이 편지를 받았으나 96시간 이내 자신의 손에서 떠나야 한다는 사실을 잊었습니다. 그는 곧 사직되었습니다. 나중에야 이 사실을 알고 7통의 편지를 보냈는데 다시 좋은 직장을 얻었습니다. 미국의 케네디 대통령은 이 편지를 받았지만 그냥 버렸습니다. 결국 9일 후 그는 암살당했습니다. 기억해 주세요. 이 편지를 보내면 7년의 행운이 있을 것이고 그렇지 않으면 3년의 불행이 있을 것입니다. 그리고 이 편지를 버리거나 낙서를 해서는 절대로 안됩니다. 7통입니다. 이 편지를 받은 사람은 행운이 깃들것입니다. 힘들겠지만 좋은게 좋다고 생각하세요. 7년의 행운을 빌면서 미안하다 이거 보여주려고 어그로끌었다.. 나루토 사스케 싸움수준 ㄹㅇ실화냐? 진짜 세계관최강자들의 싸움이다.. 그찐따같던 나루토가 맞나? 진짜 나루토는 전설이다..진짜옛날에 맨날나루토봘는데 왕같은존재인 호카게 되서 세계최강 전설적인 영웅이된나루토보면 진짜내가다 감격스럽고 나루토 노래부터 명장면까지 가슴울리는장면들이 뇌리에 스치면서 가슴이 웅장해진다.. 그리고 극장판 에 카카시앞에 운석날라오는 거대한 걸 사스케가 갑자기 순식간에 나타나서 부숴버리곤 개간지나게 나루토가 없다면 마을을 지킬 자는 나밖에 없다 라며 바람처럼 사라진장면은 진짜 나루토처음부터 본사람이면 안울수가없더라 진짜 너무 감격스럽고 보루토를 최근에 알았는데 미안하다.. 지금20화보는데 진짜 나루토세대나와서 너무 감격스럽고 모두어엿하게 큰거보니 내가 다 뭔가 알수없는 추억이라해야되나 그런감정이 이상하게 얽혀있다.. 시노는 말이많아진거같다 좋은선생이고..그리고 보루토왜욕하냐 귀여운데 나루토를보는것같다 성격도 닮았어 그리고버루토에 나루토사스케 둘이싸워도 이기는 신같은존재 나온다는게 사실임?? 그리고인터닛에 쳐봣는디 이거 ㄹㅇㄹㅇ 진짜팩트냐?? 저적이 보루토에 나오는 신급괴물임?ㅡ 나루토사스케 합체한거봐라 진짜 ㅆㅂ 이거보고 개충격먹어가지고 와 소리 저절로 나오더라 ;; 진짜 저건 개오지는데.. 저게 ㄹㅇ이면 진짜 꼭봐야돼 진짜 세계도 파괴시키는거아니야 .. 와 진짜 나루토사스케가 저렇게 되다니 진짜 눈물나려고했다.. 버루토그라서 계속보는중인데 저거 ㄹㅇ이냐..? 하.. ㅆㅂ 사스케 보고싶다.. 진짜언제 이렇게 신급 최강들이 되었을까 옛날생각나고 나 중딩때생각나고 뭔가 슬프기도하고 좋기도하고 감격도하고 여러가지감정이 복잡하네.. 아무튼 나루토는 진짜 애니중최거명작임.."
const commentnum = 3; // 배열 length로 받아올수도 있음 comment 다같이 받아올 수 있음
- const wroteDate = new Date('2023-09-23');
- const imagePath = `${process.env.PUBLIC_URL}/areyoulike.png` // img의 경우 배열로 받아서 대표 [0]하면 될 것
- // 여기까지
+ const likes = 10;
+ const imagePath = imgUrl ? imgUrl : `${process.env.PUBLIC_URL}/areyoulike.png`;
const [isOpened, setisOpened] = useState(false);
- const [likes, setLikes] = useState(false);
- const [likesnum, setlikesnum] = useState(10);
-
- const toggleFavorite = () => {
- setLikes(!likes);
- if(likes) setlikesnum(likesnum-1);
- else setlikesnum(likesnum+1);
- }
const navigate = useNavigate();
const location = useLocation();
@@ -43,10 +33,16 @@ const Diarybox = () => {
navigate("/main/view", { state: { isOpened: true } });
}
- const summarizedContent = content.length > 200 ? content.substring(0, 200) + "..." : content;
- const year = wroteDate.getFullYear();
- const month = wroteDate.getMonth() + 1;
- const day = wroteDate.getDate();
+ const summarizedContent = () => {
+ let summarizeContent = removeTags(content);
+ summarizeContent = summarizeContent.length > 200 ? summarizeContent.substring(0, 200) + "..." : summarizeContent;
+ return summarizeContent;
+ };
+
+ const today = new Date(date);
+ const year = today.getFullYear();
+ const month = String(today.getMonth() + 1).padStart(2, '0');
+ const day = String(today.getDate()).padStart(2, '0');
const formattedDate = `${year}년 ${month}월 ${day}일`;
const userName = "박병하";
@@ -63,16 +59,13 @@ const Diarybox = () => {
<div className="flex items-center mb-3">
<div>
<div className="font-semibold text-gray-800 mb-2">{title}</div>
- <div className="text-sm text-gray-500 mb-2">{formattedDate}</div>
+ <div className="text-sm text-gray-500 mb-2">{formattedDate} · {commentnum}개의 댓글 · <FontAwesomeIcon icon={faHeart} /> {likes}</div>
</div>
</div>
<div className="text-sm leading-relaxed mb-2"><img src={imagePath} alt="사진" /> {content}</div>
<div>
{/* TODO: 좋아요 버튼 생성 */}
- <IconButton onClick={toggleFavorite}>
- {(likes === true) ? <Favorite /> : <FavoriteBorder /> }{likesnum}
- </IconButton>
- <div className="text-sm text-gray-500 mb-10">{commentnum}개의 댓글</div>
+ <div className="text-sm text-gray-500"><FontAwesomeIcon icon={faHeart} /></div>
</div>
</div>
@@ -102,9 +95,9 @@ const Diarybox = () => {
<div className="font-semibold text-gray-800">{title}</div>
</div>
</div>
- <div className="text-sm leading-relaxed mb-2">{summarizedContent}</div>
+ <div className="text-sm leading-relaxed mb-2">{summarizedContent()}</div>
<div>
- <div className="text-sm text-gray-500">{formattedDate} · {commentnum}개의 댓글 · <FontAwesomeIcon icon={faHeart} /> {likesnum}</div>
+ <div className="text-sm text-gray-500">{formattedDate} · {commentnum}개의 댓글 · <FontAwesomeIcon icon={faHeart} /> {likes}</div>
</div>
</div>
<div className='flex w-1/5'>
@@ -119,4 +112,4 @@ const Diarybox = () => {
);
}
-export default Diarybox;
\ No newline at end of file
+export default Diarybox;
diff --git a/frontend/src/Components/Editor.js b/frontend/src/Components/Editor.js
index 668af9468c79bdf219098cc2a864073fe68195a7..eaaf45fd520733d53f62e19c0db9e58adb58bdaa 100644
--- a/frontend/src/Components/Editor.js
+++ b/frontend/src/Components/Editor.js
@@ -1,10 +1,9 @@
import React, { useMemo, useState, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import "./EditorToolbar.css";
import postService from '../Services/post'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHeart } from '@fortawesome/free-solid-svg-icons';
const Quill = ReactQuill.Quill
var Font = Quill.import('formats/font');
@@ -14,7 +13,7 @@ const Editor = () => {
const [title, setTitle] = useState("");
const [content, setContent] = useState("");
const [weather, setWeather] = useState("");
- const [emotion, setEmotion] = useState("");
+ const [mood, setMood] = useState("");
const quillRef = useRef(null);
const imageHandler = () => {
@@ -42,28 +41,41 @@ const Editor = () => {
// 여기에서 사용자에게 오류 메시지를 표시할 수 있습니다.
}
};
+ };
+
+ const findImg = (html) => {
+ const doc = new DOMParser().parseFromString(html, 'text/html');
+ const imgElement = doc.querySelector('img');
+
+ if (imgElement) {
+ const imgUrl = imgElement.getAttribute('src');
+ return imgUrl || '';
+ }
+
+ return '';
+ }
+
+ const navigate = useNavigate();
- console.log("click");
+ const moveListPage = () => {
+ navigate('/main/diaryList');
};
- const submitHandler = () => {
+ const submitHandler = async () => {
if (!content.trim()) {
- window.alert("작성한 내용이 없습니다.");
+ window.alert("작성되지 않은 내용이 있습니다.");
}
else {
- const data = new FormData();
- data.append('title', title);
- data.append('content', content);
- data.append('weather', weather);
- data.append('emotion', emotion);
- console.log(content);
- // TODO
- // if (id가 있으면) {
- // id에 해당하는 게시글 수정
- // }
- // else {
- // 새 글로 POST
- // }
+ const imgUrl = findImg(content);
+
+ if (title === '' || mood === '' || weather === '') {
+ window.alert("작성되지 않은 내용이 있습니다.");
+ }
+ else {
+ await postService.createPost(title, content, imgUrl, mood, weather);
+ // TODO: test 해봐야됨
+ moveListPage();
+ }
}
};
@@ -97,28 +109,36 @@ const Editor = () => {
<div className="flex w-full items-center mb-2">
<div className=" text-gray-800 w-[80px]">제목</div>
<input
- onChange={setTitle}
+ onChange={(e) => setTitle(e.target.value)}
type='text'
required
className="block w-full rounded-md px-1.5 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-main-color sm:text-sm sm:leading-6"
/>
+ <div className="flex justify-between mx-auto">
+ <p></p>
+ <button
+ type="button"
+ onClick={submitHandler} className="ml-2 h-9 w-[80px] bg-main-color text-sm text-white rounded-lg transition-all cursor-pointer hover:bg-gray-400">
+ 발행
+ </button>
+ </div>
</div>
- <div class="flex mb-2 gap-x-2">
+ <div className="flex mb-2 gap-x-2">
<select
id="weather"
- onChange={setWeather}
- class="border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-main-color focus:border-main-color block w-full p-2.5">
- <option selected>오늘의 날씨</option>
+ onChange={(e) => setWeather(e.target.value)}
+ className="border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-main-color focus:border-main-color block w-full p-2.5">
+ <option defaultValue value="">오늘의 날씨</option>
<option value="맑음">맑음</option>
<option value="흐림">흐림</option>
<option value="비/눈">비/눈</option>
</select>
<select
- id="emotion"
- onChange={setEmotion}
- class="border border-gray-300 text-gray-900 text-sm rounded-lg focus:main-color focus:border-main-color block w-full p-2.5">
- <option selected>오늘의 기분</option>
+ id="mood"
+ onChange={(e) => setMood(e.target.value)}
+ className="border border-gray-300 text-gray-900 text-sm rounded-lg focus:main-color focus:border-main-color block w-full p-2.5">
+ <option defaultValue value="">오늘의 기분</option>
<option value="행복">행복</option>
<option value="슬픔">슬픔</option>
<option value="분노">분노</option>
@@ -136,14 +156,6 @@ const Editor = () => {
onChange={setContent}
/>
</div>
- <div className="flex justify-between mt-12">
- <p></p>
- <button
- type="button"
- onClick={submitHandler}className="h-12 w-[150px] bg-main-color text-sm text-white rounded-lg transition-all cursor-pointer hover:bg-gray-400">
- 작성완료
- </button>
- </div>
</div>
</div>
);
diff --git a/frontend/src/Components/Guest.js b/frontend/src/Components/Guest.js
index 452d7a664e9839cc835154c897096234a69e0ece..42aef99aadef5a00fd6fba3416787247b852b1a1 100644
--- a/frontend/src/Components/Guest.js
+++ b/frontend/src/Components/Guest.js
@@ -2,6 +2,7 @@ import React from 'react';
import GuestBook from './GuestBook.js'
const Guest = () => {
+ // TODO: REAL data
const userName = "박병하";
const userImg = process.env.PUBLIC_URL + '/homon.jpg';
const guestMsg = "이 편지는 영국에서 최초로 시작되어 일년에 한바퀴를 돌면서 받는 사람에게 행운을 주었고 지금은 당신에게로 옮겨진 이 편지는 4일 안에 당신 곁을 떠나야 합니다. 이 편지를 포함해서 7통을 행운이 필요한 사람에게 보내 주셔야 합니다. 복사를 해도 좋습니다. 혹 미신이라 하실지 모르지만 사실입니다. 영국에서 HGXWCH이라는 사람은 1930년에 이 편지를 받았습니다. 그는 비서에게 복사해서 보내라고 했습니다. 며칠 뒤에 복권이 당첨되어 20억을 받았습니다.";
diff --git a/frontend/src/Components/HeaderProfile.js b/frontend/src/Components/HeaderProfile.js
index c759aa75603135154e51aa82d708cbe5cd01cb8f..d9926352fe03a8aae0134a92f981b43e4a0d769c 100644
--- a/frontend/src/Components/HeaderProfile.js
+++ b/frontend/src/Components/HeaderProfile.js
@@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
const HeaderProfile = ({imagePath , userName}) => {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -33,6 +34,13 @@ const HeaderProfile = ({imagePath , userName}) => {
event.stopPropagation();
toggleDropdown();
};
+
+ const navigate = useNavigate();
+
+ const logout = () => {
+ localStorage.removeItem('token');
+ navigate('/');
+ };
return (
<div className="relative">
@@ -68,7 +76,7 @@ const HeaderProfile = ({imagePath , userName}) => {
<div className="py-1">
{/* TODO: 로그아웃 클릭 시 실제 로그아웃 */}
<a
- href="/"
+ href="/" onClick={logout}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
로그아웃
diff --git a/frontend/src/Components/Pagination.js b/frontend/src/Components/Pagination.js
new file mode 100644
index 0000000000000000000000000000000000000000..c4c2ed657402f8466abdad9433a4536676567cac
--- /dev/null
+++ b/frontend/src/Components/Pagination.js
@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import Pagination from "react-js-pagination";
+
+// const Paging = ({page, total, setPage}) => {
+const Paging = ({total}) => {
+ const [page, setPage] = useState(1);
+
+ const handlePageChange = (page) => {
+ setPage(page);
+ console.log(page);
+ };
+
+ return (
+ <div>
+ <Pagination
+ activePage={page}
+ itemsCountPerPage={10}
+ totalItemsCount={total}
+ pageRangeDisplayed={5}
+ prevPageText={"‹"}
+ nextPageText={"›"}
+ innerClass="flex justify-center items-center gap-3"
+ activeClass="text-base text-main-color font-semibold"
+ itemClass="text-sm"
+ onChange={handlePageChange}
+ />
+ </div>
+ );
+};
+
+export default Paging;
\ No newline at end of file
diff --git a/frontend/src/Components/profile.js b/frontend/src/Components/profile.js
index 2d6915d754b37693b8da4dbe7eb716ae3690e400..31225495bbc2c8de0d0cbf935799b6338a48f617 100644
--- a/frontend/src/Components/profile.js
+++ b/frontend/src/Components/profile.js
@@ -1,114 +1,130 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
import Statistic from './Statistic.js';
import Diarybox from './Diarybox.js';
import Calendar from './Calendar.js'
import './profile.css';
+import postService from '../Services/post'
-function profile(){
- const userName = "박병하"; // fetch
- const todayQuote = "중요한건 꺾이지 않는 마음"; // fetch
- const numFeed = 5; // fetch
- const joinDate = new Date('2023-11-01'); // fetch
- const friendNum = 10; //fetch
- const today = new Date;
- const weatherdata = [ // fetch
- {
- "id": "맑음",
- "label": "맑음",
- "value": 5,
- "color": "#FED075"
- },
- {
- "id": "흐림",
- "label": "흐림",
- "value": 3,
- "color": "#8B8B8B"
- },
- {
- "id": "눈/비",
- "label": "눈/비",
- "value": 20,
- "color": "#66BCFD"
- }
- ]
+function Profile(){
+ const [latestPosts, setLatestPosts] = useState([]);
- const mooddata = [ // fetch
- {
- "id": "행복",
- "label": "행복",
- "value": 10,
- "color": "#FED075"
- },
- {
- "id": "평범",
- "label": "평범",
- "value": 9,
- "color": "#8B8B8B"
- },
- {
- "id": "슬픔",
- "label": "슬픔",
- "value": 5,
- "color": "#66BCFD"
- },
- {
- "id": "분노",
- "label": "분노",
- "value": 4,
- "color": "#FF8FA0"
- }
- ]
+ useEffect(() => {
+ const fetchPostList = async () => {
+ try {
+ const posts = await postService.getLatestPostsByUser();
+ setLatestPosts(posts);
+ } catch (error) {
+ console.error('Error fetching latest posts:', error);
+ }
+ };
- let joinTime = Math.abs(joinDate.getTime() - today.getTime());
- joinTime = Math.ceil(joinTime / (1000 * 60 * 60 * 24));
+ fetchPostList();
+ }, []);
- return(
- <div className="container mx-auto pt-4 px-5 flex flex-wrap flex-col sm:flex-row">
- <div className="userinfo text-center sm:text-center flex items-center w-full">
- <div className="max-w-lg mx-auto bg-white rounded-lg p-5">
- <div><img className="rounded-full mx-auto" style={{width: '150px', height: '150px'}} alt="내 정보" src={process.env.PUBLIC_URL + '/homon.jpg'} /></div>
- <h3 className='text-center font-semibold mt-3'>{userName}</h3>
- <div className="flex justify-center mt-5">
- <div className="mr-4 p-3 text-center">
- <span className="text-sm text-blueGray-400">친구</span><span className="text-xl font-bold block uppercase tracking-wide text-blueGray-600">{numFeed}</span>
- </div>
- <div className="mr-4 p-3 text-center">
- <span className="text-sm text-blueGray-400">작성글</span><span className="text-xl font-bold block uppercase tracking-wide text-blueGray-600">{numFeed}</span>
- </div>
- <div className="mr-4 p-3 text-center">
- <span className="text-sm text-blueGray-400">가입</span><span className="text-xl font-bold block uppercase tracking-wide text-blueGray-600">D+{joinTime}</span>
- </div>
- </div>
- <div className="mt-5">
- <p className="text-gray-600 mt-2">{todayQuote}</p>
- </div>
- </div>
- <div className="text-gray-500 text-sm w-1/2">
- <Calendar />
- </div>
- </div>
- <div className="chart text-center sm:text-center flex items-center w-full">
- <div className="mx-auto chart flex justify-center mt-5">
- <div className="mr-4 p-3 text-center">
- <Statistic title="날씨 통계" data={weatherdata}/>
- </div>
- <div className="mr-4 p-3 text-center">
- <Statistic title="기분 통계" data={mooddata}/>
- </div>
- </div>
- </div>
+ const userName = "박병하"; // fetch
+ const todayQuote = "중요한건 꺾이지 않는 마음"; // fetch
+ const numFeed = 5; // fetch
+ const joinDate = new Date('2023-11-01'); // fetch
+ const friendNum = 10; //fetch
+ const today = new Date;
+ const weatherdata = [ // fetch
+ {
+ "id": "맑음",
+ "label": "맑음",
+ "value": 5,
+ "color": "#FED075"
+ },
+ {
+ "id": "흐림",
+ "label": "흐림",
+ "value": 3,
+ "color": "#8B8B8B"
+ },
+ {
+ "id": "눈/비",
+ "label": "눈/비",
+ "value": 20,
+ "color": "#66BCFD"
+ }
+ ]
+
+ const mooddata = [ // fetch
+ {
+ "id": "행복",
+ "label": "행복",
+ "value": 10,
+ "color": "#FED075"
+ },
+ {
+ "id": "평범",
+ "label": "평범",
+ "value": 9,
+ "color": "#8B8B8B"
+ },
+ {
+ "id": "슬픔",
+ "label": "슬픔",
+ "value": 5,
+ "color": "#66BCFD"
+ },
+ {
+ "id": "분노",
+ "label": "분노",
+ "value": 4,
+ "color": "#FF8FA0"
+ }
+ ]
+
+ let joinTime = Math.abs(joinDate.getTime() - today.getTime());
+ joinTime = Math.ceil(joinTime / (1000 * 60 * 60 * 24));
- <div className='mt-5'>
- <div className='mb-2'>
- <div className='mb-2'>최신글</div>
- <hr width="100%"/>
+ return(
+ <div className="container mx-auto pt-4 px-5 flex flex-wrap flex-col sm:flex-row">
+ <div className="userinfo text-center sm:text-center flex items-center w-full">
+ <div className="max-w-lg mx-auto bg-white rounded-lg p-5">
+ <div><img className="rounded-full mx-auto" style={{width: '150px', height: '150px'}} alt="내 정보" src={process.env.PUBLIC_URL + '/homon.jpg'} /></div>
+ <h3 className='text-center font-semibold mt-3'>{userName}</h3>
+ <div className="flex justify-center mt-5">
+ <div className="mr-4 p-3 text-center">
+ <span className="text-sm text-blueGray-400">친구</span><span className="text-xl font-bold block uppercase tracking-wide text-blueGray-600">{numFeed}</span>
+ </div>
+ <div className="mr-4 p-3 text-center">
+ <span className="text-sm text-blueGray-400">작성글</span><span className="text-xl font-bold block uppercase tracking-wide text-blueGray-600">{friendNum}</span>
+ </div>
+ <div className="mr-4 p-3 text-center">
+ <span className="text-sm text-blueGray-400">가입</span><span className="text-xl font-bold block uppercase tracking-wide text-blueGray-600">D+{joinTime}</span>
+ </div>
+ </div>
+ <div className="mt-5">
+ <p className="text-gray-600 mt-2">{todayQuote}</p>
+ </div>
</div>
- <Diarybox/>
- <Diarybox/>
- <Diarybox/>
+ <div className="text-gray-500 text-sm w-1/2">
+ <Calendar />
+ </div>
+ </div>
+ <div className="chart text-center sm:text-center flex items-center w-full">
+ <div className="mx-auto chart flex justify-center mt-5">
+ <div className="mr-4 p-3 text-center">
+ <Statistic title="날씨 통계" data={weatherdata}/>
+ </div>
+ <div className="mr-4 p-3 text-center">
+ <Statistic title="기분 통계" data={mooddata}/>
+ </div>
+ </div>
+ </div>
+
+ <div className='mt-5 w-full'>
+ <div className='mb-2'>
+ <div className='mb-2'>최신글</div>
+ <hr width="100%"/>
</div>
- </div>
- );
+ {latestPosts.map((post, index) => (
+ <Diarybox key={index} title={post.title} content={post.content} imgUrl={post.images} date={post.createdAt} />
+ ))}
+ </div>
+ </div>
+ );
}
-export default profile;
\ No newline at end of file
+export default Profile;
\ No newline at end of file
diff --git a/frontend/src/Pages/Adminpage.js b/frontend/src/Pages/Adminpage.js
index a592079aef7122eadf88df795faf4108fe03cc67..874f2f227132791294b11898541c3157786d04e7 100644
--- a/frontend/src/Pages/Adminpage.js
+++ b/frontend/src/Pages/Adminpage.js
@@ -18,7 +18,7 @@ function AdminPage() {
<header>
<div className="container mx-auto pt-4 px-5 flex flex-wrap flex-col sm:flex-row">
<div className="text-left sm:text-left flex items-center w-full">
- <span className="font-bold text-left sm:text-left flex items-center w-full hover:cursor-pointer" onClick={gotoProfile}>BLOGGER</span>
+ <span className="font-bold text-left text-lg sm:text-left flex items-center w-full hover:cursor-pointer" onClick={gotoProfile}>BLOGGER</span>
<div className="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-1/8 sm:text-center text-center text-gray-500 text-sm">
<HeaderProfile imagePath={imagePath} userName={userName} />
</div>
diff --git a/frontend/src/Pages/CheckLogin.js b/frontend/src/Pages/CheckLogin.js
new file mode 100644
index 0000000000000000000000000000000000000000..b0b98bd797fcba9d40e12e284a3a82282c7fbc77
--- /dev/null
+++ b/frontend/src/Pages/CheckLogin.js
@@ -0,0 +1 @@
+export const isLogin = () => !!localStorage.getItem('token');
\ No newline at end of file
diff --git a/frontend/src/Pages/Home.js b/frontend/src/Pages/Home.js
index 360d784834ab5745775a9b8c12a63cc2cf5e85ad..6abafcd317b6063d5717e9625193a52143558d62 100644
--- a/frontend/src/Pages/Home.js
+++ b/frontend/src/Pages/Home.js
@@ -24,7 +24,7 @@ function Home() {
<header>
<div className="container mx-auto pt-4 px-5 flex flex-wrap flex-col sm:flex-row">
<div className="text-left sm:text-left flex items-center w-full">
- <span className="font-bold text-left sm:text-left flex items-center w-full hover:cursor-pointer" onClick={gotoProfile}>BLOGGER</span>
+ <span className="font-bold text-left text-lg sm:text-left flex items-center w-full hover:cursor-pointer" onClick={gotoProfile}>BLOGGER</span>
<div className="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-1/8 sm:text-center text-center text-gray-500 text-sm">
<HeaderProfile imagePath={imagePath} userName={userName} />
</div>
@@ -32,7 +32,7 @@ function Home() {
</div>
</header>
<div className="container mx-auto mt-5 pt-4 px-5 flex flex-wrap flex-col sm:flex-row">
- <h1 className="text-xl text-left sm:text-left hover:cursor-default">{Blogname}</h1>
+ <div className="text-2xl text-left sm:text-left hover:cursor-default">{Blogname}</div>
</div>
<Header/>
<Routes>
diff --git a/frontend/src/Pages/Loginbox.js b/frontend/src/Pages/Loginbox.js
index 9c99b6031dc8a4bcce37bb796192e82df56fb7ae..8181fed3a357be3704a3e248dfba1f412e2a4975 100644
--- a/frontend/src/Pages/Loginbox.js
+++ b/frontend/src/Pages/Loginbox.js
@@ -117,7 +117,7 @@ function Loginbox({handleLoginSuccess}) {
console.log("로그인 완료", token);
// 성공적으로 토큰을 받았다면, 로컬 스토리지에 저장
- localStorage.setItem('token', token);
+ localStorage.setItem('token', token.token);
// 로그인 성공 처리 (예: 페이지 이동, 사용자 인터페이스 업데이트 등)
handleLoginSuccess();
diff --git a/frontend/src/Pages/PrivateRoute.js b/frontend/src/Pages/PrivateRoute.js
new file mode 100644
index 0000000000000000000000000000000000000000..04b6bd647e38516abb69ea778d98438df92545ec
--- /dev/null
+++ b/frontend/src/Pages/PrivateRoute.js
@@ -0,0 +1,10 @@
+import React from 'react';
+ import { Navigate } from 'react-router-dom';
+
+ function PrivateRoute({ authenticated, component: Component }) {
+ return (
+ authenticated ? Component : <Navigate to='/' />
+ )
+ }
+
+ export default PrivateRoute
\ No newline at end of file
diff --git a/frontend/src/Pages/Router.js b/frontend/src/Pages/Router.js
index b4f35bebf24f6a161eec6e7494ebaeac4a4300c0..8eac41e17767e3e57d51dc1cccbe96000ae4fe78 100644
--- a/frontend/src/Pages/Router.js
+++ b/frontend/src/Pages/Router.js
@@ -3,8 +3,10 @@ import React from 'react';
import Loginbox from './Loginbox.js';
import Home from './Home.js';
import AdminPage from './Adminpage.js';
+import PrivateRoute from './PrivateRoute.js';
const Router = () => {
+ const access = localStorage.getItem('token');
const navigate = useNavigate();
@@ -15,8 +17,12 @@ const Router = () => {
return (
<Routes>
<Route index element={<Loginbox handleLoginSuccess={handleLoginSuccess} />} />
- <Route path="/main/*" element={<Home/>} />
- <Route path="/admin" element={<AdminPage/>}/>
+ <Route path="/main/*" element={<PrivateRoute
+ authenticated={access}
+ component={<Home/>}/>}/>
+ <Route path="/admin" element={<PrivateRoute
+ authenticated={access}
+ component={<AdminPage/>}/>}/>
</Routes>
);
};
diff --git a/frontend/src/Services/comment.js b/frontend/src/Services/comment.js
new file mode 100644
index 0000000000000000000000000000000000000000..b91037d32dbec8e4e0278a5e42ddbb0d9baddec7
--- /dev/null
+++ b/frontend/src/Services/comment.js
@@ -0,0 +1,75 @@
+// 댓글 생성
+exports.createComment = async(postId, content) => {
+ const token = localStorage.getItem('jwt');
+ try {
+ const response = await fetch('http://3.38.218.162:3000/createComment', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${token}`
+ },
+ body: JSON.stringify({ post_id: postId, content })
+ });
+ return await response.json();
+ } catch (error) {
+ console.error('Error:', error);
+ }
+}
+
+// 댓글 조회
+exports.getComment = async(commentId) => {
+ try {
+ const response = await fetch(`http://3.38.218.162:3000/comment/${commentId}`, {
+ method: 'GET'
+ });
+ return await response.json();
+ } catch (error) {
+ console.error('Error:', error);
+ }
+}
+
+// 댓글 수정
+exports.updateComment = async(commentId,updateData) => {
+ const token = localStorage.getItem('jwt');
+ try {
+ const response = await fetch(`http://3.38.218.162:3000/comment/${commentId}`, {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${token}`
+ },
+ body: JSON.stringify(updateData)
+ });
+ return await response.json();
+ } catch (error) {
+ console.error('Error:', error);
+ }
+}
+
+// 댓글 삭제
+exports.deleteComment = async(commentId) => {
+ const token = localStorage.getItem('jwt');
+ try {
+ const response = await fetch(`http://3.38.218.162:3000/comment/${commentId}`, {
+ method: 'DELETE',
+ headers: {
+ 'Authorization': `Bearer ${token}`
+ }
+ });
+ return response.ok;
+ } catch (error) {
+ console.error('Error:', error);
+ }
+}
+
+// 게시물의 모든 댓글 조회
+exports.getCommentsByPost = async(postId) => {
+ try {
+ const response = await fetch(`http://3.38.218.162:3000/post/${postId}/comments`, {
+ method: 'GET'
+ });
+ return await response.json();
+ } catch (error) {
+ console.error('Error:', error);
+ }
+}
diff --git a/frontend/src/Services/post.js b/frontend/src/Services/post.js
index dc9715551f663f75b12576a472cb3a2bbbfdbdcc..46bf68f6fb8d303663f06bb2165669be25435af5 100644
--- a/frontend/src/Services/post.js
+++ b/frontend/src/Services/post.js
@@ -22,38 +22,10 @@ exports.uploadImage = async (file) =>{
}
}
-// 내 게시글 목록 조회
-exports.fetchUserPosts = async () => {
- // 토큰을 로컬 스토리지 또는 세션 스토리지에서 가져옵니다.
- const token = localStorage.getItem('token')
-
- // 헤더에 토큰을 포함시켜 요청을 보냅니다.
- fetch('http://3.38.218.162:3000/posts', {
- method: 'GET',
- headers: {
- 'Authorization': `Bearer ${token}`,
- 'Content-Type': 'application/json'
- }
- })
- .then(response => {
- if (!response.ok) {
- throw new Error('Network response was not ok');
- }
- return response.json();
- })
- .then(posts => {
- console.log('User Posts:', posts);
- // 여기서 posts를 사용하여 UI를 업데이트하거나 다른 처리를 할 수 있습니다.
- })
- .catch(error => {
- console.error('There was a problem with the fetch operation:', error);
- });
-}
-
// 게시글 생성
-exports.createPost = async (title, content, images, mood, token) => {
+exports.createPost = async (title, content, images, mood, weather) => {
try {
- const url = 'http://3.38.218.162:3000/api/posts'; // Replace with your backend server URL
+ const url = 'http://3.38.218.162:3000/createPost'; // Replace with your backend server URL
// Retrieve the token from localStorage
const token = localStorage.getItem('token');
@@ -70,7 +42,8 @@ exports.createPost = async (title, content, images, mood, token) => {
title: title,
content: content,
images: images, // This can be an array of image URLs or any other format your backend expects
- mood: mood
+ mood: mood,
+ weather: weather
};
const response = await fetch(url, {
@@ -92,9 +65,9 @@ exports.createPost = async (title, content, images, mood, token) => {
//게시글 수정
exports.updatePost = async(postId, updateData)=>{
- const token = localStorage.getItem('jwt');
+ const token = localStorage.getItem('token');
try {
- const response = await fetch(`http://3.38.218.162:3000/posts/${postId}`, {
+ const response = await fetch(`http://3.38.218.162:3000/updatePost/${postId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
@@ -110,9 +83,9 @@ exports.updatePost = async(postId, updateData)=>{
// 내 모든 게시글 조회
exports.getPostsByUser = async()=>{
- const token = localStorage.getItem('jwt');
+ const token = localStorage.getItem('token');
try {
- const response = await fetch('http://3.38.218.162:3000/user/posts', {
+ const response = await fetch('http://3.38.218.162:3000/posts', {
method: 'GET',
headers: {
'Authorization': `Bearer ${token}`
@@ -127,7 +100,7 @@ exports.getPostsByUser = async()=>{
// 게시글 조회
exports.getPost = async(postId)=>{
try {
- const response = await fetch(`http://3.38.218.162:3000/posts/${postId}`, {
+ const response = await fetch(`http://3.38.218.162:3000/getPost/${postId}`, {
method: 'GET'
});
return await response.json();
@@ -138,9 +111,9 @@ exports.getPost = async(postId)=>{
// 게시글 삭제
exports.deletePost = async(postId)=>{
- const token = localStorage.getItem('jwt');
+ const token = localStorage.getItem('token');
try {
- const response = await fetch(`http://3.38.218.162:3000/posts/${postId}`, {
+ const response = await fetch(`http://3.38.218.162:3000/deletePost/${postId}`, {
method: 'DELETE',
headers: {
'Authorization': `Bearer ${token}`
@@ -153,15 +126,16 @@ exports.deletePost = async(postId)=>{
}
// 최신 게시물 3개 조회
-exports.getLatestPostsByUser = async(postId)=>{
- const token = localStorage.getItem('jwt');
+exports.getLatestPostsByUser = async()=>{
+ const token = localStorage.getItem('token');
try {
- const response = await fetch('http://3.38.218.162:3000/user/posts/latest', {
+ const response = await fetch('http://3.38.218.162:3000/posts/latest', {
method: 'GET',
headers: {
'Authorization': `Bearer ${token}`
}
});
+
return await response.json();
} catch (error) {
console.error('Error:', error);
@@ -170,7 +144,7 @@ exports.getLatestPostsByUser = async(postId)=>{
// 특정 월의 감정 조회
exports.getEmotionsByMonth = async(year,month)=>{
- const token = localStorage.getItem('jwt');
+ const token = localStorage.getItem('token');
try {
const response = await fetch(`http://3.38.218.162:3000/emotions/${year}/${month}`, {
method: 'GET',
diff --git a/frontend/src/Services/user.js b/frontend/src/Services/user.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391