diff --git a/src/layouts/News.js b/src/layouts/News.js
index e4323a4..bbbe35d 100644
--- a/src/layouts/News.js
+++ b/src/layouts/News.js
@@ -1,38 +1,44 @@
-import React, { useState, useEffect } from 'react';
-import { useOutletContext } from 'react-router-dom';
-import HotTopics from '../components/HotTopics';
-import NewsSection from '../components/NewsSection';
-import RecommendedNews from '../components/RecommendedNews';
-import PopularNews from '../components/PopularNews';
-import Events from '../components/Events';
+import { useOutletContext } from "react-router-dom";
+import HotTopics from "../components/HotTopics";
+import NewsSection from "../components/NewsSection";
+import RecommendedNews from "../components/RecommendedNews";
+import PopularNews from "../components/PopularNews";
+import HotShorts from "../components/HotShorts";
+import Events from "../components/Events";
const News = () => {
- // **************** init values **************** //
- const { currentCategory } = useOutletContext();
+ // **************** init values **************** //
+ const { currentCategory } = useOutletContext();
- // **************** UI **************** //
- return (
-
-
-
-
-
-
- {currentCategory && (
-
- )}
-
-
-
-
-
-
-
-
- );
+ // **************** UI **************** //
+ return (
+
+
+
+
+
+
+
+
+
+ {currentCategory && (
+
+ )}
+
+
+
+
+
+
+
+
+ );
};
export default News;
diff --git a/src/pages/Comments.js b/src/pages/Comments.js
index 871aa1b..3921630 100644
--- a/src/pages/Comments.js
+++ b/src/pages/Comments.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, {useState, useEffect, useCallback} from 'react';
import axiosClient from '@src/utils/axiosHelper';
import Cookies from "js-cookie";
import { format } from 'date-fns';
@@ -10,16 +10,12 @@ const Comments = ({ articleId }) => {
const [hasMore, setHasMore] = useState(true);
const [loading, setLoading] = useState(true);
const [newComment, setNewComment] = useState('');
- const [userId, setUserID] = useState(Cookies.get('userId'));
+ const [userId] = useState(Cookies.get('userId'));
const [commentCount, setCommentCount] = useState(0)
const [editCommentId, setEditCommentId] = useState(null);
const [editCommentText, setEditCommentText] = useState('');
- useEffect(() => {
- fetchComments(page);
- }, [page]);
-
- const fetchComments = (page) => {
+ const fetchComments = useCallback(() => {
setLoading(true)
axiosClient.get(`/api/articles/${articleId}/comments`, {
@@ -43,7 +39,11 @@ const Comments = ({ articleId }) => {
console.log("Error fetching comments: " + error);
setLoading(false)
});
- };
+ }, [page, articleId]);
+
+ useEffect(() => {
+ fetchComments();
+ }, [page, fetchComments]);
const handleLoadMoreComments = () => {
setPage(prevPage => prevPage + 1)
diff --git a/src/pages/Login.js b/src/pages/Login.js
index 499c507..8442a73 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -1,7 +1,7 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import Cookies from "js-cookie";
-
+import { setTokenWithExpiry } from "../utils/auth";
import "../styles/login.css";
import axiosClient from "@src/utils/axiosHelper";
@@ -31,7 +31,7 @@ function Login(props) {
}
const { accessToken } = response.data.data;
- localStorage.setItem("accessToken", accessToken);
+ setTokenWithExpiry("accessToken", accessToken, 5 * 60 * 60 * 1000);
Cookies.set("userId", response.data.data.userId, { expires: 1 });
alert("로그인 성공");
window.location.href = "/";
diff --git a/src/pages/NewsDetail.js b/src/pages/NewsDetail.js
index ba2b3a3..70a3901 100644
--- a/src/pages/NewsDetail.js
+++ b/src/pages/NewsDetail.js
@@ -1,10 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
import { useParams } from 'react-router-dom';
import axiosClient from "@src/utils/axiosHelper";
import Cookies from 'js-cookie';
import numberFormatter from '../utils/numberFormatter';
import Comments from './Comments';
-import VideoPlayer from '../components/VideoPlayer';
const NewsDetail = () => {
const { id } = useParams();
@@ -63,30 +62,8 @@ const NewsDetail = () => {
});
}
- useEffect(() => {
- axiosClient.get(`/api/articles/${id}`)
- .then(response => {
- setArticle(response.data);
- setLoading(false);
-
- checkLikeStatus();
-
- // 10초 이상 머물렀을 때 조회수 증가 요청
- const timer = setTimeout(() => {
- updateViewCount();
- }, 10000); // 10,000 milliseconds = 10 seconds
-
- return () => clearTimeout(timer); // Cleanup timeout on component unmount
-
- })
- .catch(error => {
- console.log("Error fetching article: " + error);
- setLoading(false);
- });
- }, [id]);
-
// 조회수 증가 요청
- const updateViewCount = () => {
+ const updateViewCount = useCallback(() => {
const userId = Cookies.get('userId');
const viewedArticles = JSON.parse(Cookies.get('viewedArticleTime') || '{}');
@@ -110,9 +87,9 @@ const NewsDetail = () => {
console.log("Error updating view count: " + error);
});
}
- };
+ }, [id]);
- const checkLikeStatus = () => {
+ const checkLikeStatus = useCallback(() => {
const userId = Cookies.get('userId');
if (!userId || userId === "undefined") {
@@ -126,7 +103,29 @@ const NewsDetail = () => {
.catch(error => {
console.log("Error checkLikeStatus: " + error);
});
- };
+ }, [id]);
+
+ useEffect(() => {
+ axiosClient.get(`/api/articles/${id}`)
+ .then(response => {
+ setArticle(response.data);
+ setLoading(false);
+
+ checkLikeStatus();
+
+ // 10초 이상 머물렀을 때 조회수 증가 요청
+ const timer = setTimeout(() => {
+ updateViewCount();
+ }, 10000); // 10,000 milliseconds = 10 seconds
+
+ return () => clearTimeout(timer); // Cleanup timeout on component unmount
+
+ })
+ .catch(error => {
+ console.log("Error fetching article: " + error);
+ setLoading(false);
+ });
+ }, [id, checkLikeStatus, updateViewCount]);
const handleLike = () => {
const userId = Cookies.get('userId');
@@ -205,10 +204,6 @@ const NewsDetail = () => {
<>
{article.headline}
-
-
Video Player Example
-
-
{article.author} | {article.articleCreatedAt}
diff --git a/src/pages/Replies.js b/src/pages/Replies.js
index c581ec6..8036358 100644
--- a/src/pages/Replies.js
+++ b/src/pages/Replies.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, {useState, useEffect, useCallback} from 'react';
import axiosClient from '@src/utils/axiosHelper';
import Cookies from "js-cookie";
import { format } from 'date-fns';
@@ -9,17 +9,13 @@ const Replies = ({ commentId }) => {
const [hasMore, setHasMore] = useState(true);
const [loading, setLoading] = useState(true);
const [replyText, setReplyText] = useState('');
- const [userId, setUserID] = useState(Cookies.get('userId'));
+ const [userId] = useState(Cookies.get('userId'));
const [isOpen, setIsOpen] = useState(false);
const [replyCount, setReplyCount] = useState(0)
const [editReplyId, setEditReplyId] = useState(null);
const [editReplyText, setEditReplyText] = useState('');
- useEffect(() => {
- fetchReplies(page);
- }, [page]);
-
- const fetchReplies = (page) => {
+ const fetchReplies = useCallback(() => {
setLoading(true)
axiosClient.get(`/api/articles/${commentId}/replies`, {
params: {
@@ -42,7 +38,11 @@ const Replies = ({ commentId }) => {
console.log("Error fetching replies: " + error);
setLoading(false)
});
- };
+ }, [commentId, page]);
+
+ useEffect(() => {
+ fetchReplies();
+ }, [page, fetchReplies]);
const handleAddReply = () => {
if (!userId || userId === "undefined") {
diff --git a/src/pages/SignUp.js b/src/pages/SignUp.js
index 84771e9..dc5a327 100644
--- a/src/pages/SignUp.js
+++ b/src/pages/SignUp.js
@@ -182,19 +182,27 @@ function Signup(props) {
+ >
+
Like
+
+ >
+
Comment
+
+ >
+
Share
+
+ >
+
Save
+