[Feature] 임시저장 기능을 사용할 수 있다

[noy3928]

상황 :

현재는 글을 작성할 때, 임시저장 기능을 사용할 수가 없는 상황이다.
하지만 블로그 포스팅을 할 때, 임시저장 기능이 없다는 것은 상당히 불편한 것이다.
때문에 작성하던 글을 임시로 저장할 수 있는 기능을 추가할 필요가 있다.

방법에 대한 고민 :

임시로 글을 저장하는 방법에는 여러가지가 있을 것이다.

1. 유저의 계정에 알맞게 글을 저장하는 방법.
2. 로컬스토리지에 글을 저장하는 방법.

로컬스토리지에 글을 저장하는 방법은 나 개인으로써 사용한다고 할 때는 괜찮을지 모르겠다.
하지만 만약 이와 유사한 기능을 다른 곳에서 개발한다고 가정할 때는,
로컬스토리지에 저장하는 방법이 유효하지 않을 것 같다는 생각이 든다.
때문에 그냥 유저의 계정에 임시저장 글을 저장하고, 로그인된 유저의 임시저장글을 불러오는 방식으로 구현을 하는 것이
연습적인 측면에서도 좋을 것 이라는 판단이 선다.

유저의 계정에 임시저장 글을 저장한다고 할 때, 구체적인 방법에 대한 고민 :

그렇다면, 이런 방법 속에서 어떻게 구체적으로 기능을 구현할 수 있을까.
구체적인 구현 사항을 미리 이곳에 적어놓고 하나하나 개발해나가면 좋을 것 같다는 판단이 선다.

• 기존의 article 데이터 스키마에 isDraft : boolean을 추가한다.
• 유저가 임시저장 버튼을 클릭하면, isDraft가 true인 상태로 게시글을 저장한다.
  • 임시저장을 하려면 무조건 제목이 입력되어야 한다. 제목이 입력되지 않았다면, 에러 알람을 보낸다. "제목을 입력해야 임시저장이 가능합니다."
• 만약 유저가 임시저장 글 목록을 조회하면, 해당 유저 Id의 게시글 중에서, isDraft가 true인 글의 목록을 찾아서 가져온다.
• 글쓰기 페이지에서 기존의 나가기 버튼을 없애고, 임시저장 버튼을 만든다. (임시저장 | 0) 과 같이, 저장버튼과 현재 임시저장된 게시글의 갯수를 보여준다.
  • 모달로 임시저장 게시글을 보여줄 경우
    • 임시저장된 게시글을 get하는 api를 새로 만들어야 한다.
    • 임시저장된 갯수를 클릭하면 모달을 보여준다.
    • 모달에는 임시저장된 게시글들의 제목을 보여준다.
    • 게시글들을 클릭하면, 해당 게시글의 내용물이 에디터에 표시되도록 만든다.
  • 페이지로 임시저장 게시글을 보여줄 경우
    • 임시저장된 게시글을 get하기 위해서 getStaticProps를 사용한다.
    • 임시저장된 갯수를 클릭하면 임시저장게시글을 보여주는 페이지로 이동한다.
    • 게시글을 클릭하면, 해당 게시글의 내용물을 가져와서 에디터에 보여준다.
      • 수정하기 페이지로 들어가는 로직과 비슷하게 할 수 있을 것 같다. 클릭한 게시글의 id를 가지고 와서, 수정하기 페이지로 이동한다. 수정하기 페이지에서 해당 Id를 가지고 게시글을 불러와 에디터에 넣는다. 기존의 로직에 별다른 수정이 필요하지 않다.

  async findDrafts(userId: string) {
    const drafts = await this.model
      .find({ userId: userId, isDraft: true })
      .sort({ updatedAt: -1 });

    return JSON.parse(JSON.stringify(drafts));
  }