Merge pull request #111 from GPGT-Algorithm-Study/dev

[Feat] 관리자 페이지 크롤링, 경고 ON/OFF 기능 추가

src/api/userSetting.js

@@ -0,0 +1,41 @@
+import axios from 'axios';
+import { getHeaderRefreshTokenConfig } from 'utils/auth';
+
+const PREFIX_URL = '/api/v1/user/setting';
+
+/**
+ * 전체 사용자의 설정 정보를 가져온다.
+ */
+export function getAllUserSettingInfo() {
+  return axios.get(`${PREFIX_URL}/all`, getHeaderRefreshTokenConfig());
+}
+
+/**
+ * 특정 사용자의 설정 정보를 가져온다.
+ */
+export function getUserSettingInfo(bojHandle) {
+  return axios.get(
+    `${PREFIX_URL}?bojHandle=${bojHandle}`,
+    getHeaderRefreshTokenConfig(),
+  );
+}
+
+/**
+ * 특정 사용자의 경고 설정을 토글한다.
+ */
+export function toggleUserWarningSetting(bojHandle) {
+  return axios.put(
+    `${PREFIX_URL}/toggle/warning?bojHandle=${bojHandle}`,
+    getHeaderRefreshTokenConfig(),
+  );
+}
+
+/**
+ * 특정 사용자의 크롤링 설정을 토글한다.
+ */
+export function toggleUserScrapingSetting(bojHandle) {
+  return axios.put(
+    `${PREFIX_URL}/toggle/scraping?bojHandle=${bojHandle}`,
+    getHeaderRefreshTokenConfig(),
+  );
+}

src/pages/Admin/UserSetting/index.jsx

@@ -0,0 +1,147 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Card, Content, ScrollButton, Title, User, UserWrapper } from './style';
+import useScroll from 'hooks/useScroll';
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
+import useSWR from 'swr';
+import fetcher from 'utils/fetcher';
+import { USER_SETTING_PREFIX_URL } from 'utils/constants';
+import { ToggleButton } from './style';
+import {
+  toggleUserScrapingSetting,
+  toggleUserWarningSetting,
+} from 'api/userSetting';
+import { toast } from 'react-toastify';
+
+function UserSetting() {
+  const { data: userSetting, mutate: mutateSettings } = useSWR(
+    `${USER_SETTING_PREFIX_URL}/all`,
+    fetcher,
+  );
+
+  const [
+    leftArrowHovering,
+    rightArrowHovering,
+    setArrowHovering,
+    horizontalScrollRef,
+    handleNextButtonClick,
+  ] = useScroll();
+
+  const onClickToggleScraping = (setting) => {
+    const isAgree = confirm(
+      '<' +
+        setting.bojHandle +
+        '>의 크롤링 설정을 ' +
+        (setting.scrapingOn ? 'ON' : 'OFF') +
+        ' -> ' +
+        (setting.scrapingOn ? 'OFF' : 'ON') +
+        '(으)로 변경하시겠습니까?\n',
+    );
+    if (!isAgree) return;
+    toggleUserScrapingSetting(setting.bojHandle)
+      .then((res) => {
+        if (res.status !== 200)
+          //에러 처리
+          console.log(res);
+        toast.success('크롤링 설정이 변경되었습니다.');
+        mutateSettings();
+        return;
+      })
+      .catch((e) => {
+        const { data } = e.response;
+        if (data && data.code == 400) {
+          toast.error(data.message);
+          return;
+        }
+      });
+  };
+
+  const onClickToggleWarning = (setting) => {
+    const isAgree = confirm(
+      '<' +
+        setting.bojHandle +
+        '>의 경고 설정을 ' +
+        (setting.scrapingOn ? 'ON' : 'OFF') +
+        ' -> ' +
+        (setting.scrapingOn ? 'OFF' : 'ON') +
+        '(으)로 변경하시겠습니까?\n',
+    );
+    if (!isAgree) return;
+    toggleUserWarningSetting(setting.bojHandle)
+      .then((res) => {
+        if (res.status !== 200)
+          //에러 처리
+          console.log(res);
+        toast.success('경고 설정이 변경되었습니다.');
+        mutateSettings();
+        return;
+      })
+      .catch((e) => {
+        const { data } = e.response;
+        if (data && data.code == 400) {
+          toast.error(data.message);
+          return;
+        }
+      });
+  };
+
+  if (!userSetting) return null;
+
+  console.log(userSetting);
+
+  return (
+    <Card>
+      <Title>유저 설정</Title>
+      <Content>
+        <UserWrapper ref={horizontalScrollRef}>
+          {userSetting.map((setting) => (
+            <User key={setting.bojHandle}>
+              <div>{setting.bojHandle}</div>
+              <ToggleButton
+                isActive={setting.scrapingOn}
+                onClick={() => onClickToggleScraping(setting)}
+              >
+                {setting.scrapingOn ? '크롤링 ON' : '크롤링 OFF'}
+              </ToggleButton>
+              <ToggleButton
+                isActive={setting.warningOn}
+                onClick={() => onClickToggleWarning(setting)}
+              >
+                {setting.warningOn ? '경고 ON' : '경고 OFF'}
+              </ToggleButton>
+            </User>
+          ))}
+        </UserWrapper>
+        <ScrollButton
+          onClick={() => {
+            handleNextButtonClick('prev');
+          }}
+          onMouseOver={() => setArrowHovering('prev', true)}
+          onMouseOut={() => setArrowHovering('prev', false)}
+          type="prev"
+        >
+          {leftArrowHovering && (
+            <div>
+              <FaChevronLeft />
+            </div>
+          )}
+        </ScrollButton>
+        <ScrollButton
+          onClick={() => {
+            handleNextButtonClick('next');
+          }}
+          onMouseOver={() => setArrowHovering('next', true)}
+          onMouseOut={() => setArrowHovering('next', false)}
+          type="next"
+        >
+          {rightArrowHovering && (
+            <div>
+              <FaChevronRight />
+            </div>
+          )}
+        </ScrollButton>
+      </Content>
+    </Card>
+  );
+}
+
+export default UserSetting;

src/pages/Admin/UserSetting/style.jsx

@@ -0,0 +1,82 @@
+import styled from '@emotion/styled';
+import { CommonCard } from 'style/commonStyle';
+export const Card = styled(CommonCard)`
+  position: relative;
+  flex-wrap: nowrap;
+  padding: 20px 0 20px 0;
+`;
+
+export const UserWrapper = styled.div`
+  margin-left: 10px;
+  margin-right: 10px;
+  display: flex;
+  overflow-x: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+export const Content = styled.div`
+  position: relative;
+  display: flex;
+`;
+
+export const User = styled.div`
+  width: 130px;
+  display: flex;
+  flex: 0 0 auto;
+  padding: 10px 0 10px 0;
+  flex-direction: column;
+  align-items: center;
+  font-weight: bold;
+  font: 0.9rem;
+  & div {
+    margin-bottom: 20px;
+  }
+`;
+
+export const Title = styled.div`
+  position: relative;
+  top: 0;
+  left: 0;
+  font-weight: bold;
+  margin-bottom: 25px;
+  padding-left: 25px;
+`;
+
+export const ScrollButton = styled.button`
+  border: none;
+  position: absolute;
+  background: transparent;
+  text-align: center;
+  cursor: pointer;
+  z-index: 999;
+  right: ${(props) => (props.type == 'next' ? '0' : '')};
+  left: ${(props) => (props.type == 'prev' ? '0' : '')};
+  height: 120px;
+  & div {
+    color: #b6b6b6;
+  }
+`;
+
+export const LastLoginDate = styled.div`
+  font-size: 12px;
+  white-space: pre-line;
+  text-align: center;
+`;
+
+export const ToggleButton = styled.button`
+  border: none;
+  background: transparent;
+  background-color: ${(props) => (props.isActive ? '#04aa6d' : 'crimson')};
+  padding: 4px 7px;
+  display: inline-block;
+  border-radius: 4px;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  font-size: 12px;
+`;

src/pages/Admin/index.jsx

@@ -9,6 +9,7 @@ import { CardWrapper, ComponentWrapper } from './style';
 import { getAllComplaint } from 'api/complaint';
 import ComplaintManagement from './ComplaintManagement';
 import { SkeletonTheme } from 'react-loading-skeleton';
+import UserSetting from './UserSetting';
 
 function Admin() {
   const complaint = getAllComplaint()
@@ -30,6 +31,7 @@ function Admin() {
         <ShowAllUserLogs />
         <UserManageList />
       </CardWrapper>
+      <UserSetting />
     </div>
   );
 }

src/utils/constants.js

@@ -6,6 +6,7 @@ export const BOARD_PAGE_SIZE = 10;
 export const MY_BOARD_PAGE_SIZE = 5;
 export const PREFIX_URL = '/api/v1';
 export const USER_PREFIX_URL = '/api/v1/user';
+export const USER_SETTING_PREFIX_URL = '/api/v1/user/setting';
 export const STAT_PREFIX_URL = '/api/v2/stat';
 export const REC_PREFIX_URL = '/api/v1/recommend';
 export const PRB_PREFIX_URL = '/api/v1/problem';