[VanilaJs] 게시판 만들기 (4) - 글 상세보기와 수정

1. 글 상세보기

글 상세보기는 mode가 Detail 일때, 수정이 불가능한 화면에서 게시글 내용을 확인 할 수있다.

글 상세보기

해당 아이콘을 누르면

detailItem 함수에서 글번호 (no)값을 넘긴다.

function detailItem(no) {
  modalOpen('Detail');
  let detail = _storageData.filter((data) => {
    return data.no == no;
  });
  let title = document.getElementById('title');
  let content = document.getElementById('content');
  title.value = detail[0].title;
  content.value = detail[0].content;
  title.readOnly = true;
  content.readOnly = true;
  _boardNo = no;
}

no값을 받아서 로컬 스토리지에 해당되는 값을 반환하여 modal.html에 값을 바인딩 시켜 준다.

이때 제목과 내용부분은 읽기 전용으로 readOnly = true 로 설정한다.

 

mode 'Detail'

 

2. 글 수정

상세보기 모달창에서 수정모드를 누르면 mode가 Edit 으로 변경되며, 게시글을 수정후 저장 하는 이벤트를 사용할 수 있다. 

mode 'Eidt'

function boardEdit() {
  let title = document.getElementById('title').value;
  let content = document.getElementById('content').value;
  let date = new Date();

  date = dateFormat(date);
  const index = _storageData.findIndex((data) => {
    return data.no == _boardNo;
  });
  
  //수정된 제목, 글내용, 현재날짜와 시간을 입력하여 로컬스토리지 데이터를 수정한다.
  _storageData[index] = new Object({
    no: _boardNo,
    title: title,
    content: content,
    date: date,
  });

  window.localStorage.setItem('storageList',JSON.stringify(_storageData));
  boardListAction(); //게시물 목록을 새로 조회 한다.
  modalClose(); //모달창을 닫아준다.
  alert('수정 완료');
}

boardEdit 함수에서는 세가지 액션을 진행한다.

1. 수정된 제목, 글내용, 현재날짜와 시간을 입력하여 로컬스토리지 데이터를 수정한다.

2. 게시물 목록을 새로 조회 한다

3. 모달창을 닫아준다.

 

전체소스

https://github.com/Jo-App/vanillaJs_Board/tree/board-4

GitHub - Jo-App/vanillaJs_Board