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.

Sign up for GitHub

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_JungHyoJu 고객 정보 관리 시스템 #44

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

KDT0_JungHyoJu 고객 정보 관리 시스템 #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8696deb
Feat: index.html
hhjs2 Aug 18, 2023
72d02f0
Docs: README.md
hhjs2 Aug 18, 2023
7aa62ce
Docs: README.md
hhjs2 Aug 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 89 additions & 47 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,92 @@
# 💗 예약 관리 시스템

# :camera: 직원 사진 관리 서비스

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

과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
## [과제 수행 및 제출 방법]
1. 현재 저장소를 로컬에 클론(Clone)합니다.
2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름)
3. 자신의 본명 브랜치에서 과제를 수행합니다.
4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름)
5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름)
6. Pull Request 링크를 LMS로도 제출해 주셔야 합니다.
7. main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
8. Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
9. Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
10. 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!

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

## [선택 요구사항]
- 사진 관리 페이지와 관련된 기타 기능도 고려해 보세요.
- 페이지가 보여지기 전에 로딩 애니메이션이 보이도록 만들어보세요.
- 직원을 등록, 수정, 삭제가 가능하게 해보세요.
- 직원 검색 기능을 추가해 보세요.
- infinity scroll 기능을 추가해 보세요.
- 사진을 편집할 수 있는 기능을 추가해 보세요.
- LocalStorage 사용

## [화면 예시]
![111](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/96465306/f1afed4b-547e-4289-8e83-2f0fa188cccb)
![222](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/96465306/72f1ea35-8965-4050-9d0b-b9f27c933f64)



## [흐름]
![333](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/96465306/44707a0e-6c5a-4d04-a6bd-58e46f02a9a9)
## 📌프로젝트 개요

- 고객들의 예약 등록과 예약 관리를 도와주는 서비스 입니다.
- LocalStorage와 파이어베이스를 이용해 DB 정보를 이용합니다.

## 📂 사이트 주소

🔗 **배포 링크 :** https://cupid-32b7f.web.app/
<br/>
<br/>

## 💿 필수 요구사항

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

## 📀 추가 구현사항

- [ ] 사진 관리 페이지와 관련된 기타 기능도 고려해 보세요.
- [x] 직원을 등록, 수정, 삭제가 가능하게 해보세요.
- [x] LocalStorage 사용
<br/>
<br/>

## 💻 화면 구성

| 메인 페이지 | 사용자 등록(예약) 페이지 |
| :---------------------------------------------------------------: | :---------------------------------------------------------: |
| <img src="./public/images/main-page.png" style="width : 500px"> | <img src ="./public/images/page.png" style="width : 500px"> |

<br/>

| 고객 정보 관리 페이지 | 고객 프로필 페이지 |
| :--------------------------------------------------------------: | :-----------------------------------------------------------------: |
| <img src ="./public/images/info-page.png" style="width : 500px"> | <img src ="./public/images/profile-page.png" style="width : 500px"> |

<br/>

<br/>

## 🔎 주요 기능

### 🔔 사용자 등록(예약) 페이지 - 사진 등록, 수정

<img width="500" alt="Search" src="./public/images/upload.gif">
<img width="500" alt="Search" src="./public/images/highlight.gif">
<br />

### 🔔 사용자 등록(예약) 페이지 - 사진 firebase 업로드

<img width="500" alt="Search" src="./public/images/fire.png">

### 🔔 사용자 등록(예약) 페이지 - 사용자 정보 LocalStorage 업로드

<img width="500" alt="Search" src="./public/images/local.png">

### 🔔 고객 정보 관리 페이지 - 스크롤이 가능한 형태의 리스팅 페이지

<img width="500" alt="Search" src="./public/images/scroll.gif">

### 🔔 고객 정보 관리 페이지 - 애니메이션 구현

<img width="500" alt="Search" src="./public/images/ani.gif">

### 🔔 고객 프로필 페이지 - 사진 삭제

<img width="500" alt="Search" src="./public/images/remove.gif">

### 🔔 전체 페이지 데스크탑-모바일 반응형 페이지

| 메인 페이지 | 사용자 등록(예약) 페이지 |
| :------------------------------------------------------------------------: | :-----------------------------------------------------------------------: |
| <img width="300" height="500" alt="Search" src="./public/images/main.gif"> | <img width="300" height="500" alt="Search" src="./public/images/qks.gif"> |

| 고객 정보 관리 페이지 | 고객 프로필 페이지 |
| :----------------------------------------------------------------------------: | :----------------------------------------------------------------------: |
| <img width="300" height="500" alt="Search" src="./public/images/info-qks.gif"> | <img width="300" height="500" alt="Search" src="./public/images/de.gif"> |

## 🌿 유저 플로우

<img width="500" alt="Search" src="./public/images/userflow.png">
42 changes: 42 additions & 0 deletions firebase-debug.log
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
[debug] [2023-08-18T13:30:22.125Z] ----------------------------------------------------------------------
[debug] [2023-08-18T13:30:22.129Z] Command: C:\Program Files\nodejs\node.exe C:\Users\LG\AppData\Roaming\npm\node_modules\firebase-tools\lib\bin\firebase.js serve --only hosting
[debug] [2023-08-18T13:30:22.130Z] CLI Version: 12.4.8
[debug] [2023-08-18T13:30:22.131Z] Platform: win32
[debug] [2023-08-18T13:30:22.131Z] Node Version: v18.16.1
[debug] [2023-08-18T13:30:22.137Z] Time: Fri Aug 18 2023 22:30:22 GMT+0900 (대한민국 표준시)
[debug] [2023-08-18T13:30:22.137Z] ----------------------------------------------------------------------
[debug]
[debug] [2023-08-18T13:30:22.142Z] >>> [apiv2][query] GET https://firebase-public.firebaseio.com/cli.json [none]
[debug] [2023-08-18T13:30:22.326Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
[debug] [2023-08-18T13:30:22.327Z] > authorizing via signed-in user ([email protected])
[debug] [2023-08-18T13:30:22.327Z] [iam] checking project cupid-32b7f for permissions ["firebase.projects.get"]
[debug] [2023-08-18T13:30:22.329Z] > refreshing access token with scopes: []
[debug] [2023-08-18T13:30:22.331Z] >>> [apiv2][query] POST https://www.googleapis.com/oauth2/v3/token [none]
[debug] [2023-08-18T13:30:22.331Z] >>> [apiv2][body] POST https://www.googleapis.com/oauth2/v3/token [omitted]
[debug] [2023-08-18T13:30:22.592Z] <<< [apiv2][status] POST https://www.googleapis.com/oauth2/v3/token 200
[debug] [2023-08-18T13:30:22.593Z] <<< [apiv2][body] POST https://www.googleapis.com/oauth2/v3/token [omitted]
[debug] [2023-08-18T13:30:22.617Z] >>> [apiv2][query] POST https://cloudresourcemanager.googleapis.com/v1/projects/cupid-32b7f:testIamPermissions [none]
[debug] [2023-08-18T13:30:22.618Z] >>> [apiv2][(partial)header] POST https://cloudresourcemanager.googleapis.com/v1/projects/cupid-32b7f:testIamPermissions x-goog-quota-user=projects/cupid-32b7f
[debug] [2023-08-18T13:30:22.618Z] >>> [apiv2][body] POST https://cloudresourcemanager.googleapis.com/v1/projects/cupid-32b7f:testIamPermissions {"permissions":["firebase.projects.get"]}
[debug] [2023-08-18T13:30:22.799Z] <<< [apiv2][status] GET https://firebase-public.firebaseio.com/cli.json 200
[debug] [2023-08-18T13:30:22.799Z] <<< [apiv2][body] GET https://firebase-public.firebaseio.com/cli.json {"cloudBuildErrorAfter":1594252800000,"cloudBuildWarnAfter":1590019200000,"defaultNode10After":1594252800000,"minVersion":"3.0.5","node8DeploysDisabledAfter":1613390400000,"node8RuntimeDisabledAfter":1615809600000,"node8WarnAfter":1600128000000}
[debug] [2023-08-18T13:30:23.452Z] <<< [apiv2][status] POST https://cloudresourcemanager.googleapis.com/v1/projects/cupid-32b7f:testIamPermissions 200
[debug] [2023-08-18T13:30:23.452Z] <<< [apiv2][body] POST https://cloudresourcemanager.googleapis.com/v1/projects/cupid-32b7f:testIamPermissions {"permissions":["firebase.projects.get"]}
[debug] [2023-08-18T13:30:23.454Z] >>> [apiv2][query] GET https://firebase.googleapis.com/v1beta1/projects/cupid-32b7f [none]
[debug] [2023-08-18T13:30:23.908Z] <<< [apiv2][status] GET https://firebase.googleapis.com/v1beta1/projects/cupid-32b7f 200
[debug] [2023-08-18T13:30:23.908Z] <<< [apiv2][body] GET https://firebase.googleapis.com/v1beta1/projects/cupid-32b7f {"projectId":"cupid-32b7f","projectNumber":"102484094770","displayName":"cupid","name":"projects/cupid-32b7f","resources":{"hostingSite":"cupid-32b7f","storageBucket":"cupid-32b7f.appspot.com","locationId":"asia-northeast3"},"state":"ACTIVE","etag":"1_47983cc4-33c9-401c-8af4-c059fc3be30d"}
[debug] [2023-08-18T13:30:23.912Z] >>> [apiv2][query] GET https://firebasehosting.googleapis.com/v1beta1/projects/cupid-32b7f/sites
[debug] [2023-08-18T13:30:24.706Z] <<< [apiv2][status] GET https://firebasehosting.googleapis.com/v1beta1/projects/cupid-32b7f/sites 200
[debug] [2023-08-18T13:30:24.706Z] <<< [apiv2][body] GET https://firebasehosting.googleapis.com/v1beta1/projects/cupid-32b7f/sites {"sites":[{"name":"projects/cupid-32b7f/sites/cupid-32b7f","defaultUrl":"https://cupid-32b7f.web.app","type":"DEFAULT_SITE"}]}
[debug] [2023-08-18T13:30:24.707Z] >>> [apiv2][query] GET https://firebase.googleapis.com/v1beta1/projects/cupid-32b7f/webApps/-/config [none]
[debug] [2023-08-18T13:30:25.830Z] <<< [apiv2][status] GET https://firebase.googleapis.com/v1beta1/projects/cupid-32b7f/webApps/-/config 200
[debug] [2023-08-18T13:30:25.830Z] <<< [apiv2][body] GET https://firebase.googleapis.com/v1beta1/projects/cupid-32b7f/webApps/-/config {"projectId":"cupid-32b7f","appId":"1:102484094770:web:f355446e96d81a1226f12b","storageBucket":"cupid-32b7f.appspot.com","locationId":"asia-northeast3","apiKey":"AIzaSyDH41YTt_vxlfIELSOXrCpk96aUsBvmvOU","authDomain":"cupid-32b7f.firebaseapp.com","messagingSenderId":"102484094770"}
[debug] [2023-08-18T13:30:25.858Z] >>> [apiv2][query] GET https://firebase.googleapis.com/v1beta1/projects/cupid-32b7f [none]
[debug] [2023-08-18T13:30:26.256Z] <<< [apiv2][status] GET https://firebase.googleapis.com/v1beta1/projects/cupid-32b7f 200
[debug] [2023-08-18T13:30:26.257Z] <<< [apiv2][body] GET https://firebase.googleapis.com/v1beta1/projects/cupid-32b7f {"projectId":"cupid-32b7f","projectNumber":"102484094770","displayName":"cupid","name":"projects/cupid-32b7f","resources":{"hostingSite":"cupid-32b7f","storageBucket":"cupid-32b7f.appspot.com","locationId":"asia-northeast3"},"state":"ACTIVE","etag":"1_47983cc4-33c9-401c-8af4-c059fc3be30d"}
[debug] [2023-08-18T13:30:26.261Z] Specified "public" directory "public" does not exist; Deploy to Hosting site "cupid-32b7f" may fail or be empty.
[info] i hosting[cupid-32b7f]: Serving hosting files from: public {"metadata":{"emulator":{"name":"hosting"},"message":"Serving hosting files from: \u001b[1mpublic\u001b[22m"}}
[info] + hosting[cupid-32b7f]: Local server: http://localhost:5002 {"metadata":{"emulator":{"name":"hosting"},"message":"Local server: \u001b[4m\u001b[1mhttp://localhost:5002\u001b[22m\u001b[24m"}}
[info] i hosting: ::1 - - [18/Aug/2023:13:30:31 +0000] "GET / HTTP/1.1" 404 139 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.200" {"metadata":{"emulator":{"name":"hosting"},"message":"::1 - - [18/Aug/2023:13:30:31 +0000] \"GET / HTTP/1.1\" 404 139 \"-\" \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.200\""}}
[info] i hosting: ::1 - - [18/Aug/2023:13:30:54 +0000] "GET / HTTP/1.1" 404 139 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.200" {"metadata":{"emulator":{"name":"hosting"},"message":"::1 - - [18/Aug/2023:13:30:54 +0000] \"GET / HTTP/1.1\" 404 139 \"-\" \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.200\""}}
[info] i hosting: ::1 - - [18/Aug/2023:13:31:33 +0000] "GET / HTTP/1.1" 404 139 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.200" {"metadata":{"emulator":{"name":"hosting"},"message":"::1 - - [18/Aug/2023:13:31:33 +0000] \"GET / HTTP/1.1\" 404 139 \"-\" \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.200\""}}
33 changes: 33 additions & 0 deletions public/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Not Found</title>

<style media="screen">
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
#message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
@media (max-width: 600px) {
body, #message { margin-top: 0; background: white; box-shadow: none; }
body { border-top: 16px solid #ffa100; }
}
</style>
</head>
<body>
<div id="message">
<h2>404</h2>
<h1>Page Not Found</h1>
<p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
<h3>Why am I seeing this?</h3>
<p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
</div>
</body>
</html>
160 changes: 160 additions & 0 deletions public/css/detail_profile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
section .inner {
max-width: 1200px;
min-width: 500px;
/* background-color: rgb(127, 255, 136); */
margin: 0 auto;
}
section h1 {
color: #55433c;
font-size: 2.8rem;
display: block;
margin: 40px auto 60px;
width: 360px;
padding-top: 20px;
font-weight: 500;
}
/* form 상단 */
.form_top {
display: flex;
justify-content: space-evenly;
}
/* form 왼쪽 이미지 업로드 */
.form_top .top_left {
/* background-color: red; */
}
.form_top .top_left .image_btn {
display: flex;
left: 20px;
}

/* 이미지 업로드 선택창 */
.form_top .top_left .remove-image,
.form_top .top_left .edit-image {
background-color: #c7a88c;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
cursor: pointer;
width: 80px;
display: block;
margin-right: 15px;
}

.form_top .top_left .remove-image:hover,
.form_top .top_left .edit-image:hover {
background-color: #9ab292;
}

.form_top .top_left .file {
display: none;
}

.form_top .top_left .upload-box {
width: 280px;
box-sizing: border-box;
}

.form_top .top_left .upload-box .drag-file {
height: 360px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 3px dashed #dbdbdb;
position: relative;
}

.form_top .top_left .upload-box .drag-file .highlight {
border: 3px dashed #ee0f91;
}

.upload-box .drag-file .image {
width: 40px;
}

/* .upload-box .drag-file #user-url {
width: 280px;
} */

.upload-box .drag-file #user-url img {
width: 280px;
height: 360px;
}
.form_top .top_left .upload-box .drag-file .preview {
display: none;
position: absolute;
left: 0;
height: 0;
width: 100%;
height: 100%;
}

/* form 오른쪽 */
.inner .form_top .top_right {
/* background-color: orange; */
padding-top: 40px;
}
.inner .form_top .top_right li {
padding: 15px;
font-size: 1.4rem;
display: flex;
}

.inner .form_top .top_right li .tit {
padding-right: 10px;
}

.inner .form_top .top_right li select {
width: 150px;
/* padding: 0.8em 0.5em; */
width: auto; /* 기본적으로 너비를 내용에 맞게 자동 조정합니다. */
padding: 0.5em 0.8em;
}

.inner .form_top .top_right label {
color: #3d2d27;
padding-right: 20px;
}

.inner .form_top .top_right input {
/* background-color: red; */
padding: 7px;
border-radius: 50px;
border: 1px solid #55433c;
}

/* 폼 버튼 */

section .button {
display: flex;
justify-content: center;
}

section .button button {
background-color: #c7a88c;
color: #fff;
text-align: center;
padding: 10px 0;
border-radius: 6px;
cursor: pointer;
width: 80px;
display: block;
margin: 30px;
border: none;
font-size: 1rem;
}

@media all and (max-width: 530px) {
.form_top {
display: flex;
flex-wrap: wrap;
}
}

@media all and (max-width: 360px) {
.form_top {
display: flex;
flex-wrap: wrap;
}
}
Loading