<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

Created

Name

Date

React 기본 개발 환경 세팅하기

1. create-react-app

2. babel-loader 호환성 해결

3. storybook

4. styled-component

5. styled-component - storybook 적용