KDT0_CyinHaYeon / 사진/데이터 관리 서비스#56
Conversation
|
진짜 회사에서 쓰일법한 직원관리서비스를 만드신것 같습니다.. 예전에 저도 이런 구조를 가진 웹사이트를 만든적이 있었는데 이런사이트들은 반응형이 어려운것같습니다. |
|
회원가입 기능 + 중복 이메일체크 + 이메일 인증 + 페이지네이션 기능까지.. |
|
하연님 프로젝트 결과물은 늘 볼 때마다 감탄하게 되네요....... |
|
처음 로그인과 회원가입 창부터 엄청나다는걸 느꼈어요... 그냥 정말 항상 보던 그런페이지에요..! 회원가입 할 때 비밀번호 확인과 6자리 이상도 놀랍고 이메일.. 인증... 허.ㄱ..헉... 새소식 부분도 너무 신기해요..대시보드와 정렬, 검색 기능...도 페이지가 너무 깔끔하고 푸터 부분 깨알 디테일까지.. 많은 걸 배워가고 감명받았습니다... |
marshallku
left a comment
marshallku
left a comment
There was a problem hiding this comment.
고생하셨습니다!
전반적으로 완성도가 높네요.
코딩 패턴만 조금 다듬고, 반응형으로 수정하면 정말 좋을 것 같습니다!
| searchInput.addEventListener('keydown', (e) => { | ||
| if (e.key === 'Enter') { | ||
| searchFunc(); | ||
| } | ||
| }); |
There was a problem hiding this comment.
<form>을 사용하고 submit 이벤트를 써봐도 좋을 것 같습니다.
| button.addEventListener('click', (e) => { | ||
| prevGroupButton.removeEventListener('click', prevGroupButtonClickHandler); | ||
| nextGroupButton.removeEventListener('click', nextGroupButtonClickHandler); | ||
| nowPageValue = Number(e.target.textContent); |
|
|
||
| function prevGroupButtonClickHandler() { | ||
| prevGroupButton.removeEventListener('click', prevGroupButtonClickHandler); | ||
| prevGroupButton.removeAttribute('disabled'); |
There was a problem hiding this comment.
prevGroupButton.disabled = false로 작성하면 좀 더 명시적이지 않을까요?
| // 이미지 업로드 시 미리보기 | ||
| function photoChange(e) { | ||
| const reader = new FileReader(); | ||
| reader.onload = ({ target }) => { | ||
| addPreview(target.result); | ||
| }; | ||
| reader.readAsDataURL(e.target.files[0]); | ||
| } |
There was a problem hiding this comment.
URL.createObjectURL()로도 이미지를 생성할 수 있습니다!
URL.revokeObjectURL()를 통해 제거하는 것만 염두에 두고 작업하시면 좋습니다!
| function inputCheck(name, email, phone, grade) { | ||
| const user = [name, email, phone, grade]; | ||
| let checkResult; | ||
| for (let i = 0; i < user.length; i++) { | ||
| if (!user[i].value) { | ||
| checkResult = false; | ||
| break; | ||
| } | ||
| checkResult = true; | ||
| } | ||
| return new Promise(function (resolve, reject) { | ||
| if (checkResult) resolve(); | ||
| else reject('입력되지 않은 정보가 있습니다'); | ||
| }); | ||
| } |
There was a problem hiding this comment.
각 필드에 대한 validation이 조금 더 구체적으로 진행되면 좋을 것 같습니다(휴대폰, 이메일 패턴 확인 등).
추가로, 입력되지 않은 정보가 있을 때 해당 input으로 스크롤을 이동시켜주면 어떨까요?
6 participants
직원들의 데이터를 저장할 수 있는 관리 서비스
2023-08-08 ~ 2023-08-18
[배포 링크]
https://cms-solution-86408.web.app/employee_list.html
[페이지 소개]
로그인 페이지
회원가입 페이지
대쉬보드 페이지
임직원 리스트 페이지
임직원 등록/수정 페이지
그외 사항
[유저 플로우]