[SSD-152] feat: 타임페이퍼 잠금 페이지 예외처리 (#90)

Author: lxodud

frontend/src/pages/time-paper-detail/TimePaperDetail.jsx

@@ -23,6 +23,8 @@ export default function TimePaperDetail() {
   const [selectedPostit, setSelectedPostit] = useState(null); // 선택된 포스트잇 저장
   const [isError, setIsError] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
+
+  const [isScrollLoading, setIsScrollLoading] = useState(false)
   const navigate = useNavigate();
   const dispatch = useDispatch();
 
@@ -40,7 +42,6 @@ export default function TimePaperDetail() {
       dispatch(startLoading());
       try {
         const timePaperResponse = await api.getTimepaper(timepaperId);
-        console.log(timePaperResponse.data.data);
         if (timePaperResponse && timePaperResponse.data && timePaperResponse.data.data) {
           const timePaperData = timePaperResponse.data.data;
           if (timePaperData.locked) {
@@ -72,17 +73,18 @@ export default function TimePaperDetail() {
     }
 
     dispatch(startLoading());
+    setIsScrollLoading(true)
 
     try {
       const response = await api.getPostits(timepaperId, currentPage);
       const postits = response.data.data.postits;
       const next = response.data.data.hasNext;
-      console.log(hasNext);
       setHasNext(next);
       setPostits((prev) => [...prev, ...postits]);
     } catch {
     } finally {
       dispatch(finishLoading());
+      setIsScrollLoading(false)
     }
   };
 
@@ -131,14 +133,11 @@ export default function TimePaperDetail() {
 
   const handleScroll = useCallback(
     ([entry], observer) => {
-      if (entry.isIntersecting && hasNext && !isFirstRender && !isLoading) {
-        console.log(hasNext);
-        console.log(!isFirstRender);
-        console.log(!isLoading);
+      if (entry.isIntersecting && hasNext && !isFirstRender && !isScrollLoading) {
         setCurrentPage(currentPage + 1);
       }
     },
-    [currentPage, isFirstRender, isLoading, hasNext],
+    [currentPage, isFirstRender, isScrollLoading, hasNext],
   );
 
   useEffect(() => {
@@ -245,6 +244,7 @@ export default function TimePaperDetail() {
         </div>
       </div>
       <div ref={bottomRef}></div>
+      {isScrollLoading && <div>로딩중......</div>}
     </>
   );
 }

frontend/src/pages/time-paper-detail/TimePaperDetail.module.css

@@ -42,15 +42,17 @@
 
 .overlay {
   position: absolute;
-  top: 20%;
+  top: 30%;
   left: 0;
+  bottom: 0%;
   width: 100%;
-  height: 100%;
+  height: 60%;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   overflow: auto;
-  padding: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
   box-sizing: border-box;
 }
 

frontend/src/pages/time-paper-set-lock/TimePaperSetLock.jsx

@@ -8,14 +8,17 @@ import 'react-datepicker/dist/react-datepicker.css';
 import { api } from '../../api/api';
 import { useDispatch } from 'react-redux';
 import { setPageTitle } from '../../store/slices/headerSlice';
+import { finishLoading, startLoading } from '../../store/slices/loadingSlice';
+import Alert from '../../components/Alert/Alert';
 
 export default function TimePaperSetLock() {
   const [email, setEmail] = useState('');
-  const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
   const [errorMessage, setErrorMessage] = useState('제목을 입력해주세요.');
   const [releaseDate, setReleaseDate] = useState(null);
-  const [isLoginButtonEnable, setIsLoginButtonEnable] = useState(false);
+  const [isCapsuleButtonEnable, setIsCapsuleButtonEnable] = useState(false);
+  const [isShowAlert, setIsShowAlert] = useState(false);
+  const [alertMessage, setAlertMessage] = useState('');
   const { timepaperId } = useParams();
   const navigate = useNavigate();
   const location = useLocation();
@@ -37,41 +40,46 @@ export default function TimePaperSetLock() {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    setIsLoginButtonEnable(false);
+    setIsCapsuleButtonEnable(false);
 
-    setLoading(true);
+    dispatch(startLoading());
 
     try {
       const response = await api.lockTimepaper(timepaperId, email, releaseDate);
       navigate(`/timepaper/${response.id}/lock`, { replace: true });
     } catch (err) {
       console.error(err);
-      setError(true);
-      setErrorMessage('타임페이퍼 캡슐화 중 오류가 발생했습니다.');
+      setIsShowAlert(true)
+      setAlertMessage('타임페이퍼 캡슐화 중 오류가 발생했습니다.');
     } finally {
-      setLoading(false);
-      setIsLoginButtonEnable(true);
+      dispatch(finishLoading());
+      setIsCapsuleButtonEnable(true);
     }
   };
 
   useEffect(() => {
     if (!error && email.trim().length !== 0 && releaseDate !== null) {
-      setIsLoginButtonEnable(true);
+      setIsCapsuleButtonEnable(true);
     } else {
-      setIsLoginButtonEnable(false);
+      setIsCapsuleButtonEnable(false);
     }
   }, [email, releaseDate]);
 
   useEffect(() => {
     dispatch(setPageTitle('타임캡슐 생성'));
   }, []);
 
+  const handleAlertButtonClick = () => {
+    setIsShowAlert(false);
+  };
+
   if (!location.state?.authorEmail) {
     return <Navigate to="/404" replace />;
   }
 
   return (
     <>
+      {isShowAlert && <Alert message={alertMessage} buttonTitle={"확인"} onClick={handleAlertButtonClick}></Alert>}
       <form>
         <div className={styles.container}>
           <div className={styles.inputContainer}>
@@ -101,9 +109,9 @@ export default function TimePaperSetLock() {
             </div>
           </div>
           <BottomButton
-            title={loading ? '시간 자물쇠 거는 중...' : '타임페이퍼 캡슐화'}
+            title={'타임페이퍼 캡슐화'}
             onClick={handleSubmit}
-            isEnable={isLoginButtonEnable}
+            isEnable={isCapsuleButtonEnable}
           />
         </div>
       </form>