사원 관리 디자인

board-front/src/App.tsx

@@ -15,6 +15,8 @@ import {
   MAIN_PATH,
   NOTICE_LIST_PATH,
   NOTICE_WRITE_PATH,
+  PERMISSION_ADD_PATH,
+  PERMISSION_MANAGEMENT_PATH,
 } from "constant";
 import { AUTH_PATH } from "constant";
 import { SEARCH_PATH } from "constant";
@@ -33,6 +35,8 @@ import User from "types/interface/user.interface";
 import Employee from "views/Menu/employee/sign-up";
 import NoticeWrite from "views/Menu/notice/write";
 import EmployeeManagement from "views/Menu/employee/management";
+import PermissonAdd from "views/Menu/permission/add";
+import PermissonManagement from "views/Menu/permission/management";
 
 //          component: 어플리케이션 컴포넌트          //
 function App() {
@@ -88,6 +92,13 @@ function App() {
           path={EMPLOYEE_MANAGEMENT_PATH()}
           element={<EmployeeManagement />}
         />
+
+        <Route path={PERMISSION_ADD_PATH()} element={<PermissonAdd />} />
+        <Route
+          path={PERMISSION_MANAGEMENT_PATH()}
+          element={<PermissonManagement />}
+        />
+
         <Route path={NOTICE_LIST_PATH()} element={<NoticeList />} />
         <Route path={NOTICE_WRITE_PATH()} element={<NoticeWrite />} />
 

board-front/src/constant/index.ts

@@ -34,10 +34,13 @@ export const BOARD_UPDATE_PATH = (boardNumber: string | number) =>
 export const EMPLOYEE_ADD_PATH = () => "/employee/sign-up";
 
 // 사원 관리 페이지 경로를 반환하는 함수
-export const EMPLOYEE_MANAGEMENT_PATH = () => "employee/management";
+export const EMPLOYEE_MANAGEMENT_PATH = () => "/employee/management";
 
-// 권한 관리 페이지 경로를 반환하는 함수
-export const PERMISSION_MANAGEMENT_PATH = () => "/menu/permisson";
+// 권한 추가 페이지 경로를 반환하는 함수
+export const PERMISSION_ADD_PATH = () => "/permisson/add";
+
+// 권한 목록 페이지 경로를 반환하는 함수
+export const PERMISSION_MANAGEMENT_PATH = () => "/permisson/management";
 
 // 공지사항 목록 페이지 경로를 반환하는 함수
 export const NOTICE_LIST_PATH = () => "/notice/list";

board-front/src/layouts/Header/index.tsx

@@ -15,6 +15,7 @@ import {
   NOTICE_LIST_PATH,
   NOTICE_WRITE_PATH,
   EMPLOYEE_ADD_PATH,
+  PERMISSION_ADD_PATH,
 } from "constant";
 import { useCookies } from "react-cookie";
 import { useBoardStore, useLoginuserStore } from "stores";
@@ -42,7 +43,10 @@ export default function Header() {
   const [isNoticeWritePage, setNoticeWritePage] = useState<boolean>(false);
   const [isBoardUPdatePage, setBoardUPdatePage] = useState<boolean>(false);
   const [isUserPage, setUserPage] = useState<boolean>(false);
-  const [isEmployeePage, setEmployeePage] = useState<boolean>(false);
+  const [isNoticePage, setNoticePage] = useState<boolean>(false);
+  const [isEmployeeAddPage, setEmployeeAddPage] = useState<boolean>(false);
+  const [isEmployeeManagementPage, setEmployeeManagementPage] =
+    useState<boolean>(false);
   const navigate = useNavigate();
 
   //           function: 네비게이트 함수          //
@@ -296,8 +300,16 @@ export default function Header() {
     const isUserPage = pathname.startsWith(USER_PATH(""));
     setUserPage(isUserPage);
 
-    const isEmployeePage = pathname.startsWith(EMPLOYEE_MANAGEMENT_PATH());
-    setEmployeePage(isEmployeePage);
+    const isNoticePage = pathname.startsWith(EMPLOYEE_ADD_PATH());
+    setNoticePage(isNoticePage);
+
+    const isEmployeeAddPage = pathname.startsWith(NOTICE_LIST_PATH());
+    setEmployeeAddPage(isEmployeeAddPage);
+
+    const isEmployeeManagementPage = pathname.startsWith(
+      EMPLOYEE_MANAGEMENT_PATH()
+    );
+    setEmployeeManagementPage(isEmployeeManagementPage);
   }, [pathname]);
 
   useEffect(() => {
@@ -359,8 +371,18 @@ export default function Header() {
               />
               {showSubMenu === "permission" && (
                 <div className="sub-menu">
-                  <div>권한 추가</div>
-                  <div>권한 목록</div>
+                  <div
+                    onClick={() => onMenuClickHandler(PERMISSION_ADD_PATH())}
+                  >
+                    권한 추가
+                  </div>
+                  <div
+                    onClick={() =>
+                      onMenuClickHandler(PERMISSION_MANAGEMENT_PATH())
+                    }
+                  >
+                    권한 목록
+                  </div>
                 </div>
               )}
             </div>
@@ -389,14 +411,20 @@ export default function Header() {
         )}
 
         <div className="header-right-box">
-          {(isAuthPage || isMainpage || isSearchPage || isBoardDetailPage) && (
-            <SearchButton />
-          )}
+          {(isAuthPage ||
+            isMainpage ||
+            isSearchPage ||
+            isBoardDetailPage ||
+            isNoticePage ||
+            isEmployeeAddPage ||
+            isEmployeeManagementPage) && <SearchButton />}
           {(isMainpage ||
             isSearchPage ||
             isBoardDetailPage ||
             isUserPage ||
-            isEmployeePage) && <MyPageButton />}
+            isNoticePage ||
+            isEmployeeAddPage ||
+            isEmployeeManagementPage) && <MyPageButton />}
           {(isBoardWritePage || isBoardUPdatePage || isNoticeWritePage) && (
             <UploadButton />
           )}

board-front/src/views/Board/Detail/index.tsx

@@ -193,14 +193,14 @@ export default function BoardDetail() {
                   className="board-detail-update-button"
                   onClick={onUpdateButtonClickHandler}
                 >
-                  {"Update"}
+                  {"수정"}
                 </div>
                 <div className="divider"></div>
                 <div
                   className="board-detail-delete-button"
                   onClick={onDeleteButtonClickHandler}
                 >
-                  {"Delete"}
+                  {"삭제"}
                 </div>
               </div>
             )}
@@ -425,6 +425,7 @@ export default function BoardDetail() {
                 {"댓글 "}
                 <span className="emphasis">{totalCommentCount}</span>
               </div>
+
               <div className="board-detail-bottom-comment-list-container">
                 {viewList.map((item) => (
                   <CommentItem commentListItem={item} />

board-front/src/views/Board/Update/style.css

@@ -34,6 +34,7 @@
 
   color: rgba(0, 0, 0, 1);
 
+  font-family: "Gimhaegaya";
   font-size: 32px;
   font-weight: 500;
   line-height: 140%;
@@ -54,6 +55,8 @@
   resize: none;
 
   color: rgba(0, 0, 0, 0.7);
+
+  font-family: "Gimhaegaya";
   font-size: 19px;
   font-weight: 500;
   line-height: 150%;

board-front/src/views/Board/Write/style.css

@@ -34,6 +34,7 @@
 
   color: rgba(0, 0, 0, 1);
 
+  font-family: "Gimhaegaya";
   font-size: 32px;
   font-weight: 500;
   line-height: 140%;
@@ -52,7 +53,7 @@
   outline: none;
   background: none;
   resize: none;
-
+  font-family: "Gimhaegaya";
   color: rgba(0, 0, 0, 0.7);
   font-size: 19px;
   font-weight: 500;

board-front/src/views/Menu/employee/management/style.css

@@ -1,33 +1,52 @@
-/* frontend/src/components/UserList.css */
-
-.user-list-container {
-  padding: 20px;
+/* 기본 스타일 */
+.container {
+  max-width: 1200px; /* 최대 너비를 설정하여 가운데 정렬 */
+  margin: 0 auto; /* 중앙 정렬 */
+  padding: 20px; /* 여백 추가 */
 }
 
-.user-table {
-  width: 100%;
-  border-collapse: collapse;
+/* 제목 스타일 */
+h2 {
+  font-size: 24px; /* 제목 크기 */
+  margin-bottom: 20px; /* 아래 여백 추가 */
+  text-align: center; /* 가운데 정렬 */
+  color: #333; /* 텍스트 색상 */
 }
 
-.user-table th,
-.user-table td {
-  border: 1px solid #ddd;
-  padding: 8px;
-  text-align: left;
+/* 테이블 스타일 */
+.table {
+  width: 100%; /* 전체 너비 사용 */
+  border-collapse: collapse; /* 테두리 겹침 제거 */
 }
 
-.user-table th {
-  background-color: #f2f2f2;
+.table th,
+.table td {
+  padding: 12px 15px; /* 셀 여백 */
+  text-align: left; /* 왼쪽 정렬 */
+  border: 1px solid #ddd; /* 경계선 */
 }
 
-.user-table tr:nth-child(even) {
-  background-color: #f9f9f9;
+/* 테이블 헤더 스타일 */
+.table thead {
+  background-color: rgba(0, 0, 0, 0.8);
+  color: #fff; /* 텍스트 색상 */
 }
 
-.user-table tr:hover {
-  background-color: #ddd;
+.table tbody tr:nth-child(even) {
+  background-color: #f2f2f2; /* 짝수 행 배경색 */
 }
 
-.user-table img {
-  border-radius: 50%;
+.table tbody tr:hover {
+  background-color: #e1e1e1; /* 마우스 호버 시 배경색 */
+}
+
+/* 이미지 스타일 */
+.table img {
+  border-radius: 50%; /* 원형 이미지 */
+}
+
+/* 오류 메시지 스타일 */
+p {
+  color: red; /* 오류 텍스트 색상 */
+  text-align: center; /* 가운데 정렬 */
 }

board-front/src/views/Menu/notice/write/style.css

@@ -33,7 +33,7 @@
   resize: none;
 
   color: rgba(0, 0, 0, 1);
-
+  font-family: "Gimhaegaya";
   font-size: 32px;
   font-weight: 500;
   line-height: 140%;
@@ -52,7 +52,7 @@
   outline: none;
   background: none;
   resize: none;
-
+  font-family: "Gimhaegaya";
   color: rgba(0, 0, 0, 0.7);
   font-size: 19px;
   font-weight: 500;

board-front/src/views/Menu/permission/add/index.tsx

@@ -0,0 +1,3 @@
+export default function PermissonAdd() {
+  return <div>권한 추가 페이지</div>;
+}

board-front/src/views/Menu/permission/management/index.tsx

@@ -0,0 +1,3 @@
+export default function PermissonManagement() {
+  return <div>권한 목록 페이지</div>;
+}