Block 구현

요구사항 추가할 것

템플릿- 페이지 - 블록의 형식이 들어있는 공유 페이지
이력서 - 페이지 - 사용자 경력사항 들어가있는 개인 페이지

블록 객체의 text를 수정할때 created_By 필드가 db에 저장된 객체와 동일해야 수정가능
(인증기능) 본인의 이력서(템플릿)만 화면에 보여줌

프론트

react-editor-js editor.js 직접하든 어떤 라이브러리를 가져와서 하든 프론트에서 서버로 요청할떄 보내는 데이터가 비슷해보인다.
타입하고 데이터하고 스타일 AuditingFields
{type}객체 ex)paragraph,header 객체에 따라 다른 필드들을 갖는다.

리액트 에디터 라이브러리 블록 객체

react-editor-js :{
          id: "SzwhuyoFq6",
          type: "header",
          data: {
            text: "What does it mean clean data output",
            level: 3
          }
        },
        

백엔드 구현

백엔드에서는 프론트에서 어떤 방식으로 구현하든간에 노션 API references에서 제공하는 json format으로 데이터를 전달하도록 개발을 하게 될듯하다.

react-editor에서는 header_2를 type header에 data에 lebel로 크기구분
type : paragraph block에 여러 children block이 포함된다.
heading block image block bookmark block 등이 포함된다.
각 타입의 블록 객체 JSON format이 notion reference에 나와있다.

Notion reference 블록 객체

{
"object": "block",
"id": "c02fc1d3-db8b-45c5-a222-27595b15aea7",
"parent": {
"type": "page_id",
"page_id": "59833787-2cf9-4fdf-8782-e53db20768a5"
},
// page라는 객체와 연관관계 매핑?
AuditingFields
"created_time": "2022-03-01T19:05:00.000Z",
"last_edited_time": "2022-07-06T19:41:00.000Z",
"created_by": {
"object": "user",
"id": "ee5f0f84-409a-440f-983a-a5315961c6e4"
},
"last_edited_by": {
"object": "user",
"id": "ee5f0f84-409a-440f-983a-a5315961c6e4"
},

"has_children": false,
"archived": false,
"type": "heading_2",    
"heading_2": {
    "rich_text": [
        {
            "type": "text",
            
            "text": {
                "content": "Lacinato kale",
                "link": null
            },
            
            "annotations": {
                "bold": false,
                "italic": false,
                "strikethrough": false,
                "underline": false,
                "code": false,
                "color": "green"
            },
            
            "plain_text": "Lacinato kale",
            "href": null
        }
    ],

"color": "default",
"is_toggleable": false
}

}