# header and footer responsive web design

src/common.module.scss

@@ -26,12 +26,14 @@ body {
     font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
     margin: 0;
     padding: 0;
-    background-color: #F5F5DD;
+    background-color: #FFFFFF;
     min-height: 1080px; /* 최소 높이 설정 */
+
 }
 
-main {
+body main {
     min-height: 1080px; /* 최소 높이 설정 */
+    padding-top: 60px; /* 헤더 높이만큼 패딩을 추가 */
 }
 
 a {

src/components/admin/approval/ApprovalTable.js

@@ -14,6 +14,8 @@ import ApprovalButtons from "./ApprovalButton";
 import TansPagination from "./TansPagination";
 import TansTable from "./TansTable";
 import ApprovalSummary from "./ApprovalSummary";
+import {checkAuthToken, getRefreshToken, getToken, getUserRole} from "../../../utils/authUtil";
+import {useNavigate} from "react-router-dom";
 
 const ApprovalTable = () => {
   const [data, setData] = useState([]);
@@ -23,6 +25,7 @@ const ApprovalTable = () => {
   const [startDate, setStartDate] = useState(new Date('2024-07-01'));
   const [endDate, setEndDate] = useState(new Date());
   const [stats, setStats] = useState({});
+  const navigate = useNavigate();
 
   const table = useReactTable({
     data,
@@ -37,6 +40,7 @@ const ApprovalTable = () => {
       rowSelection,
     },
   });
+
   const fetchApprovals = async () => {
     console.log('fetchApprovals 실행중!')
 
@@ -46,15 +50,18 @@ const ApprovalTable = () => {
     // const token = localStorage.getItem('token');
     // const refreshToken = localStorage.getItem('refreshToken');
 
+    let userRole = getUserRole();
+    console.log("userRole :",userRole);
+
     const res = await fetch(
       `/admin/approve?start=${startISO}&end=${endISO}`,
       {
         method: 'GET',
         headers: {
           'Content-Type' : 'application/json',
           'Cache-Control': 'no-cache',
-          // 'Authorization' : 'Bearer ' + getUserToken(),
-          // 'refreshToken': refreshToken,
+          // 'Authorization' : 'Bearer ' + getToken(),
+          // 'refreshToken': getRefreshToken(),
         },
       });
     if(!res.ok) {
@@ -86,6 +93,24 @@ const ApprovalTable = () => {
     fetchApprovals();
   }, [startDate, endDate]);
 
+  // useEffect 훅 사용하여 admin이 아닐 경우 접근 제한
+  useEffect(() => {
+  debugger
+    const userInfo = checkAuthToken(navigate);
+
+        if (userInfo) {
+          const requiredRole = 'admin'; // 단일 역할을 설정
+          const userRole = getUserRole(); // 사용자 역할 가져오기
+
+          if (userRole !== requiredRole) { // 문자열 비교
+            alert('접근 권한이 없습니다.');
+            navigate('/main');
+            return;
+          }
+        }
+  },
+  []);
+
   return (
     <div className={styles['table-section']}>
       <ApprovalSummary stats={stats}/>

src/components/auth/LoginForm.js

@@ -28,6 +28,27 @@ const LoginForm = ({ userType, onVerificationSent }) => {
         return emailRegex.test(email);
     };
 
+    //admin : customer 테이블에 저장되지만, role은 admin으로 저장됨
+    const checkAdminDupId = async (email) => {
+        try {
+            const response = await fetch(`/customer/check?email=${email}`);
+            const result = await response.json();
+            if (result) {
+                console.log(`입력하신 이메일 [ ${email} ] 은 customer 회원입니다.`);
+                setIsExistingUser(true);
+                return true;
+            } else {
+                console.error(`입력하신 이메일 [ ${email} ] 은 customer 회원이 아닙니다.`);
+                setIsExistingUser(false);
+                return false;
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            return false;
+        }
+    }
+
+    //customer
     const checkCustomerDupId = async (email) => {
         try {
             const response = await fetch(`/customer/check?email=${email}`);
@@ -47,6 +68,7 @@ const LoginForm = ({ userType, onVerificationSent }) => {
         }
     }
 
+    //store
     const checkStoreDupId = async (email) => {
         try {
             const response = await fetch(`/store/check?email=${email}`);
@@ -73,6 +95,8 @@ const LoginForm = ({ userType, onVerificationSent }) => {
                 return await checkCustomerDupId(email);
             case 'store':
                 return await checkStoreDupId(email);
+            case 'admin':
+                return await checkAdminDupId(email);
             default:
                 return false;
         }

src/components/auth/SignUpForm.js

@@ -31,6 +31,26 @@ const SignUpForm = ({ userType, onVerificationSent }) => {
     return emailRegex.test(email);
   };
 
+    //admin : customer 테이블에 저장되지만, role은 admin으로 저장됨
+    const checkAdminDupId = async (email) => {
+        try {
+            const response = await fetch(`/email/check?email=${email}`);
+            const result = await response.json();
+            if (!result) {
+                console.log(`입력하신 이메일 [ ${email} ] 은 admin 회원이 아닙니다.`);
+                setIsExistingUser(false);
+                return true;
+            } else {
+                console.error(`입력하신 이메일 [ ${email} ] 은 admin 회원입니다.`);
+                setIsExistingUser(true);
+                return false;
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            return false;
+        }
+    };
+
   //customer
   // 새로운 아이디 -> 중복검사 후 no -> 회원가입하기로 유도
   const checkCustomerDupId = async (email) => {
@@ -79,6 +99,8 @@ const checkDupId = async (email) => {
       return await checkCustomerDupId(email);
     case 'store':
       return await checkStoreDupId(email);
+      case 'admin' :
+          return await checkAdminDupId(email);
     default:
       return false;
   }
@@ -99,7 +121,7 @@ const sendVerificationLinkForSignUp = async (email) => {
           }),
       });
       if (response.ok) {
-          console.log('이메일이 성공적으로 전달되었습니다.',userType,email);
+          console.log('이메일이 성공적으로 전달되었습니다. usertype, email 확인하기 : ',userType,email);
           return true;
       } else {
           console.error('Failed to send verification link');

src/components/header/MyInfo.js

@@ -31,6 +31,8 @@ const MyInfo = () => {
                         localStorage.setItem('userImage', data.productImg);
                     } else if (getUserRole() === 'customer') {
                         localStorage.setItem('userImage', data.profileImage);
+                    } else if (getUserRole() === 'admin') {
+                        localStorage.setItem('userImage', data.profileImage);
                     }
 
                     // 닉네임이 null 일 경우 저장하지 않음
@@ -59,8 +61,12 @@ const MyInfo = () => {
     }
 
     return (
+        <>
+        {/*알림창*/}
+        <Notification email={userInfo.email} role={getUserRole()} />
+
         <div className={styles.myInfoContainer}>
-            <Notification email={userInfo.email} role={getUserRole()} />
+
             <span className={styles.myInfo}>
                 {/*안녕하세요 {getSubName() ? getSubName() : userInfo.email}님!*/}
             </span>
@@ -86,9 +92,22 @@ const MyInfo = () => {
                             onClick={() => handleIconClick("/customer")}
                         />
                     </>
+                ) : getUserRole() === 'admin' ? (
+                    <>
+                        {/* Admin 아이콘과 프로필 이미지 */}
+
+                        <img
+                            src={userInfo.profileImage}
+                            alt="Customer Profile"
+                            className={styles.profileImage}
+                            onClick={() => handleIconClick("/customer")}
+                        />
+                        <span className={styles.admin}>ADMIN</span>
+                    </>
                 ) : null}
             </div>
         </div>
+        </>
     );
 };
 

src/components/header/MyInfo.module.scss

@@ -7,11 +7,6 @@
   margin-left: 60px;
 }
 
-.myInfoContainer {
-  display: flex;
-  align-items: center;
-}
-
 .myIconContainer {
   margin-left: auto; /* 오른쪽 끝으로 이동 */
   display: flex;
@@ -27,3 +22,20 @@
   cursor: pointer;
   border: #03684e solid;
 }
+
+.admin {
+  position: absolute;
+  top: 55px;
+  font-size: 12px;
+}
+
+@media (max-width: 400px) and (max-height: 844px) {
+  .myIconContainer {
+    display: none;
+  }
+
+  .notificationIcon {
+    position: absolute;
+    left: 40px
+  }
+}

src/components/socket/Notification.module.scss

@@ -68,4 +68,13 @@
   50% {
     opacity: 0;
   }
-}
+}
+
+// header 알림아이콘 반응형 크기
+@media (max-width: 400px) {
+
+  .notify-icon {
+    position: absolute;
+    right: 10px;
+  }
+}

src/layout/Footer.module.scss

@@ -71,10 +71,10 @@
 }
 
 .copyRight {
-  font-size: 24px;
+  font-size: 22px;
   position: absolute;
-  bottom: -35px;
   right: 100px;
+  bottom: 1px;
 }
 
 .footerLinks {
@@ -116,7 +116,13 @@
   font-size: 280px;
   width: 100%;
   max-width: 1920px;
-  margin-bottom: -80px;
+  margin-bottom: -40px;
   letter-spacing: 15px;
   text-align: center;
+}
+
+@media (max-width: 400px) and (max-height: 844px) {
+  .footer {
+    display: none;
+  }
 }