diff --git a/src/pages/adminhome.js b/src/pages/adminhome.js
index 8c2955e..5d92b99 100644
--- a/src/pages/adminhome.js
+++ b/src/pages/adminhome.js
@@ -158,4 +158,4 @@ function Adminhome(props) {
);
}
-export default Adminhome;
+export default Adminhome;
\ No newline at end of file
diff --git a/src/pages/adminpage.css b/src/pages/adminpage.css
index 9f9e16c..636a763 100644
--- a/src/pages/adminpage.css
+++ b/src/pages/adminpage.css
@@ -1,5 +1,5 @@
@font-face {
- /* CSS θ (/) */
+ /* CSS에서는 경로를 지정할 때 슬래시(/)를 사용*/
font-family: 'NanumBarunGothic';
src: url('../fonts/NanumBarunGothic.eot');
src: url('../fonts/NanumBarunGothic.eot') format('embedded-opentype'),
@@ -46,7 +46,7 @@
display: inline;
border-left: 2px solid #808080;
padding: 0 10px;
- /* ¿ 10px */
+ /* 좌우 여백 10px */
color: #808080;
}
@@ -87,7 +87,7 @@
white-space: nowrap;
cursor: pointer;
padding: 10px 0;
- /* ¿ 10px */
+ /* 좌우 여백 10px */
color: #808080;
}
@@ -178,7 +178,7 @@
white-space: nowrap;
cursor: pointer;
padding: 10px 0;
- /* ¿ 10px */
+ /* 좌우 여백 10px */
color: #808080;
text-align: center; /* Add this line to center-align the menu items */
}
diff --git a/src/pages/adminprofile.css b/src/pages/adminprofile.css
index 30ac005..d9af1e7 100644
--- a/src/pages/adminprofile.css
+++ b/src/pages/adminprofile.css
@@ -17,56 +17,45 @@
/* 가운데 정렬을 위해 추가 */
}
-.profile {
+.profile2 {
display: flex;
flex-direction: column;
align-items: center;
- width: 300px;
- margin-bottom: 30px;
}
-.profile-picture {
- width: 250px;
- height: 250px;
+.admin-profile-picture {
+ width: 200px;
+ height: 200px;
border-radius: 50%;
border: none;
- margin-bottom: 30px;
+ margin-bottom: 10px;
+ border: 2px solid #B33E86;
}
-.profile-picture img {
+.admin-profile-picture img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
-.button-container {
- display: flex;
- height: 50px;
-}
-
-.profile-edit-button1 {
- flex: 1;
+.admin-profile-button-container {
+ width: 100px;
padding: 8px 16px;
background-color: #B33E86;
color: #FFFFFF;
border: 2px solid #B33E86;
font-size: 17px;
font-weight: bold;
- cursor: pointer;
white-space: nowrap;
}
-.profile-edit-button2 {
- flex: 1;
- padding: 8px 16px;
- background-color: white;
- color: #B33E86;
- border: 2px solid #B33E86;
- font-size: 17px;
- font-weight: bold;
+.admin-profile-button-container label {
cursor: pointer;
- white-space: nowrap;
+}
+
+#choose-admin-profile {
+ visibility: hidden;
}
.profile_content {
@@ -101,17 +90,45 @@
border: 1px solid black;
width: 100%;
padding: 5px;
- height: 150px;
+ height: 60px;
+}
+
+#openingHours {
+ border: 1px solid black;
+ width: 30%;
+ padding: 5px;
+}
+
+#dayOff {
+ border: 1px solid black;
+ width: 100%;
+ padding: 5px;
+}
+
+#maxReservationCount {
+ border: 1px solid black;
+ width: 100%;
+ padding: 5px;
}
.nickname,
.introduction,
-.introduction2 {
+.introduction2,
+.opening-hours,
+.day-off,
+.max-reservation-count
+{
display: flex;
align-items: top;
gap: 10px;
}
+.opening-hours2{
+
+ justify-content: space-between;
+ width:100%;
+}
+
.profile_content,
.p-wrapper {
display: flex;
@@ -125,24 +142,16 @@
align-items: center;
}
- .profile {
+ .profile2 {
width: 100%;
margin-bottom: 30px;
}
- .button-container {
- flex-direction: column;
+ .admin-profile-button-container {
height: auto;
margin-top: 20px;
}
- .profile-edit-button1,
- .profile-edit-button2 {
- flex: none;
- width: 100%;
- margin-bottom: 5%;
- }
-
.profile_content {
margin-left: 0;
}
diff --git a/src/pages/adminprofile.js b/src/pages/adminprofile.js
index 6716b0a..5409575 100644
--- a/src/pages/adminprofile.js
+++ b/src/pages/adminprofile.js
@@ -4,9 +4,13 @@ import profile from "../img/profile.png";
function Adminprofile(props) {
let [inputCount, setInputCount] = useState(0);
+ const [openingHours, setOpeningHours] = useState("");
+ const [dayOff, setDayOff] = useState("");
+ const [maxReservationCount, setMaxReservationCount] = useState("");
+ const [selectedImage, setSelectedImage] = useState(null);
const countCharacters = (str) => {
- const regex = /[\x00-\x7F]|[\u3131-\uD79D]|./g; // ASCII 문자, 한글 문자, 그 외의 모든 문자
+ const regex = /[\x00-\x7F]|[\u3131-\uD79D]|./g;
const matches = str.match(regex);
return matches ? matches.length : 0;
};
@@ -16,30 +20,63 @@ function Adminprofile(props) {
const characterCount = countCharacters(inputValue);
setInputCount(characterCount);
};
+
+ const onOpeningHoursChange = (e) => {
+ setOpeningHours(e.target.value);
+ };
+
+ const onDayOffChange = (e) => {
+ setDayOff(e.target.value);
+ };
+
+ const onMaxReservationCountChange = (e) => {
+ setMaxReservationCount(e.target.value);
+ };
+
+ const onImageSelectHandler = (e) => {
+ const file = e.target.files[0];
+ setSelectedImage(file);
+ };
+
return (
-
프로필 수정
+
업체 정보 관리
-
-
-
+
+
+ {selectedImage ? (
+
+ ) : (
-
-
-
-
-
+ )}
+
-
-
+
+
-
-
@@ -49,15 +86,52 @@ function Adminprofile(props) {
-
-
+
+
+
+
+
+
+
+
+
- )
+ );
}
-export default Adminprofile;
\ No newline at end of file
+export default Adminprofile;
diff --git a/src/pages/editprofile.css b/src/pages/editprofile.css
index f8880fc..22602f2 100644
--- a/src/pages/editprofile.css
+++ b/src/pages/editprofile.css
@@ -13,23 +13,23 @@
.detail_1 {
display: flex;
padding-top: 60px;
- justify-content: center; /* 가운데 정렬을 위해 추가 */
+ justify-content: center;
+ /* 가운데 정렬을 위해 추가 */
}
.profile {
display: flex;
flex-direction: column;
align-items: center;
- width: 300px;
- margin-bottom: 30px;
}
-
+
.profile-picture {
width: 250px;
height: 250px;
border-radius: 50%;
border: none;
margin-bottom: 30px;
+ border: 2px solid #B33E86;
}
.profile-picture img {
@@ -38,101 +38,116 @@
object-fit: cover;
border-radius: 50%;
}
-
- .button-container {
- display: flex;
- height: 50px;
- }
-
- .profile-edit-button1 {
- flex: 1;
- padding: 8px 16px;
- background-color: #B33E86;
- color: #FFFFFF;
- border: 2px solid #B33E86;
- font-size: 17px;
- font-weight: bold;
- cursor: pointer;
- white-space: nowrap;
- }
-
- .profile-edit-button2 {
- flex: 1;
- padding: 8px 16px;
- background-color: white;
- color: #B33E86;
- border: 2px solid #B33E86;
- font-size: 17px;
- font-weight: bold;
- cursor: pointer;
- white-space: nowrap;
- }
-
- .profile_content {
- width: 100%;
- margin-left: 20px;
- display: flex;
- flex-direction: column;
- gap: 10px;
- }
-
- .profile_content label {
- width: 100px;
- font-size: 20px;
- font-weight: bold;
- }
-
- #nickname {
- border: 1px solid black;
- width: 100%;
- padding: 5px;
- }
-
- #introduction {
- border: 1px solid black;
- width: 100%;
- padding: 5px;
- height: 290px;
- }
-
- .nickname,
- .introduction {
- display: flex;
- align-items: top;
- gap: 10px;
- }
-
- .profile_content .p-wrapper {
- display: flex;
- justify-content: flex-end;
- }
-
- /* 반응형 웹 스타일 */
+
+.button-container {
+ display: flex;
+ height: 50px;
+}
+
+.button-container label {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 16px;
+ background-color: #B33E86;
+ color: #FFFFFF;
+ border: 2px solid #B33E86;
+ font-size: 17px;
+ font-weight: bold;
+ cursor: pointer;
+ white-space: nowrap;
+}
+
+.profile-edit-button1 {
+ flex: 1;
+ padding: 8px 16px;
+ background-color: #B33E86;
+ color: #FFFFFF;
+ border: 2px solid #B33E86;
+ font-size: 17px;
+ font-weight: bold;
+ cursor: pointer;
+ white-space: nowrap;
+}
+
+.profile-edit-button2 {
+ flex: 1;
+ padding: 8px 16px;
+ background-color: white;
+ color: #B33E86;
+ border: 2px solid #B33E86;
+ font-size: 17px;
+ font-weight: bold;
+ cursor: pointer;
+ white-space: nowrap;
+}
+
+.profile_content {
+ width: 100%;
+ margin-left: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.profile_content label {
+ width: 100px;
+ font-size: 20px;
+ font-weight: bold;
+}
+
+#nickname {
+ border: 1px solid black;
+ width: 100%;
+ padding: 5px;
+}
+
+#introduction {
+ border: 1px solid black;
+ width: 100%;
+ padding: 5px;
+ height: 290px;
+}
+
+.nickname,
+.introduction {
+ display: flex;
+ align-items: top;
+ gap: 10px;
+}
+
+.profile_content .p-wrapper {
+ display: flex;
+ justify-content: flex-end;
+}
+
+/* 반응형 웹 스타일 */
@media screen and (max-width: 768px) {
.detail_1 {
flex-direction: column;
align-items: center;
}
-
+
.profile {
width: 100%;
margin-bottom: 30px;
}
-
+
.button-container {
flex-direction: column;
height: auto;
margin-top: 20px;
}
-
+
.profile-edit-button1,
.profile-edit-button2 {
flex: none;
width: 100%;
margin-bottom: 10px;
}
-
+
.profile_content {
margin-left: 0;
}
-}
+}
\ No newline at end of file
diff --git a/src/pages/editprofile.js b/src/pages/editprofile.js
index 1327428..4f21c72 100644
--- a/src/pages/editprofile.js
+++ b/src/pages/editprofile.js
@@ -1,9 +1,11 @@
import { useEffect, useState } from "react";
import './editprofile.css';
-import profile from "../img/profile.png";
+import defaultProfileImage from "../img/profile.png";
function Editprofile(props) {
let [inputCount, setInputCount] = useState(0);
+ const [selectedImage, setSelectedImage] = useState(null);
+ const [useDefaultImage, setUseDefaultImage] = useState(true);
const countCharacters = (str) => {
const regex = /[\x00-\x7F]|[\u3131-\uD79D]|./g; // ASCII 문자, 한글 문자, 그 외의 모든 문자
@@ -16,19 +18,40 @@ function Editprofile(props) {
const characterCount = countCharacters(inputValue);
setInputCount(characterCount);
};
+ const onImageSelectHandler = (e) => {
+ const file = e.target.files[0];
+ setSelectedImage(file);
+ setUseDefaultImage(false);
+ };
+
return (
프로필 수정
-
-
-
-
-
-
-
-
+
+ {useDefaultImage || !selectedImage ? (
+ /*버튼에서 클릭할 시 바로 selected이미지의 경로를 설정해주는것이나라,
+ 버튼에서는 default사진으로 할것인가에대한 상태만 저장하고, 실제 사진경로를 설정하는 것으 이미지 태그에서
+ */
+
+ ) : (
+
+ )}
+
+
+
+
+