로그인 페이지 배경 로테이션 적용.

projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.html

@@ -1,7 +1,15 @@
 <div class="login" fxLayout="column">
   <div class="login-wrapper">
     <div class="slider">
-      <div class="slider_slide  slider_slide-active" data-slide="1">
+      <div
+        *ngFor="let infomation of rotateInfomation"
+        [ngClass]="[
+          'slider_slide',
+          infomation.index === rotateInfomationIndex
+            ? 'slider_slide-active'
+            : ''
+        ]"
+      >
         <div class="slider_wrap slider_wrap-hacked">
           <div class="slider_back"></div>
         </div>
@@ -12,64 +20,15 @@
           </div>
           <div class="slider_content">
             <h1>
-              “ 고객의식탁에 건강한 먹거리와 행복한 미래를 제공합니다.”
+              {{ infomation.content }}
             </h1>
-            <p class="info">
+            <p class="info">{{ infomation.info }}</p>
-              늘 가족의 곁에서 가족의 건강만을 생각하는 마음으로 진한 사랑과
-              정성을 담으려 합니다. 전통적인 맛에 현대적인 감각과 전문성을 더해,
-              건강한 식생활 문화를 다양한 곳으로 전달합니다.
-            </p>
           </div>
-          <a class="slider_link go-to-next bg-accent-dark">Next</a>
+          <a
-        </div>
+            class="slider_link go-to-next bg-accent-dark"
-      </div>
+            (click)="onClickNextInfomation()"
-      <div class="slider_slide" data-slide="2">
+            >Next</a
-        <div class="slider_wrap slider_wrap-hacked">
+          >
-          <div class="slider_back"></div>
-        </div>
-        <div class="slider_inner">
-          <div class="slider_header">
-            <span class="company-name">DAESANG Messenger</span>
-            <span class="h-line"></span>
-          </div>
-          <div class="slider_content">
-            <h1>
-              세계시장에 깊고 온화한 한국의 맛을 전파합니다!
-            </h1>
-            <p class="info">
-              대상은 산업근대화 시기인 지난 70년대 초반, 국내 최초의 플랜트 수출
-              성공사례로 평가 받고 있는 인도네시아 진출을 계기로 해외시장 개척의
-              새로운 장을 열었습니다. 사람과 자연을 존중하는 대상의 기업정신에
-              한국 전통 문화와 정서를 담아 세계인의 마음에 깊고 단단한 뿌리를
-              내리고 있습니다.
-            </p>
-          </div>
-          <a class="slider_link go-to-next bg-accent-dark">Next</a>
-        </div>
-      </div>
-      <div class="slider_slide" data-slide="3">
-        <div class="slider_wrap slider_wrap-hacked">
-          <div class="slider_back"></div>
-        </div>
-        <div class="slider_inner">
-          <div class="slider_header">
-            <span class="company-name">DAESANG Messenger</span>
-            <span class="h-line"></span>
-          </div>
-          <div class="slider_content">
-            <h1>
-              “ 나눌수록 맛있는 행복을 전합니다 ”
-            </h1>
-            <p class="info">
-              다 함께 행복할 수 있는 세상을 만들기 위해 대상은 사회적 책임을
-              다합니다. 대상은 고객감동경영을 실천하고자 건강한 기업문화를
-              확립하여 이를 토대로 인재를 육성하고, 미래를 만들어갑니다. 뿐만
-              아니라 고객과 비전을 공유하여 함께 꿈을 꾸고, 다양한
-              사회공헌활동을 통해 사회의 건강과 행복을 위해 노력하며,나눌수록
-              맛있는 행복을 실천하고 있습니다
-            </p>
-          </div>
-          <a class="slider_link go-to-next bg-accent-dark">Next</a>
         </div>
       </div>
       <div class="slider_indicators">

projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss

@@ -206,7 +206,7 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
       }
     }
 
-    &:not(.slider_slide--active) .slider_wrap {
+    &:not(.slider_slide-active) .slider_wrap {
       @keyframes hack {
         0% {
           transform: translateX(0);

projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.ts

@@ -52,6 +52,29 @@ export class LoginPageComponent implements OnInit, OnDestroy {
   useRememberMe: boolean;
   useAutoLogin: boolean;
 
+  rotateInfomationIntervalObject: any;
+  rotateInfomationIndex = 0;
+  rotateInfomation = [
+    {
+      index: 0,
+      content: `“ 고객의식탁에 건강한 먹거리와 행복한 미래를 제공합니다.”`,
+      info: `늘 가족의 곁에서 가족의 건강만을 생각하는 마음으로 진한 사랑과 정성을 담으려 합니다. 전통적인 맛에 현대적인 감각과 전문성을 더해, 건강한 식생활 문화를 다양한 곳으로 전달합니다.`
+    },
+    {
+      index: 1,
+      content: `“ 세계시장에 깊고 온화한 한국의 맛을 전파합니다! ”`,
+      info: `대상은 산업근대화 시기인 지난 70년대 초반, 국내 최초의 플랜트 수출 성공사례로 평가 받고 있는 인도네시아 진출을 계기로 해외시장 개척의 새로운 장을 열었습니다.
+       사람과 자연을 존중하는 대상의 기업정신에 한국 전통 문화와 정서를 담아 세계인의 마음에 깊고 단단한 뿌리를 내리고 있습니다.`
+    },
+    {
+      index: 2,
+      content: `“ 나눌수록 맛있는 행복을 전합니다 ”`,
+      info: `다 함께 행복할 수 있는 세상을 만들기 위해 대상은 사회적 책임을 다합니다.
+       대상은 고객감동경영을 실천하고자 건강한 기업문화를 확립하여 이를 토대로 인재를 육성하고, 미래를 만들어갑니다.
+        뿐만 아니라 고객과 비전을 공유하여 함께 꿈을 꾸고, 다양한 사회공헌활동을 통해 사회의 건강과 행복을 위해 노력하며,나눌수록 맛있는 행복을 실천하고 있습니다`
+    }
+  ];
+
   constructor(
     private store: Store<any>,
     private router: Router,
@@ -66,9 +89,17 @@ export class LoginPageComponent implements OnInit, OnDestroy {
       KEY_APP_USER_INFO,
       environment.customConfig.appKey
     );
+
+    this.rotateInfomationIndex =
+      new Date().getTime() % this.rotateInfomation.length;
   }
 
   ngOnInit(): void {
+    this.rotateInfomationIntervalObject = setInterval(() => {
+      this.rotateInfomationIndex =
+        (this.rotateInfomationIndex + 1) % this.rotateInfomation.length;
+    }, 8000);
+
     this.defatulLoginBtnText = 'LOGIN';
     this.defatulWaitingTime = 5 * 60; // sec
 
@@ -210,6 +241,19 @@ export class LoginPageComponent implements OnInit, OnDestroy {
     });
   }
 
+  onClickNextInfomation() {
+    this.rotateInfomationIndex =
+      (this.rotateInfomationIndex + 1) % this.rotateInfomation.length;
+
+    if (!!this.rotateInfomationIntervalObject) {
+      clearInterval(this.rotateInfomationIntervalObject);
+      this.rotateInfomationIntervalObject = setInterval(() => {
+        this.rotateInfomationIndex =
+          (this.rotateInfomationIndex + 1) % this.rotateInfomation.length;
+      }, 8000);
+    }
+  }
+
   // onClickTemplate() {
   //   this.router.navigate(['/template']);
   // }