개인 공부/게시판9 9. 페이지네이션 ※페이지네이션 구현 -Math.ceil : 올림 함수 ex) 4.3 -> 5 , 7.8 -> 8 -slice() : 배열의 일부분을 잘라내서, 새로운 배열을 구성 -각 페이지 마다 다이어리 4개씩 ※카테고리 분류 함수 에서 로 옮겨 정리 -카테고리 버튼 누를 때마다 페이지 1로 설정 component -Input.JSX -Button.JSX -Textarea.JSX -DiaryWrite.JSX -DiaryBlock.JSX -Category.JSX -CategoryButton.JSX -Header.JSX -Sidebar.JSX -EditDiary.JSX -Pagination.JSX module -Diary.JSX css -Diary.css -Category.css component - import Reac.. 2024. 2. 19. 8. 일기 수정 모달 창 ※수정 버튼 클릭 시 모달 창이 나오도록 구현 ※pointer-events CSS를 이용해 모달 창 개/폐 여부에 따라 페이지 버튼 클릭 이벤트 허용/방지 -모달 창이 열리면 모달 창 외부 버튼을 클릭이 안되며 그대로 모달 창 닫힘 ※이벤트 리스너를 이용해 모달 창 외부를 클릭하면 모달 창이 닫힘 -mousedown : HTML 요소 위에 마우스를 클릭 시 이벤트 발생 -.current.contains(event.target) : 특정 영역 외 클릭을 감지 ※제목/내용/카테고리 수정 ※수정 모달 창을 열 시 , 이미 저장된 제목/내용/카테고리를 기본 value로 지정 component -Input.JSX -Button.JSX -Textarea.JSX -DiaryWrite.JSX -DiaryBlock.JS.. 2024. 2. 15. 7. 페이지 구성 전체적인 페이지 구성 -헤더, 사이드바 추가 추가 -카테고리 버튼을 사이드바로 이동 -한 줄당 일기장 2개 씩으로 그리드 설정 component -Input.JSX -Button.JSX -Textarea.JSX -DiaryWrite.JSX -DiaryBlock.JSX -Category.JSX -CategoryButton.JSX -Header.JSX -Sidebar.JSX module -Diary.JSX css -Diary.css -Category.css component - import React from 'react' import '../css/Diary.css' function Header() { return ( LIFE SHELF ) } export default Header component - .. 2024. 2. 13. 6. 모달 창 구현 모달 창 추가 ※모달 창 열기/닫기 ※모달 창 외부 버튼 클릭 허용/방지 -stopPropagation(): 이벤트 버블링을 방지 -이벤트 버블링: 이벤트가 동작될 시 루트까지 해당되는 부모 요소의 이벤트도 동작 ※모달 창 외부 클릭 시 모달 창 닫기 component -Input.JSX -Button.JSX -Textarea.JSX -DiaryWrite.JSX -DiaryBlock.JSX -Category.JSX -CategoryButton.JSX module -Diary.JSX css -Diary.css -Category.css component - import React, {useState} from 'react' import '../css/Diary.css' imp.. 2024. 2. 10. 이전 1 2 3 다음
