Merge branch 'develop' of https://github.com/KEEPER31337/Homepage-Fro…

…nt-R2 into feature/에러_페이지_처리_#666
KEEPER31337 · Oct 3, 2023 · 47b1247 · 47b1247
2 parents 2d0248f + 9a9dec1
commit 47b1247
Show file tree

Hide file tree

Showing 14 changed files with 138 additions and 44 deletions.
diff --git a/src/api/studyApi.ts b/src/api/studyApi.ts
@@ -28,7 +28,12 @@ const useDeleteStudyMutation = () => {
     return axios.delete(`/studies/${studyId}`);
   };
 
-  return useMutation(fetcher);
+  const queryClient = useQueryClient();
+  return useMutation(fetcher, {
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['studies'] });
+    },
+  });
 };
 
 const useGetStudyListQuery = ({ year, season }: { year: number; season: number }) => {

diff --git a/src/components/Input/EmailAuthInput.tsx b/src/components/Input/EmailAuthInput.tsx
@@ -1,11 +1,14 @@
 import React, { forwardRef } from 'react';
-import { StandardTextFieldProps } from '@mui/material';
+import { CircularProgress, StandardTextFieldProps } from '@mui/material';
+import { VscCheck } from 'react-icons/vsc';
 import FilledButton from '@components/Button/FilledButton';
 import StandardInput from './StandardInput';
 
 interface EmailAuthInputProps extends StandardTextFieldProps {
   value: string;
   onChange: React.ChangeEventHandler<HTMLInputElement>;
+  isLoading?: boolean;
+  isSuccess?: boolean;
   inputDisabled?: boolean;
   buttonDisabled?: boolean;
   onAuthButtonClick: () => void;
@@ -17,13 +20,29 @@ const EmailAuthInput = forwardRef(
       className,
       value,
       onChange,
+      isLoading,
+      isSuccess,
       inputDisabled,
       buttonDisabled,
       onAuthButtonClick,
       ...standardTextFieldProps
     }: EmailAuthInputProps,
     ref?: React.ForwardedRef<HTMLDivElement>,
   ) => {
+    const renderEndAdornment = () => {
+      if (isLoading) {
+        return <CircularProgress size={24} />;
+      }
+      if (isSuccess) {
+        return <VscCheck size={24} className="fill-pointBlue" />;
+      }
+      return (
+        <FilledButton small disabled={buttonDisabled} onClick={onAuthButtonClick}>
+          인증 요청
+        </FilledButton>
+      );
+    };
+
     return (
       <StandardInput
         ref={ref}
@@ -34,11 +53,7 @@ const EmailAuthInput = forwardRef(
         value={value}
         onChange={onChange}
         {...standardTextFieldProps}
-        endAdornment={
-          <FilledButton small disabled={buttonDisabled} onClick={onAuthButtonClick}>
-            인증 요청
-          </FilledButton>
-        }
+        endAdornment={renderEndAdornment()}
       />
     );
   },

diff --git a/src/pages/Library/Button/NavigateProfileButton.tsx b/src/pages/Library/Button/NavigateProfileButton.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import memberState from '@recoil/member.recoil';
+import OutlinedButton from '@components/Button/OutlinedButton';
+
+const NavigateProfileButton = () => {
+  const userInfo = useRecoilValue(memberState);
+  const navigate = useNavigate();
+
+  return (
+    <OutlinedButton
+      small
+      onClick={() => {
+        navigate(`/profile/${userInfo?.memberId}/book`);
+      }}
+    >
+      내 서재 가기
+    </OutlinedButton>
+  );
+};
+
+export default NavigateProfileButton;
diff --git a/src/pages/Library/Card/BookCard.tsx b/src/pages/Library/Card/BookCard.tsx
@@ -11,17 +11,15 @@ interface BookCardProps {
 const BookCard = ({ bookInfo, onRequestBook }: BookCardProps) => {
   return (
     <div className="flex h-fit bg-mainBlack p-2">
-      <div className="mr-2 flex h-[120px] w-[85px] bg-middleBlack">
+      <div className="mr-2 flex h-[120px] w-[85px] shrink-0 bg-middleBlack">
         <ServerImg src={bookInfo?.thumbnailPath} alt="library thumbnail" />
       </div>
-      <div className="relative grow p-2">
-        <div>
-          <Typography className="!mb-2 font-semibold">{bookInfo.title}</Typography>
-          <div className="flex space-x-2">
-            <Typography>저자 : {bookInfo.author}</Typography>
-            <span className="text-pointBlue"> | </span>
-            <Typography>권수 : {bookInfo.bookQuantity}</Typography>
-          </div>
+      <div className="relative grow overflow-auto p-2">
+        <Typography className="!mb-2 truncate !font-semibold">{bookInfo.title}</Typography>
+        <div className="flex space-x-2 overflow-auto">
+          <Typography className="truncate">저자 : {bookInfo.author}</Typography>
+          <span className="text-pointBlue"> | </span>
+          <Typography className="shrink-0">권수 : {bookInfo.bookQuantity}</Typography>
         </div>
 
         <div className="absolute bottom-0 right-0">

diff --git a/src/pages/Library/Library.tsx b/src/pages/Library/Library.tsx
@@ -7,6 +7,7 @@ import { useGetBookListQuery, useRequestBorrowBookMutation, useGetBookBorrowsQue
 import usePagination from '@hooks/usePagination';
 import StandardTablePagination from '@components/Pagination/StandardTablePagination';
 import PageTitle from '@components/Typography/PageTitle';
+import NavigateProfileButton from './Button/NavigateProfileButton';
 import BookCard from './Card/BookCard';
 import RequestBookModal from './Modal/RequestBookModal';
 import LibrarySearchSection from './SearchSection/LibrarySearchSection';
@@ -42,12 +43,13 @@ const Library = () => {
       <PageTitle>도서검색</PageTitle>
       <div className="mb-2 flex w-full flex-col items-start justify-between md:mb-5 md:flex-row md:items-center">
         <LibrarySearchSection />
-        <div className="mt-2 flex w-full justify-end md:mt-0">
+        <div className="items-ends mt-2 flex w-full justify-end space-x-4 md:mt-0">
           <BorrowStatus
             librarian={librarian}
             borrowedBookCount={borrowedBookListData?.totalElement || 0}
             maxBorrowableBooks={MAX_BORROWABLE_BOOKS}
           />
+          <NavigateProfileButton />
         </div>
       </div>
       <div className="h-[804px] bg-middleBlack md:h-[402px]">

diff --git a/src/pages/Library/Status/BorrowStatus.tsx b/src/pages/Library/Status/BorrowStatus.tsx
@@ -10,7 +10,7 @@ interface BorrowStatusProps {
 
 const BorrowStatus = ({ librarian, borrowedBookCount, maxBorrowableBooks }: BorrowStatusProps) => {
   return borrowedBookCount !== maxBorrowableBooks ? (
-    <Typography className="text-pointBlue">
+    <Typography className="!flex !items-end text-pointBlue">
       신청 가능 권수 : {maxBorrowableBooks - borrowedBookCount}/{maxBorrowableBooks}
     </Typography>
   ) : (
@@ -26,7 +26,9 @@ const BorrowStatus = ({ librarian, borrowedBookCount, maxBorrowableBooks }: Borr
       }}
       placement="bottom"
     >
-      <Typography className="text-subRed">신청 가능 권 수({maxBorrowableBooks}권)을 초과했습니다.</Typography>
+      <Typography className="!flex !items-end !text-small text-subRed md:!text-paragraph">
+        신청 가능 권 수({maxBorrowableBooks}권)을 초과했습니다.
+      </Typography>
     </Tooltip>
   );
 };

diff --git a/src/pages/Profile/Modal/EditAccountModal.tsx b/src/pages/Profile/Modal/EditAccountModal.tsx
@@ -41,7 +41,11 @@ const EditEmailSection = () => {
     email: getValues('email'),
     enabled: isEmailSent,
   });
-  const { mutate: newEmailAuth } = useNewEmailAuthMutation();
+  const {
+    mutate: newEmailAuth,
+    isLoading: isEmailSendLoading,
+    isSuccess: isEmailSendSuccess,
+  } = useNewEmailAuthMutation();
   const { mutate: editEmail } = useEditEmailMutation();
 
   const handleRequestVerificationCode = () => {
@@ -123,6 +127,8 @@ const EditEmailSection = () => {
               <EmailAuthInput
                 label="새 이메일"
                 {...field}
+                isLoading={isEmailSendLoading}
+                isSuccess={isEmailSendSuccess}
                 error={Boolean(error)}
                 helperText={error?.message}
                 inputDisabled={isEmailSent && checkEmailDuplicationSuccess}

diff --git a/src/pages/SignUp/Section/SignUpThirdInputSection.tsx b/src/pages/SignUp/Section/SignUpThirdInputSection.tsx
@@ -35,7 +35,7 @@ const SignUpThirdInputSection = () => {
     enabled: isEmailSent,
   });
 
-  const { mutate: emailAuth } = useEmailAuthMutation();
+  const { mutate: emailAuth, isLoading: isEmailSendLoading, isSuccess: isEmailSendSuccess } = useEmailAuthMutation();
   const { mutate: signUp } = useSignUpMutation();
 
   const handleRequestVerificationCode = () => {
@@ -103,6 +103,8 @@ const SignUpThirdInputSection = () => {
             <EmailAuthInput
               label="이메일"
               {...field}
+              isLoading={isEmailSent && isEmailSendLoading}
+              isSuccess={isEmailSent && isEmailSendSuccess}
               error={Boolean(error)}
               helperText={error?.message}
               inputDisabled={isEmailSent && checkEmailDuplicationSuccess}

diff --git a/src/pages/Study/Accordion/StudyAccordion.tsx b/src/pages/Study/Accordion/StudyAccordion.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Accordion, AccordionActions, AccordionDetails, AccordionSummary } from '@mui/material';
 import { VscChevronDown } from 'react-icons/vsc';
 
 import useCheckAuth from '@hooks/useCheckAuth';
 import ActionButton from '@components/Button/ActionButton';
 import StudyAccordionBody from './StudyAccordionBody';
 import StudyAccordionHeader from './StudyAccordionHeader';
+import StudyDeleteModal from '../Modal/StudyDeleteModal';
 import type { StudyInfo } from '@api/dto';
 
 interface StudyAccordionProps {
@@ -16,14 +17,15 @@ interface StudyAccordionProps {
 
 const StudyAccordion = ({ study, setStudyModalOpen, setSelectedStudyInfo }: StudyAccordionProps) => {
   const { checkIsMyId } = useCheckAuth();
+  const [studyDeleteModalOpen, setStudyDeleteModalOpen] = useState(false);
 
   const handleStudyEditButtonClick = () => {
     setStudyModalOpen(true);
     setSelectedStudyInfo(study);
   };
 
   const handleStudyDeleteButtonClick = () => {
-    // TODO 스터디 제거 API 호출 후 새로고침(기능 구현 후 console 삭제 예정)
+    setStudyDeleteModalOpen(true);
   };
 
   return (
@@ -47,6 +49,7 @@ const StudyAccordion = ({ study, setStudyModalOpen, setSelectedStudyInfo }: Stud
           </ActionButton>
         </AccordionActions>
       )}
+      {study && <StudyDeleteModal study={study} open={studyDeleteModalOpen} setOpen={setStudyDeleteModalOpen} />}
     </Accordion>
   );
 };

diff --git a/src/pages/Study/Modal/StudyDeleteModal.tsx b/src/pages/Study/Modal/StudyDeleteModal.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Typography } from '@mui/material';
+import { StudyInfo } from '@api/dto';
+import { useDeleteStudyMutation } from '@api/studyApi';
+import ActionModal from '@components/Modal/ActionModal';
+
+interface StudyDeleteModalProps {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  study: StudyInfo;
+}
+
+const StudyDeleteModal = ({ study, open, setOpen }: StudyDeleteModalProps) => {
+  const { mutate: deleteStudy } = useDeleteStudyMutation();
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleDeleteStudy = () => {
+    deleteStudy(
+      { studyId: study.studyId },
+      {
+        onSuccess: () => {
+          handleClose();
+        },
+      },
+    );
+  };
+
+  return (
+    <ActionModal
+      open={open}
+      onClose={handleClose}
+      title="스터디 삭제"
+      modalWidth="xs"
+      actionButtonName="삭제"
+      onActionButonClick={handleDeleteStudy}
+    >
+      <Typography>{study?.title} 스터디를 삭제하시겠습니까?</Typography>
+    </ActionModal>
+  );
+};
+
+export default StudyDeleteModal;
diff --git a/src/pages/admin/SeminarManage/SeminarManage.tsx b/src/pages/admin/SeminarManage/SeminarManage.tsx
@@ -37,7 +37,7 @@ const SeminarManage = () => {
   }, [seminarList]);
 
   const childComponent = ({ key, value }: ChildComponent<AttendSeminarInfo>) => {
-    if (key.slice(0, 4) === 'date') {
+    if (key.slice(0, 4) === 'date' && value) {
       return <SeminarAttendStatus status={(value as MemberSeminarAttendance).attendanceStatus} hasIcon={false} />;
     }
     return value;

diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
@@ -1,24 +1,11 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Box, Container, Divider, Stack } from '@mui/material';
+import { Container, Divider, Stack } from '@mui/material';
 import useLoginMutation from '@api/logInApi';
 import { ReactComponent as Logo } from '@assets/logo/logo_neon.svg';
 import OutlinedButton from '@components/Button/OutlinedButton';
 import StandardInput from '@components/Input/StandardInput';
 
-const HorizonLine = () => {
-  return (
-    <Box
-      sx={{
-        width: '100%',
-        borderBottom: '1px solid #56CFE1',
-        opacity: '30%',
-        margin: '10px 0 10px',
-      }}
-    />
-  );
-};
-
 const Login = () => {
   const [form, setForm] = useState({
     id: '',

diff --git a/src/pages/login/Search/SearchID.tsx b/src/pages/login/Search/SearchID.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Divider, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { CircularProgress, Divider, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { useSearchIdMutation } from '@api/SearchAccountApi';
 import { validateEmail } from '@utils/validateEmail';
 import OutlinedButton from '@components/Button/OutlinedButton';
@@ -15,7 +15,7 @@ const SearchID = () => {
   const [mailAuthenticationModalOpen, setMailAuthenticationModalOpen] = useState(false);
   const [matchInfoModalOpen, setMatchInfoModalOpen] = useState(false);
 
-  const { mutate: searchId } = useSearchIdMutation();
+  const { mutate: searchId, isLoading: isEmailSendLoading } = useSearchIdMutation();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
@@ -75,7 +75,7 @@ const SearchID = () => {
           <Divider className="bg-pointBlue" />
           <div className="mt-10 text-center">
             <OutlinedButton className="w-full sm:w-1/5" onClick={handleConfirmClick} disabled={!isValidEmail}>
-              확인
+              {isEmailSendLoading ? <CircularProgress className="my-1" size={24} /> : <>확인</>}
             </OutlinedButton>
           </div>
           <WarningModal

diff --git a/src/pages/login/Search/SearchPWFirstStep.tsx b/src/pages/login/Search/SearchPWFirstStep.tsx
@@ -24,7 +24,11 @@ interface SearchPWFirstStepProps {
 }
 
 const SearchPWFirstStep = ({ setCurrentStep, form, setForm }: SearchPWFirstStepProps) => {
-  const { mutate: requestAuthcode } = useRequestAuthCodeMutation();
+  const {
+    mutate: requestAuthcode,
+    isLoading: isEmailSendLoading,
+    isSuccess: isEmailSendSuccess,
+  } = useRequestAuthCodeMutation();
   const { data: checkAuthcodeData } = useCheckAuthCodeQuery({
     loginId: form.id,
     email: form.email,
@@ -53,12 +57,12 @@ const SearchPWFirstStep = ({ setCurrentStep, form, setForm }: SearchPWFirstStepP
   };
 
   const handleRequestVerificationCode = () => {
+    setIsSent(true);
     if (form.id && form.email) {
       requestAuthcode(
         { loginId: form.id, email: form.email },
         {
           onSuccess: () => {
-            setIsSent(true);
             setMatchInfoModalOpen(false);
           },
           onError: () => {
@@ -112,6 +116,8 @@ const SearchPWFirstStep = ({ setCurrentStep, form, setForm }: SearchPWFirstStepP
           <EmailAuthInput
             className="w-full sm:w-[70%]"
             inputDisabled={isSent}
+            isLoading={isSent && isEmailSendLoading}
+            isSuccess={isSent && isEmailSendSuccess}
             value={form.email}
             onChange={handleChange}
             buttonDisabled={!isValidEmail || isSent}
@@ -133,7 +139,7 @@ const SearchPWFirstStep = ({ setCurrentStep, form, setForm }: SearchPWFirstStepP
             name="verificationCode"
             value={form.verificationCode}
             onChange={handleChange}
-            disabled={!isSent}
+            disabled={!(isSent && isEmailSendSuccess)}
             expirationTime={DateTime.now().plus({ seconds: TIMER_DURATION_SECOND })}
           />
         </div>