Type

1.Notion

1) Notion state

Notion state type

type Notion = {
  //모든 page와 template의 id
  pagesId: string[] | null;
  //모든 page와 template
  pages: Page[] | null;
  //부모 page가 없는, 최상위에 있는 page들의 id
  firstPagesId: string[] | null;
  //모든 template의 id
  templatesId: string[] | null;
  // 삭제된 page의 id와 page들
  trash: {
    pagesId: string[] | null;
    pages: TrashPage[] | null;
  };
};

Notion Action type

type NotionAction =
  | ReturnType<typeof add_block>
  | ReturnType<typeof edit_block>
  | ReturnType<typeof change_block_to_page>
  | ReturnType<typeof change_page_to_block>
  | ReturnType<typeof delete_block>
  | ReturnType<typeof change_to_sub>
  | ReturnType<typeof raise_block>
  | ReturnType<typeof add_page>
  | ReturnType<typeof duplicate_page>
  | ReturnType<typeof edit_page>
  | ReturnType<typeof move_page_to_page>
  | ReturnType<typeof delete_page>
  | ReturnType<typeof restore_page>
  | ReturnType<typeof clean_trash>
  | ReturnType<typeof add_template>
  | ReturnType<typeof cancel_edit_template>
  | ReturnType<typeof delete_template>;

2) Page type

type PageType = typeof page | typeof template;
type Page = {
  id: string;
  type: PageType;
  header: {
    title: string;
    iconType: IconType;
    icon: string | Emoji | null;
    cover: string | null;
    comments: MainCommentType[] | null;
  };
  // block.firstBlock === true인, 부모 block이 없는 블럭을 firstBlock라고 함
  firstBlocksId: string[] | null;
  blocks: Block[] | null;
  blocksId: string[] | null;
  // 해당 page의 자식 page를 subPage라고 함
  subPagesId: string[] | null;
  // 해당 page의 상위 page의 id를 원소로 하는 배열
  parentsId: string[] | null;
  editTime: string;
  createTime: string;
};

3) Trash type

type TrashPage = Page & {
  subPages: Page[] | null;
};

4) Block

Block type

  type Block = {
    id: string;
    contents: string;
    firstBlock: boolean;
    //해당 block의 자식block을 subBlock이라 함
    subBlocksId: string[] | null;
    //해당 block의 모든 상위 block의 id
    parentBlocksId: string[] | null;
    type: BlockType;
    iconType: IconType;
    icon: string | Emoji | null;
    editTime: string;
    createTime: string;
    style: BlockStyle;
    comments: MainCommentType[] | null;
  };

ColorType

• ColorType? block의 글자색에 대한 타입입니다

type ColorType =
  | typeof defaultColor
  | typeof grey
  | typeof orange
  | typeof green
  | typeof blue
  | typeof red;

BgColorType

• BgColorType ? block의 배경색에 대한 타입입니다

  
  type BgColorType =
    | typeof bg_default
    | typeof bg_grey
    | typeof bg_yellow
    | typeof bg_green
    | typeof bg_blue
    | typeof bg_pink;

BlockStyle

• BlockStyle? block의 스타일(색상,배경색,너비와 높이)에 대한 타입입니다

 
  type BlockStyle = {
    color: ColorType;
    bgColor: BgColorType;
    width: undefined | string;
    height: undefined | string;
  };

BlockType

*BlockType ? block의 유형 또는 종류

 
  type BlockType =
    | typeof text
    | typeof toggle
    | typeof todo
    | typeof todo_done
    | typeof image
    | typeof bookmark
    | typeof h1
    | typeof h2
    | typeof h3
    | typeof page
    | typeof numberList
    | typeof bulletList
    | typeof numberListArr
    | typeof bulletListArr;

IconType

• IconType? block의 icon에 대한 타입으로 block의 type이 page인 경우 해당 page의 icon과 동일합니다.

  type IconType = typeof img | typeof emoji | null;

5) Comment type

💡 comments는 block에 대한 직접적인 comment인 mainComment과 mainComment에 대한 comment인 subComment로 분리됩니다.

  type SubCommentType = {
    id: string;
    userName: string;
    content: string;
    editTime: string;
    createTime: string;
  };

  type MainCommentType = SubCommentType & {
    type: "open" | "resolve";
    selectedText: null | string;
    subComments: SubCommentType[] | null;
    subCommentsId: string[] | null;
  };

2.User

1) User State type

type UserState = {
  userName: string;
  userEmail: string;
  favorites: string[] | null;
  //최근에 방문한 page의 id
  recentPagesId: string[] | null;
};

2) User Action type

type UserAction =
  | ReturnType<typeof add_favorites>
  | ReturnType<typeof remove_favorites>
  | ReturnType<typeof add_recent_page>
  | ReturnType<typeof clean_recent_page>;

3. Side

1) Side State type

type SideAppear =
  | typeof lock
  | typeof float
  | typeof floatHide
  | typeof close;

type Side = {
  appear: SideAppear;
};

2) Side Action type

type SideAction = ReturnType<typeof change_side>;