KDT0_JangYeongMin 직원 관리 서비스 #65
Conversation
|
전체적으로 기능 구현을 잘 하셨네요!!👍😊 |
|
@HOOOO98 감사합니다! 저는 UI 게속 보니까 조금 아쉬운 것 같기도 하네요 ㅎㅎ,, |
|
확실히 UI랑 동작하는 게 깔끔하네요! 대단하십니다! |
|
UI 동작하는게 매우 부드럽고 깔끔합니다!! |
|
영민님 사이트의 디자인은 봐도 봐도 멋지네요. 그저 정적인 상태일 때 뿐만아니라 기능들이 동작할 때 보여지는 UI들도 너무 이뻐서 마치 디자이너를 따로 두신줄 알았어요. |
|
기대하고 있었는데 UI 깔끔하고 멋있어요~! 검색, 체크박스등 여러 기능들도 잘 구현하셨네요! 잘 보고 갑니다~! 👍👍 |
|
|
||
|
|
||
| // "mypage" 버튼 클릭 시 이벤트 리스너 | ||
| mypageButton.addEventListener("click", () => { |
There was a problem hiding this comment.
이벤트 리스너에 함수가 조금 복잡한거 같습니다 이럴때는 함수를 분리하는부분을 한번 고민해주시면 좋습니다~
예를들어 모달닫기, 모달 열기는 별도의 함수로 분리할수있을꺼같습니다~
|
|
||
| const mypageRegisterButton = document.getElementById("mypage_register"); | ||
| // "mypage_register" 버튼 클릭 시 이벤트 리스너 | ||
| mypageRegisterButton.addEventListener("click", () => { |
There was a problem hiding this comment.
mypageButton 버튼을 클릭할떄마다 mypageRegisterButton 에 이벤트 리스너가 추가될고있습니다
이러면 새로운 이벤트 리스너가 계속 추가되는구조라서 메모리 누수가 발생할수도있습니다 따라서 이벤트 리스너를 분리해주시거나
removeEventListener 를 한번 호출해주시는게 좋습니다
| registerModal.classList.remove("show"); | ||
| body.classList.remove("modal-open"); |
There was a problem hiding this comment.
모달 관련된 코드가 중복되어보입니다 이러한 중복된 코드들은 별도의 함수를 만드시는것을 추천드립니다~
| const itemWrap = document.createElement("button"); | ||
| itemWrap.classList.add("item_wrap"); | ||
| itemWrap.id = "item_wrap_button"; | ||
|
|
||
| // 이미지를 감싸는 div 생성 | ||
| const itemImg = document.createElement("div"); | ||
| itemImg.classList.add("item_img"); | ||
|
|
||
| // 이미지 요소 생성 | ||
| const profileImage = document.createElement("img"); | ||
| profileImage.src = imgURL; | ||
| profileImage.alt = "프로필 이미지"; | ||
| itemImg.appendChild(profileImage); |
There was a problem hiding this comment.
특정 엘리먼트를 만드는 로직이 중복되어보입니다 이러한 요소들을 한번에 처리하는 함수를 아래처럼 만들수있을꺼같습니다~
function createElement(tag, classNames = [], attributes = {}) {
const elem = document.createElement(tag);
classNames.forEach(className => elem.classList.add(className));
for (let attr in attributes) {
elem[attr] = attributes[attr];
}
return elem;
}
| spans.forEach((span) => { | ||
| const text = span.textContent.toLowerCase(); | ||
| if (text.includes(searchTerm)) { | ||
| shouldShow = true; // 검색어가 포함된 span이 있으면 표시할 플래그를 true로 설정 | ||
| } | ||
| }); | ||
|
|
||
| // 아이템을 표시하거나 숨김 처리 | ||
| if (shouldShow) { | ||
| item.style.display = "flex"; // 표시 | ||
| } else { | ||
| item.style.display = "none"; // 숨김 | ||
| } |
There was a problem hiding this comment.
shouldShow 변수를 설정할때 some() 메소드를 사용해주시면 더 좋습니다, some 을 사용하면 아래와 같은 코드를 작성할수있습니다~
const shouldShow = Array.from(spans).some((span) => {
return span.textContent.toLowerCase().includes(searchTerm);
});
// 아이템을 표시하거나 숨김 처리
item.style.display = shouldShow ? "flex" : "none";
| var name = document.getElementById("name_ID").value; | ||
| var email = document.getElementById("email_ID").value; | ||
| var phone = document.getElementById("phone_ID").value; | ||
| var rank = document.getElementById("rank_ID").value; | ||
|
|
||
| // 이미지 파일 선택 | ||
| var fileInput = document.getElementById("file_input"); | ||
| var imageFile = fileInput.files[0]; | ||
|
|
||
| // Firebase Storage 참조 | ||
| var storageRef = firebase.storage().ref(); | ||
| var imageRef = storageRef.child("images/" + imageFile.name); |
There was a problem hiding this comment.
es6 이후부터는 var 보다는 let,cosnt 를 사용하시는것을 추천드립니다~
🏢 직원 관리 서비스 🏢
🔗 프로젝트 URL
📌 필수 구현 사항
📌 선택 구현 사항
🗓️ 개발 기간
2023.08.08 ~ 2023.08.18
🔨 사용 기술 스택
🎨 Design UI
UI URL : Adobe XD
✏️ userflow
📝 아쉬운점 & 느낀점
⌨️ 추후 구현사항