<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

최종 편집일

과제

작성자

Property

분류

생성일

이름

기본 보기

viewport란?

Viewport가 뭘까?

viewport!

그래서 우리는 viewport로 무엇을 하는 걸까?

이미지의 비율과 같아야 하는 이유를 이해해보자!

그렇다면 우리는 viewport를 어디에 띄워야 할까?

결과적으로 viewport란...

돌아가기.. ⇒ (5) Raytracing One Weekend 식 이해하기! 2