프로필 수정 버튼 활성화 & 업체 프로필 수정

awaaaake · Jul 20, 2023 · 4f9ba50 · 4f9ba50
1 parent 583789d
commit 4f9ba50
Show file tree

Hide file tree

Showing 6 changed files with 271 additions and 150 deletions.
diff --git a/src/pages/adminhome.js b/src/pages/adminhome.js
@@ -158,4 +158,4 @@ function Adminhome(props) {
     );
 }
 
-export default Adminhome;
+export default Adminhome;
diff --git 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
@@ -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
@@ -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 (
         <div className='detail'>
-            <h4>프로필 수정</h4>
+            <h4>업체 정보 관리</h4>
             <div className='detail_1'>
-                <div className='profile'>
-                    <div class="profile">
-                        <div className="profile-picture">
+                <div className='profile2'>
+                    <div className="admin-profile-picture">
+                        {selectedImage ? (
+                            <img src={URL.createObjectURL(selectedImage)} alt="프로필 사진" />
+                        ) : (
                             <img src={profile} alt="프로필 사진" />
-                        </div>
-                        <div class="button-container">
-                            <button className="profile-edit-button1">사진 수정</button>
-                            <button className="profile-edit-button2">기본 이미지</button>
-                        </div>
+                        )}
                     </div>
+                    <form method="post" encType="multipart/form-data">
+                        <div className="admin-profile-button-container">
+                            <label htmlFor="choose-admin-profile">사진 등록</label>
+                            {/* Hidden file input element */}
+                            <input
+                                type="file"
+                                id="choose-admin-profile"
+                                name="profilePicture"
+                                accept="image/*"
+                                onChange={onImageSelectHandler}
+                            />
+                        </div>
+                    </form>
                 </div>
                 <div className='profile_content'>
                     <div className='nickname'>
-                        <label for="nickname">업체명</label>
-                        <input type="text" id="nickname" name="nickname" placeholder="닉네임을 입력하세요" />
+                        <label htmlFor="nickname">업체명</label>
+                        <input type="text" id="nickname" name="nickname" placeholder="" />
                     </div>
                     <div className='introduction'>
-                        <label for="introduction">업체소개</label>
-                        <textarea id="introduction" name="introduction" placeholder="자기소개를 입력하세요"
-                            onChange={onTextareaHandler} maxLength="1000"
+                        <label htmlFor="introduction">업체소개</label>
+                        <textarea
+                            id="introduction"
+                            name="introduction"
+                            placeholder=""
+                            onChange={onTextareaHandler}
+                            maxLength="1000"
                         ></textarea>
                     </div>
                     <div className='p-wrapper'>
@@ -49,15 +86,52 @@ function Adminprofile(props) {
                         </p>
                     </div>
                     <div className='introduction2'>
-                        <label for="introduction2">태그</label>
-                        <textarea id="introduction2" name="introduction2" placeholder=""
-                            onChange={onTextareaHandler} maxLength="500"
+                        <label htmlFor="introduction2">태그</label>
+                        <textarea
+                            id="introduction2"
+                            name="introduction2"
+                            placeholder=""
+                            onChange={onTextareaHandler}
+                            maxLength="300"
                         ></textarea>
                     </div>
+                    <div className='opening-hours'>
+                        <label htmlFor="openingHours">오픈 시간</label>
+                        <div className='opening-hours2'>
+                            <input type='time' id='openingHours' name='reservation-time'></input>
+                            <span> ~ </span>
+                            <input type='time' id='openingHours' name='reservation-time'></input>
+                        </div>
+                    </div>
+                    <div className='day-off'>
+                        <label htmlFor="dayOff">휴무일</label>
+                        <input
+                            type="text"
+                            id="dayOff"
+                            name="dayOff"
+                            value={dayOff}
+                            onChange={onDayOffChange}
+                            placeholder="ex) 매주 월요일, 격주 월요일"
+                        />
+                    </div>
+                    <div className='max-reservation-count'>
+                        <label htmlFor="maxReservationCount">최대 예약 건수</label>
+                        <select
+                            id="maxReservationCount"
+                            name="maxReservationCount"
+                            value={maxReservationCount}
+                            onChange={onMaxReservationCountChange}
+                        >
+                            <option value="">선택하세요</option>
+                            <option value="1">1 건</option>
+                            <option value="2">2 건</option>
+                            {/* Add more options as needed */}
+                        </select>
+                    </div>
                 </div>
             </div>
         </div>
-    )
+    );
 }
 
-export default Adminprofile;
+export default Adminprofile;