bugfix :: 스크롤로 이전대화 보기 기능 구현.

> perfect scroll 에서 초기 init 시 psYReachStart 이벤트가 무조건 발생하여 이전대화 더보기를 강제 수행하던 버그를 수정.
> 스크롤 UP 에 연속한 reachStart 이벤트 발생시에만 이전대화 보기 기능을 수행하도록 수정.
> 방정보가 바뀌면 해당 정보를 구분하는 구분자들을 초기화 함.

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html

@@ -95,6 +95,7 @@
     <perfect-scrollbar
       fxFlex="1 1 auto"
       #psChatContent
+      (psScrollUp)="scrollUpinit = true"
       (psYReachStart)="onScrollup($event)"
     >
       <ucap-chat-messages

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

@@ -113,10 +113,13 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
   userInfoListSubscription: Subscription;
   eventListProcessing$: Observable<boolean>;
   eventInfoStatus$: Observable<InfoResponse>;
-  eventRemain$: Observable<boolean>;
-  eventRemain = false;
   sessionVerInfo: VersionInfo2Response;
 
+  eventRemain$: Observable<boolean>;
+  eventRemain = false; // 이전대화가 남아 있는지 여부
+  eventMorePosition = 0; // 이전대화를 불러올 경우 현재 스크롤 포지션 유지를 위한 값. 0 이면 초기로딩.
+  scrollUpinit = false; // ps 에서 초기 로딩시 scroll reach start 이벤트 발생 버그를 우회하기 위한 init 값으로 scrollUp 에 의해 true 로 된다.
+
   isRecalledMessage = isRecalled;
   isCopyableMessage = isCopyable;
   isRecallableMessage = isRecallable;
@@ -157,6 +160,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
         select(AppStore.MessengerSelector.RoomSelector.roomInfo),
         tap(roomInfo => {
           this.roomInfo = roomInfo;
+
+          // 방정보가 바뀌면 이전대화 보기 관련 값들을 초기화 한다.
+          this.scrollUpinit = false;
+          this.eventMorePosition = 0;
         })
       )
       .subscribe();
@@ -217,7 +224,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.readyToReply();
+    // this.readyToReply();
   }
 
   getRoomName() {
@@ -298,13 +305,29 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   scrollToBottom(speed?: number): void {
-    speed = speed || 0;
-    if (this.psChatContent.directiveRef) {
-      this.psChatContent.directiveRef.update();
+    if (this.eventMorePosition > 0) {
+      if (this.psChatContent.directiveRef) {
+        this.psChatContent.directiveRef.update();
 
-      setTimeout(() => {
-        this.psChatContent.directiveRef.scrollToBottom(0, speed);
-      });
+        setTimeout(() => {
+          this.psChatContent.directiveRef.scrollToTop(
+            this.psChatContent.directiveRef.elementRef.nativeElement
+              .scrollHeight - this.eventMorePosition,
+            speed
+          );
+
+          this.scrollUpinit = false;
+        });
+      }
+    } else {
+      speed = speed || 0;
+      if (this.psChatContent.directiveRef) {
+        this.psChatContent.directiveRef.update();
+
+        setTimeout(() => {
+          this.psChatContent.directiveRef.scrollToBottom(0, speed);
+        });
+      }
     }
   }
 
@@ -360,7 +383,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
   }
   /** More Event */
   onMoreEvent(seq: number) {
-    if (this.eventRemain) {
+    if (this.scrollUpinit && this.eventRemain) {
       this.store.dispatch(
         EventStore.info({
           roomSeq: this.roomInfo.roomSeq,
@@ -368,6 +391,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
           requestCount: CONST.EVENT_INFO_READ_COUNT
         })
       );
+      this.scrollUpinit = false;
+      this.eventMorePosition = this.psChatContent.directiveRef.elementRef.nativeElement.scrollHeight;
     }
   }