Merge pull request #239 from STUDIO-EYE/feat/SCRUM-312-MainPageTest

[Fix] PA FAQ 관리 페이지 페이지네이션 하단 고정, 리퀘스트 관리 페이지 답변 보내기 버튼 수정
STUDIO-EYE · Dec 5, 2024 · bc2fe43 · bc2fe43
2 parents 19ca73c + db50050
commit bc2fe43
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 100 deletions.
diff --git a/src/pages/PromotionAdmin/DataEditPage/MenuPage/MenuPage.tsx b/src/pages/PromotionAdmin/DataEditPage/MenuPage/MenuPage.tsx
@@ -26,7 +26,7 @@ function MenuPage() {
     try {
       setIsLoading(true); // 데이터를 가져오는 동안 로딩 시작
       const data = await getAllMenuData();
-  
+
       if (data && Array.isArray(data.data) && data.data.length > 0) {
         const updatedData = data.data
           .map((item: { id: number; menuTitle: string; visibility: boolean; sequence: number; }) => ({
@@ -36,7 +36,7 @@ function MenuPage() {
             sequence: item.sequence,
           }))
           .sort((a: { sequence: number; }, b: { sequence: number; }) => a.sequence - b.sequence); // 오름차순 정렬
-  
+
         setMenuList(updatedData);
       } else {
         await postDefaultMenuData();
@@ -54,11 +54,10 @@ function MenuPage() {
         menuTitle,
         visibility: true,
       }));
-  
+
       await postMenuData(menusToPost);
       fetchMenuData();
     } catch (error) {
-      console.error("Error posting default menu data:", error);
     }
   };
 
@@ -78,7 +77,6 @@ function MenuPage() {
       setMenuList(updatedMenuList);
       await putMenuData(updatedMenuList);
     } catch (error) {
-      console.error("Error updating menu", error);
     }
   };
 
@@ -96,26 +94,17 @@ function MenuPage() {
         fetchMenuData();
       }
     } catch (error) {
-      console.error("Error updating visibility", error);
     }
   };
 
   useEffect(() => {
     fetchMenuData();
   }, []);
 
-  if (isLoading) {
-    return (
-      <Overlay visible={true}>
-        <Spinner />
-      </Overlay>
-    );
-  }
-
   return (
     <Wrapper>
       <ContentBlock>
-        <MenuWrapper>  
+        <MenuWrapper>
           <MenuListSection>
             <TitleWrapper>
               {DATAEDIT_TITLES_COMPONENTS.MENU}
@@ -125,7 +114,9 @@ function MenuPage() {
               <Droppable droppableId="menuList">
                 {(provided: any) => (
                   <MenuList {...provided.droppableProps} ref={provided.innerRef}>
-                    {menuList.length > 0 ? (
+                    {isLoading ? (
+                      <p>데이터를 불러오는 중...</p>
+                    ) : menuList.length > 0 ? (
                       menuList.map((menu, index) => (
                         <Draggable key={menu.id} draggableId={menu.id.toString()} index={index}>
                           {(provided: any) => (
@@ -167,7 +158,6 @@ function MenuPage() {
 
 export default MenuPage;
 
-
 const Wrapper = styled.div`
   font-family: 'pretendard-regular';
   width: 50vw;
@@ -264,33 +254,3 @@ const MenuItem = styled.li`
     transition: 0.2s;
   }
 `;
-
-const spin = keyframes`
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-`;
-
-const Spinner = styled.div`
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-left-color: white;
-  border-radius: 50%;
-  width: 24px;
-  height: 24px;
-  animation: ${spin} 1s linear infinite;
-`;
-
-export const Overlay = styled.div<{ visible: boolean }>`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: ${(props) => (props.visible ? 'flex' : 'none')};
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-`;
diff --git a/src/pages/PromotionAdmin/FaqPage/FAQManagePage.tsx b/src/pages/PromotionAdmin/FaqPage/FAQManagePage.tsx
@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { useQuery } from 'react-query';
 import { IFAQ, getFAQData } from '../../../apis/PromotionAdmin/faq';
@@ -22,6 +22,7 @@ function FAQManagePage() {
   const setIsEditing = useSetRecoilState(dataUpdateState);
   const isEditing = useRecoilValue(dataUpdateState);
   const navigator = useNavigate();
+  const location = useLocation();
   const { data, isLoading, refetch, error } = useQuery<IFAQ[], Error>(['faq', 'id'], getFAQData);
   const [slicedFAQ, setSlicedFAQ] = useState<IFAQ[]>([]);
   const [currentFAQ, setCurrentFAQ] = useState<IFAQ | null>(null);
@@ -44,6 +45,9 @@ function FAQManagePage() {
       const sliced = data.slice(indexOfFirst, indexOfLast);
       setSlicedFAQ(sliced);
 
+      const queryParams = new URLSearchParams(location.search);
+      const page = queryParams.get('page');
+
       if (sliced.length === 0 && currentPage > 1) {
         setCurrentPage((prevPage) => prevPage - 1);
         navigator(`?page=${currentPage - 1}`);
@@ -53,6 +57,17 @@ function FAQManagePage() {
     }
   }, [data, currentPage, FAQsPerPage, navigator]);
 
+  useEffect(() => {
+    const queryParams = new URLSearchParams(location.search);
+    const page = queryParams.get('page');
+
+    if (!page) {
+      navigator('?page=1', { replace: true });
+    } else {
+      setCurrentPage(parseInt(page, 10));
+    }
+  }, [location, navigator]);
+
   const {
     register,
     handleSubmit,
@@ -244,7 +259,7 @@ function FAQManagePage() {
         </ContentBox>
       </LeftContentWrapper>
 
-      {currentFAQ && ( // currentFAQ가 선택된 경우에만 우측 콘텐츠를 보여줌
+      {currentFAQ && (
         <RightContentWrapper>
           <form onSubmit={handleSubmit(onValid)} data-cy="faq-edit-form">
             <ContentBox>
@@ -341,6 +356,7 @@ export default FAQManagePage;
 
 const Wrapper = styled.div`
   display: flex;
+  height: auto;
 `;
 
 const LeftContentWrapper = styled.div``;
@@ -397,6 +413,7 @@ const Button = styled.button`
 
 const ListWrapper = styled.div`
   margin-top: 20px;
+  height: 650px;
 `;
 
 const FAQList = styled.div`
@@ -438,7 +455,7 @@ const FAQQuestion = styled.div`
   text-overflow: ellipsis;
 `;
 const PaginationWrapper = styled.div`
-  margin-top: 30px;
+  bottom: 10px;
 `;
 
 const InputWrapper = styled.div`

diff --git a/src/pages/PromotionAdmin/RequestPage/RequestCheckPage.tsx b/src/pages/PromotionAdmin/RequestPage/RequestCheckPage.tsx
@@ -12,6 +12,7 @@ import { ReactComponent as InfoIcon } from '@/assets/images/PA/infoIcon.svg';
 import Pagination from '@/components/Pagination/Pagination';
 import UserInfo from '@/components/PromotionAdmin/Request/UserInfo';
 import EmailListComponent from '@/components/PromotionAdmin/Request/EmailListComponent';
+import Button from '@/components/PromotionAdmin/DataEdit/StyleComponents/Button';
 
 const MAX_TEXT_LENGTH = 255;
 
@@ -228,40 +229,38 @@ const RequestDetailPage = () => {
               </Wrapper>
               <ButtonWrapper>
                 <Button
-                  data-cy="send-reply-button"
+                  description={'답변 보내기'}
                   onClick={() => {
                     clickedRequest && replyRequest(replyState);
                   }}
-                >
-                  답변 보내기
-                </Button>
-              </ButtonWrapper>
-            </Box>
-          </LeftContainer>
-          <RightContainer data-cy="email-list-container">
-            <Box>
-              <EmailListComponent data-cy="email-list" emailItems={emailItemsSliced} />
-              <ButtonWrapper>
-                <Pagination
-                  data-cy="pagination-component"
-                  postsPerPage={postsPerPage}
-                  totalPosts={emailItems.length}
-                  paginate={paginate}
                 />
-              </ButtonWrapper>
-            </Box>
-          </RightContainer>
-        </>
-      )}
-    </PageWrapper>
+            </ButtonWrapper>
+          </Box>
+        </LeftContainer>
+      <RightContainer data-cy="email-list-container">
+        <Box>
+          <EmailListComponent data-cy="email-list" emailItems={emailItemsSliced} />
+          <ButtonWrapper>
+            <Pagination
+              data-cy="pagination-component"
+              postsPerPage={postsPerPage}
+              totalPosts={emailItems.length}
+              paginate={paginate}
+            />
+          </ButtonWrapper>
+        </Box>
+      </RightContainer>
+    </>
+  )
+}
+    </PageWrapper >
   );
 };
 
 export default RequestDetailPage;
 
 const PageWrapper = styled.div`
   display: flex;
-  margin-left: 100px;
   width: 80vw;
   font-family: 'pretendard';
 `;
@@ -345,23 +344,9 @@ const Answer = styled.div`
 `;
 
 const ButtonWrapper = styled.div`
-  justify-content: space-between;
   padding: 1rem 0;
-  align-items: center;
 `;
 
-const Button = styled.div`
-  cursor: pointer;
-  border: none;
-  background-color: ${(props) => props.theme.color.white.bold};
-  box-shadow: 1px 1px 4px 0.1px #c6c6c6;
-  padding: 0.5rem 1.4rem;
-  border-radius: 0.2rem;
-  font-size: 0.9rem;
-  font-weight: 900;
-  display: flex;
-  align-items: center;
-`;
 
 const StyledTextArea = styled.textarea`
   width: 95%;

diff --git a/src/pages/PromotionAdmin/RequestPage/RequestManagePage.tsx b/src/pages/PromotionAdmin/RequestPage/RequestManagePage.tsx
@@ -202,19 +202,6 @@ const StateText = styled.div<{ requestState: string }>`
   white-space: nowrap;
 `;
 
-const RequestWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between; /* 아이템 간 공간을 균등 분배 */
-  width: 95%;
-  border-bottom: 0.1px solid rgba(0, 0, 0, 0.05);
-  &:hover {
-    cursor: pointer;
-    background-color: #afafaf1d;
-    transition: all ease-in-out 200ms;
-  }
-`;
-
 const DeleteWrapper = styled.div`
   display: flex;
   align-items: center;