TagInput End, Issue: Vite reload. not fixed

fecapark · Jun 4, 2022 · eeb84f3 · eeb84f3
1 parent 1c682c6
commit eeb84f3
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 48 deletions.
diff --git a/jest.config.json b/jest.config.json
@@ -5,7 +5,8 @@
   },
   "testEnvironment": "jsdom",
   "moduleNameMapper": {
-    "^@/(.*)$": "<rootDir>/$1"
+    "^@/(.*)$": "<rootDir>/$1",
+    "\\.(css|less|scss)$": "<rootDir>/src/mock-dummy.ts"
   },
   "testMatch": [
     "<rootDir>/**/*.test.(js|jsx|ts|tsx)",

diff --git a/src/components/Cards/InfoCard.ani.ts b/src/components/Cards/InfoCard.ani.ts
@@ -160,23 +160,22 @@ function switchToFlexStyles(
   nameCard: HTMLElement,
   tagCard: HTMLElement
 ) {
-  return () => {
-    // Set card container flex-box
-    cardContainer.style.display = "flex";
-    cardContainer.style.flexDirection = "column-reverse";
-    cardContainer.style.justifyContent = "center";
+  // Set card container flex-box
+  cardContainer.style.display = "flex";
+  cardContainer.style.flexDirection = "column-reverse";
+  cardContainer.style.justifyContent = "center";
 
-    // All card position to 'static' (default)
-    headCard.style.position = "static";
-    headCard.style.transform = "translate3d(0, 0, 0)";
+  // All card position to 'static' (default)
+  headCard.style.position = "static";
+  headCard.style.transform = "translate3d(0, 0, 0)";
 
-    nameCard.style.position = "static";
-    nameCard.style.transform = "translate3d(0, 0, 0)";
-    nameCard.style.margin = "20px 0";
+  nameCard.style.position = "static";
+  nameCard.style.transform = "translate3d(0, 0, 0)";
+  nameCard.style.margin = "20px 0";
 
-    tagCard.style.position = "static";
-    tagCard.style.transform = "translate3d(0, 0, 0)";
-  };
+  tagCard.style.position = "static";
+  tagCard.style.transform = "translate3d(0, 0, 0)";
+  tagCard.style.height = "auto";
 }
 
 export function executeAnimation(

diff --git a/src/components/Cards/InfoCard/InfoCard.scss b/src/components/Cards/InfoCard/InfoCard.scss
@@ -7,7 +7,7 @@
   width: 100%;
   height: 135px;
   min-height: 135px;
-  padding: 25px;
+  padding: 20px 25px;
   background-color: white;
 
   display: flex;

diff --git a/src/components/Cards/InfoCard/InfoCard.test.ts b/src/components/Cards/InfoCard/InfoCard.test.ts
diff --git a/src/components/Inputs/TagInput/TagInput.scss b/src/components/Inputs/TagInput/TagInput.scss
@@ -15,32 +15,61 @@
     padding-right: 5px;
     padding-top: 8px;
     padding-bottom: 3px;
+
+    .tag-input-wrapper {
+      width: auto;
+      height: 22px;
+
+      flex: 1 1 50px;
+      display: flex;
+      justify-content: left;
+      align-items: center;
+      margin-bottom: 7px;
+
+      .tag-input {
+        border: 0;
+        width: 100%;
+        height: 100%;
+        background-color: inherit;
+        color: black;
+        padding-right: 5px;
+
+        &:-ms-input-placeholder,
+        &:-moz-placeholder,
+        &::-webkit-input-placeholder,
+        &::-moz-placeholder {
+          font-size: 13px;
+        }
+      }
+    }
   }
 
-  .tag-input-wrapper {
-    width: auto;
-    height: 22px;
+  .warn-container {
+    height: 20px;
+    margin-top: 8px;
+    opacity: 1;
 
-    flex: 1 1 60px;
     display: flex;
-    justify-content: left;
     align-items: center;
-    margin-bottom: 7px;
-
-    .tag-input {
-      border: 0;
-      width: 100%;
-      height: 100%;
-      background-color: inherit;
-      color: black;
-      padding-right: 5px;
-
-      &:-ms-input-placeholder,
-      &:-moz-placeholder,
-      &::-webkit-input-placeholder,
-      &::-moz-placeholder {
-        font-size: 13px;
-      }
+
+    color: $dark-primary-color;
+    transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+
+    i {
+      margin-right: 5px;
+      font-size: 13px;
+    }
+
+    .warn-text {
+      font-size: 11px;
+      letter-spacing: 0.3px;
+      font-weight: 500;
+    }
+
+    &.hidden {
+      height: 0;
+      margin-top: 0;
+      opacity: 0;
     }
   }
 }
diff --git a/src/components/Inputs/TagInput/TagInput.test.ts b/src/components/Inputs/TagInput/TagInput.test.ts
diff --git a/src/components/Inputs/TagInput/TagInput.ts b/src/components/Inputs/TagInput/TagInput.ts
@@ -12,9 +12,11 @@ export default class TagInput extends Component {
   private readonly onFocus: () => void;
   private readonly onFocusout: () => void;
   private readonly MAX_TEXT_LENGTH: number = 10;
+  private readonly MAX_TAG_AMOUNT: number = 5;
 
   private inputElement: HTMLInputElement | null = null;
   private isPressingBackspace: boolean = false;
+  private removeFromMaxAmount: boolean = false;
 
   constructor({
     onFocus = () => {},
@@ -51,10 +53,16 @@ export default class TagInput extends Component {
 
   private submitTag(e: Event) {
     e.preventDefault();
+    const tags: Array<TagBlock> = this.store.getState("tags");
 
     if (!this.inputElement) return;
     if (this.inputElement.value === "") return;
     if (!this.isValidTextLength(this.inputElement.value)) return;
+    if (tags.length >= this.MAX_TAG_AMOUNT) {
+      const warn = this.qs(".warn-container")!;
+      warn.classList.remove("hidden");
+      return;
+    }
 
     this.store.dispatch("addTag", {
       newTag: new TagBlock(this.inputElement.value),
@@ -109,14 +117,23 @@ export default class TagInput extends Component {
   }
 
   private handleRemoveingTagByKey(e: KeyboardEvent) {
-    e.stopPropagation();
-    if (e.key !== "Backspace") return;
-    if (this.inputElement!.value !== "") return;
-    if (this.isPressingBackspace) return;
+    const isRemoveFromMaxAmount = (): boolean => {
+      const warn: HTMLElement = this.qs(".warn-container")!;
+      return (
+        tags.length >= this.MAX_TAG_AMOUNT && !warn.classList.contains("hidden")
+      );
+    };
 
+    e.stopPropagation();
     const tags: Array<TagBlock> = this.store.getState("tags");
     const latestTag: TagBlock = tags[tags.length - 1];
 
+    if (e.key !== "Backspace") return;
+    if (tags.length === 0) return;
+    if (this.isPressingBackspace) return;
+    if (this.inputElement!.value !== "") return;
+
+    this.removeFromMaxAmount = isRemoveFromMaxAmount();
     this.store.dispatch("removeTag", {
       removeId: latestTag.id,
     });
@@ -155,8 +172,19 @@ export default class TagInput extends Component {
   render() {
     this.container.innerHTML = `
       <div class="tag-inline-container"></div>
+      <div class="warn-container ${this.removeFromMaxAmount ? "" : "hidden"}">
+        <i class='fa-solid fa-circle-exclamation'></i>
+        <span class='warn-text'>우선 5개까지만 기억해볼게요.</span>
+      </div>
     `;
 
+    if (this.removeFromMaxAmount) {
+      requestAnimationFrame(() => {
+        this.qs(".warn-container")!.classList.add("hidden");
+        this.removeFromMaxAmount = false;
+      });
+    }
+
     const tags: Array<TagBlock> = this.store.getState("tags");
     this.appendElementsTo(
       ".tag-inline-container",

diff --git a/src/components/MainContainer/MainContainer.test.ts b/src/components/MainContainer/MainContainer.test.ts
diff --git a/src/components/Tag/TagBlock/TagBlock.test.ts b/src/components/Tag/TagBlock/TagBlock.test.ts
diff --git a/...s/Cards/HeadInfoCard/HeadInfoCard.test.ts → src/jest-mock-module.ts b/...s/Cards/HeadInfoCard/HeadInfoCard.test.ts → src/jest-mock-module.ts
diff --git a/vite.config.ts b/vite.config.ts
@@ -21,6 +21,11 @@ export default defineConfig(({ command, mode }) => {
       server: {
         port: parseInt(process.env.VITE_CODE_SERVER_DEV_PORT),
         strictPort: true, // Prevent auto polling for restart
+        hmr: {
+          host: "ws",
+          port: 3000,
+          clientPort: 3000,
+        },
       },
       css: SCSS_OPTIONS(),
     };