Guide for changing channel main UI

[baek-jisu]

✨ Guide for changing channel main UI

📂 Related Files

• ChanMain.vue : 채널 메인의 전체 페이지입니다.
• PushList.vue : 콘텐츠들을 감싸고 있는 리스트입니다. 필터, 검색 버튼 등을 포함하고 있습니다.
• ContentsBox.vue : 각각의 콘텐츠를 나타내는 component입니다.

✅ Related Variables

• ChanMain.vue
  • mChanInfo
    • boardList : List of board in a channel.

      각 게시판 object 안에는 게시판 이름, 생성 일자, 테마 색상, 업데이트 된 날짜 등 요소들을 화면에 그려내기 위한 다양한 정보가 포함되어 있습니다. 자세한 내용은 console.log를 통해 확인해 보세요.

🧐 Releated Functions

• PushList.vue

  • getPushContentsList parameter

    • pageSize (Int) : 한 번에 불러올 콘텐츠의 양입니다. (보통 20개)
    • offsetInput (Int) : 몇 번째 콘텐츠부터 불러올 것인지 결정합니다. 예를 들어 pageSize가 20이고 offsetInput이 1인 경우, 21번째 콘텐츠부터 불러옵니다. 현재 컴포넌트 내에서 자동으로 정의 및 초기화 하고 있으므로 크게 신경 쓰지 않아도 됩니다.
    • loadingYn (Boolean) : 콘텐츠 불러올 시 로딩 화면을 띄울 것인지를 결정합니다.

    how to use

    • 해당 함수의 내부를 살펴보면 다음과 같은 부분이 존재합니다.
    • cabinetKey는 각 게시판이 가지고 있는 고유한 id 값이고, boardList 안에 있는 각각의 object의 cabinetKey를 함수 호출 시 전달해주면 해당 게시판에서 작성된 게시글만을 가져올 수 있습니다.

      if (this.mSelectedCabinetKey !== -1) {
      param.jobkindId = 'BOAR'
      param.cabinetKey = this.mSelectedCabinetKey
      }

• getPushContentsList를 이용하여 콘텐츠 리스트를 불러왔다면 아래와 같은 형태로 화면에 그릴 수 있습니다.

  <template v-for="(cont, index) in GE_DISP_ALL_LIST" :key="cont.contentsKey">
  <gUBContentsBox :pOpenUnknownLoginPop="openUnknownLoginPop" @contMove="refreshAll" @contDelete="refreshAll" :index="index" :contentsIndex="index" @openImgPop="openImgPop" :imgClickYn="false" ref="myContentsBox" :propDetailYn="false" :contentsEle="cont" @openPop="openPop" @fileDownload="fileDownload"/>
  <myObserver v-if="index === GE_DISP_ALL_LIST.length - 5" @triggerIntersected="loadMore" id="observer" class="fl w100P" style=""></myObserver>
  </template>

  gUBContentsBox는 ContentsBox 컴포넌트, 즉 하나의 콘텐츠 각각을 의미합니다. myObserver는 스크롤 시 콘텐츠 로딩을 위한 일종의 트리거로, 화면에 myObserver가 보일 때 API 요청하여 콘텐츠를 더 불러오게 됩니다.

🧾 Summary

• 먼저 mChanInfo안의 boardList로 게시판 리스트를 폴더 형태로 화면에 그립니다.
• 해당 게시판을 클릭했을 때 getPushContentsList를 실행하도록 클릭 이벤트를 바인딩 합니다.
• 게시판이 선택되면 상단의 함수를 통해 불러온 콘텐츠 리스트를 화면에 그립니다.