KDT0_JangMunYong 카페 직원 관리 서비스 #53
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| # API KEY | ||
| .vscode | ||
| key.js | ||
|
|
||
| .env | ||
| node_modules/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "trailingComma": "es5", | ||
| "tabWidth": 4, | ||
| "semi": false, | ||
| "singleQuote": true | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,78 @@ | ||
| # ☕카페 직원 관리 서비스 | ||
| 카페 직원들의 정보를 관리하는 서비스입니다. | ||
|
|
||
| ## [배포 사이트] | ||
| [배포 사이트 url](https://employee-management-cafe.netlify.app) | ||
|
|
||
| 키 관리 이슈 때문에 AWS S3를 제외한 (local storage를 이용) 기능 구현 페이지를 배포하였습니다. | ||
|
|
||
| ## [과제 기간] | ||
| 2023.08.07 ~ 2023.08.17 | ||
|
|
||
| ## [필수 요구사항] | ||
|
|
||
| - [x] “AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요. | ||
| - [x] 프로필 페이지를 개발하세요. | ||
| - [x] 스크롤이 가능한 형태의 리스팅 페이지를 개발하세요. | ||
| - [x] 전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요. | ||
| - [x] 사진을 등록, 수정, 삭제가 가능해야 합니다. | ||
| - [x] 유저 플로우를 제작하여 리드미에 추가하세요. | ||
|
|
||
| * CSS | ||
| - [x] 애니메이션 구현 | ||
| - [x] 상대수치 사용(rem, em) | ||
| * JavaScript | ||
| - [x] DOM event 조작 | ||
|
|
||
| ## [선택 요구사항] | ||
| - [ ] 사진 관리 페이지와 관련된 기타 기능도 고려해 보세요. | ||
| - [x] 페이지가 보여지기 전에 로딩 애니메이션이 보이도록 만들어보세요. | ||
| - [x] 직원을 등록, 수정, 삭제가 가능하게 해보세요. | ||
| - [ ] 직원 검색 기능을 추가해 보세요. | ||
| - [ ] infinity scroll 기능을 추가해 보세요. | ||
| - [ ] 사진을 편집할 수 있는 기능을 추가해 보세요. | ||
| - [x] LocalStorage 사용 | ||
|
|
||
|
|
||
| ## [사용 스택] | ||
| <img src="https://img.shields.io/badge/CSS-1572B6?style=for-the-badge&logo=css3&logoColor=white"> <img src="https://img.shields.io/badge/HTML-E34F26?style=for-the-badge&logo=html5&logoColor=white"> <img src="https://img.shields.io/badge/JAVASCRIPT-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black"> <img src="https://img.shields.io/badge/amazon s3-569A31?style=for-the-badge&logo=amazons3&logoColor=white"> | ||
|
|
||
| ## [구현 내용] | ||
| ### 로딩 페이지 | ||
|  | ||
|  | ||
| ### 메인 페이지 | ||
|  | ||
| ### 직원 등록 폼 & AWS 3S에 이미지 업로드 | ||
|  | ||
|  | ||
|  | ||
|  | ||
|
|
||
| ## 여러 사람 등록, 삭제 | ||
|  | ||
| ### LocalStorage | ||
|  | ||
| ### 전체 삭제 | ||
|  | ||
|  | ||
|
|
||
| ### 상세 정보 폼 | ||
|  | ||
|
|
||
| ### 모바일 반응형 | ||
|  | ||
|
|
||
|
|
||
| ## [User Flow] | ||
|  | ||
|
|
||
| ## [아쉬운 점] | ||
| - 과제 기간 내에 검색 기능을 구현하지 못했다. | ||
| - 직원 정보를 편집하는 기능을 넣지 못햇다. 삭제하고 다시 작성하는 식으로 수정을 해야 한다. | ||
| - 아직 AWS 3S를 능숙하게 다루지 못했다. | ||
| ## [느낀 점] | ||
| - Firebase는 전에 해 본 경험이 있어서 AWS 3S를 도전해 보았는데 어려웠지만 AWS를 경험해 본 것에 큰 의미를 둔다. | ||
| - Javascript에 대해서 많은 공부를 한 것 같다. 전에는 거의 한 줄도 작성하지 못했는데 이번 과제를 통해 많이 공부한 것 같다. | ||
| - AWS 3S를 선택함으로 api 키 관리에 대해서도 많이 알아보게 되었다. | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
|
|
||
| box-sizing: border-box; | ||
| font-family: 'Gowun Dodum', sans-serif; | ||
| } | ||
|
|
||
| button { | ||
| padding: 10px; | ||
| margin: 20px 3px; | ||
|
|
||
| outline: none; | ||
| border: none; | ||
| border-radius: 10px; | ||
|
|
||
| cursor: pointer; | ||
|
|
||
| background-color: rgb(108, 75, 61); | ||
| color: #fff; | ||
| } | ||
|
|
||
| button:hover{ | ||
| background-color: rgb(75, 58, 51); | ||
| } | ||
|
|
||
| main { | ||
| min-height: 100vh; | ||
| padding: 2rem 1.5rem; | ||
|
|
||
| background-color: rgb(242, 238, 232); | ||
| } | ||
|
|
||
| input[type="checkbox"]:hover { | ||
| cursor: pointer; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,153 @@ | ||
| @import url(common.css); | ||
| @import url(registration-form.css); | ||
| @import url(information-form.css); | ||
|
|
||
|
Comment on lines
+1
to
+4
There was a problem hiding this comment. CSS파일을 이러한 형식으로 불러올 수 도 있다는 것을 하나 배워갑니다!! |
||
| .title { | ||
| margin-bottom: 50px; | ||
| } | ||
|
|
||
| .buttons { | ||
| display: inline-block; | ||
| } | ||
|
|
||
| .search { | ||
| float: right; | ||
|
|
||
| width: 300px; | ||
|
|
||
| margin: 20px; | ||
|
|
||
| position: relative; | ||
| } | ||
|
Comment on lines
+13
to
+21
There was a problem hiding this comment. 반응형을 하면 왼쪽으로 쏙 하고 들어가던데 이것을 float의 기능 때문인 건가요?? 너무 신기하네요!! |
||
|
|
||
| .search input { | ||
| width: 100%; | ||
|
|
||
| padding: 10px 12px; | ||
|
|
||
| border: 1px solid #bbb; | ||
| border-radius: 8px; | ||
|
|
||
| font-size: 12px; | ||
| } | ||
|
|
||
| .search img { | ||
| width: 17px; | ||
|
|
||
| margin: 0; | ||
|
|
||
| position: absolute; | ||
| top: 10px; | ||
| right: 12px; | ||
|
|
||
| cursor: pointer; | ||
| } | ||
|
|
||
| /* 화면 너비가 768px 이하일 때의 스타일 */ | ||
| @media screen and (max-width: 768px) { | ||
| .search { | ||
| float: none; | ||
| width: 300px; | ||
| margin: 20px 0; | ||
| } | ||
| } | ||
|
|
||
| .emp-list { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .emp-list .list-header { | ||
| border-top: 2px solid #bbb; | ||
| border-bottom: 2px solid #bbb; | ||
| } | ||
|
|
||
|
|
||
| .list-row { | ||
| border-bottom: 1px solid #d7d7d7; | ||
|
|
||
| display: flex; | ||
| } | ||
|
|
||
| .emp-list .list-row .checkbox { | ||
| margin: 0 20px; | ||
| width: 20px; | ||
| } | ||
|
|
||
|
|
||
| .emp-list .list-row .list-cell { | ||
| flex: 1; | ||
|
|
||
| padding: 8px; | ||
|
|
||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .emp-list-items .emp-category { | ||
| color: red; | ||
| } | ||
|
|
||
| .emp-list .list-row .emp-img { | ||
| height: 200px; | ||
| margin: 20px; | ||
|
|
||
| overflow: hidden; | ||
| } | ||
|
|
||
| .emp-list .list-row .emp-img img { | ||
| width: 150px; | ||
| height: 100%; | ||
|
|
||
| object-fit: cover; | ||
| } | ||
|
|
||
| /* 화면 너비가 768px 이하일 때의 스타일 */ | ||
| @media screen and (max-width: 768px) { | ||
| .emp-list .list-header .list-cell{ | ||
| display: none; | ||
| } | ||
|
|
||
| .emp-list .emp-list-items .list-item { | ||
| display: inline; | ||
| border: none; | ||
| } | ||
|
|
||
| .emp-list .list-row input[type="checkbox"] { | ||
| width: 20px; | ||
| height: 20px; | ||
|
|
||
| margin: 20px; | ||
| } | ||
|
|
||
| .emp-list .list-header input[type="checkbox"]::after { | ||
| padding-left: 40px; | ||
| display: inline-block; | ||
| content: " ALL"; | ||
|
|
||
| transform: translateY(10%); | ||
| } | ||
|
|
||
| .emp-list .list-row .list-cell { | ||
| text-align: center; /* 가운데 정렬 */ | ||
| } | ||
|
|
||
| .emp-list .list-row .list-cell:last-child { | ||
| padding-bottom: 30px; | ||
| } | ||
|
|
||
| .emp-list .list-row .emp-img { | ||
| height: auto; | ||
| margin: 10px 0; | ||
| } | ||
|
|
||
| .emp-list .list-row .emp-img img { | ||
| width: 80%; | ||
| height: auto; | ||
| } | ||
|
|
||
| .emp-list-items .emp-category { | ||
| border-bottom: 1px solid #bbb; | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| .information-form { | ||
| width: 500px; | ||
| height: 28em; | ||
| background-color: #f9f9f9; | ||
|
|
||
| padding: 20px; | ||
| margin-top: 10px; | ||
|
|
||
| border: 1px solid #ccc; | ||
| border-radius: 20px; | ||
|
|
||
| display: none; | ||
|
|
||
| position: fixed; | ||
| top: 40%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| } | ||
|
|
||
| .information-form h2 { | ||
| font-size: 1.2em; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .information-form .form-content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
|
|
||
| font-weight: bold; | ||
| } | ||
|
|
||
| .information-form .form-content div{ | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .information-form .emp-img img{ | ||
| width: 120px; | ||
| height: 150px; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .registration-form #defaultPhoto { | ||
| width: 120px; | ||
| height: 150px; | ||
| } | ||
|
|
||
| /* 화면 너비가 768px 이하일 때의 스타일 */ | ||
| @media screen and (max-width: 768px) { | ||
| .information-form { | ||
| width: 80%; | ||
| max-width: 400px; | ||
| height: auto; | ||
|
|
||
| padding: 10px; | ||
|
|
||
| top: 50%; | ||
| } | ||
|
|
||
| .information-form h2 { | ||
| font-size: 1em; | ||
| margin-bottom: 10px; | ||
| }} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
문용님!! 글씨체 너무 귀여워요 🫢
font가 디자인에 참 많은 것을 기여하는데 이런 세세한 부분까지 신경 쓰시다니 문용님은 참 유저에게 친근한 UI 디자인을 잘 하시는 것 같습니다!!