IMask bezier change and back button wrapper create

fecapark · Jun 7, 2022 · 1784408 · 1784408
1 parent ab2735c
commit 1784408
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 43 deletions.
diff --git a/src/components/Cards/HeadInfoCard/BackMask.ani.ts b/src/components/Cards/HeadInfoCard/BackMask.ani.ts
@@ -12,40 +12,32 @@ function iMaskTriggerAnimation(
   let maskTargetSize: number;
 
   return [
-    [
-      {
-        target: iMask,
-        styles: [
-          {
-            prop: "width",
-            fvalue: "%xpx",
-            from: () => [0],
-            to: () => [maskTargetSize],
-          },
-        ],
-        duration: 0.5,
-        bezier: "material-normal",
-        onStart: () => {
-          maskTargetSize = Math.sqrt(
+    {
+      target: iMask,
+      styles: [
+        {
+          prop: "width",
+          fvalue: "%xpx",
+          from: () => [0],
+          to: () => [maskTargetSize],
+        },
+        {
+          prop: "height",
+          fvalue: "%xpx",
+          from: () => [0],
+          to: () => [maskTargetSize],
+        },
+      ],
+      duration: 0.9,
+      bezier: [0.22, 0.68, 0, 1],
+      onStart: () => {
+        maskTargetSize =
+          Math.sqrt(
             Math.pow(headCard.getBoundingClientRect().width * 2, 2) +
               Math.pow(headCard.getBoundingClientRect().height * 2, 2)
-          );
-        },
+          ) * 1.01;
       },
-      {
-        target: iMask,
-        styles: [
-          {
-            prop: "height",
-            fvalue: "%xpx",
-            from: () => [0],
-            to: () => [maskTargetSize],
-          },
-        ],
-        duration: 0.5,
-        bezier: "material-normal",
-      },
-    ],
+    },
   ];
 }
 
@@ -77,7 +69,7 @@ function headCardHeightNormalizeAnimation(
           to: () => getShadowValue(0),
         },
       ],
-      duration: 0.5,
+      duration: 0.4,
       bezier: "material-accel",
     },
   ];

diff --git a/src/components/Cards/HeadInfoCard/HeadInfoCard.scss b/src/components/Cards/HeadInfoCard/HeadInfoCard.scss
@@ -3,11 +3,12 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    flex-wrap: wrap;
 
     font-size: 12px;
     color: black;
     background-color: white;
-    padding: 15px;
+    // padding: 15px;
 
     .i-mask {
       position: absolute;
@@ -24,13 +25,21 @@
       z-index: 10000;
     }
 
-    i {
-      cursor: pointer;
-      font-size: 14px;
-      color: $secondary-text-color;
-      align-self: flex-start;
+    .back-button-wrapper {
+      width: 30px;
+      height: 30px;
 
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      align-self: flex-start;
       opacity: 0;
+
+      i {
+        cursor: pointer;
+        font-size: 14px;
+        color: $secondary-text-color;
+      }
     }
 
     .info-name-container {

diff --git a/src/components/Cards/HeadInfoCard/HeadInfoCard.ts b/src/components/Cards/HeadInfoCard/HeadInfoCard.ts
@@ -40,7 +40,9 @@ export default class HeadInfoCard extends Component {
         <div class="sub-mask">
           <div class="result-profile-container">
             <div class="i-mask"></div>
-            <i class="fa-solid fa-chevron-left"></i>
+            <div class="back-button-wrapper">
+              <i class="fa-solid fa-chevron-left"></i>
+            </div>
             <div class="info-name-container">
               <span class="info-name">환영합니다, ${
                 this.resultProfileData.name
@@ -69,8 +71,10 @@ export default class HeadInfoCard extends Component {
           .map((aTagBlock) => aTagBlock.container)
       );
 
-      const backButton = this.qs(".fa-chevron-left")! as HTMLElement;
-      backButton.addEventListener("pointerdown", () => {
+      const backButton = this.qs(".back-button-wrapper")! as HTMLElement;
+      backButton.addEventListener("pointerdown", (e: PointerEvent) => {
+        e.stopPropagation();
+
         requestAnimationFrame(() => {
           backMaskAnimation(
             this.container,

diff --git a/src/components/Cards/HeadInfoCard/ResultProfileTrigger.ani.ts b/src/components/Cards/HeadInfoCard/ResultProfileTrigger.ani.ts
@@ -112,8 +112,9 @@ function resultProfileAppearMixin(
   const resultProfileContainer: HTMLDivElement = subMask.querySelector(
     ".result-profile-container"
   )!;
-  const backButton: HTMLElement =
-    resultProfileContainer.querySelector(".fa-chevron-left")!;
+  const backButton: HTMLElement = resultProfileContainer.querySelector(
+    ".back-button-wrapper"
+  )!;
   const infoName: HTMLElement =
     resultProfileContainer.querySelector(".info-name")!;
   const infoRemember: HTMLElement =