Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/일기장 #5

Open
wants to merge 23 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
86e9efc
[fix]: global style 적용 오류 해결
MrMirror21 Jul 16, 2023
9299d17
initial commit of diary page
MrMirror21 Jul 16, 2023
eef4097
[feature]: 서버에서 일기장 리스트 획득, 페이지에 게시
MrMirror21 Jul 22, 2023
05066ff
[fix]: 현재 페이지 주소에 따라 리스트 반환받도록 수정
MrMirror21 Jul 22, 2023
d5b523a
[feature]: 총 게시물 개수에 따른 페이지 수 조절
MrMirror21 Jul 23, 2023
9a7fb20
[feature]: 페이지 당 게시물 수 조절 기능 추가
MrMirror21 Jul 23, 2023
bd732ab
[chore]: Diary 페이지 useEffect 내 함수 분리, 주석 추가
MrMirror21 Jul 23, 2023
27432bb
[feature]: 게시물 작성 ui: modal 제작
MrMirror21 Jul 23, 2023
34fbc07
[feat]: 게시물 작성 wysiwyg 편집기 ui 추가
MrMirror21 Jul 28, 2023
91648c6
[feat]: 게시물 검색 기능(서버 미구현) 추가
MrMirror21 Jul 29, 2023
23b9312
[feat]: 서버에 작성한 게시글 업로드(서버 해당 api 미구현)
MrMirror21 Jul 30, 2023
9e98c50
[chore]: api 변경에 따른 호출 함수 변경
MrMirror21 Aug 3, 2023
2ae515b
[feat] : 좋아요, 조회수, 댓글 수 등 게시글 세부 정보 표기 기능 추가
MrMirror21 Aug 6, 2023
971e441
[chore] : api url 관련 변경
MrMirror21 Aug 6, 2023
28e570c
[feat]: 다이어리 게시글 리스트 로딩 구현
MrMirror21 Aug 15, 2023
b7803ec
[chore] : 다이어리 작성 양식 변경
MrMirror21 Aug 15, 2023
00b5182
[feat] : 다이어리 상세 페이지 라우팅, ui 작업
MrMirror21 Aug 15, 2023
786683b
[feat] : 다이어리 상세 페이지 : 댓글 기능 구현
MrMirror21 Aug 16, 2023
d3b6ced
refactor: 댓글 개수 표기 컴포넌트 분리
MrMirror21 Sep 6, 2023
f4eb7aa
[feat]: 댓글 작성, 수정 기능 구현
MrMirror21 Sep 6, 2023
cb9e382
[feat]: 게시글 삭제 기능 구현
MrMirror21 Sep 13, 2023
5b5e95a
feat: 게시글 수정, 삭제 기능
MrMirror21 Sep 23, 2023
466dd2a
feat: 게시글 구독 기능 추가
MrMirror21 Sep 23, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
[chore]: Diary 페이지 useEffect 내 함수 분리, 주석 추가
Diary.js 내 useEffect부 extractPageNumFromURL() 내부의 getDiaryList(), setNumberOfPages() 분리
- axios.js, Diary.js 파일 내 To do 주석 추가
  • Loading branch information
MrMirror21 committed Jul 23, 2023
commit bd732ab068bf66f9a523ae519bb91c25975679f9
33 changes: 20 additions & 13 deletions src/pages/Diary.js
Original file line number Diff line number Diff line change
@@ -1,28 +1,34 @@
import React, { useEffect, useState } from 'react'
import styled from 'styled-components'
import { ReactComponent as WriteIcon } from "../assets/pen.svg";
import { ReactComponent as WriteIcon } from "../assets/pen.svg"
import { DiaryList } from '../store/fakeDiary'
import PaginationBar from '../components/diary/PaginationBar'
import { useLocation } from 'react-router-dom';
import { getDiaryList } from '../utils/axios';
import { useLocation } from 'react-router-dom'
import { getDiaryList } from '../utils/axios'

/**
* To do
* 1. PageSizeRegulator, DiaryBlock 컴포넌트 분리, 추상화 요망
* 2. 게시물 작성 UI(Modal) 제작, Post /diary
*/

const Diary = () => {
const currentURL = useLocation().search;
const currentURL = useLocation().search
const diaryList = [...DiaryList]
const [currentPage, setcurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(3);
const [currentPage, setcurrentPage] = useState(1)
const [pageSize, setPageSize] = useState(3)
const [numberOfPages, setNumberOfPages] = useState()

useEffect(() => {
const extractPageNumFromURL = () => {
const urlParams = new URLSearchParams(currentURL);
const pageParam = urlParams.get('page');
pageParam && setcurrentPage(isNaN(parseInt(pageParam, 10)) ? 1 : parseInt(pageParam, 10));
getDiaryList(parseInt(pageParam, 10), pageSize);
setNumberOfPages((diaryList.length / pageSize) + 1)
const urlParams = new URLSearchParams(currentURL)
const pageParam = urlParams.get('page')
pageParam && setcurrentPage(isNaN(parseInt(pageParam, 10)) ? 1 : parseInt(pageParam, 10))
return parseInt(pageParam,10);
}
extractPageNumFromURL();
}, [currentURL, pageSize, diaryList.length]);
getDiaryList(extractPageNumFromURL(), pageSize)
setNumberOfPages((diaryList.length / pageSize) + 1)
}, [currentURL, pageSize, diaryList.length])

return (
<>
Expand All @@ -40,6 +46,7 @@ const Diary = () => {
<RegulatorButton type="radio" id="10" name="pageSize" value="10" classname={pageSize === 10 ? "selected" : "non-selected"} onChange={()=>setPageSize(10)}/>
<label for="10">10</label>
</PageSizeRegulator>
{/** To do: 현재 서버의 일기장 리스트가 비어있는 관계로 /store/fakeDiary.js 의 가짜 데이터를 사용중, 추후 서버에 일기장 데이터 추가 시 변경 요망 */}
{diaryList.map((post) => (
<DiaryBlock>
<Title>{post.title}</Title>
Expand Down
9 changes: 6 additions & 3 deletions src/utils/axios.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
import axios from 'axios';



export const getDiaryList = (cursor, size) => {
/**
* To do: GET /diary/list api가 변경되면 getDiaryList url cursor 부분 변경 요망
*/
const authorizationCode = process.env.REACT_APP_AUTHORIZATIONCODE;
let config = {
method: 'get',
maxBodyLength: Infinity,
url: `https://khu-return.site/diary/list?cursor=${cursor}&size=${size}`,
headers: {
'Authorization': `${authorizationCode}`,
'Cookie': `authorization=${authorizationCode}`
}
'Authorization': `${authorizationCode}`, }
};

axios.request(config)
Expand Down