From 8696deba61d56f1f3446121ce7072d23908dac45 Mon Sep 17 00:00:00 2001
From: hhjs2 <0092h@naver.com>
Date: Fri, 18 Aug 2023 22:02:59 +0900
Subject: [PATCH 1/3] Feat: index.html
---
README.md | 133 ++++++++++------
public/404.html | 33 ++++
public/client.html | 0
public/client.js | 0
public/css/detail_profile.css | 160 +++++++++++++++++++
public/css/header.css | 204 +++++++++++++++++++++++++
public/css/profile_upload.css | 204 +++++++++++++++++++++++++
public/css/user.css | 151 ++++++++++++++++++
public/html/detail_profile.html | 147 ++++++++++++++++++
public/html/profile_upload.html | 143 +++++++++++++++++
public/html/user.html | 119 +++++++++++++++
public/images/ani.gif | Bin 0 -> 23689 bytes
public/images/de.gif | Bin 0 -> 702053 bytes
public/images/fire.png | Bin 0 -> 156724 bytes
public/images/highlight.gif | Bin 0 -> 321972 bytes
public/images/image-bg.jpg | Bin 0 -> 244123 bytes
public/images/info-page.png | Bin 0 -> 189909 bytes
public/images/info-qks.gif | Bin 0 -> 1416589 bytes
public/images/local.png | Bin 0 -> 105852 bytes
public/images/logo_name(160X60)_ss.png | Bin 0 -> 3017 bytes
public/images/main-page.png | Bin 0 -> 1163586 bytes
public/images/main.gif | Bin 0 -> 298148 bytes
public/images/main_1.jpg | Bin 0 -> 196202 bytes
public/images/main_1280.jpg | Bin 0 -> 177029 bytes
public/images/main_2.jpg | Bin 0 -> 245271 bytes
public/images/main_3.jpg | Bin 0 -> 112851 bytes
public/images/page.png | Bin 0 -> 55441 bytes
public/images/profile-page.png | Bin 0 -> 171620 bytes
public/images/qks.gif | Bin 0 -> 102450 bytes
public/images/remove.gif | Bin 0 -> 84883 bytes
public/images/scroll.gif | Bin 0 -> 1795934 bytes
public/images/upload.gif | Bin 0 -> 461335 bytes
public/index.html | 90 +++++++++++
public/js/detail_profile.js | 56 +++++++
public/js/profile.js | 78 ++++++++++
public/js/upload.js | 123 +++++++++++++++
public/js/user.js | 38 +++++
public/main.css | 19 +++
public/main.js | 10 ++
public/profile_upload.css | 0
public/profile_upload.js | 15 ++
41 files changed, 1676 insertions(+), 47 deletions(-)
create mode 100644 public/404.html
create mode 100644 public/client.html
create mode 100644 public/client.js
create mode 100644 public/css/detail_profile.css
create mode 100644 public/css/header.css
create mode 100644 public/css/profile_upload.css
create mode 100644 public/css/user.css
create mode 100644 public/html/detail_profile.html
create mode 100644 public/html/profile_upload.html
create mode 100644 public/html/user.html
create mode 100644 public/images/ani.gif
create mode 100644 public/images/de.gif
create mode 100644 public/images/fire.png
create mode 100644 public/images/highlight.gif
create mode 100644 public/images/image-bg.jpg
create mode 100644 public/images/info-page.png
create mode 100644 public/images/info-qks.gif
create mode 100644 public/images/local.png
create mode 100644 public/images/logo_name(160X60)_ss.png
create mode 100644 public/images/main-page.png
create mode 100644 public/images/main.gif
create mode 100644 public/images/main_1.jpg
create mode 100644 public/images/main_1280.jpg
create mode 100644 public/images/main_2.jpg
create mode 100644 public/images/main_3.jpg
create mode 100644 public/images/page.png
create mode 100644 public/images/profile-page.png
create mode 100644 public/images/qks.gif
create mode 100644 public/images/remove.gif
create mode 100644 public/images/scroll.gif
create mode 100644 public/images/upload.gif
create mode 100644 public/index.html
create mode 100644 public/js/detail_profile.js
create mode 100644 public/js/profile.js
create mode 100644 public/js/upload.js
create mode 100644 public/js/user.js
create mode 100644 public/main.css
create mode 100644 public/main.js
create mode 100644 public/profile_upload.css
create mode 100644 public/profile_upload.js
diff --git a/README.md b/README.md
index b1efd6d14..0d6d4606a 100644
--- a/README.md
+++ b/README.md
@@ -1,50 +1,89 @@
+# ☘️ 예약 관리 시스템
-# :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://kdt0-junghyoju-kakaoclone.netlify.app/
+
+
+
+
+## 💿 필수 요구사항
+
+- [x] “AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요.
+- [x] 프로필 페이지를 개발하세요.
+- [x] 스크롤이 가능한 형태의 리스팅 페이지를 개발하세요.
+- [x] 전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요.
+- [x] 사진을 등록, 수정, 삭제가 가능해야 합니다.
+- [x] 유저 플로우를 제작하여 리드미에 추가하세요.
+- [x] 애니메이션 구현
+- [x] 상대수치 사용(rem, em)
+- [x] DOM event 조작
+
+
+
+## 📀 추가 구현사항
+
+- [ ] 사진 관리 페이지와 관련된 기타 기능도 고려해 보세요.
+- [x] 직원을 등록, 수정, 삭제가 가능하게 해보세요.
+- [x] LocalStorage 사용
+
+
+
+## 💻 화면 구성
+
+| 메인 페이지 | 사용자 등록(예약) 페이지 |
+| :---------------------------------------------------------------: | :---------------------------------------------------------: |
+| | |
+
+
+
+| 고객 정보 관리 페이지 | 고객 프로필 페이지 |
+| :--------------------------------------------------------------: | :-----------------------------------------------------------------: |
+| | |
+
+
+
+
+
+## 🔎 주요 기능
+
+### 🔔 사용자 등록(예약) 페이지 - 사진 등록, 수정
+
+
+
+
+
+### 🔔 사용자 등록(예약) 페이지 - 사진 firebase 업로드
+
+
+
+### 🔔 사용자 등록(예약) 페이지 - 사용자 정보 LocalStorage 업로드
+
+
+
+### 🔔 고객 정보 관리 페이지 - 스크롤이 가능한 형태의 리스팅 페이지
+
+
+
+### 🔔 고객 정보 관리 페이지 - 애니메이션 구현
+
+
+
+### 🔔 고객 프로필 페이지 - 사진 삭제
+
+
+
+### 🔔 전체 페이지 데스크탑-모바일 반응형 페이지
+
+| 메인 페이지 | 사용자 등록(예약) 페이지 |
+| :------------------------------------------------------------------------: | :-----------------------------------------------------------------------: |
+| | |
+
+| 고객 정보 관리 페이지 | 고객 프로필 페이지 |
+| :----------------------------------------------------------------------------: | :----------------------------------------------------------------------: |
+| | |
diff --git a/public/404.html b/public/404.html
new file mode 100644
index 000000000..829eda8fd
--- /dev/null
+++ b/public/404.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+ Page Not Found
+
+
+
+
+
+
404
+
Page Not Found
+
The specified file was not found on this website. Please check the URL for mistakes and try again.
+
Why am I seeing this?
+
This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html
file in your project's configured public
directory.
+
+
+
diff --git a/public/client.html b/public/client.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/public/client.js b/public/client.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/public/css/detail_profile.css b/public/css/detail_profile.css
new file mode 100644
index 000000000..7392eab51
--- /dev/null
+++ b/public/css/detail_profile.css
@@ -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;
+ }
+}
diff --git a/public/css/header.css b/public/css/header.css
new file mode 100644
index 000000000..4288a998c
--- /dev/null
+++ b/public/css/header.css
@@ -0,0 +1,204 @@
+@font-face {
+ font-family: "Thin";
+ src: url("/fonts/The\ Jamsil\ 1\ Thin.ttf");
+}
+@font-face {
+ font-family: "Light";
+ src: url("/fonts/The\ Jamsil\ 2\ Light.ttf");
+}
+@font-face {
+ font-family: "Regular";
+ src: url("/fonts/The\ Jamsil\ 3\ Regular.ttf");
+}
+@font-face {
+ font-family: "IBMPlexSansKR-Regular";
+ src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Regular.woff")
+ format("woff");
+ font-weight: normal;
+ font-style: normal;
+}
+
+/* @keyframes */
+
+/* COMMON */
+body {
+ font-family: "IBMPlexSansKR-Regular";
+ color: #333333;
+ font-size: 16px;
+ line-height: 1.4;
+ background-color: #f5ece9;
+}
+/* img baseline 제거 */
+img {
+ display: block;
+}
+
+/* HEADER */
+header {
+ background-color: #f4ded6;
+}
+
+/* icon 숨김 */
+header .item {
+ display: none;
+}
+
+header .logo,
+header .menu {
+ display: block;
+}
+
+header .inner {
+ max-width: 1200px;
+ min-width: 500px;
+ height: 70px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+header .menu ul {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+header .menu li {
+ position: relative;
+}
+
+header .menu li:first-child::before {
+ display: none;
+}
+
+header .menu li::before {
+ content: "";
+ display: block;
+ width: 1px;
+ height: 15px;
+ background-color: #3d2d27;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+}
+
+header .menu li a {
+ font-size: 1.1rem;
+ color: #3d2d27;
+ text-decoration: none;
+ padding: 15px 20px;
+ animation: bounce;
+}
+header .menu li a:hover {
+ /* background-color: red; */
+ font-weight: 600;
+}
+
+/* 모바일 반응형 웹, 브라우저 크기가 780이하일 때 */
+@media all and (max-width: 530px) {
+ header .inner {
+ max-width: 530px;
+ min-width: 200px;
+ height: auto;
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ header .menu {
+ width: 100%;
+ text-align: center;
+ }
+
+ header .menu ul {
+ flex-direction: column;
+ display: none;
+ }
+ header .menu ul.active {
+ display: flex;
+ }
+ header .menu li {
+ width: 100%;
+ }
+
+ header .menu li a:hover {
+ background-color: #3d2d27;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ margin: 0;
+ color: white;
+ width: 100%;
+ display: block;
+ }
+
+ header .menu li a {
+ display: block;
+ padding: 10px 0;
+ }
+
+ header .menu li::before {
+ display: none;
+ }
+
+ header .icon {
+ display: block;
+ padding: 20px;
+ position: absolute;
+ right: 8px;
+ cursor: pointer;
+ }
+}
+
+/* 모바일 반응형 웹, 브라우저 크기가 780이하일 때 header*/
+@media all and (max-width: 530px) {
+ header .inner {
+ max-width: 530px;
+ min-width: 200px;
+ height: auto;
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ header .menu {
+ width: 100%;
+ text-align: center;
+ }
+
+ header .menu ul {
+ flex-direction: column;
+ display: none;
+ }
+ header .menu ul.active {
+ display: flex;
+ }
+ header .menu li {
+ width: 100%;
+ }
+
+ header .menu li a:hover {
+ background-color: #3d2d27;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ margin: 0;
+ color: white;
+ width: 100%;
+ display: block;
+ }
+
+ header .menu li a {
+ display: block;
+ padding: 10px 0;
+ }
+
+ header .menu li::before {
+ display: none;
+ }
+
+ header .icon {
+ display: block;
+ padding: 20px;
+ position: absolute;
+ right: 8px;
+ cursor: pointer;
+ }
+}
diff --git a/public/css/profile_upload.css b/public/css/profile_upload.css
new file mode 100644
index 000000000..355e5527f
--- /dev/null
+++ b/public/css/profile_upload.css
@@ -0,0 +1,204 @@
+section .inner {
+ max-width: 1200px;
+ min-width: 500px;
+ /* background-color: rgb(127, 255, 136); */
+ margin: 0 auto;
+}
+section h1 {
+ color: #55433c;
+ font-size: 2.5rem;
+ margin-top: 20px;
+ display: block;
+ margin: 20px auto 40px;
+ width: 280px;
+}
+/* form 상단 */
+.form_top {
+ display: flex;
+ justify-content: space-evenly;
+}
+/* form 왼쪽 이미지 업로드 */
+.form_top .top_left {
+ /* background-color: red; */
+}
+
+/* 이미지 업로드 선택창 */
+.form_top .top_left label {
+ background-color: #c7a88c;
+ color: #fff;
+ text-align: center;
+ padding: 10px 0;
+ border-radius: 6px;
+ cursor: pointer;
+ width: 100px;
+ display: block;
+}
+
+.form_top .top_left label:hover {
+ background-color: #9ab292;
+}
+
+.form_top .top_left input[type="file"] {
+ position: absolute;
+ width: 0;
+ height: 0;
+ padding: 0;
+ overflow: hidden;
+ border: 0;
+}
+
+.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 .highlight {
+ border: 3px dashed #9ab292;
+}
+
+.upload-box .drag-file .image {
+ width: 40px;
+}
+
+.upload-box .drag-file .message {
+ display: block;
+ padding-top: 20px;
+}
+
+.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;
+}
+
+.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 {
+ padding: 7px;
+ border-radius: 50px;
+ border: 1px solid #55433c;
+}
+
+.inner .form_top .top_right li #data {
+ width: 140px;
+}
+
+.inner .form_top .top_right li #place {
+ width: 160px;
+ border-radius: 20px;
+}
+
+.inner .form_top .top_right li #number {
+ width: 145px;
+}
+
+.inner .form_top .top_right li #region {
+ width: 205px;
+}
+/* 폼 버튼 */
+
+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;
+}
+
+/* 모바일 반응형 웹, 브라우저 크기가 780이하일 때 header*/
+@media all and (max-width: 560px) {
+ section .inner {
+ max-width: 560px;
+ min-width: 360px;
+ /* background-color: rgb(127, 255, 136); */
+ margin: 0;
+ }
+ section h1 {
+ font-size: 2.4rem;
+ width: 150px;
+ }
+
+ .form_top {
+ width: 360px;
+ margin: 0 auto;
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .inner .form_top .top_right li {
+ padding: 10px;
+ font-size: 1.4rem;
+ }
+ .inner .form_top .top_right label {
+ padding-right: 10px;
+ }
+}
+
+@media all and (max-width: 360px) {
+ section .inner {
+ max-width: 360px;
+ min-width: 360px;
+ /* background-color: rgb(127, 255, 136); */
+ margin: 0;
+ }
+ section h1 {
+ font-size: 2.4rem;
+ }
+
+ .form_top {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .inner .form_top .top_right li {
+ padding: 10px;
+ font-size: 1.2rem;
+ }
+ .inner .form_top .top_right label {
+ padding-right: 10px;
+ }
+}
diff --git a/public/css/user.css b/public/css/user.css
new file mode 100644
index 000000000..ab6701877
--- /dev/null
+++ b/public/css/user.css
@@ -0,0 +1,151 @@
+@keyframes move {
+ from {
+ top: 0px;
+ left: 0px;
+ }
+ to {
+ top: 0px;
+ left: 170px;
+ }
+}
+
+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;
+ margin: 40px auto;
+ display: block;
+ margin: auto;
+ width: 180px;
+ padding-top: 40px;
+ font-weight: 500;
+}
+
+section .top {
+ /* background-color: aqua; */
+ position: relative;
+ height: 100px;
+}
+
+section .user-search {
+ display: flex;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ justify-content: center;
+ align-items: center;
+ margin-right: 10px;
+}
+
+section .user-search .material-symbols-outlined {
+ animation: move 1.5s linear forwards;
+ position: relative;
+}
+
+section .user-search input {
+ /* width: 30px;
+ height: 50px; */
+ padding: 10px;
+ border-radius: 20px;
+ border: none;
+ outline: none;
+}
+
+section .user-delete-button {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+}
+
+section .inner .top .user-delete-button button {
+ background-color: #c7a88c;
+ color: #fff;
+ text-align: center;
+ padding: 10px;
+ border-radius: 6px;
+ cursor: pointer;
+ width: 130px;
+ display: block;
+ border: none;
+ font-size: 1rem;
+ margin-left: 20px;
+}
+
+section .user-profile .user-list {
+ display: flex;
+ justify-content: space-around;
+}
+
+section .user-profile .user-list span {
+ padding: 30px;
+}
+
+section .user-profile .user-list .list-tit {
+ padding: 0 20px 0 20px;
+}
+
+section .user-profile .user-list-item .list-item a {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ text-decoration: none;
+ color: #55433c;
+}
+
+section .user-profile .user-list-item .list-item a .user-image {
+ width: 150px;
+ height: 200px;
+ padding: 0 10px 0 20px;
+}
+
+section .user-profile .user-list-item .list-item div {
+ padding: 0 35px;
+}
+
+/* footer */
+footer .info {
+ height: 200px;
+}
+
+@media all and (max-width: 560px) {
+ section .inner {
+ max-width: 360px;
+ min-width: 300px;
+ }
+
+ .form_top {
+ display: flex;
+ }
+
+ section .user-profile .user-list {
+ display: none;
+ }
+
+ /* section .user-profile hr:nth-last-of-type(1) {
+ display: none;
+ }
+ section .user-profile hr:nth-last-of-type(2) {
+ display: none;
+ } */
+
+ section .user-profile .user-list-item .list-item a {
+ display: flex;
+ flex-direction: column;
+ }
+
+ section .inner .top .user-delete-button button {
+ display: none;
+ }
+
+ section .user-profile .user-list-item .list-item a input {
+ display: none;
+ }
+ section .user-profile .user-list-item .list-item a div {
+ padding: 10px;
+ }
+}
diff --git a/public/html/detail_profile.html b/public/html/detail_profile.html
new file mode 100644
index 000000000..1f8141475
--- /dev/null
+++ b/public/html/detail_profile.html
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
+ cupid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ menu
+
+
+
+
+
+