Merge pull request #63 from yourssu/develop

[FIX] 모집 중인 팀 안보이도록 수정
yourssu · Oct 18, 2024 · 4588884 · 4588884
2 parents 620e8b2 + 5598109
commit 4588884
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 20 deletions.
diff --git a/src/assets/images/error_bbussung.webp b/src/assets/images/error_bbussung.webp
diff --git a/src/containers/select/Supporting/hook.ts b/src/containers/select/Supporting/hook.ts
@@ -1,4 +1,5 @@
 import { graphql, useStaticQuery } from 'gatsby';
+
 import { NodeType } from '@/types/hook';
 
 interface SupportingData {
@@ -11,6 +12,9 @@ interface SupportingData {
   readingGlasses: {
     nodes: NodeType[];
   };
+  errorImgData: {
+    nodes: NodeType[];
+  };
 }
 
 export default function useSupportingDetail() {
@@ -37,6 +41,12 @@ export default function useSupportingDetail() {
           name
         }
       }
+      errorImgData: allFile(filter: { name: { eq: "error_bbussung" } }) {
+        nodes {
+          publicURL
+          name
+        }
+      }
     }
   `);
 
@@ -47,7 +57,7 @@ export default function useSupportingDetail() {
       searchKeyword:
         '인사 운영 채용 경영 사회복지 관리 직원온보딩 성과관리 노사관계 복지 조직문화 직원만족도 인재유치 다양성 포용',
       departmentDescriptionLink: 'hr_manager',
-      deplartmentApply: true,
+      deplartmentApply: false,
     },
     {
       departmentName: `IOS\nDeveloper`,
@@ -61,7 +71,7 @@ export default function useSupportingDetail() {
       departmentDescription: `유저의 사용성을\n위해 고민하는\n녹색 깡통들`,
       searchKeyword: '모바일 개발자 kotlin java 안드로이드스튜디오 Android SDK',
       departmentDescriptionLink: 'android_developer',
-      deplartmentApply: true,
+      deplartmentApply: false,
     },
     {
       departmentName: `Frontend\nDeveloper`,
@@ -76,39 +86,39 @@ export default function useSupportingDetail() {
       departmentDescription: `보이지 않는 곳에\n서 묵묵히 일하는\n 조용한 영웅들`,
       searchKeyword: 'java 서버 DB API AWS 서버 최적화 spring 인프라',
       departmentDescriptionLink: 'backend_developer',
-      deplartmentApply: true,
+      deplartmentApply: false,
     },
     {
       departmentName: `Product\nManager`,
       departmentDescription: `서비스 기획부터 매니징까지!`,
       searchKeyword:
         '기획 기획자 아이디어 브랜딩 시장 조사 제품 전략 로드맵 데이터 분석 사용자 경험 고객 니즈 피드백',
       departmentDescriptionLink: 'product_manager',
-      deplartmentApply: true,
+      deplartmentApply: false,
     },
     {
       departmentName: `Product\nDesigner`,
       departmentDescription: `경험을 디자인하는\n사람들`,
       searchKeyword:
         '디자인 UI UX 3D 프로토타이핑 인터랙션디자인 Figma 디자인시스템 ',
       departmentDescriptionLink: 'product_designer',
-      deplartmentApply: true,
+      deplartmentApply: false,
     },
     {
       departmentName: `Contents\nMarketer`,
       departmentDescription: `유어슈의\n얼굴이자 꽃`,
       searchKeyword:
         '마케팅 SNS 뿌슝이 일러스트 광고 모션그래픽 콘텐츠제작 소셜미디어 블로그 브랜딩',
       departmentDescriptionLink: 'contents_marketer',
-      deplartmentApply: true,
+      deplartmentApply: false,
     },
     {
       departmentName: `Legal\nOfficer`,
       departmentDescription: `권리와 의무\n사이에서\n끊임없는 고민`,
       searchKeyword:
         '법률 법학 계약 법규 지적 재산권 기업 법률 자문 사용자 약관 법조문 개인정보처리방침 소송 관리 정책 연구 규정 해석 규제 준수 내부 규정 기업 윤리 ',
       departmentDescriptionLink: 'legal_officer',
-      deplartmentApply: true,
+      deplartmentApply: false,
     },
   ];
 

diff --git a/src/containers/select/Supporting/index.tsx b/src/containers/select/Supporting/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useBreakpoint } from 'gatsby-plugin-breakpoints';
 import tw from 'tailwind-styled-components';
+
 import DepartmentCard from './DepartmentCard';
 import DepartmentSearch from './DepartmentSearch';
 import useSupportingDetail from './hook';
@@ -9,7 +9,6 @@ function Supporting() {
   const { data, imgData } = useSupportingDetail();
   const [searchText, setSearchText] = useState<string>('');
   const [supportingTeam, setSupportingTeam] = useState<number>(0);
-  const breakpoints = useBreakpoint();
 
   useEffect(() => {
     setSearchText('');
@@ -38,17 +37,11 @@ function Supporting() {
     <Container>
       <SubContainer1 className="flex flex-col items-center">
         <SupportingText>지원 분야</SupportingText>
-        {breakpoints.md ? (
-          <SupportingDescription>
-            총 {supportingTeam}개의 분야에서 지원자를 모집하고 있어요.
-            <br /> 관심 있는 직군의 카드에 마우스를 올려보세요!
-          </SupportingDescription>
-        ) : (
-          <SupportingDescription>
-            총 {supportingTeam}개의 분야에서 지원자를 모집하고 있어요. 관심 있는
-            직군의 카드에 마우스를 올려보세요!
-          </SupportingDescription>
-        )}
+        <SupportingDescription>
+          {supportingTeam > 0
+            ? `총 ${supportingTeam}개의 분야에서 지원자를 모집하고 있어요.\n관심 있는 직군의 카드에 마우스를 올려보세요!`
+            : '현재 지원자를 모집하고 있는 분야가 없습니다.'}
+        </SupportingDescription>
       </SubContainer1>
 
       <SubContainer2 className="flex flex-col items-center">
@@ -72,6 +65,12 @@ function Supporting() {
             );
           })}
         </StepBox>
+        {supportingTeam === 0 && filterData.length === 0 && (
+          <ErrorImage
+            src={imgData.errorImgData.nodes[0].publicURL}
+            alt="뿌슝이 이미지"
+          />
+        )}
       </SubContainer2>
     </Container>
   );
@@ -133,6 +132,17 @@ const SupportingDescription = tw.p`
   md:body4
   sm:body8
   xs:body8
+  
+  md:whitespace-pre-wrap
+  sm:whitespace-pre-wrap
+  xs:whitespace-pre-wrap
+`;
+
+const ErrorImage = tw.img`
+  h-[285px]
+  md:h-[200px]
+  sm:h-[150px]
+  xs:h-[150px]
 `;
 
 export default Supporting;