Skip to content

Kdt0 nam hyeon jun#58

Open
applevalley wants to merge 21 commits into
mainfrom
KDT0_NamHyeonJun
Open

Kdt0 nam hyeon jun#58
applevalley wants to merge 21 commits into
mainfrom
KDT0_NamHyeonJun

Conversation

@applevalley
Copy link
Copy Markdown

@applevalley applevalley commented Aug 18, 2023

🏋️‍♂️ 헬스장 회원 관리 서비스

직원들의 사진을 관리할 수 있는 사진 관리자 서비스를 만들어 보세요.

배포 주소

https://nhj-js-homework.firebaseapp.com/index.html

[필수 요구사항]

  • “AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요.
  • 프로필 페이지를 개발하세요.
  • 스크롤이 가능한 형태의 리스팅 페이지를 개발하세요.
  • 전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요.
  • 사진을 등록, 수정, 삭제가 가능해야 합니다.
  • 유저 플로우를 제작하여 리드미에 추가하세요.
  • CSS
    • 애니메이션 구현
    • 상대수치 사용(rem, em)
  • JavaScript
    • DOM event 조작

[선택 요구사항]

  • 사진 관리 페이지와 관련된 기타 기능도 고려해 보세요.
  • 페이지가 보여지기 전에 로딩 애니메이션이 보이도록 만들어보세요.
  • 직원을 등록, 수정, 삭제가 가능하게 해보세요.
  • infinity scroll 기능을 추가해 보세요.

유저 플로우

user flow

화면 예시

메인 페이지

메인 화면

  • 회원 전체 정보 열람이 가능한 메인 페이지입니다.
  • 좌측 상단의 등록 버튼을 통해 회원 신규 등록이 가능하고, 체크박스로 회원을 선택한 후 삭제할 수 있습니다.
  • 회원 목록 영역 내에서 회원 번호를 선택해, 해당 회원의 프로필 페이지로 이동할 수 있습니다.

등록 페이지

등록 화면

  • 회원 정보와, 사진 등록이 가능합니다.
  • 삭제 버튼을 통해, 등록한 사진을 삭제할 수 있습니다.
  • 회원 정보와 사진 등록을 완료한 뒤, 우측 상단의 등록 버튼을 통해 메인 페이지로 이동할 수 있습니다.

프로필 페이지

프로필 화면

  • 등록한 회원의 정보를 열람할 수 있습니다.
  • 등록된 정보는 프로필 페이지에서 수정할 수 없으며, 회원 정보 수정이 필요한 경우 우측 상단의 수정 버튼을 통해 수정 페이지로 진입합니다.

수정 페이지

수정 화면

  • 등록한 회원의 정보를 수정할 수 있습니다.
  • 사진 하단의 삭제 버튼을 눌러 기존 등록된 사진을 삭제하고, 새로운 사진을 등록시킬 수 있습니다.
  • 하단의 일지 영역 내에서 세션 추가 버튼을 통해 내용을 입력하고, 세션 저장 버튼을 통해 내용을 저장할 수 있습니다.

수정 완료

  • 수정이 완료되고 나면, 해당 회원의 프로필 페이지로 이동합니다.

느낀 점

필수 기능을 먼저 빠르게 완성시켜 놓은 다음 이후 기능 구현을 진행했어야 했는데, 처음부터 기획을 너무 크게 잡고 진행해 속도도 나지 않았고, 목표로 한 기능들도 전부 구현하지 못해 스크립트 부분만 빠르게 진행하였고, css 스타일링 부분은 많이 진행하지 못했던 점이 아쉬웠습니다.

현재 필수 기능 중 데스크탑-모바일 반응형 개발 부분은 미구현 상태입니다.
추후 리팩토링 진행하면서 구현 예정입니다.

@netlify
Copy link
Copy Markdown

netlify Bot commented Aug 18, 2023

Deploy Preview for velvety-puppy-c1029b ready!

Name Link
🔨 Latest commit f507fd8
🔍 Latest deploy log https://app.netlify.com/sites/velvety-puppy-c1029b/deploys/64ecba275486ce00087f4058
😎 Deploy Preview https://deploy-preview-58--velvety-puppy-c1029b.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@taki-kim
Copy link
Copy Markdown

운동일지까지 기록할 수 있네요 ㅋㅋ
수정 시 인풋 placeholoder도 수정 전 값으로 적용되고 현재날짜도 반영되고,
기능적인 부분에서 꼼꼼하게 구현하셨다고 생각했습니다!

@zoeyourlife
Copy link
Copy Markdown

css 적인 부분은 조금 아쉽긴 하지만, 기능적인 부분에서 엄청 노력하신 것이 보입니다.
저도 구현하지 못한 기능들을 마저 리팩토링 과정 때 진행을 해야할 것 같습니다.
물론 저도 깔끔한 디렉토리 정리는 하지 않긴 했지만, 리팩토링 과정 때 디렉토리 한번 수정하시면 좋을 것 같아요 !

Copy link
Copy Markdown

@Eojoonhyuk Eojoonhyuk left a comment

Choose a reason for hiding this comment

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

아이디어가 재밌네요ㅎㅎ CSS까지 추가되면 더 좋은 퀄리티가 될거같습니다!

@wowba
Copy link
Copy Markdown

wowba commented Aug 25, 2023

MVC 구조로 작업하셔서 파일을 각 페이지별로 나눈 뒤 라우터를 둔다면 좀 더 직관적인 폴더 구조를 가질 수 있을 것 같아요!
수고하셨습니다!

Copy link
Copy Markdown

@iamidlek iamidlek left a comment

Choose a reason for hiding this comment

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

필수 요소와 기능은 잘 현해 주신 것 같습니다.
css 부분이 조금 아쉬운 것 같습니다.
일부 일반적으로 권장되는 스타일을 코멘트 하였고
중복되는 부분은 생략하였습니다.

고생하셨습니다.

Comment thread detail.html
Comment on lines +75 to +84
<ul>
<li>세션 번호</li>
<li>날짜</li>
<li>부위</li>
<li>내용</li>
<li>중량</li>
<li>횟수</li>
<li>세트</li>
<li>비고</li>
</ul>
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

table사용하여 구현하는 것이 더 좋을 것 같습니다.

Comment thread firebase.js
userPtSession,
userTrainer
);
userBox.append(userInfoFrame);
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

반복문 안에서 append나 innerHTML을 하기 보단
변수에 모든 내용을 가지고 한번에 적용하는 것이 좋을 것 같습니다.

Comment thread firebase.js Outdated
) {
const db = getDatabase();
try {
console.log(sessionId, date);
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

확인이 완료된 부분은 console.log를 제거하면 좋을 것 같습니다.

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