[#24] Feat: 관심사 에러 메세지 출력 기능 구현

- 관심사 태그 실행 속도 보장을 위해, validateInputForms 를 비동기콜백 딜레이 0 으로 구현.
- 관심사 입력창 포커스 구현: 메인 파일에 일관성을 떨어트리는 거 같아 별개 파일로 분리.
- 칩 생성 파일명 좀 더 포괄적으로 변경

FE/src/modules/constants.js

@@ -18,6 +18,7 @@ export const LIMITED_LENGTH = {
   year: 4,
   age_min: 15,
   age_max: 99,
+  interest: 3,
 };
 
 export const FORM_ID = {

FE/src/modules/fields.js

@@ -1,4 +1,5 @@
 import { PATTERN, FORM_ID, LIMITED_LENGTH, ERROR_MSG_ID, ERROR_MESSAGE, PASS_MESSAGE, PASS } from "./constants.js";
+import { getSizeofChip } from "./interestChip.js";
 import { _q, daysInMonth } from "./util.js";
 
 export const selectFields = {
@@ -162,6 +163,7 @@ export const inputFields = {
   interest: {
     inputElement: _q(FORM_ID.interest),
     selectErrorMessage() {
+      if (getSizeofChip() < LIMITED_LENGTH.interest) return this.errorMessage;
       return PASS;
     },
     errorMessageElement: _q(ERROR_MSG_ID.interest),

FE/src/modules/generateChip.js → FE/src/modules/interestChip.js

@@ -2,11 +2,11 @@ import { _q, _qa, pipe, addClass } from "./util.js";
 import { inputFields } from "./fields.js";
 import { KEY_CODE_BACKSPACE, KEY_CODE_COMMA, COMMA, CHIP_ELEMENT_CLASS_NAME, CHIP_ELEMENT_HTML } from "./constants.js";
 
-export const chips = new Set();
+const chips = new Set();
+export const getSizeofChip = () => chips.size;
 const getChip = () => chips;
 const addChip = str => chips.add(str);
 const deleteChip = str => chips.delete(str);
-const getSizeofChip = () => chips.size;
 const clearChip = () => chips.clear();
 const getLastChip = set => {
   let value;
@@ -19,12 +19,12 @@ const splitStringbyComma = str => str.split(COMMA);
 const arrayToString = arr => arr.reduce((acc, cur) => acc.concat(cur), "");
 const removeComma = pipe(splitStringbyComma, arrayToString);
 
-export const resetChips = () => {
+const resetChips = () => {
   const chipElement = _qa(`.${CHIP_ELEMENT_CLASS_NAME.div}`);
   if (chipElement) chipElement.forEach(eachChip => eachChip.remove());
 };
 
-export const renderChips = () => {
+const renderChips = () => {
   resetChips();
   const reverseChips = new Set([...chips].reverse());
   const interestElement = _q(`.${CHIP_ELEMENT_CLASS_NAME.wrap}`);
@@ -33,15 +33,15 @@ export const renderChips = () => {
   });
 };
 
-export const generateChip = event => {
+export const generateChips = event => {
   const interest = inputFields.interest.inputElement;
   if (event.target === interest) {
     if (event.keyCode === KEY_CODE_COMMA) {
       event.preventDefault();
       if (hasComma(interest.value)) {
         interest.value = removeComma(interest.value);
       }
-      addChip(interest.value);
+      if (interest.value !== "") addChip(interest.value);
       interest.value = "";
       renderChips();
     }

FE/src/modules/interestFocus.js

@@ -0,0 +1,9 @@
+import { _q, addClass, removeClass } from "./util.js";
+import { FORM_ID, CHIP_ELEMENT_CLASS_NAME } from "./constants.js";
+
+const interest = _q(FORM_ID.interest);
+
+export default () => {
+  interest.addEventListener("focus", () => addClass(_q(`.${CHIP_ELEMENT_CLASS_NAME.wrap}`), "focus"));
+  interest.addEventListener("blur", () => removeClass(_q(`.${CHIP_ELEMENT_CLASS_NAME.wrap}`), "focus"));
+};

FE/src/modules/main.js

@@ -1,16 +1,16 @@
-import { _q, addClass, removeClass } from "./util.js";
-import { FORM_ID, CHIP_ELEMENT_CLASS_NAME } from "./constants.js";
+import { _q } from "./util.js";
+import { FORM_ID } from "./constants.js";
 import { validateInputForms, validateSelectForms, validateDuplicateId, preventKeypressExceptNum } from "./validation.js";
-import { generateChip } from "./generateChip.js";
+import { generateChips } from "./interestChip.js";
 import userData from "./userData.js";
+import addCustomFocusEventToInerest from "./interestFocus.js";
 
 const signupForm = _q(FORM_ID.form);
-const interest = _q(FORM_ID.interest);
 const buttons = _q(FORM_ID.buttons);
 
 signupForm.addEventListener("keyup", event => {
-  validateInputForms(event);
-  generateChip(event);
+  generateChips(event);
+  setTimeout(() => validateInputForms(event), 0);
 });
 
 signupForm.addEventListener("change", event => {
@@ -20,8 +20,7 @@ signupForm.addEventListener("change", event => {
 
 signupForm.addEventListener("keypress", event => preventKeypressExceptNum(event));
 
-interest.addEventListener("focus", () => addClass(_q(`.${CHIP_ELEMENT_CLASS_NAME.wrap}`), "focus"));
-interest.addEventListener("blur", () => removeClass(_q(`.${CHIP_ELEMENT_CLASS_NAME.wrap}`), "focus"));
+addCustomFocusEventToInerest();
 
 buttons.addEventListener("click", event => {
   event.preventDefault();