Merge pull request #241 from STUDIO-EYE/fix/336-Issue-v3

[Fix] PA Recruitment 관리 페이지, PP FAQ 페이지, Recruitment 페이지 이슈 처리
STUDIO-EYE · Dec 6, 2024 · 7fcfbd5 · 7fcfbd5
2 parents f3b0088 + b3d2609
commit 7fcfbd5
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 76 deletions.
diff --git a/src/components/PromotionAdmin/Recruitment/index.tsx b/src/components/PromotionAdmin/Recruitment/index.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { PA_ROUTES } from '@/constants/routerConstants';
 import styled from 'styled-components';
 import NavBtn from './NavBtn';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 const linksData = [
   {
@@ -19,13 +19,21 @@ const linksData = [
 
 function DetailNavigator() {
   const location = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // 페이지가 리로드되었을 때, location.pathname에 따라 조건을 설정
+    if (location.pathname === `${PA_ROUTES.RECRUITMENT}/benefit/manage`) {
+      navigate(`${PA_ROUTES.RECRUITMENT}/benefit/manage`);
+    }
+  }, [location.pathname, navigate]);
 
   return (
     <Wrapper>
       <SideBar>
         {linksData.map((link, index) => {
           const isActive =
-          location.pathname === link.path || location.pathname === link.relatedPaths;
+            location.pathname === link.path || location.pathname === link.relatedPaths;
 
           return (
             <NavBtn

diff --git a/src/pages/PromotionAdmin/FaqPage/FAQManagePage.tsx b/src/pages/PromotionAdmin/FaqPage/FAQManagePage.tsx
@@ -186,7 +186,7 @@ function FAQManagePage() {
     if (isEditing) {
       if (window.confirm('현재 페이지를 나가면 변경 사항이 저장되지 않습니다.\n나가시겠습니까?')) {
         setIsEditing(false);
-        navigator(`${PA_ROUTES.FAQ}/write`);
+        navigator(`${PA_ROUTES.FAQ}/manage`);
       }
     } else {
       navigator(`${PA_ROUTES.FAQ}/write`);

diff --git a/src/pages/PromotionAdmin/RecruitmentPage/BenefitManagePage.tsx b/src/pages/PromotionAdmin/RecruitmentPage/BenefitManagePage.tsx
@@ -83,18 +83,15 @@ function BenefitManagePage() {
       try {
         const response = await deleteBenefitData(id);
         alert('사내 복지가 삭제되었습니다.');
-        console.log(response);
         await refetch();
         setCurrentBenefit(null);
       } catch (error) {
-        console.log(error);
         alert('사내 복지 삭제 중 오류가 발생했습니다.');
       }
     }
   };
 
   const onValid = async (data: IBenefit) => {
-    console.log(currentBenefit);
     const formData = new FormData();
     formData.append(
       'request',
@@ -123,12 +120,10 @@ function BenefitManagePage() {
         try {
           const response = await updateBenefit(formData);
           alert('사내 복지가 수정되었습니다.');
-          console.log(response);
           await refetch();
           setIsEditing(false);
           setImgChange(false);
         } catch (error) {
-          console.log(error);
           alert('사내 복지 수정 중 오류가 발생했습니다.');
         }
       }
@@ -137,12 +132,10 @@ function BenefitManagePage() {
         try {
           const response = await updateBenefitText(formData);
           alert('사내 복지가 수정되었습니다.');
-          console.log(response);
           await refetch();
           setIsEditing(false);
           setImgChange(false);
         } catch (error) {
-          console.log(error);
           alert('사내 복지 수정 중 오류가 발생했습니다.');
         }
       }
@@ -262,16 +255,23 @@ function BenefitManagePage() {
     if (isEditing) {
       if (window.confirm('현재 페이지를 나가면 변경 사항이 저장되지 않습니다.\n나가시겠습니까?')) {
         setIsEditing(false);
-        navigator(`${PA_ROUTES.RECRUITMENT}/benefit/write`);
+      } else {
+        return;
       }
-    } else {
-      navigator(`${PA_ROUTES.RECRUITMENT}/benefit/write`);
     }
+    if ((data?.length || 0) >= 20) {
+      alert('최대 등록 가능한 사내 복지는 20개입니다.');
+      return;
+    }
+
+    navigator(`${PA_ROUTES.RECRUITMENT}/benefit/write`);
   };
+
 
   if (isLoading) return <>Loading...</>;
   if (error) return <>{error.message}</>;
 
+
   return (
     <Wrapper>
       <LeftContentWrapper>

diff --git a/src/pages/PromotionAdmin/RecruitmentPage/BenefitWritePage.tsx b/src/pages/PromotionAdmin/RecruitmentPage/BenefitWritePage.tsx
@@ -112,11 +112,9 @@ function BenefitWritePage() {
       try {
         const response = await postBenefit(formData);
         alert('사내 복지가 등록되었습니다.');
-        console.log(response);
         setIsEditing(false);
         navigator(`${PA_ROUTES.RECRUITMENT}/benefit/manage`, { replace: true });
       } catch (error) {
-        console.log(error);
         alert('사내 복지 등록 중 오류가 발생했습니다.');
       }
     }

diff --git a/src/pages/PromotionAdmin/RecruitmentPage/RecruitmentManagePage.tsx b/src/pages/PromotionAdmin/RecruitmentPage/RecruitmentManagePage.tsx
@@ -45,7 +45,7 @@ function RecruitmentManagePage() {
 
   useEffect(() => {
     if (!isFetching && !isRefetching && data && data.content.length === 0) {
-      navigator(`${PA_ROUTES.RECRUITMENT}/write`);
+      navigator(`${PA_ROUTES.RECRUITMENT}/manage`);
     }
   }, [data, navigator, isFetching, isRefetching]);
 
@@ -89,7 +89,6 @@ function RecruitmentManagePage() {
       try {
         const response = await deleteRecruitmentData(id);
         alert('채용공고가 삭제되었습니다.');
-        console.log(response);
         await refetch();
 
         const updatedTotalPosts = totalPosts - 1;
@@ -100,7 +99,6 @@ function RecruitmentManagePage() {
 
         setCurrentRecruitment(null);
       } catch (error) {
-        console.log(error);
         alert('채용공고 삭제 중 오류가 발생했습니다.');
       }
     }
@@ -147,11 +145,9 @@ function RecruitmentManagePage() {
       try {
         const response = await updateRecruitmentData(formData);
         alert('채용공고가 수정되었습니다.');
-        console.log(response);
         setIsEditing(false);
         refetch();
       } catch (error) {
-        console.log(error);
         alert('채용공고 수정 중 오류가 발생했습니다.');
       }
     }
@@ -202,7 +198,7 @@ function RecruitmentManagePage() {
     if (isEditing) {
       if (window.confirm('현재 페이지를 나가면 변경 사항이 저장되지 않습니다.\n나가시겠습니까?')) {
         setIsEditing(false);
-        navigator(`${PA_ROUTES.RECRUITMENT}/write`);
+        navigator(`${PA_ROUTES.RECRUITMENT}/manage`);
       }
     } else {
       navigator(`${PA_ROUTES.RECRUITMENT}/write`);
@@ -229,31 +225,43 @@ function RecruitmentManagePage() {
             </Button>
           </TitleWrapper>
           <ListWrapper>
-            {data?.content.map((recruitment) => (
-              <RecruimentList key={recruitment.id} data-cy='recruitment-list-item'>
-                <DeleteIcon
-                  data-cy='delete-button'
-                  width={15}
-                  height={15}
-                  onClick={() => handleDelete(recruitment.id, data.totalElements)}
-                />
-                <RecruimentItem
-                  isSelected={currentRecruitment?.id === recruitment.id && isSelected}
-                  onClick={() => {
-                    fetchRecruitmentData(recruitment.id);
-                  }}
-                >
-                  <RecruimentTitle data-cy='posted-recruitment-title'>{recruitment.title}</RecruimentTitle>
-                </RecruimentItem>
-                <RecruimentStatus
-                  isDeadline={recruitment.status === 'CLOSE'}
-                  isPreparing={recruitment.status === 'PREPARING'}
-                >
-                  {recruitment.status === 'CLOSE' ? '마감' : recruitment.status === 'OPEN' ? '진행' : '예정'}
-                </RecruimentStatus>
-              </RecruimentList>
-            ))}
-          </ListWrapper>
+  {data?.content && data.content.length > 0 ? (
+    data.content.map((recruitment) => (
+      <RecruimentList key={recruitment.id} data-cy="recruitment-list-item">
+        <DeleteIcon
+          data-cy="delete-button"
+          width={15}
+          height={15}
+          onClick={() => handleDelete(recruitment.id, data.totalElements)}
+        />
+        <RecruimentItem
+          isSelected={currentRecruitment?.id === recruitment.id && isSelected}
+          onClick={() => {
+            fetchRecruitmentData(recruitment.id);
+          }}
+        >
+          <RecruimentTitle data-cy="posted-recruitment-title">
+            {recruitment.title}
+          </RecruimentTitle>
+        </RecruimentItem>
+        <RecruimentStatus
+          isDeadline={recruitment.status === "CLOSE"}
+          isPreparing={recruitment.status === "PREPARING"}
+        >
+          {recruitment.status === "CLOSE"
+            ? "마감"
+            : recruitment.status === "OPEN"
+            ? "진행"
+            : "예정"}
+        </RecruimentStatus>
+      </RecruimentList>
+    ))
+  ) : (
+    <NoDataMessage>😊 채용공고 데이터가 존재하지 않습니다.</NoDataMessage>
+  )}
+</ListWrapper>
+
+
           {data && (
             <PaginationWrapper>
               <Pagination postsPerPage={RecruitmentsPerPage} totalPosts={data.totalElements} paginate={paginate} />
@@ -628,3 +636,10 @@ const ErrorMessage = styled.div`
   font-size: 13px;
   height: 16px;
 `;
+
+const NoDataMessage = styled.div`
+  padding: 20px;
+  font-size: 1rem;
+  color: ${({ theme }) => theme.color.gray};
+`;
+
diff --git a/src/pages/PromotionAdmin/RecruitmentPage/RecruitmentWritePage.tsx b/src/pages/PromotionAdmin/RecruitmentPage/RecruitmentWritePage.tsx
@@ -89,11 +89,9 @@ function RecruitmentWritePage() {
       try {
         const response = await postRecruitment(formData);
         alert('채용공고가 등록되었습니다.');
-        console.log(response);
         setIsEditing(false);
         navigator(`${PA_ROUTES.RECRUITMENT}/manage`, { replace: true });
       } catch (error) {
-        console.log(error);
         alert('채용공고 등록 중 오류가 발생했습니다.');
       }
     }

diff --git a/src/pages/PromotionPage/FaqPage/FaqPage.tsx b/src/pages/PromotionPage/FaqPage/FaqPage.tsx
@@ -114,7 +114,7 @@ const FaqPage = () => {
           {searchResult === 'fail' ? (
             <NoResults data-cy="no-results-message">검색 결과가 없습니다.</NoResults>
           ) : searchResult === 'none' ? (
-            <NoResults data-cy="no-results-message">FAQ 데이터가 없습니다.</NoResults>
+            <NoResults data-cy="no-results-message">데이터가 없습니다.</NoResults>
           ) : (
             searchData.map((item, i) => (
               <FaqDetailButton
@@ -282,31 +282,20 @@ const Content = styled.div`
   }
 `;
 
-// const EmptyState = styled.div`
-//   display: flex;
-//   justify-content: center;
-//   align-items: center;
-//   min-height: 100vh;
-//   font-family: 'pretendard-bold';
-//   font-size: 2rem;
-//   color: gray;
-//   text-align: center;
-//   padding: 0.75rem;
-//   word-break: keep-all;
-// `;
-
 const NoResults = styled.p`
   color: gray;
   font-family: 'pretendard-bold';
   font-size: 2rem;
   text-align: center;
 
-  @media (max-width: 1366px) and (min-width: 768px) {
-    font-size: 1.1rem;
+  @media ${theme.media.large_tablet} {
+    font-size: 1.4rem;
   }
-
-  @media (max-width: 540px) and (min-width: 375px) {
-    font-size: 1rem;
+  @media ${theme.media.tablet} {
+    font-size: 1.2rem;
+  }
+  @media ${theme.media.mobile} {
+    font-size: 1.1rem;
   }
 `;
 

diff --git a/src/pages/PromotionPage/RecruitmentPage/RecruitmentPage.tsx b/src/pages/PromotionPage/RecruitmentPage/RecruitmentPage.tsx
@@ -514,20 +514,33 @@ const BenefitContent = styled.p`
 `;
 
 const NoRecruitmentMessage = styled.div`
-  font-family: ${(props) => props.theme.font.medium}; 
+  font-family: ${(props) => props.theme.font.medium};
   color: ${(props) => props.theme.color.black.light};
-  font-size: clamp(1.5rem, 2vw, 2rem); 
+  font-size: clamp(1.5rem, 3vw, 2.2rem); 
   text-align: center;
-  margin: 3rem 0; 
-  line-height: 1.8; 
-  padding: 1.5rem 2rem; 
-
+  margin: 3rem 0;
+  line-height: 1.8;
+  padding: 1.5rem 2rem;
+
+  @media ${(props) => props.theme.media.large_tablet} {
+    font-size: clamp(1.1rem, 2.5vw, 1.5rem); 
+    margin: 2.5rem 0;
+    padding: 1.2rem 1.8rem;
+  }
 
-  @media ${(props) => props.theme.media.mobile} {
-    font-size: clamp(1.2rem, 1.8vw, 1.6rem); 
+  @media ${(props) => props.theme.media.tablet} {
+    font-size: clamp(1rem, 2vw, 1.4rem); 
     margin: 2rem 0;
     padding: 1rem 1.5rem;
   }
+
+  @media ${(props) => props.theme.media.mobile} {
+    font-size: clamp(0.9rem, 2vw, 1.3rem); 
+    margin: 1.5rem 0;
+    padding: 0.8rem 1.2rem;
+  }
 `;
 
+
+
 export default RecruitmentPage;