🤔상황

• 작가 신청 기능 정의

  • 일반 회원으로 회원가입한 후 작가로 신청할 수 있다.

  • 일반회원으로 회원가입한 정보 외에

    작가 대표 사진, 분야 정보, 이력, 자신에 대한 소개를 작성해 신청한다. 대표 사진은 사진 파일( jpg, jpeg,png)만 첨부 가능하다.

  • 전공분야는 회화, 조각, 공예, 디자인, 판화, 기타로 나뉜다.

  • 모든 항목은 필수 입력이다.

• 기획 당시 레이아웃 구성

  

🫢원인

• 사용자가 양식에 맞춰 줄글로 작성하니 작가 정보를 조회할 시 아래의 그림대로 데이터 구성하는 것이 불가능.

😊해결

• 테이블 분리

  • 작가 정보 테이블

• 작가 경력 테이블

• 이벤트 핸들러를 이용하여 새로운 요소를 동적으로 추가

     // 경력 추가하기----------------
  
         var btn = $('#addbtn');          //추가 버튼
         var addValue = $('#addValue');   //경력 입력창
         var result = $('#result');    // li 태그에 추가된 경력
  
         // 플러스 버튼 추가하면
         $('#addbtn').on('click', function () {
                if (addValue.val().length < 1) { /*''도 가능 */
                    Swal.fire({
                        icon: 'warning',
                        title: '내용을 입력해주세요.',
                        text: '',
                    });
                    return;
                }  // if end
  
                var list = $('<li></li>');
                var del = $('<button>x</button>');
  
                list.text(addValue.val());
                result.append(list); 
                list.append(del); 
  
                del.css({
                    fontSize: '15px',
                    border: 'none',
                    height: '15px',
                    float: 'right',
                    right: '17px',
                   /*  marginTop: '10px', */
                    cursor: 'pointer',
                    position: 'relative'
                });  // css end
  
                del.click(deleteList); // 삭제버튼 클릭시 리스트 지우기 이벤트 실행
  
                addValue.val(''); //  입력 창 초기화
                addValue.focus(); // 입력창에 포커스
  
            });
  
         //경력 삭제시
         function deleteList(e){ //삭제 버튼(x) 클릭시 
             let removeOne = e.target.parentElement;  //선택한 목록 한개만 지우기(부모 객체를 지운다)
             removeOne.remove();
         }
         // 경력 추가하기 end---------------
  

• 완성 화면

  • 작가 신청 시 이력 자율적 추가/삭제 가능

• 이력 탭에서 이력 데이터 조회 시 데이터 관리 및 구성이 편리해짐.