Refactor : responsive page update

src/component/admin/AdminMenu.jsx

@@ -10,17 +10,18 @@ export default function AdminMenu() {
             </div>
             <div className="admin_body">
                 <NavLink to={`/admin/mypage`} className="menu_tab">
-                    소개글 수정
+                    동아리 정보수정
                 </NavLink>
-
-                <div className="menu_tab">모집글 작성</div>
+                <div className="menu_tab">나의 모집글</div>
                 <div className="divider" />
                 <NavLink to={`/admin/mypage/reviews`} className="menu_tab">
                     리뷰 목록
                 </NavLink>
                 <NavLink to={`/admin/mypage/pending`} className="menu_tab">
                     리뷰 승인
                 </NavLink>
+                <div className="divider" />
+                <div className='menu_tab'>비밀번호 변경</div>
             </div>
         </div>
     );

src/component/detail/review/ReviewPage.jsx

@@ -44,7 +44,7 @@ export default function ReviewPage({ clubId, clubName }) {
                 </div>
                 <ReviewStatics clubId={clubId} />
             </div>
-            <div className="divider"></div>
+            <div className="review_divider"></div>
             <ReviewBox clubId={clubId} />
             <ErrorModal isOpen={isModalOpen} message={modalMessage} onClose={closeModal} />
         </div>

src/component/detail/review/ReviewWrite.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import './reviewWrite.css';
 import { useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import axios from 'axios';
+import ErrorModal from '../../modal/ErrorModal';
 
 function ReviewWrite() {
     const btns = [
@@ -43,6 +43,10 @@ function ReviewWrite() {
 
     const [btnActive, setBtnActive] = useState({});
 
+    // 모달창
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [modalMessage, setModalMessage] = useState("");
+
     const handleClick = (type) => {
         setBtnActive((prevActive) => {
             return {
@@ -56,7 +60,17 @@ function ReviewWrite() {
     const onClickNext = async () => {
         const selectedKeywords = Object.keys(btnActive).filter((key) => btnActive[key]);
         console.log(selectedKeywords);
-        navigate(`/clubs/${clubId}/review/comment`, { state: { clubId, selectedKeywords } });
+        if (selectedKeywords.length === 0) {
+            setModalMessage('최소 1개 이상의 키워드를 선택 해주세요!');
+            setIsModalOpen(true);
+        } else {
+            navigate(`/clubs/${clubId}/review/comment`, { state: { clubId, selectedKeywords } });
+        }
+    };
+
+    const closeModal = () => {
+        setIsModalOpen(false);
+        setModalMessage("");
     };
 
     const submitButtonClass = Object.values(btnActive).includes(true) ? 'next-active' : 'next-button';
@@ -80,6 +94,7 @@ function ReviewWrite() {
             <button onClick={onClickNext} className={submitButtonClass}>
                 다음
             </button>
+            <ErrorModal isOpen={isModalOpen} message={modalMessage} onClose={closeModal} />
         </div>
     );
 }

src/component/detail/review/reviewBox.css

@@ -1,5 +1,8 @@
 @media screen and (min-width: 768px) {
     .review_box_wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         margin-bottom: 150px;
     }
 
@@ -60,6 +63,9 @@
 
 @media screen and (max-width: 768px) {
     .review_box_wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         margin-bottom: 150px;
     }
 

src/component/detail/review/reviewComment.module.css

@@ -41,13 +41,14 @@
 }
 
 .buttonContainer {
-    width: 16%;
+    /* width: 16%; */
     display: flex;
     flex-direction: row;
     justify-content: center;
 }
 
 .buttonContainer button {
+    width: 50%;
     height: 35px;
     margin: 20px 5px;
     padding: 5px 10px;

src/component/detail/review/reviewPage.css

@@ -7,7 +7,7 @@
         width: 120%;
     }
 
-    .divider {
+    .review_divider {
         width: 140%;
         border: 0.2px solid #9c9c9c4d;
         margin: 40px 0px 40px 0px;
@@ -20,6 +20,11 @@
         justify-content: space-between;
     }
 
+    .statics_header h3 {
+        font-size: 18px;
+        margin: 0px;
+    }
+
     .review_write_btn {
         display: flex;
         flex-direction: row;
@@ -55,7 +60,7 @@
         width: 120%;
     }
 
-    .divider {
+    .review_divider {
         width: 140%;
         border: 0.2px solid #9c9c9c4d;
         margin: 40px 0px 40px 0px;
@@ -64,9 +69,10 @@
     .statics_header {
         display: flex;
         flex-direction: row;
+        align-items: center;
         justify-content: space-between;
         padding: 39px 0px 15px 0px;
-        font-size: 14px;
+        font-size: 13px;
     }
 
     .review_write_btn {

src/component/detail/review/reviewStatics.css

@@ -71,8 +71,8 @@
 
     .bar_text {
         color: #000;
-        font-size: 14px;
-        font-weight: 700;
+        font-size: 12.5px;
+        font-weight: 600;
         white-space: nowrap;
         overflow: visible;
         padding-left: 7px;

src/component/detail/review/reviewWrite.css

@@ -10,7 +10,7 @@
     height: 40px;
     text-align: center;
     font-family: Noto Sans KR;
-    font-size: 24px;
+    font-size: 22px;
     font-weight: 600;
     line-height: 34.75px;
     margin: auto;
@@ -19,7 +19,8 @@
 }
 
 .button-original {
-    width: 433px;
+    width: 70%;
+    max-width: 433px;
     height: 50px;
     border: 2px;
     border-radius: 10px;
@@ -37,7 +38,8 @@
     background-color: #7bc8e01a;
     border: 1.5px solid #7bc8e0;
     color: #7bc8e0;
-    width: 433px;
+    width: 70%;
+    max-width: 433px;
     height: 50px;
     border-radius: 10px;
     box-shadow: 0px 0px 4px 0px #0000004d;
@@ -52,6 +54,7 @@
 .button_text {
     display: inline-block;
     vertical-align: middle;
+    color: black;
 }
 
 .img {

src/component/layout/Footer.module.css

@@ -5,7 +5,7 @@
         justify-content: center;
         padding-top: 13px;
         margin-bottom: 13px;
-        border-top: 4px solid var(--Main-Color, #7bc8e0);
+        border-top: 2px solid var(--Main-Color, #7bc8e0);
     }
     .font {
         font-family: Noto Sans;
@@ -63,7 +63,7 @@
         justify-content: center;
         padding-top: 13px;
         margin-bottom: 13px;
-        border-top: 4px solid var(--Main-Color, #7bc8e0);
+        border-top: 2px solid var(--Main-Color, #7bc8e0);
     }
     .font {
         font-family: Noto Sans;

src/component/layout/Header.jsx

@@ -91,6 +91,7 @@ export default function Header() {
             // 새 토큰으로 다시 요청
             fetchUserData();
         } catch (error) {
+            console.log(isLogout);
             console.error('토큰 재발급 실패 : ', error);
             if (!isLogout) {
                 setModalMessage(error.response.data.reason);

src/component/layout/header.css

@@ -27,6 +27,7 @@
         border: 3px solid #7bc8e0;
         border-radius: 15px;
         padding-left: 60px;
+        padding-right: 10px;
         margin-top: 0;
     }
 
@@ -290,6 +291,7 @@
         border: 3px solid #7bc8e0;
         border-radius: 15px;
         padding-left: 60px;
+        padding-right: 10px;
         margin-top: 5px;
         background-color: #ffffff;
     }
@@ -313,8 +315,13 @@
         cursor: pointer;
     }
 
+    .user_container img {
+        width: 26px;
+        height: 24px;
+    }
+
     .login_text {
-        font-size: 12px;
+        font-size: 10px;
         font-weight: 500;
         padding-top: 3px;
     }

src/component/login/login.css

@@ -104,6 +104,7 @@
         line-height: 27px;
         width: 150px;
         height: 27px;
+        color: black;
     }
 
     .inner_cont .sign-in-form input[type='submit'],
@@ -117,15 +118,6 @@
         transition: 0.3s;
     }
 
-    /* input {
-        width: 100%;
-        height: 55px;
-        border-radius: 5px;
-        border: 1.3px solid #9c9c9c80;
-        margin: auto;
-        padding: 20px;
-    } */
-
     .email-input {
         width: 100%;
         height: 55px;
@@ -238,11 +230,6 @@
         box-shadow: 0;
     }
 
-    /* .inner_cont .sign-in-form-active .kakao {
-			margin: auto;
-			width: fit-content;
-	} */
-
     .center {
         display: block;
         margin: auto;
@@ -265,6 +252,7 @@
         line-height: 27px;
         width: 120px;
         margin-left: 5px;
+        color: black;
     }
 
     .inner_cont .sign-in-form input[type='submit'],

src/component/modal/ErrorModal.jsx

@@ -7,8 +7,9 @@ export default function ErrorModal({ isOpen, message, onClose }) {
             backgroundColor: "rgba(0, 0, 0, 0.5)"
         },
         content: {
-            width: "410px",
-            height: "150px",
+            width: "80%",
+            maxWidth: "410px",
+            height: "140px",
             margin: "auto",
             borderRadius: "10px",
             boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
@@ -17,7 +18,11 @@ export default function ErrorModal({ isOpen, message, onClose }) {
             flexDirection: "column",
             justifyContent: "center",
             alignItems: "center",
-            textAlign: "center"
+            textAlign: "center",
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -80%)"
         }
     }