<div id="page-center" style="
    position: fixed;
    left: 50%;
    top: 50%;
		z-index: 100;
"></div>
<script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script>
<script>
  const addPos = document.querySelector(".notion-page-content");
  
  function addScrollObserver() {
    let ele = document.querySelector(".notion-page-content");
    let contentBox = document.querySelector(".notion-table_of_contents-block");
    if (contentBox === null) return;
    if (contentBox.parentElement !== ele) {
				ele.append(contentBox);
		}
    let headers = ele.querySelectorAll("h2, h3, h4")
    let content = document.querySelector(".notion-table_of_contents-block > div");

		function useIndex() {
        let index = 0;

        return function (newIndex) {
          	if (newIndex !== undefined) index = newIndex;
          	return index;
        };
    }
    let indexContext = useIndex();
    
    let callback = (entries, observer) => {
      if (!headers && !content) return;

      headers.forEach((header, index) => {
        if (header === entries[0].target && entries[0].isIntersecting) {
          // 범위에 들어왔으면 목차의 색을 바꾸는 기능을 활용해 테스트를 해보자
					indexContext(index);
        } else {
          content.childNodes[index].style.color = "";
        }
      });
      content.childNodes[indexContext()].style.color = "red";
    }

    let observer = new IntersectionObserver(callback, {
      threshold: [1] // If 50% of the element is in the screen, can count it
    });

    headers.forEach(d => {
        observer.observe(d);
    })
  }
  
  async function addRecentPostBlock() {
    async function fetchData() {
      const response = await fetch("https://heyinsa.kr/posts",
      {
        method: 'GET',
      });

      const result = await response.text();
      const result_json = JSON.parse(result);
			return result_json;
    }

		const posts = await fetchData();
    var divElement = document.createElement('div');
    divElement.classList.add('postblock');
		
    for (var i = 0 ; i < posts.length ; ++i) {
      const title = posts[i].properties['제목']['title'][0]['plain_text'];
      const author = posts[i].properties['rich_text']['formula']['string'];
      const cover = "https://cdn.pixabay.com/photo/2016/03/20/19/22/towards-the-garden-1269304_1280.jpg";
      const url = 'https://80000coding.oopy.io/' + posts[i].id;
      var aElement = document.createElement('a');

      var titleElement = document.createElement('div');
      titleElement.classList.add('postblock-box-title');

      var titleTitleElement = document.createElement('span');
      titleTitleElement.classList.add('postblock-box-title-title');
      titleTitleElement.classList.add('theme-text');
      titleTitleElement.innerHTML = title;

      var titleAuthorElement = document.createElement('span');
      titleAuthorElement.classList.add('postblock-box-title-author');
      titleAuthorElement.innerHTML = "by " + author;

      titleElement.append(titleTitleElement);
      titleElement.append(titleAuthorElement);

      var contentElement = document.createElement('div');
      contentElement.classList.add('postblock-box-content');
      contentElement.style.backgroundImage = "url(\'" + cover + "\')";

      aElement.classList.add('postblock-box');
      aElement.href = url;
      aElement.append(contentElement);
      aElement.append(titleElement);

      divElement.append(aElement);
    }
    var dividerElement = document.createElement('span');
    dividerElement.classList.add('postblock-divider');
    dividerElement.classList.add('theme-text');
    dividerElement.innerHTML = "최근 게시글";

    addPos.append(dividerElement);
    addPos.append(divElement);
  } // end of addRecentPostBlock
    
  function addCommentBlock() {
    function setAttributes(el, attrs) {
      for (var key in attrs) {
        el.setAttribute(key, attrs[key]);
      }
    } // end of setAttributes
		var script = document.createElement('script');
    const theme = "github-" + document.body.className;
    setAttributes(script, {
      "src": "https://utteranc.es/client.js",
      "repo": "rkskekzzz/80000coding_comment",
      "issue-term": "url",
      "label": "comment",
      "theme": theme,
      "crossorigin": "anonymous",
      "async": "async"
    });
    addPos.append(script);    
  } // end of addCommentBlock
  
  async function addHeartButton() {
    class Heart extends mojs.CustomShape {
      getShape() {
        return '<path d="M92.5939814,7.35914503 C82.6692916,-2.45304834 66.6322927,-2.45304834 56.7076029,7.35914503 L52.3452392,11.6965095 C51.0327802,12.9714696 48.9328458,12.9839693 47.6203869,11.6715103 L47.6203869,11.6715103 L43.2705228,7.35914503 C33.3833318,-2.45304834 17.3213337,-2.45304834 7.43414268,7.35914503 C-2.47804756,17.1963376 -2.47804756,33.12084 7.43414268,42.9205337 L29.7959439,65.11984 C29.7959439,65.1323396 29.8084435,65.1323396 29.8084435,65.1448392 L43.2580232,78.4819224 C46.9704072,82.1818068 52.9952189,82.1818068 56.7076029,78.4819224 L70.1696822,65.1448392 C70.1696822,65.1448392 70.1696822,65.1323396 70.1821818,65.1323396 L92.5939814,42.9205337 C102.468673,33.12084 102.468673,17.1963376 92.5939814,7.35914503 L92.5939814,7.35914503 Z"></path>';
      }
      getLength() {
        return 292.110107421875;
      } // optional
    }

    mojs.addShape('heart', Heart); // passing name and Bubble class

    const COLORS = {
      purple: '#8A5CE6',
      blue: '#42AFE3',
      yellow: '#FADD4A',
      red: '#FF6680',
    };

    const duration = 350,
          delayStep = duration / 3,
          yShift = 10,
          endAngle = 30;

    let delay = 0;

    // Common options for a bubble
    const OPTS = {
      parent: document.querySelector("#page-center"),
      shape: 'heart',
      scale: { 0: 1 },
      angle: { [-90]: endAngle, easing: 'cubic.out' },
      y: { 0: -yShift },
      easing: 'sin.out',
      radius: 43,
      duration,
    };

    // bubble then options
    const THEN_OPTS = {
      y: 50,
      angle: { to: -45, easing: 'cubic.in' },
      scale: { to: 0, easing: 'quad.in' },
      easing: 'sin.in',
    };

    // blue logo then options
    const LOGO_THEN_OPTS = {
      scale: 0,
      delay: 1000,
    };

    const purpleBubble = new mojs.Shape({
      ...OPTS,
      fill: COLORS.purple,
      origin: '100% 100%',
    }).then({
      ...THEN_OPTS,
    });

    const redBubble = new mojs.Shape({
      ...OPTS,
      shape: 'heart',
      fill: COLORS.red,
      origin: '0% 100%',
      delay: (delay += delayStep),
      x: 10,
      y: { [-55]: -55 - yShift },
      angle: { 40: -endAngle },
    }).then({
      ...THEN_OPTS,
      angle: { to: 90, easing: 'expo.in' },
    });

    const yellowBubble = new mojs.Shape({
      ...OPTS,
      fill: COLORS.yellow,
      origin: '100% 100%',
      delay: (delay += delayStep),
      y: { [-85]: -85 - yShift },
      x: 15,
      angle: { [-30]: endAngle },
    }).then({
      ...THEN_OPTS,
      duration: 300,
      y: 15,
    });

    const blueCircle = new mojs.Shape({
      parent: document.querySelector("#page-center"),
      shape: 'circle',
      fill: COLORS.blue,
      radius: 10,
      scale: { 0: 1 },
      x: { [-25]: -55 },
      y: { 0: -70 },
      delay: duration / 2 + 50,
      duration: 1 * duration,
      easing: 'quad.out',
    }).then({
      x: -20,
      y: 0,
      delay: 50,
      scale: { to: 0.65, easing: 'quad.in' },
      duration: duration / 1.75,
      easing: 'cubic.in',
      isShowEnd: false,
    });

    const check = new mojs.Shape({
      parent: document.querySelector("#page-center"),
      shape: 'heart',
      stroke: COLORS.red,
      fill: 'none',
      strokeWidth: 10,
      x: 1,
      y: 2,
      strokeLinecap: 'round',
      strokeDasharray: '100%',
      strokeDashoffset: { '100%': 0 },
      delay: 2.5 * duration - 50,
      duration: 2.5 * duration,
      easing: 'quad.out',
    }).then({
      scale: 0,
      duration: 1.35 * duration,
      delay: 450,
      angle: 360,
      easing: 'cubic.in',
    });

    const data = { host : window.location.href };
    const response = await fetch("https://heyinsa.kr/heart" , {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data)
    });
    const result = await response.text();
    const result_json = JSON.parse(result);
    const buttonPos = document.querySelector(".top-button");
    const floatIconBorder = document.createElement('div');
    floatIconBorder.classList.add('floatIconBorder');
    console.log(result_json);
    const floatIcon = document.createElement('div');
    function eventHandlerFactory(obj) {
      return async function () {
        if (floatIcon.classList.contains('liked')) {
          floatIcon.classList.remove('liked')
          data['value'] = 0 + obj.number
        } else {
          const timeline = new mojs.Timeline({ delay: 0 })
          timeline.add(purpleBubble, redBubble, yellowBubble, blueCircle, check).play()
          floatIcon.classList.add('liked')
          data['value'] = 0 + obj.number + 1
        }
        await fetch('https://heyinsa.kr/heart', {
          method: 'PATCH',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data),
        })
      }
    }
    floatIcon.classList.add('flaticon');
  	floatIcon.addEventListener('click', eventHandlerFactory(result_json))
    buttonPos.parentNode.append(floatIconBorder);
   	buttonPos.parentNode.append(floatIcon);
  }
  window.onload = function () {
    if (window.location.href !== 'https://80000coding.oopy.io/') {
      try {
        addScrollObserver()
      } catch (error) {
        console.log(error)
      }
      addCommentBlock()
      addRecentPostBlock() // 댓글 -> 최신게시글 순서 중요!!
      addHeartButton()
    }
  }
</script>


80000coding.oopy.io

mentor_강의자

ContributorNotionAccount

진행일 / 강의일

heart

팔만코딩경 컨트리뷰터

Scrap

Contributor

rich_text

Thumb

visible

간단소개

주제 / 분류

create_date

제목

컨트리뷰터 그룹

todaypost

생성일

이름

nj_blog

속성 1

팔만코딩경 컨트리뷰터 (Library DB (속성)에 관계됨)에 관계됨

temp_cadet

속성

temp_cadet_intraID

workflow

생성일_formatted

Level 2

42과제

cadet_formatted

최종 편집일

리스트 보기

기본 보기

동기화 블록 사용하는 법!

동기화 블록 사용해서 공유 하고 싶은 내용만 편하게

1) 노션의 새로운 기능 동기화 블록을 사용해 보세요!!

2) 동기화 블록 사용법

3) 아래 페이지를 눌러서 예시를 살펴보세요!!