KDT0_JungHyoJu 고객 정보 관리 시스템 #44
Conversation
👷 Deploy Preview for harmonious-cat-234230 processing.
|
❌ Deploy Preview for harmonious-cat-234230 failed.
|
✅ Deploy Preview for vocal-kringle-d5128d ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
기능별로 js 파일을 나누어 주셔서 어떤파일이 어떤 역할을 하는지 확인하기 좋았던것같습니다! |
| // localStorage에서 해당 클라이언트 정보를 가져옵니다. | ||
| const storageData = JSON.parse( | ||
| localStorage.getItem(`user-info${parseInt(clientIndex) + 1}`) | ||
| ); |
There was a problem hiding this comment.
로컬스토리지 사용해보신 부분 좋은 거 같습니다! 기능별 파일 나눈 거도 좋은 거 같아요!
현재 사진 삭제는 가능한데 프로필 삭제는 불가능하니 해당 기능 + 체크박스 및 전체 체크박스 컨트롤 기능 넣어보시면 좋을 거 같아요! 그리고 등록하기 클릭시 애니메이션이나 이벤트 추가해봐도 좋을 거 같습니다! 고생하셨습니다 💪💪
| // 사진 업로드 클릭시 미리보기 구현 코드 | ||
| const inputImage = document.getElementById("chooseFile"); | ||
| inputImage.addEventListener("change", (e) => { | ||
| readURL(e.target); // chooseFile 의 e를 readURL로 전달 | ||
| }); | ||
|
|
| function init() { | ||
| const userListItem = document.querySelector(".user-list-item"); | ||
|
|
||
| for (var i = 1; i <= storedKeys.length; i++) { |
There was a problem hiding this comment.
var 키워드보다 const 키워드가 더 좋을 것 같습니다 👍
for (const i = 1; i <= storedKeys.length; i++)
| const userUrlElement = document.getElementById("user-url"); | ||
| const userMnameElement = document.getElementById("user-m_name"); | ||
| const userWnameElement = document.getElementById("user-w_name"); | ||
| const userDataElement = document.getElementById("user-data"); | ||
| const userPlaceElement = document.getElementById("user-place"); | ||
| const userNumberElement = document.getElementById("user-number"); | ||
| const userRegionElement = document.getElementById("user-region"); |
There was a problem hiding this comment.
const elementsId = [
"user-url",
"user-m_name",
"user-w_name",
"user-data",
"user-place",
"user-number",
"user-region",
];
const elements = elementsId.map(id => document.getElementById(id));
위와 같이 일일이 가져오지 않고 elements에 요소들을 넣어 배열화하는 방법도 있으니 참고하면 좋을 것 같습니다. 그리고 다음과 같이 배열화한 것은 some메서드로 요소의 값이 있는지 확인 후 인덱싱을 사용해서 요소의 값을 넣으면 더 편할 것 같아요 👍
elements[0].innerHTML = 값
There was a problem hiding this comment.
와 몰랐던 방법이네요 ! 욱진님 말씀대로 하면 훨씬 편하고 코드 가독성이 좋아질거 같아용 항상 리뷰하실 때 참고할 만한 사이트나, 해결 방법을 직접 명시해주셔서 너무 도움되고 감사합니다 👍🙂
| const hypenTel = (target) => { | ||
| target.value = target.value | ||
| .replace(/[^0-9]/g, "") | ||
| .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`); | ||
| }; |
There was a problem hiding this comment.
이러한 디테일 한 부분까지 신경쓰시다니.. 👍 저도 리팩토링시 참고하겠습니다.
There was a problem hiding this comment.
고객 정보 <- 만 새로운 창으로 띄우게 한 건 의도하신 걸까요? 뭔가 페이지가 두개로 나뉘어서
헤더도 각각에 만들어두신 것 같은데요,
지금 배우고 계신 리액트로는 헤더를 공통 컴포넌트로 만들어서 여러 페이지에서 보이게끔 재사용할 수 있어요.
그리고 예약하기 위해 정보를 등록할 때, alert 등으로 등록이 된 걸 알려주고 등록이 되었으면 -> 리스트 로 가도록 처리해보면 어떨까요? 이런 것들이 쌓여서 좋은 UX를 만드는 것 같습니다.
반응형에 맞게 네비게이션 바를 토글로 바꾼 것도 좋네요!
리액트를 통해서 더 자유롭게 구현해보실 수 있을 거예요.
수고하셨습니다~!
| if ( | ||
| userUrlElement && | ||
| userMnameElement && | ||
| userWnameElement && | ||
| userDataElement && | ||
| userPlaceElement && | ||
| userNumberElement && | ||
| userRegionElement && | ||
| storageData | ||
| ) { | ||
| userUrlElement.innerHTML = `<img class="dataImg" src="${storageData.url}">`; | ||
| userMnameElement.textContent = storageData.m_name; | ||
| userWnameElement.textContent = storageData.w_name; | ||
| userDataElement.textContent = storageData.data; | ||
| userPlaceElement.textContent = storageData.place; | ||
| userNumberElement.textContent = storageData.number; | ||
| userRegionElement.textContent = storageData.region; | ||
| } else { | ||
| console.log("값이 없음 !!!!!!"); | ||
| } | ||
| }); |
There was a problem hiding this comment.
욱진님이 좋은 팁 공유해주셨네요!
if (
userUrlElement &&
userMnameElement &&
userWnameElement &&
userDataElement &&
userPlaceElement &&
userNumberElement &&
userRegionElement &&
storageData
) {이렇게 조건을 위한 값을 만드려고 할 때 별거 아닌 것 같아도 꽤 복잡한 로직이 되더라고요.
앞으로 리액트할 때도 lodash 라이브러리 << 많이 사용해보면 좋을 거예요!
|
|
||
| document.querySelector(".remove-image").addEventListener("click", remove); | ||
|
|
||
| function remove() { |
There was a problem hiding this comment.
함수명도 다양하게 지어볼 수 있긴 한데요,
handle{동작} 이런 컨벤션이 가장 보편적이긴 합니다. 협업에 있어 컨벤션은 중요하니 관심 갖고 있으시면 좋을 것 같아요!
| const image = document.querySelector(".image"); | ||
|
|
||
| //DropFile | ||
| function DropFile(dropAreaId) { |
There was a problem hiding this comment.
드래그&드롭 으로 파일업로드할 수 있게 신경쓰셨군요. 👍🏼
💗 예약 관리 시스템
📌프로젝트 개요
📂 사이트 주소
🔗 배포 링크 : https://cupid-32b7f.web.app/
💿 필수 요구사항
📀 추가 구현사항
💻 화면 구성
🔎 주요 기능
🔔 사용자 등록(예약) 페이지 - 사진 등록, 수정
🔔 사용자 등록(예약) 페이지 - 사진 firebase 업로드
🔔 사용자 등록(예약) 페이지 - 사용자 정보 LocalStorage 업로드
🔔 고객 정보 관리 페이지 - 스크롤이 가능한 형태의 리스팅 페이지
🔔 고객 정보 관리 페이지 - 애니메이션 구현
🔔 고객 프로필 페이지 - 사진 삭제
🔔 전체 페이지 데스크탑-모바일 반응형 페이지
🌿 유저 플로우