Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

KDT0_CyinHaYeon / 사진/데이터 관리 서비스 #56

Open
wants to merge 35 commits into
base: main
Choose a base branch
from

Conversation

Sinary00
Copy link

@Sinary00 Sinary00 commented Aug 18, 2023

직원들의 데이터를 저장할 수 있는 관리 서비스
2023-08-08 ~ 2023-08-18

[배포 링크]

https://cms-solution-86408.web.app/employee_list.html

[페이지 소개]

  • 로그인 페이지
  • 회원가입 페이지
  • 대쉬보드 페이지
  • 임직원 리스트 페이지
  • 임직원 등록/수정 페이지
  • 로그인 페이지

    • 등록 된 관리자 계정으로 로그인할 수 있습니다.
    • 로그인한 유저 정보를 로컬스토리지로 저장합니다. 추후 매 페이지 이동 시 마다 로컬스토리지의 유저 정보를 비교하여 올바른 로그인인지 체크합니다.
    • 로그인 성공 시 대쉬보드 페이지에서 뿌려주는 새소식 데이터를 로컬스토리지로 저장합니다.
    • setTimeout으로 새소식 데이터를 로컬스토리지에 저장하기 전 페이지 이동을 제한하였습니다. 적용된 시간(1초)간 로딩 화면이 표시됩니다.
    • 로그인 시 발생하는 오류(비밀번호 틀림, 아이디 조회 불가, 입력 안함)는 alert창으로 표시하였습니다.
    • 회원가입 버튼으로 관리자 계정을 등록할 수 있는 회원가입 페이지로 이동합니다.
  • 회원가입 페이지

    • 인적사항을 기입하고 회원가입 버튼으로 관리자 계정을 생성합니다.
    • 회원가입 완료 후 로그인페이지로 이동합니다.
    • 회원가입 시 발생하는 오류는 alert창으로 표시하였습니다.
  • 대쉬보드 페이지

    • 관리자 계정의 프로필 정보를 표시합니다.
    • 로그아웃과 이메일 인증기능을 추가하였습니다.
    • 프로필을 불러오는 동안 로딩 화면이 표시됩니다.
    • 새소식을 저장한 로컬스토리지에서 불러옵니다. 또한 로그인한 동안의 임직원 관리(등록/수정/삭제) 시 추가로 새소식을 로컬스토리지에 저장하고 불러옵니다.
    • 새소식은 무한스크롤 기능이 적용되었습니다.
    • 로그아웃 시 저장한 로컬스토리지의 모든 정보를 삭제합니다.
  • 임직원 리스트 페이지

    • firebase storage, firestore의 저장 데이터를 불러옵니다. 데이터를 불러오는 동안 로딩 화면이 표시됩니다.
    • 검색기능, 정렬기능, 페이지네이션 기능을 추가하였습니다. (각 기능은 연결되어있으며, 모든 기능을 동시에 사용해도 오류가 없습니다.)
    • 임직원 이름의 링크를 클릭하여 임직원 수정을 할 수 있습니다.
    • 임직원 등록 및 삭제를 추가하였습니다.
    • 최상단 체크박스 클릭 시 한 페이지의 전체 체크박스가 선택되는 전체선택 기능을 추가하였습니다.
    • 페이지네이션 버튼의 양옆 previous / next 버튼은 총 페이지가 6개 이상일 시 클릭 가능한 버튼만 활성화 됩니다. (페이지 그룹 이동 기능)
  • 임직원 등록/수정 페이지

    • 한 페이지로 등록 / 수정이 둘 다 가능하게 설계하였습니다. get방식으로 url에 파라미터 추가 후 파라미터가 있으면 수정, 없으면 등록 기능이 동작합니다.
    • 수정 페이지일 때 데이터를 불러오는 동안 로딩 화면이 표시됩니다.
    • 프로필 이미지 첨부 시 미리보기 기능을 추가하였습니다. (수정페이지에서는 저장된 이미지의 url으로 사진을 불러옵니다.)
    • 미리보기 이미지 클릭 시 미리보기 영역이 없어지며, 파일 재첨부가 가능합니다.
    • 수정 페이지에서 미리보기 이미지 삭제 후 수정버튼을 클릭하면 저장된 storage와 이미지 url을 삭제합니다.
  • 그외 사항

    • 상단 헤더(드랍다운) : 유저 정보를 가져와 헤더에 유저의 이름을 보여줍니다.
    • 상단 헤더(새소식 알림) : 로그인 중 임직원 관리 데이터에 변경사항(등록/수정/삭제)가 있을 시 변경사항의 숫자를 표시해줍니다.

[유저 플로우]

유저 플로우

@KittelLee
Copy link

진짜 회사에서 쓰일법한 직원관리서비스를 만드신것 같습니다..
이메일인증부터 회원가입 관리서비스 추가 수정 삭제까지 모두 잘 동작합니다.

예전에 저도 이런 구조를 가진 웹사이트를 만든적이 있었는데 이런사이트들은 반응형이 어려운것같습니다.
어쩔수없는점만 제외하면 진짜 완벽한웹사이트인것같습니다
고생하셨습니다!

@junkue20
Copy link

회원가입 기능 + 중복 이메일체크 + 이메일 인증 + 페이지네이션 기능까지..
페이지 외적인 부분뿐만 아니라 기능까지도 섬세하게 고려한 부분에 깊은 감동을 받았습니다..
제가 본 다른 결과물들 중에서 과제의 제출여부를 떠나 실제로 사용 가능한 수준의 몇 안되는 페이지인것 같네요.
고생 많으셨습니다!!

@mysdpy30s
Copy link

하연님 프로젝트 결과물은 늘 볼 때마다 감탄하게 되네요.......
위에 준규님이 말씀하신 '실제로 사용 가능한 수준의 몇 안되는 페이지인 것 같다'는 점에 저도 300% 동의합니다!ㅋㅋ
Readme에 적어두신 포인트들이나 실제 사이트에 구현된 기능들만 봐도 얼마나 섬세하게 작업하셨는지가 느껴져요 :) 고생 많으셨습니다 하연님~!

@seacrab808
Copy link
Member

처음 로그인과 회원가입 창부터 엄청나다는걸 느꼈어요... 그냥 정말 항상 보던 그런페이지에요..! 회원가입 할 때 비밀번호 확인과 6자리 이상도 놀랍고 이메일.. 인증... 허.ㄱ..헉... 새소식 부분도 너무 신기해요..대시보드와 정렬, 검색 기능...도 페이지가 너무 깔끔하고 푸터 부분 깨알 디테일까지.. 많은 걸 배워가고 감명받았습니다...

Copy link
Member

@marshallku marshallku left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다!
전반적으로 완성도가 높네요.
코딩 패턴만 조금 다듬고, 반응형으로 수정하면 정말 좋을 것 같습니다!

public/index.html Outdated Show resolved Hide resolved
.prettierrc.json Outdated
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

프로젝트 구성부터 진행하신 것 좋네요!

assets/fonts/noto-sans-kr-v27-latin-100.eot Outdated Show resolved Hide resolved
src/css/basic.css Show resolved Hide resolved
src/employee_list.html Show resolved Hide resolved
Comment on lines +99 to +103
searchInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
searchFunc();
}
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<form>을 사용하고 submit 이벤트를 써봐도 좋을 것 같습니다.

button.addEventListener('click', (e) => {
prevGroupButton.removeEventListener('click', prevGroupButtonClickHandler);
nextGroupButton.removeEventListener('click', nextGroupButtonClickHandler);
nowPageValue = Number(e.target.textContent);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i에 직접 접근할 수 있지 않나요?


function prevGroupButtonClickHandler() {
prevGroupButton.removeEventListener('click', prevGroupButtonClickHandler);
prevGroupButton.removeAttribute('disabled');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

prevGroupButton.disabled = false로 작성하면 좀 더 명시적이지 않을까요?

Comment on lines +93 to +100
// 이미지 업로드 시 미리보기
function photoChange(e) {
const reader = new FileReader();
reader.onload = ({ target }) => {
addPreview(target.result);
};
reader.readAsDataURL(e.target.files[0]);
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

URL.createObjectURL()로도 이미지를 생성할 수 있습니다!
URL.revokeObjectURL()를 통해 제거하는 것만 염두에 두고 작업하시면 좋습니다!

Comment on lines +126 to +140
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('입력되지 않은 정보가 있습니다');
});
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

각 필드에 대한 validation이 조금 더 구체적으로 진행되면 좋을 것 같습니다(휴대폰, 이메일 패턴 확인 등).
추가로, 입력되지 않은 정보가 있을 때 해당 input으로 스크롤을 이동시켜주면 어떨까요?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants