라이믹스/XE 새로고침없는 추천/비추천 기능 만들기 (feat. rx-flextagram 분석하기) (2)

자 그럼 사실 본격적으로 이제 한번 만들어봅시다.

1단계 아이콘 불러오기 

일반 게시판에서는 아이콘을 예쁘게 사용할 수 없기 때문에 Ionicons 를 사용해봅니다. MIT 라이선스입니다.

https://ionic.io/ionicons/usage

사용법

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

공식홈페이지에선 이렇게 쓰라고 했는데 type="module"과 nomodule의 차이는 이 글을 참조하세요.

스낙스님은 그냥 이렇게만 쓰셨네요.

{@ // 외부 라이브러리 }
<script type="module" src="https://unpkg.com/ionicons@5/dist/ionicons/ionicons.esm.js"></script>

nomodule은 레거시 브라우저(오래된 브라우저)라 따로 지원하지 않으시는 모양입니다.

보통 게시판 헤더에 위 코드를 적어줍니다. 

참고로 라이믹스/XE에서는 <load target="주소" type="body" />  라고 적어주면 바디 태그 아랫쪽에 해당 스크립트를 불러줍니다.

2단계 추천 코드 HTML 작성하기

<load target="article-vote.scss" vars="$rxpFlexTheme->variables" />
<load target="article-vote.js" />
  
<!--@if($list_config['voted_count'])-->
  <div class="app-article-vote" data-target-srl="{$oDocument->document_srl}">
    {@
      $isMyVoted = $oDocument->getMyVote() == 1;
      $voteActiveClassName = $isMyVoted ? 'active' : null;
    }
    <a class="app-article-toolbar__item app--is-vote app-tooltip {$voteActiveClassName}" title="좋아요" data-type="up" onclick="alArticleVote(this)">
      <div class="app-icon">
        <!--@if($isMyVoted)-->
          <ion-icon name="heart"></ion-icon>
        <!--@else-->
          <ion-icon name="heart-outline"></ion-icon>
        <!--@end-->
      </div>
      <span class="app-article-vote__count">
        <!--@if($oDocument->get('voted_count') > 0)-->
        {$oDocument->get('voted_count')}
        <!--@end-->
      </span>
    </a>
    
    <!--@if($list_config['blamed_count'])-->
      {@
        $isMyBlamed = $oDocument->getMyVote() == -1;
        $blameActiveClassName = $isMyBlamed ? 'active' : null;
      }
      <a class="app-article-toolbar__item app--is-blame app-tooltip {$blameActiveClassName}" title="싫어요" data-type="down" onclick="alArticleVote(this)">
        <div class="app-icon">
          <!--@if($isMyBlamed)-->
            <ion-icon name="heart-dislike"></ion-icon>
          <!--@else-->
            <ion-icon name="heart-dislike-outline"></ion-icon>
          <!--@end-->
        </div>

        <span class="app-article-vote__count">
          <!--@if($oDocument->get('blamed_count') > 0)-->
          {$oDocument->get('blamed_count')}
          <!--@end-->
        </span>
      </a>
    <!--@endif-->
  </div>
<!--@end-->

좀 길고 어려운데요. 하나씩 파헤쳐 가봅시다.. ㅠ

1) CSS와 JS 불러오기

1단계 마지막에서 설명한대로 라이믹스/XE(이하 'RXE')에서는 <load target="..." /> 식으로 CSS와 JS를 불러올 수 있습니다.

그리고 라이믹스에서는 SCSS를 바로 불러올 수도 있나보군요 (__);;;

2) 추천하기

<!--@if($list_config['vote_count'])--> ... <!--@end-->

RXE에서는 <!--@if(...)-->...<!--@end--> 를 PHP문법으로 인식합니다. XE의 문법 중 하나인 구문법 작성 템플릿 스타일입니다. 

<?PHP .. ?> 로 해도 될듯합니다만. 테스트는 안해봤어요.

디자인은 요즘 새롭게 런칭한 다음웹툰처럼 해봅시다. (이거 스샷하기 위해 보유권 200캐시 씀(__)?;; )

숫자의 폰트는 아미 이런 거 같네요. 

AppleSDGothicNeo,Roboto,Dotum,sans-serif

폰트 스타일은 이러합니다.

1. color: #fff;
2. font-size: 21px;
3. font-weight: 700;

아이콘의 크기는 80*80입니다.

3) 비추천하기

sketchbook5rx.zip

일단 새로고침 없는 스케치북 for 라이믹스 입니다 -_-;