Merge pull request #123 from HGU-WALAB/main

#114 merge

public/index.html

@@ -20,7 +20,7 @@
     rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@900&display=swap" rel="stylesheet" />
 
-  <title>Minimal UI Kit</title>
+  <title>HANSPACE</title>
 
   <meta name="description"
     content="The starting point for your next project with Minimal UI Kit, built on the newest version of Material-UI ©, ready to be customized to your style" />

src/api/userApi.ts

@@ -1,17 +1,6 @@
 import axiosInstance, { endpoints } from 'src/utils/axios';
 
-// TODO : Add type
-// export const userLogin = async (data: any) => {
-//   const response = axiosInstance.post(endpoints.auth.login, data);
-//   return response;
-// };
-
 export const GetFirstInfo = async () => {
   const response = axiosInstance.get(endpoints.auth.info);
   return response;
 };
-
-// export const GetUser = async () => {
-//   const response = await axios.get(endpoints.user.list);
-//   return response;
-// };

src/auth/context/jwt/auth-provider.tsx

@@ -127,12 +127,10 @@ export function AuthProvider({ children }: Props) {
   }, [initialize]);
 
   // LOGIN
-  // const login = useCallback(async (email: string, password: string) => {
-  const login = useCallback(async (name: string, email: string) => {
+  const login = useCallback(async (email: string, password: string) => {
     const data = {
-      name,
       email,
-      // password,
+      password,
     };
 
     const res = await axios.post(`${BASE_URL}${endpoints.auth.login}`, data);

src/auth/context/jwt/utils.ts

@@ -43,7 +43,7 @@ export const tokenExpired = (exp: number) => {
 
   // Test token expires after 10s
   // const timeLeft = currentTime + 10000 - currentTime; // ~10s
-  const timeLeft = exp * 1000 - currentTime;
+  const timeLeft = exp * 10000 - currentTime;
 
   clearTimeout(expiredTimer);
 

src/auth/types.ts

@@ -24,8 +24,7 @@ export type AuthStateType = {
 // ----------------------------------------------------------------------
 
 type CanRemove = {
-  login?: (name: string, email: string) => Promise<void>;
-  // login?: (email: string, password: string) => Promise<void>;
+  login?: (email: string, password: string) => Promise<void>;
   register?: (
     email: string,
     password: string,
@@ -52,8 +51,7 @@ export type JWTContextType = CanRemove & {
   loading: boolean;
   authenticated: boolean;
   unauthenticated: boolean;
-  login: (name: string, email: string) => Promise<void>;
-  // login: (email: string, password: string) => Promise<void>;
+  login: (email: string, password: string) => Promise<void>;
   register: (email: string, password: string, firstName: string, lastName: string) => Promise<void>;
   logout: () => Promise<void>;
 };

src/sections/auth/jwt/jwt-login-view.tsx

@@ -9,13 +9,18 @@ import Alert from '@mui/material/Alert';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 // routes
-import { useRouter } from 'src/routes/hooks';
+import { useSearchParams, useRouter } from 'src/routes/hooks';
 // config
 import { PATH_AFTER_LOGIN } from 'src/config-global';
 // auth
 import { useAuthContext } from 'src/auth/hooks';
 // components
 import FormProvider, { RHFTextField } from 'src/components/hook-form';
+import { IconButton, InputAdornment } from '@mui/material';
+import { RouterLink } from 'src/routes/components';
+import { paths } from 'src/routes/paths';
+import Iconify from 'src/components/iconify';
+import { useBoolean } from 'src/hooks/use-boolean';
 
 // ----------------------------------------------------------------------
 
@@ -24,16 +29,22 @@ export default function JwtLoginView() {
 
   const router = useRouter();
 
+  const searchParams = useSearchParams();
+
+  const returnTo = searchParams.get('returnTo');
+
+  const password = useBoolean();
+
   const [errorMsg, setErrorMsg] = useState('');
 
   const LoginSchema = Yup.object().shape({
-    name: Yup.string().required('name is required'),
     email: Yup.string().required('Email is required').email('Email must be a valid email address'),
+    password: Yup.string().required('Password is required'),
   });
 
   const defaultValues = {
-    name: '최혜림',
     email: '[email protected]',
+    password: '1234',
   };
 
   const methods = useForm({
@@ -49,9 +60,9 @@ export default function JwtLoginView() {
 
   const onSubmit = handleSubmit(async (data) => {
     try {
-      await login?.(data.name, data.email);
+      await login?.(data.email, data.password);
 
-      router.push(PATH_AFTER_LOGIN);
+      router.push(returnTo || PATH_AFTER_LOGIN);
     } catch (error) {
       console.error(error);
       reset();
@@ -61,18 +72,26 @@ export default function JwtLoginView() {
 
   const renderHead = (
     <Stack spacing={2} sx={{ mb: 5 }}>
-      <Typography variant="h4">Sign in to Hanspace</Typography>
+      <Typography variant="h4">Hanspace 입장하기</Typography>
+
+      <Stack direction="row" spacing={0.5}>
+        <Typography variant="body2">회원이 아니세요?</Typography>
+
+        <Link component={RouterLink} href={paths.auth.jwt.register} variant="subtitle2">
+          회원가입
+        </Link>
+      </Stack>
     </Stack>
   );
 
   const renderForm = (
     <Stack spacing={2.5}>
       {!!errorMsg && <Alert severity="error">{errorMsg}</Alert>}
 
-      <RHFTextField name="name" label="name" />
+      {/* <RHFTextField name="name" label="name" /> */}
       <RHFTextField name="email" label="Email address" />
 
-      {/* <RHFTextField
+      <RHFTextField
         name="password"
         label="Password"
         type={password.value ? 'text' : 'password'}
@@ -85,11 +104,7 @@ export default function JwtLoginView() {
             </InputAdornment>
           ),
         }}
-      /> */}
-
-      <Link variant="body2" color="inherit" underline="always" sx={{ alignSelf: 'flex-end' }}>
-        Forgot password?
-      </Link>
+      />
 
       <LoadingButton
         fullWidth

src/sections/home/view.tsx

@@ -39,8 +39,8 @@ export default function HomeView() {
 
   useEffect(() => {
     try {
-      GetFirstInfo().then((res) => {
-        login?.(res.data.name, res.data.email);
+      GetFirstInfo().then((res: any) => {
+        login?.(res.data.email, res.data.password);
         setUserInfo({ email: res.data.email, name: res.data.name, hanRole: res.data.hanRole });
         setDeptInfo(res.data.departmentResponses);
       });

src/sections/manageSite/dept-info.tsx

@@ -19,7 +19,6 @@ import { FormSchema } from './schema';
 
 // ———————————————————————————————————
 // ToDo: 파일 업로드 부분 수정 필요
-// ToDo:  maxReserveCount, userAccept 둘 다 저장은 잘 되는데 userDeptState로 받아올 때 정보가 없다고 뜸
 export default function DepartmentInfoForm() {
   const [userDeptInfo, setUserDeptInfo] = useRecoilState(userDeptState);
   let deptId = '';
@@ -35,20 +34,19 @@ export default function DepartmentInfoForm() {
         siteName: userDeptInfo.siteName || '',
         deptName: userDeptInfo.deptName || '',
         deptImage: userDeptInfo.deptImage || '',
-        userAccept: userDeptInfo.userAccept || false,
-        maxRserveCount: userDeptInfo.maxRserveCount || 0,
+        userAccept: userDeptInfo.userAccept ?? true,
+        maxReserveCount: userDeptInfo.maxReserveCount || 0,
         link: userDeptInfo.link || '',
         extraInfo: userDeptInfo.extraInfo || '',
       };
     }
-    // 기본값을 설정해야 합니다. 예를 들어, userDeptInfo가 객체가 아닐 때 기본값을 설정할 수 있습니다.
     return {
       deptId: 0,
       siteName: '',
       deptName: '',
       deptImage: '',
-      userAccept: false,
-      maxRserveCount: 0,
+      userAccept: true,
+      maxReserveCount: 0,
       link: '',
       extraInfo: '',
     };
@@ -72,7 +70,7 @@ export default function DepartmentInfoForm() {
       deptName: data?.deptName,
       deptImage: data?.deptImage,
       userAccept: Boolean(data?.userAccepts),
-      maxRserveCount: Number(data?.maxReserveCount),
+      maxReserveCount: data?.maxReserveCount,
       link: defaultValues.link,
       extraInfo: defaultValues.extraInfo,
       spaceCount: typeof userDeptInfo === 'object' ? userDeptInfo.spaceCount : null,
@@ -88,14 +86,14 @@ export default function DepartmentInfoForm() {
     const requestData = {
       siteName: data.siteName,
       deptName: data.deptName,
-      maxRserveCount: data.maxRserveCount,
+      maxReserveCount: data.maxReserveCount,
       link: defaultValues.link,
       extraInfo: defaultValues.extraInfo,
       userAccept: data?.userAccept,
       deptImage: imageFile,
     };
 
-    const response = await axiosInstance
+    await axiosInstance
       .patch(`${endpoints.dept.update}/${deptId}`, requestData, {
         headers: {
           'Content-Type': 'multipart/form-data',
@@ -163,7 +161,7 @@ export default function DepartmentInfoForm() {
               />
             </Block>
             <Block label="사용자 최대 예약 가능 날짜">
-              <RHFTextField name="maxRserveCount" type="number" />
+              <RHFTextField name="maxReserveCount" type="number" />
             </Block>
             <Block label="URL 이름">
               <RHFTextField name="link" disabled />

src/sections/manageSite/schema.ts

@@ -5,7 +5,7 @@ import * as Yup from 'yup';
 export const FormSchema = Yup.object().shape({
   siteName: Yup.string().required('siteName name is required'),
   deptName: Yup.string().required('deptName is required'),
-  maxRserveCount: Yup.number().required('Head count is required'),
+  maxReserveCount: Yup.number().required('Head count is required'),
   userAccept: Yup.boolean()
     .nullable()
     .oneOf([true, false], '사용 가능 여부를 선택하세요.')

src/sections/reservelist/view/reserve-list-view.tsx

@@ -18,7 +18,6 @@ import { fTimestamp } from 'src/utils/format-time';
 import { useBoolean } from 'src/hooks/use-boolean';
 // components
 import Label from 'src/components/label';
-import Iconify from 'src/components/iconify';
 import Scrollbar from 'src/components/scrollbar';
 import { useSettingsContext } from 'src/components/settings';
 import {
@@ -96,6 +95,7 @@ export default function ReserveListView() {
   const { refetch } = useQuery(['reserveList', deptId], async () => {
     await axiosInstance.get(`${endpoints.reserve.list}/${deptId}`).then((res) => {
       setTableData(res.data);
+      console.log(res.data);
     });
   });
 
@@ -247,14 +247,14 @@ export default function ReserveListView() {
                 <Tooltip title="Add">
                   <IconButton color="primary" onClick={confirm.onTrue}>
                     <Button variant="outlined" color="primary">
-                      전체 승인
+                      선택 승인
                     </Button>
                   </IconButton>
                 </Tooltip>
                 <Tooltip title="Delete">
                   <IconButton color="primary" onClick={confirm.onTrue}>
                     <Button variant="outlined" color="error">
-                      전체 삭제
+                      선택 삭제
                     </Button>
                   </IconButton>
                 </Tooltip>

src/sections/user/user-quick-edit-form.tsx

@@ -18,16 +18,18 @@ import { IUserItem } from 'src/types/user';
 // components
 import { useSnackbar } from 'src/components/snackbar';
 import FormProvider, { RHFSelect } from 'src/components/hook-form';
+import axiosInstance, { endpoints } from 'src/utils/axios';
 
 // ----------------------------------------------------------------------
 
 type Props = {
   open: boolean;
   onClose: VoidFunction;
   currentUser?: IUserItem;
+  refetch: VoidFunction;
 };
 
-export default function UserQuickEditForm({ currentUser, open, onClose }: Props) {
+export default function UserQuickEditForm({ currentUser, open, onClose, refetch }: Props) {
   const { enqueueSnackbar } = useSnackbar();
 
   const NewUserSchema = Yup.object().shape({
@@ -56,10 +58,14 @@ export default function UserQuickEditForm({ currentUser, open, onClose }: Props)
     try {
       await new Promise((resolve) => setTimeout(resolve, 500));
       reset();
-      onClose();
+      // onClose();
       enqueueSnackbar('Update success!');
 
-      // await axios.patch(endpoints.user.update, { data });
+      // await axiosInstance.patch(endpoints.user.update, { data }).then((res) => {
+      //   refetch();
+      // });
+
+      // TODO: 백엔드 물어보기
 
       console.info('DATA', data);
     } catch (error) {