Merge pull request #128 from waldreg/feature/#77

[Feat] 가입 승인/거절

src/App.tsx

@@ -1,19 +1,20 @@
-import React from "react";
-import { useContext } from "react";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
-import { ReactQueryDevtools } from "react-query/devtools";
-import GlobalStyle from "./styles/GlobalStyle";
-import Setting from "./routes/Setting";
+
+import AuthContext from "./states/auth-context";
 import Board from "./routes/Board";
+import GlobalStyle from "./styles/GlobalStyle";
+import Home from "./routes/Home";
+import JoiningPool from "./routes/Setting/JoiningPool";
 import Layout from "./components/global/Layout/index";
-import Schedule from "./routes/Schedule";
-import JoiningPool from "./routes/JoiningPool";
-import SignupForm from "./components/auth/signup/SignupForm";
 import LoginForm from "./components/auth/login/LoginForm";
-import AuthContext from "./states/auth-context";
+import React from "react";
+import { ReactQueryDevtools } from "react-query/devtools";
 import RewardPage from "./routes/Reward";
-import Home from "./routes/Home";
+import Schedule from "./routes/Schedule";
+import Setting from "./routes/Setting";
+import SignupForm from "./components/auth/signup/SignupForm";
+import { useContext } from "react";
 
 const queryClient = new QueryClient();
 

src/components/auth/login/LoginForm/index.tsx

@@ -1,23 +1,24 @@
-import { Controller, useForm, SubmitHandler } from "react-hook-form";
-import { authAPI } from "../../../../apis/authAPI";
-import { getLoginFormFieldErrorMessage } from "../../../../utils/getErrorMessage";
-import AuthFormInput from "../../../common/authforminput";
-import { Link, useNavigate } from "react-router-dom";
-import { useContext } from "react";
-import AuthContext from "../../../../states/auth-context";
-import ErrorMessage from "../../../common/errormessage";
 import {
+  Button,
   Container,
-  Form,
-  Fields,
   Field,
+  Fields,
+  Form,
   Label,
-  Button,
-  Text,
-  SignupButton,
   Signup,
+  SignupButton,
+  Text,
 } from "./style";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import { Link, useNavigate } from "react-router-dom";
+
+import AuthContext from "../../../../states/auth-context";
+import AuthFormInput from "../../../common/authforminput";
+import ErrorMessage from "../../../common/errormessage";
 import FONT from "../../../../constants/fonts";
+import { authAPI } from "../../../../apis/authAPI";
+import { getLoginFormFieldErrorMessage } from "../../../../utils/getErrorMessage";
+import { useContext } from "react";
 
 interface LoginForm {
   userId: string;
@@ -47,7 +48,7 @@ const LoginForm = () => {
       const response = await authAPI.login(userId, userPassword);
       authCtx.login(response.access_token);
       navigate("/");
-      const TOKEN_EXPIRE_TIME = 60 * 60 * 1000;
+      const TOKEN_EXPIRE_TIME = 1000 * 60 * 60; //60분
       setTimeout(() => {
         window.alert("로그인 유지 토큰이 만료되어 로그아웃됩니다.");
         authCtx.logout();

src/components/board/BoardCategory/index.tsx

@@ -1,7 +1,8 @@
-import { useLocation } from "react-router";
-import FONT from "../../../constants/fonts";
+import { Blank, Item, Items, Link, Text } from "../../global/NavBar/style";
+
 import { BoardCategoryLists } from "../../../interfaces/board";
-import { Blank, Items, Item, Text, Link } from "../../global/NavBar/style";
+import FONT from "../../../constants/fonts";
+import { useLocation } from "react-router";
 
 interface BoardCategoryProps {
   boardCategoryList: BoardCategoryLists;

src/components/board/BoardCategoryList/index.tsx

@@ -1,8 +1,9 @@
+import { Category, CategoryTitle, SettingBlank } from "./style";
+import { settingCategoryId, settingCategoryName } from "../../../states/board";
 import { useRecoilState, useSetRecoilState } from "recoil";
+
 import { BoardCategoryLists } from "../../../interfaces/board";
-import { settingCategoryId, settingCategoryName } from "../../../states/board";
 import FONT from "./../../../constants/fonts";
-import { Category, CategoryTitle, SettingBlank } from "./style";
 import { Item } from "../../character/CharacterList/style";
 
 interface BoardCategoryListsProps {

src/components/character/UserCreateCharacterModal/index.tsx

@@ -1,19 +1,15 @@
-import styled from 'styled-components';
-
-import useAllUserList from '../../../hooks/user/useAllUserList';
-import useEditUserCharacter from '../../../hooks/user/useEditUserCharacter';
-import { useInput } from '../../../hooks/common/useInput';
-import { useUserCheckBox } from '../../../hooks/common/useCheckBox';
-
-import Modal from '../../common/modal';
-import { InputFillThin } from '../../common/inputs/input_fill';
-import { UserCheckBox } from '../../common/checkbox/checkbox';
-import { ButtonBig } from '../../common/buttons/button_big';
-import COLOR from '../../../constants/color';
-
-import { Title } from '../../common/pagetitle/style';
-
-import FONT from '../../../constants/fonts';
+import { ButtonBig } from "../../common/buttons/button_big";
+import COLOR from "../../../constants/color";
+import FONT from "../../../constants/fonts";
+import { InputFillThin } from "../../common/inputs/input_fill";
+import Modal from "../../common/modal";
+import { Title } from "../../common/pagetitle/style";
+import { UserCheckBox } from "../../common/checkbox/checkbox";
+import styled from "styled-components";
+import useAllUserList from "../../../hooks/user/useAllUserList";
+import useEditUserCharacter from "../../../hooks/user/useEditUserCharacter";
+import { useInput } from "../../../hooks/common/useInput";
+import { useUserCheckBox } from "../../../hooks/common/useCheckBox";
 
 const UserCreateCharacterModal = ({
   setIsOpenCreateModal,
@@ -25,14 +21,14 @@ const UserCreateCharacterModal = ({
   const userList = useAllUserList(1, 50);
   const { mutate } = useEditUserCharacter();
 
-  const { value, handleChangeInput, reset } = useInput('');
+  const { value, handleChangeInput, reset } = useInput("");
   const { checkedList, updateCheckList, checkReset } = useUserCheckBox();
 
   const filterUserList = userList?.users.filter(
     (user) => user.character !== name
   );
   const searchUserList =
-    value === ''
+    value === ""
       ? filterUserList
       : filterUserList?.filter((user) =>
           user.name.toLowerCase().includes(value.toLowerCase())
@@ -45,12 +41,12 @@ const UserCreateCharacterModal = ({
   };
 
   return (
-    <Modal onClickToggleModal={() => setIsOpenCreateModal(false)} size={'big'}>
+    <Modal onClickToggleModal={() => setIsOpenCreateModal(false)} size={"big"}>
       <Top>
         <Title style={FONT.HEADING}>유저 목록</Title>
         <InputFillThin
           value={value}
-          placeholder={'유저 이름'}
+          placeholder={"유저 이름"}
           onChange={handleChangeInput}
           reset={reset}
         />
@@ -86,12 +82,12 @@ const UserCreateCharacterModal = ({
 
       <Buttons>
         <ButtonBig
-          content={'취소'}
+          content={"취소"}
           color={COLOR.GRAY2}
           onClick={() => setIsOpenCreateModal(false)}
         />
         <ButtonBig
-          content={'추가'}
+          content={"추가"}
           color={COLOR.GREEN4}
           onClick={() => {
             checkedList.map((user) => handleClickEditUserChar(user.id));

src/components/common/buttons/button_big.tsx

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
-import COLOR from '../../../constants/color';
-import FONT from '../../../constants/fonts';
+import COLOR from "../../../constants/color";
+import FONT from "../../../constants/fonts";
+import styled from "styled-components";
 
 export const ButtonBig = ({
   content,

src/components/common/checkbox/check.tsx

@@ -1,13 +1,11 @@
-import { useState } from 'react';
-import styled from 'styled-components';
-
-import { Permission } from '../../../interfaces/character';
-import { User } from '../../../interfaces/user';
-
-import { CheckIcon } from '../../Icons/BasicIcons';
-
-import COLOR from '../../../constants/color';
-import FONT from '../../../constants/fonts';
+import COLOR from "../../../constants/color";
+import { CheckIcon } from "../../Icons/BasicIcons";
+import FONT from "../../../constants/fonts";
+import { JoiningpoolUser } from "../../../interfaces/joiningpoolUser";
+import { Permission } from "../../../interfaces/character";
+import { User } from "../../../interfaces/user";
+import styled from "styled-components";
+import { useState } from "react";
 
 export interface IProps {
   item: Permission;
@@ -19,6 +17,11 @@ export interface UserProps {
   updateCheckList: any;
 }
 
+export interface JoiningpoolUserProps {
+  item: JoiningpoolUser;
+  updateCheckList: any;
+}
+
 export const PermissionCheck = (props: IProps) => {
   const [isChecked, setIsChecked] = useState(false);
 
@@ -76,11 +79,44 @@ export const UserCheck = (props: UserProps) => {
   );
 };
 
+export const JoiningpoolUserCheck = (props: JoiningpoolUserProps) => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleToggleCheck = (e: any, item: JoiningpoolUser) => {
+    setIsChecked(!isChecked);
+    props.updateCheckList(e.target.checked, item);
+  };
+
+  return (
+    <CheckWrapper>
+      <CheckBox
+        id={props.item.user_id}
+        type="checkbox"
+        value={props.item.name}
+        onChange={(e: any) => handleToggleCheck(e, props.item)}
+        checked={isChecked}
+      />
+      <IconWrapper>
+        <CheckIcon isChecked={isChecked} />
+      </IconWrapper>
+
+      <Text htmlFor={props.item.name} style={FONT.SUBTITLE2}>
+        {props.item.name}
+      </Text>
+      <Id style={FONT.SUBTITLE2}>{props.item.user_id}</Id>
+    </CheckWrapper>
+  );
+};
+
 const CheckWrapper = styled.div`
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 2rem;
   position: relative;
+
+  padding: 1.5rem 0;
+
+  border-bottom: 2px solid #f4f5f3;
 `;
 
 const CheckBox = styled.input<{ checked: boolean }>`
@@ -93,7 +129,7 @@ const CheckBox = styled.input<{ checked: boolean }>`
   border-radius: 0.5rem;
 
   background: ${(props) =>
-    props.checked === true ? `${COLOR.GREEN4}` : 'white'};
+    props.checked === true ? `${COLOR.GREEN4}` : "white"};
 
   cursor: pointer;
 `;
@@ -105,8 +141,10 @@ const IconWrapper = styled.div`
   position: absolute;
 `;
 
-const Text = styled.label``;
+const Text = styled.label`
+  color: ${COLOR.GRAY5};
+`;
 
 const Id = styled.div`
-  color: ${COLOR.GRAY2};
+  color: ${COLOR.GRAY5};
 `;

src/components/common/checkbox/checkbox.tsx

@@ -1,8 +1,9 @@
-import styled from 'styled-components';
-import { PermissionCheck, UserCheck } from './check';
+import { JoiningpoolUserCheck, PermissionCheck, UserCheck } from "./check";
 
-import { Permission } from '../../../interfaces/character';
-import { User } from '../../../interfaces/user';
+import { JoiningpoolUser } from "../../../interfaces/joiningpoolUser";
+import { Permission } from "../../../interfaces/character";
+import { User } from "../../../interfaces/user";
+import styled from "styled-components";
 
 export interface IProps {
   data: Permission[];
@@ -15,6 +16,12 @@ export interface UsersProps {
   type?: string;
 }
 
+export interface JoiningpoolUsersProps {
+  data: JoiningpoolUser[];
+  updateCheckList: any;
+  type?: string;
+}
+
 export const PermissionCheckBox = (props: IProps) => {
   return (
     <PermissionItems>
@@ -46,6 +53,23 @@ export const UserCheckBox = (props: UsersProps) => {
   );
 };
 
+export const JoiningpoolUserCheckBox = (props: JoiningpoolUsersProps) => {
+  return (
+    <JoiningpoolUserItems>
+      {props.data.map((item: JoiningpoolUser) => {
+        return (
+          <UserItem key={item.user_id}>
+            <JoiningpoolUserCheck
+              item={item}
+              updateCheckList={props.updateCheckList}
+            />
+          </UserItem>
+        );
+      })}
+    </JoiningpoolUserItems>
+  );
+};
+
 const PermissionItems = styled.div`
   width: 100%;
   padding: 1rem;
@@ -59,7 +83,7 @@ const PermissionItems = styled.div`
 
 const UserItems = styled.div<{ type: any }>`
   width: 100%;
-  display: ${(props) => (props.type === 'grid' ? 'grid' : 'flex')};
+  display: ${(props) => (props.type === "grid" ? "grid" : "flex")};
   flex-direction: column;
   gap: 1rem;
 
@@ -68,6 +92,12 @@ const UserItems = styled.div<{ type: any }>`
   column-gap: 1rem;
 `;
 
+const JoiningpoolUserItems = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
 const UserItem = styled.div`
   width: 100%;
 `;