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 ? ( + 프로필 사진 + ) : ( 프로필 사진 -
-
- - -
+ )}
+
+
+ + {/* Hidden file input element */} + +
+
- - + +
- -
@@ -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사진으로 할것인가에대한 상태만 저장하고, 실제 사진경로를 설정하는 것으 이미지 태그에서 + */ + 프로필 사진 + ) : ( + 프로필 사진 + )} +
+
+ + +