merge

parkrocket · Jun 1, 2023 · 482744d · 482744d
1 parent 481bc30
commit 482744d
Show file tree

Hide file tree

Showing 9 changed files with 621 additions and 228 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
+    // 기존 특성에 대한 설명을 보려면 가리킵니다.
+    // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요.
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "localhost에 대해 Chrome 시작",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,7 +39,8 @@
     "sass": "^1.62.1",
     "styled-components": "^5.3.10",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "xlsx": "^0.18.5"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/components/Pagination.jsx b/src/components/Pagination.jsx
@@ -6,7 +6,11 @@ const Paging = (props) => {
     const navigate = useNavigate();
 
     function pageChangeHandler(page) {
-        navigate(`${props.path}${page}`);
+        let url = `${props.path}${page}`;
+        if (props.searchText !== undefined) {
+            url += `?category=${props.category}&searchText=${props.searchText}`;
+        }
+        navigate(url);
     }
 
     return (

diff --git a/src/pages/Routes.tsx b/src/pages/Routes.tsx
@@ -37,7 +37,7 @@ export const Routes = () => {
         <Route path="/board/:boardId" element={Auth(BoardList,true)} />
         <Route path="/board/:boardId/:wrNo" element={Auth(BoardView,true)} />
         <Route path="/board/:boardId/write" element={Auth(BoardWrite,true)} />
-        <Route path="/board/page/:page" element={Auth(BoardList,true)} />
+        <Route path="/board/:boardId/page/:page" element={Auth(BoardList,true)} />
         <Route path="/board/update/:boardId/:wrNo" element={Auth(BoardWrite,true)} />
         <Route path="/dblook" element={<DbLook />} />
         <Route path="/passwordcheck" element={Auth(PasswordCheck,true)} />

diff --git a/src/pages/admin/User/UserList.jsx b/src/pages/admin/User/UserList.jsx
@@ -7,9 +7,11 @@ import ManageAccountsIcon from "@mui/icons-material/ManageAccounts";
 import adminUserListStyle from "../../../Css/adminUserList.module.scss";
 import adminStyle from "../../../Css/admin.module.scss";
 import moment from "moment";
+import * as xlsx from "xlsx";
 
 function UserList() {
     const [userList, setUserList] = useState([]);
+    const [userExcelList, setUserExcelList] = useState([]);
     const [count, setCount] = useState(0);
     const [checkItems, setCheckItems] = useState([]);
 
@@ -53,8 +55,8 @@ function UserList() {
 
     const userListArray = userList.map((user, index) => {
         const listDateTime = user.user_datetime
-                ? moment(user.user_datetime).format("YYYY-MM-DD HH:mm:ss")
-                : "";
+            ? moment(user.user_datetime).format("YYYY-MM-DD HH:mm:ss")
+            : "";
         return (
             <li key={user.user_no}>
                 <div className={`${adminUserListStyle.check_box}`}>
@@ -71,7 +73,11 @@ function UserList() {
                 <p className={`${adminUserListStyle.user_nickname}`}>{user.user_nickname}</p>
                 <p className={`${adminUserListStyle.user_datetime}`}>{listDateTime}</p>
                 <p>
-                    <Link to={`/admin/users/update/${user.user_no}`} className={`${adminUserListStyle.retouch_btn}`}>수정</Link>
+                    <Link
+                        to={`/admin/users/update/${user.user_no}`}
+                        className={`${adminUserListStyle.retouch_btn}`}>
+                        수정
+                    </Link>
                 </p>
             </li>
         );
@@ -96,6 +102,28 @@ function UserList() {
         }
     }
 
+    function userExcelHandler(e) {
+        if (checkItems.length === 0) {
+            alert(`다운로드할 데이터가 없습니다.`);
+
+            return;
+        }
+
+        if (window.confirm(`${checkItems.length}개를 엑셀다운로드 하시겠습니까?`)) {
+            const data = { memberList: checkItems, listCount: listCount, page: params.page };
+
+            axios.post(`${SERVER_URL}/api/admin/users/excelDown`, data).then((response) => {
+                const ws = xlsx.utils.json_to_sheet(response.data.list);
+
+                const wb = xlsx.utils.book_new();
+
+                xlsx.utils.book_append_sheet(wb, ws, "Sheet1");
+
+                xlsx.writeFile(wb, "users.xlsx");
+            });
+        }
+    }
+
     return (
         <div className={`${adminStyle.admin_outer}`}>
             <div className={`${adminUserListStyle.container} ${adminStyle.container}`}>
@@ -124,7 +152,16 @@ function UserList() {
                     {userListArray}
                 </ul>
                 <div className={`${adminUserListStyle.delete_box}`}>
-                    <button onClick={userCheckHandler} className={`${adminUserListStyle.delete_btn}`}>삭제</button>
+                    <button
+                        onClick={userExcelHandler}
+                        className={`${adminUserListStyle.delete_btn}`}>
+                        엑셀 다운로드
+                    </button>
+                    <button
+                        onClick={userCheckHandler}
+                        className={`${adminUserListStyle.delete_btn}`}>
+                        삭제
+                    </button>
                 </div>
                 <div className={`boardlist_pagination_box ${adminUserListStyle.pagination}`}>
                     <Paging

diff --git a/src/pages/board/BoardList.jsx b/src/pages/board/BoardList.jsx
@@ -8,18 +8,17 @@ import { SERVER_URL } from "../Config";
 import moment from "moment";
 import Paging from "../../components/Pagination";
 
-
 function BoardList() {
     const [List, setList] = useState([]);
     const [count, setCount] = useState(0);
     const [boardSubject, setBoardSubject] = useState("");
-    const [searchParams, setSearchParams] = useSearchParams();
-    const [category, setCategory] = useState("");
+    const [searchParams] = useSearchParams();
+    const [category, setCategory] = useState("subject");
     const [searchText, setSearchText] = useState("");
 
-    console.log(searchParams.get("search"))
     const pageList = 8;
     let params = useParams();
+
     const navigate = useNavigate();
 
     if (params.page === undefined) {
@@ -49,7 +48,8 @@ function BoardList() {
                 list: pageList,
                 page: params.page,
                 boardId: params.boardId,
-                searchText: searchText
+                searchText: searchText,
+                category: category,
             })
             .then((response) => {
                 setList(response.data.list);
@@ -85,7 +85,7 @@ function BoardList() {
     function selectChangeHandler(e) {
         setCategory(e.target.value);
     }
-    
+
     return (
         <div>
             <Head></Head>
@@ -100,33 +100,44 @@ function BoardList() {
                 </div>
                 <div className={boardListStyle.board_wrap}>
                     <ul className={`${boardListStyle.board_list}`}>{boardList}</ul>
-                    <form action="">
+                    <form action={`/board/${params.boardId}/page/1`}>
                         <fieldset>
                             <ul className={`${boardListStyle.search_list}`}>
                                 <li>
-                                    <select name="category" id="" value={category} onChange={selectChangeHandler}>
-                                        <option value="cate1">전체</option>
-                                        <option value="cate2">제목</option>
-                                        <option value="cate3">작성자</option>
-                                        <option value="cate4">댓글</option>
+                                    <select
+                                        name="category"
+                                        id=""
+                                        value={category || ""}
+                                        onChange={selectChangeHandler}>
+                                        <option value="subject">제목</option>
+                                        {/**<option value="cate3">작성자</option>**/}
+                                        <option value="content">본문</option>
                                     </select>
                                 </li>
                                 <li>
-                                    <input type="text" name="searchText" defaultValue={searchText} />
+                                    <input
+                                        type="text"
+                                        name="searchText"
+                                        defaultValue={searchText}
+                                    />
                                 </li>
                                 <li>
-                                    <button >검색</button>
+                                    <button>검색</button>
                                 </li>
                             </ul>
                         </fieldset>
                     </form>
                 </div>
                 <div className="boardlist_pagination_box">
-                    <Paging
-                        count={count}
-                        page={Number(params.page)}
-                        list={pageList}
-                        path="/board/page/"></Paging>
+                    {count && (
+                        <Paging
+                            count={count}
+                            page={Number(params.page)}
+                            list={pageList}
+                            path={`/board/${params.boardId}/page/`}
+                            category={category}
+                            searchText={searchText}></Paging>
+                    )}
                 </div>
             </div>
         </div>