# 211108 TIL ([stimulus.js, slim] 토글 버튼 구현하기, 프린트 시 content 추가)

장기현장실습

PLSnote 이슈

#2813 노트에 고유번호를 부여하고, 통합검색 기능 추가 이슈 진행중 

• 노트를 프린트 할 때 고유번호를 확인할 수 있게 하기 
  • 프린트 하는 화면이 어디인지 알기 위해 먼저 노트 인쇄 버튼을 찾았다. 그리고 버튼을 클릭하면 printNoteList 함수가 실행되도록 연결되어 있었다. 그 함수를 보니 printUrl의 데이터를 받아와서 fetch하는 형태였다. PrintUrl은 data-controller="plan"가 선언된 줄에 있었는데, data-plan-print-url="#{}"이렇게 stimulus 문법에 맞게 선언되어 있다. 해당 URL 액션인 print_note_list가 정의되어 있는 코드를 확인해보니, activity_for_print를 렌더하고 있었다. Activity_for_print 파일을 보니 실제 프린트할 때 나올 내용들이 담겨 있었다. 이 부분에 노트 번호를 추가하면 프린트할 때 노트 번호를 확인할 수 있다. 
  • 노트 id인 activity.id를 프린트하는 화면에 추가하여 나타나게 수정했다. 노트 번호가 정상적으로 나타난 것인지 확인하기 위해 해당 노트로 들어가보았더니 같은 번호임을 확인할 수 있었다.

    

    

    .col 
      | #{t('activities.index.id')} : 
      = activity.id

    
    
• 프린트에 나온 고유 번호(activity.id)를 보고 맵 리스트 화면에서 검색할 수 있도록 하기
  • 검색 UI 고민해보기
    • 맵 이름 옆에 검색 토글 버튼 추가

      i.fa.fa-search-plus.favor-icon.text-info.ml-2 data-action="click->activity#showSearchInput"

      //- 검색 버튼 클릭 시 검색할 수 있는 UI 보여주기
      
      showSearchInput(event) { 
      	if (event.target.classList.contains("fa-search-plus")) { 
      		event.target.classList.replace("fa-search-plus", "fa-search-minus"); 
      	} else { 
      		event.target.classList.replace("fa-search-minus", "fa-search-plus") 
      	} 
      }

    • fa-search-plus / fa-search-minus로 토글 형태 구현한 상태이고, plus->minus로 바뀔 때 노트 번호를 검색할 수 있는 input 창 + 검색 버튼이 나오도록 추가 구현 예정