티스토리 오류제보 시트 개선

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

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

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

스크립트 수정

강좌 포스트 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열을 

Timestamp

path

title

memo

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

스타일 수정

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

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;

}