From 0e60479613ef7bc6799373a4b0cdfc1196a94e91 Mon Sep 17 00:00:00 2001 From: GulSam00 Date: Wed, 2 Mar 2022 18:22:40 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Feat=20:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=B3=B4=EA=B8=B0=20=EC=A0=9C=EA=B1=B0.=20=EC=95=8C=EB=A6=BC?= =?UTF-8?q?=20=EC=9D=BD=EB=8A=94=20API=20=EC=A0=84=EC=86=A1.=20isRead?= =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EA=B8=80=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EB=B3=80=EA=B2=BD.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Network/APIType.js | 12 ++--- src/Network/NotificationService.js | 2 +- .../Components/AlarmArticle.styled.js | 1 + src/Pages/AlarmPage/Components/AlarmBody.jsx | 44 ++++--------------- 4 files changed, 16 insertions(+), 43 deletions(-) diff --git a/src/Network/APIType.js b/src/Network/APIType.js index c2d6a93..e78da27 100644 --- a/src/Network/APIType.js +++ b/src/Network/APIType.js @@ -3,8 +3,8 @@ import axios from 'axios'; export function url(path) { // const version = 'v1'; // process.env.REACT_APP_API_VERSION - return `https://api.42world.kr${path}`; // 실제 배포 API 서버 - // return `https://api-alpha.42world.kr${path}`; // 개발용 서버, 토큰 하드코딩으로 들어있어야 함. + // return `https://api.42world.kr${path}`; // 실제 배포 API 서버 + return `http://api-alpha.42world.kr:8888${path}`; // 개발용 서버, 토큰 하드코딩으로 들어있어야 함. // return `http://localhost:8888${path}`; // Live share 할 때 서버 } @@ -12,9 +12,9 @@ export function AXIOS(option) { return axios({ ...option, withCredentials: true, - //headers: { - // // https://api-alpha.42world.kr 로 요청 시 필요. 배포 시에는 주석화 - // Authorization: process.env.REACT_APP_MASTER_ACCESS_TOKEN, // 루트에 .env 파일 만든 후 REACT_APP_MASTER_ACCESS_TOKEN을 가져옴. - // }, + headers: { + // https://api-alpha.42world.kr 로 요청 시 필요. 배포 시에는 주석화 + Authorization: process.env.REACT_APP_MASTER_ACCESS_TOKEN, // 루트에 .env 파일 만든 후 REACT_APP_MASTER_ACCESS_TOKEN을 가져옴. + }, }); } diff --git a/src/Network/NotificationService.js b/src/Network/NotificationService.js index 77742d4..05de1ed 100644 --- a/src/Network/NotificationService.js +++ b/src/Network/NotificationService.js @@ -34,7 +34,7 @@ const NotificationService = { */ readAllNotifications: async () => { const method = 'PATCH'; - const url = notificationUrl(''); + const url = notificationUrl('/readall'); let response; try { response = await API.AXIOS({ diff --git a/src/Pages/AlarmPage/Components/AlarmArticle.styled.js b/src/Pages/AlarmPage/Components/AlarmArticle.styled.js index bfb2e5c..f989bea 100644 --- a/src/Pages/AlarmPage/Components/AlarmArticle.styled.js +++ b/src/Pages/AlarmPage/Components/AlarmArticle.styled.js @@ -15,6 +15,7 @@ const AlramArticleDiv = styled.div` padding: 0.2rem 0.45rem; border-bottom: 1px solid #e6e6e6; background-color: #fff; + ${props => props.isRead && `color: gray;`} .left { font-size: 0.9rem; diff --git a/src/Pages/AlarmPage/Components/AlarmBody.jsx b/src/Pages/AlarmPage/Components/AlarmBody.jsx index d3e5c50..20d0941 100644 --- a/src/Pages/AlarmPage/Components/AlarmBody.jsx +++ b/src/Pages/AlarmPage/Components/AlarmBody.jsx @@ -4,8 +4,6 @@ import { useNavigate } from 'react-router-dom'; import NotificationService from 'Network/NotificationService'; import dayjs from 'dayjs'; -import Pagination from '@mui/material/Pagination'; - import Styled from './AlarmArticle.styled.js'; const alarmType = (context, type) => { @@ -23,18 +21,9 @@ const alarmType = (context, type) => { const AlarmBody = () => { const [alarmArticles, setAlarmArticles] = useState([]); - const [curPage, setCurPage] = useState(1); - const [curPageArticles, setCurPageArticles] = useState([]); const navi = useNavigate(); const mainTextLen = 10; - const pageMaxArticles = 20; - const maxPages = Math.ceil(alarmArticles.length / pageMaxArticles); // 소수점으로 떨어질 경우 올림. - // console.log('총 개수 : ', alarmArticles.length, '페이지 개수 : ', maxPages); - - const handleChangePage = (event, value) => { - setCurPage(value); - }; const moveArticles = articleId => { alert('구현 중입니다!'); @@ -51,13 +40,8 @@ const AlarmBody = () => { const getArticleTime = time => dayjs(time).format('MM/DD HH:mm'); - const changePageArticles = () => { - const pageIndex = (curPage - 1) * pageMaxArticles; - // console.log('pageIndex : ', pageIndex); - // console.log(alarmArticles.slice(pageIndex, pageIndex + pageMaxArticles)); - setCurPageArticles( - alarmArticles.slice(pageIndex, pageIndex + pageMaxArticles), - ); + const readAlarm = async () => { + const read = await NotificationService.readAllNotifications(); }; useEffect(() => { @@ -66,28 +50,25 @@ const AlarmBody = () => { setAlarmArticles(response.reverse()); }; getArticles(); - changePageArticles(); + readAlarm(); // 글을 받아온 후 알림을 읽는다. 다음 번 불러올 때 이번에 읽어온 글의 isRead가 true가 된다. }, []); - useEffect(() => { - changePageArticles(); - }, [alarmArticles, curPage]); - return ( - +
공지
42월드 많이 이용해주세요!
01/30 00:00
 - {curPageArticles && - curPageArticles.map(article => { + {alarmArticles && + alarmArticles.map(article => { return ( moveArticles(article.userId)} >
새 댓글
@@ -96,16 +77,7 @@ const AlarmBody = () => { ); })} - + ); }; From d0500fd60f83db9597f8f7c83779e9bfa6454b07 Mon Sep 17 00:00:00 2001 From: GulSam00 Date: Thu, 3 Mar 2022 19:24:31 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Feat=20:=20=EB=AC=B4=ED=95=9C=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4.=20state=20->=20let?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Network/ArticleService.js | 3 +- .../CategoryPage/Components/CategoryBody.jsx | 59 ++++++++++--------- 2 files changed, 34 insertions(+), 28 deletions(-) diff --git a/src/Network/ArticleService.js b/src/Network/ArticleService.js index 8dc863a..595ac2c 100644 --- a/src/Network/ArticleService.js +++ b/src/Network/ArticleService.js @@ -94,7 +94,8 @@ const ArticleService = { getArticles: async (categoryId, page) => { const method = 'GET'; const url = articleUrl(''); - const take = 1000; + // const take = 1000; + const take = 3; const params = { categoryId, page, take }; let response; diff --git a/src/Pages/CategoryPage/Components/CategoryBody.jsx b/src/Pages/CategoryPage/Components/CategoryBody.jsx index e6b7bdc..d572319 100644 --- a/src/Pages/CategoryPage/Components/CategoryBody.jsx +++ b/src/Pages/CategoryPage/Components/CategoryBody.jsx @@ -14,9 +14,11 @@ import Styled from './Body.styled'; const CategoryBody = () => { const [articles, setArticles] = useState([]); - const [isLoaded, setIsLoaded] = useState(true); - const [page, setPage] = useState(1); - const [hasNextPage, setHasNextPage] = useState(true); + const [isLoaded, setIsLoaded] = useState(false); + // const [page, setPage] = useState(1); + let page = 1; + // const [hasNextPage, setHasNextPage] = useState(true); + let hasNextPage = true; const [target, setTarget] = useState(null); const [curCate, setCurCate] = useState(''); const loca = useLocation(); @@ -31,40 +33,35 @@ const CategoryBody = () => { navi(`/article/${id}`); }; - const setInitalArticles = async () => { - setIsLoaded(true); - const result = await ArticleService.getArticles(categoryId); - const meta = result.meta; + // const setInitalArticles = async () => { + // setIsLoaded(true); + // const result = await ArticleService.getArticles(categoryId); + // console.log('result ,', result); + // const meta = result.meta; - setArticles(result.data); - setIsLoaded(false); - setHasNextPage(meta.hasNextPage); - }; + // setArticles(result.data); + // setIsLoaded(false); + // setHasNextPage(meta.hasNextPage); + // hasNextPage = meta.hasNextPage; - useEffect(() => { - if (categoryId > 3) { - alert('준비 중입니다!'); - navi('/'); - } - setCurCate(getCategoryByUrl(loca)); - setInitalArticles(); - }, []); + // }; - // 무한 스크롤 임시 정지 + // 동기적으로 sleep하는 함수 + // const sleep = delay => { + // let start = new Date().getTime(); + // while (new Date().getTime() < start + delay); + // }; const getMoreItem = async () => { if (!hasNextPage) return; - setIsLoaded(true); - // 실제 API 통신처럼 비동기로 받아오는 것을 구현하기 위해 1.5 초 뒤에 데이터를 갱신한다. - // resolve, reject는 각각 성공 시, 실패 시의 동작을 의미. reject를 생략하니 reslove의 경우만 익명함수로 처리해주었다. - // (categoryId); const result = await ArticleService.getArticles(categoryId, page); const newData = result.data; const meta = result.meta; - - setPage(prevPage => prevPage + 1); - setHasNextPage(meta.hasNextPage); + // setPage(prevPage => prevPage + 1); + page += 1; + // setHasNextPage(meta.hasNextPage); + hasNextPage = meta.hasNextPage; setArticles(prevList => prevList.concat(newData)); setIsLoaded(false); }; @@ -77,6 +74,14 @@ const CategoryBody = () => { } }; + useEffect(() => { + if (categoryId > 3) { + alert('준비 중입니다!'); + navi('/'); + } + setCurCate(getCategoryByUrl(loca)); + }, []); + useEffect(() => { let observer; if (target) {