티스토리에 오류 제보하기 버튼을 만들어보자 - 구글 스프레드 시트를 데이터베이스로 이용하기

    구글 스프레드 시트를 응용한 오류제보하기를 소개해드린적 있는데요, 의외로 몇몇 분들이 사용중이시길래 제가 사용중인 개선 방향을 알려드리려합니다.


    기존에는 오류 제보가 들어온 글의 주소만 알 수 있어서 어떤글이었는지, 제목이 뭐였는지 확인해보려면 직접 주소를 쳐서 들어갔어야했는데요, 그냥 한 눈에 들어오도록 수정해보도록 하겠습니다.


    스크립트 수정


    강좌 포스트 3.에서 skin.html에 삽입한

    스크립트 부분에서 다음을 찾습니다

        data: {

          path: decodeURIComponent(location.pathname),

          memo: errors+" / "+comment

        },


    찾은 부분을 다음과 같이 바꿔주세요

        data: {

          path: location.protocol+"//"+location.host +"/admin/entry/post/?id="+decodeURIComponent(location.pathname).slice(1,5),

          title: document.title,

          memo: errors+" / "+comment

        },     



    스프레드시트 수정

    스크립트를 수정하고 누군가 오류제보를 남기기 전에 재빨리 스프레드 시트도 수정합니다.

    1열을 

    Timestamppathtitlememo

    이렇게 수정하시면 됩니다.



    스타일 수정

    현재 제가 사용중인 스타일입니다. 기존의 눌러야 나타나는 모습과는 다르니 원하시는 분들만 적용해주세요~

    HTML

    <div id="sendComment">

    <h4>문제가 있나요?<a href="http://nubiz.tistory.com/551">(?)</a></h4>

    <span><input type="checkbox" value="내용상 오류가 있음"/> 내용상 오류가 있음</span>

    <span><input type="checkbox" value="업데이트 필요"/> 업데이트 필요</span>

    <span><input type="checkbox" value="화면이 깨짐"/> 화면이 깨짐</span>

    <span><input type="checkbox" value="기타 수정이 필요함"/> 기타 수정이 필요함</span>

    <div>

    <textarea placeholder="구체적 내용이나 기타 의견을 남겨주세요. 답변을 받으려면 이메일 주소같은 연락처를 남겨주세요"></textarea>

    <input type="button" value="보내기" onclick="sendComment();" class="flatbutton">

    </div>

    </div>

    CSS

    #sendComment {

      color:#909090;

      width:100%;

      font-size:.8em;

    margin:0 0 16px;

    clear:both;

    }

    #sendComment h4 {

        border-left: none;

        padding: 0;

        margin: 8px 0;

        text-indent: 0;

    }

    #sendComment h4>a {

    float:right;

    }

    #sendComment span {

        padding-right: 4px;

    }

    #sendComment div {

    display:flex;

    margin: 8px 0;

    }

    #sendComment div > textarea {

    flex:10;

        border: none;

        border-bottom: #909090 solid 1px;

    }

    #sendComment div > input {

    flex:2;

    -webkit-appearance: initial;

        border: none;

        background: none;

    color:#4285f4;

    }

    #sendComment a {

      text-decoration:none;

      color:#aaa;

      margin-left:0px;

    }


    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함

    • 2016.07.10 15:48

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.07.10 15:57 신고

        따옴표 하나가 빠졌었네요 감사합니다~


    • 2016.07.10 22:22

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.07.10 22:25 신고

        스프레드시트에 제목이 timestamp인 열이 있으면 됩니다~


    • 2016.07.10 22:36

      비밀댓글입니다


    • 2016.08.16 01:13

      비밀댓글입니다

    • BlogIcon Mir(whdghks913)
      2016.10.30 11:24 신고

      뭐하라님, 저도 몇달 전까지만 해도 오류 제보 기능을 추가했었는데요.
      실제 사용자가 너무 적은 것 같아서 스킨 변경할 때 지웠는데..
      뭐하라님께서는 오류 제보를 어느 정도 받으시는지 알려주실수 있으신가요?

      • BlogIcon 뭐하라
        2016.10.30 12:01 신고

        저도 거의 없습니다
        거의 실수로 눌러본것들만 일주일에 2~3개 있습니다 ㅋㅋ

      • BlogIcon Mir(whdghks913)
        2016.10.30 12:12 신고

        그렇군요 ㅋㅋ
        제 경우 방문자분께서 포스팅 오류를 댓글로 알려주시고 오류 제보는 사용하지 않으셔서 필요가 없더라고요..


    • 2016.11.21 04:10

      비밀댓글입니다

    • BlogIcon Edgemine
      2017.02.22 23:34 신고

      하아;;;;
      코드를 뭔가 잘못 만졌더니 이상하게 되버렸네요...ㅋㅋ