[SSD-145] 타임페이퍼 상세 페이지 예외처리 및 기능 구현 (#87)

* [SSD-145] fix: Alert css 수정

* [SSD-145] fix: signUp InvalidMessage 계산 로직 버그 수정

* [SSD-145] feat: 바텀 버튼 fixed 구현

* [SSD-145] feat: 무한 스크롤 구현

* [SSD-145] fix: postit content css 수정

* [SSD-145] feat: TimePaperDetail 페이지 Error Alert 구현

* [SSD-145] feat: 잠긴 타임페이퍼 예외처리 구현

Author: lxodud

frontend/src/api/api.js

@@ -100,8 +100,13 @@ export const api = {
     return response;
   },
 
-  getPostits: async (timepaperId) => {
-    const response = await apiInstance.get(`/timepapers/${timepaperId}/postits`);
+  getPostits: async (timepaperId, page, size = 10) => {
+    const response = await apiInstance.get(`/timepapers/${timepaperId}/postits`, {
+      params: {
+        page: page,
+        size: size,
+      },
+    });
     return response;
   },
 
@@ -114,8 +119,8 @@ export const api = {
     return response;
   },
 
-  deletePostit: async (postitId) => { 
-    const response = await apiInstance.delete(`/postits/${postitId}`)
+  deletePostit: async (postitId) => {
+    const response = await apiInstance.delete(`/postits/${postitId}`);
     return response;
   },
 

frontend/src/components/Alert/Alert.jsx

@@ -3,11 +3,13 @@ import styles from './Alert.module.css';
 
 export default function Alert({ message, buttonTitle, onClick }) {
   return (
-    <div className={styles.container}>
-      <div className={styles.message}>{message}</div>
-      <button className={styles.button} onClick={onClick}>
-        {buttonTitle}
-      </button>
+    <div className={styles.alertOverlay}>
+      <div className={styles.alert}>
+        <div className={styles.message}>{message}</div>
+        <button className={styles.button} onClick={onClick}>
+          {buttonTitle}
+        </button>
+      </div>
     </div>
   );
 }

frontend/src/components/Alert/Alert.module.css

@@ -1,16 +1,27 @@
-.container {
-  position: absolute;
-  background-color: white;
+.alertOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1500;
+}
+
+.alert {
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  width: 260px;
+  height: 180px;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
   align-items: center;
-  font-family: var(--pretendard-bold);
-  font-size: 3rem;
-  z-index: 1000;
-  border-radius: 15px;
+  justify-content: center;
 }
 
 .message {
@@ -20,11 +31,12 @@
   margin-top: 10%;
   width: 80%;
   text-align: center;
+  margin-bottom: 20%;
 }
 
 .button {
   width: 80%;
-  height: 20%;
+  height: 25%;
   border-radius: 5px;
   border: none;
   background-color: var(--orange-color);

frontend/src/components/Loading/Loading.module.css

@@ -1,5 +1,5 @@
 .loadingOverlay {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;

frontend/src/main.jsx

@@ -5,9 +5,9 @@ import { Provider } from 'react-redux';
 import store from './store/store';
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
+  // <StrictMode>
     <Provider store={store}>
       <App />
     </Provider>
-  </StrictMode>,
+  // </StrictMode>,
 );

frontend/src/pages/login/Login.jsx

@@ -72,13 +72,11 @@ export default function Login() {
     <>
       <div className={styles.container}>
         {isAlertShow && (
-          <div className={styles.alertContainer}>
             <Alert
               buttonTitle={'확인'}
               message={'로그인 실패했습니다.'}
               onClick={handleAlertButtonClick}
             ></Alert>
-          </div>
         )}
         <img src={staticImagePath.timepaperLogo} className="logo-image" />
         <form action="" className={styles.formContainer}>

frontend/src/pages/login/Login.module.css

@@ -6,16 +6,6 @@
   align-items: center;
 }
 
-.alertContainer {
-  position: absolute;
-  top: 60%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 300px;
-  min-height: 210px;
-}
-
-
 .formContainer {
   display: flex;
   flex-direction: column;

frontend/src/pages/signup/SignUp.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import styles from './SignUp.module.css';
 import BottomButton from '../../components/BottomButton/BottomButton';
 import { api } from '../../api/api';
@@ -129,14 +129,16 @@ export default function SignUp() {
 
   const handlePasswordChange = (e) => {
     const value = e.target.value.replace(/(\s*)/g, '');
-    setPassword(value);
-
     const check = /[`~!@#$%^&*|\\\'\";:\/?]/gi;
 
     setVerification((prev) => ({
       ...prev,
       passwordConstraints: check.test(value) && value.length >= 8,
     }));
+    setPassword(value);
+
+    console.log(value)
+    console.log(check.test(value) && value.length >= 8)
   };
 
   const handlePasswordCheck = (e) => {
@@ -188,17 +190,15 @@ export default function SignUp() {
       : styles.invalidMessageVisible;
   };
 
+  const resolvedPasswordInvalidStyle = useMemo(() => {
+    return resolveInvalidMessageStyle(verification.passwordConstraints, password);
+  }, [verification.passwordConstraints, password]);
+
   return (
     <>
       <div className={styles.signUpContainer}>
         {isAlertShow && (
-          <div className={styles.alertContainer}>
-            <Alert
-              buttonTitle="확인"
-              message={alertMessage}
-              onClick={handleAlertButtonClick}
-            ></Alert>
-          </div>
+          <Alert buttonTitle="확인" message={alertMessage} onClick={handleAlertButtonClick}></Alert>
         )}
         <div className={styles.signUpForm}>
           <div>
@@ -257,7 +257,7 @@ export default function SignUp() {
             />
             <br />
             <span
-              className={resolveInvalidMessageStyle(verification.passwordConstraints, password)}
+              className={resolvedPasswordInvalidStyle}
             >
               비밀번호는 특수부호를 포함 8자이상 작성해주세요
             </span>

frontend/src/pages/signup/SignUp.module.css

@@ -5,15 +5,6 @@
   margin: 0 auto;
 }
 
-.alertContainer {
-  position: absolute;
-  top: 60%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 300px;
-  min-height: 210px;
-}
-
 .signUpForm {
   min-width: 390px;
   display: flex;
@@ -68,6 +59,7 @@
   background-color: #c8c8c8 !important; /* ✅ 강제 적용 */
   cursor: not-allowed;
   color: gray;
+  padding-left: 3%;
 }
 
 .fieldsInput::placeholder {

frontend/src/pages/time-paper-create/TimePaperCreate.jsx

@@ -98,13 +98,11 @@ export default function TimePaperCreate() {
       <form>
         <div className={styles.container}>
           {isError && (
-            <div className={styles.alertContainer}>
               <Alert
                 buttonTitle={'확인'}
                 message={errorMessage}
                 onClick={handleAlertButtonClick}
               ></Alert>
-            </div>
           )}
           <div className={styles.inputContainer}>
             <UnderBarInput