diff --git a/cypress/e2e/System/RecruitmentPage.cy.ts b/cypress/e2e/System/RecruitmentPage.cy.ts index e971ae0..513c5b6 100644 --- a/cypress/e2e/System/RecruitmentPage.cy.ts +++ b/cypress/e2e/System/RecruitmentPage.cy.ts @@ -1,9 +1,7 @@ -import { IContent, IRecruitment, IBenefit, RecruitmentData, BenefitData } from 'cypress/support/recruitmentTypes'; +import { RecruitmentData, BenefitData } from 'cypress/support/recruitmentTypes'; import { login } from 'cypress/support/hooks'; let testRecruitmentData: RecruitmentData; -let contentData: IContent[]; -let recruitmentData: IRecruitment; // ------------------------------- 채용 공고 e2e 테스트 ------------------------------- // @@ -35,51 +33,24 @@ describe('PA 페이지에서 새로운 채용 공고를 등록하고 PP 화면 it('PP 페이지에서 새롭게 등록된 채용 공고가 정상적으로 표시되는지 확인하고 공고를 클릭하여 새 창에서 원하는 페이지가 표시되는지 확인한다.', () => { cy.visit('/recruitment'); - cy.intercept('GET', '/api/recruitment?page=*').as('getRecruitmentList'); - cy.wait('@getRecruitmentList').then((interception) => { - contentData = interception.response?.body?.data?.content || []; + cy.get('[data-cy="recruitment-title"]').should('contain', testRecruitmentData.title); + cy.get('[data-cy="recruitment-status"]').should('contain', '진행'); - cy.wrap(contentData).as('recruitmentListData'); - cy.log(JSON.stringify(contentData, null, 1)); + cy.window().then((win) => { + cy.stub(win, 'open').as('windowOpen'); }); - cy.get('@recruitmentListData').then((recruitmentListData) => { - // Cypress 데이터가 배열인지 확인하고 변환 - const recruitmentArray = Array.isArray(recruitmentListData) ? recruitmentListData : recruitmentListData.toArray(); // 배열로 변환 - - recruitmentArray.forEach((item: IContent, index: number) => { - cy.log(`Recruitment item ${index}:`, JSON.stringify(item, null, 1)); - }); - - // 배열에서 'OPEN' 상태를 가진 공고 찾기 - const openRecruitment = recruitmentArray.find((item: IContent) => item.status === 'OPEN'); - - if (!openRecruitment) { - cy.log("현재 '진행'인 채용 공고가 없습니다."); - return; // `OPEN` 상태가 없으면 클릭 테스트를 건너뛰기 - } - - // `OPEN` 상태 데이터가 있을 경우 테스트 진행 - cy.intercept('GET', `/api/recruitment/${openRecruitment.id}`).as('getRecruitmentData'); - cy.window().then((win) => { - cy.stub(win, 'open').as('windowOpen'); - }); - - // `OPEN` 상태의 채용 공고 클릭 - cy.get(`[data-cy="post-item-${openRecruitment.id}"]`).click(); - - // API 요청이 성공적으로 호출되는지 확인 - cy.wait('@getRecruitmentData').then((interception) => { - recruitmentData = interception.response?.body?.data; - expect(recruitmentData).toBeDefined(); - expect(recruitmentData).toHaveProperty('link'); + cy.get('[data-cy="recruitment-title"]') + .contains(testRecruitmentData.title) + .should('be.visible') + .parent() + .parent() + .then(($postItem) => { + cy.wrap($postItem).click(); - // `window.open` 호출 및 URL 확인 - cy.get('@windowOpen').should('be.calledOnce'); - cy.get('@windowOpen').should('be.calledWithExactly', recruitmentData.link, '_blank'); + cy.get('@windowOpen').should('be.calledOnce').and('be.calledWithExactly', testRecruitmentData.link, '_blank'); }); - }); }); }); @@ -106,30 +77,23 @@ describe('PA 페이지에서 채용 공고를 수정하고 PP 화면에 정상 it('PP 페이지에서 수정된 채용 공고가 정상적으로 표시되는지 확인한다.', () => { cy.visit('/recruitment'); - cy.intercept('GET', '/api/recruitment?page=*').as('getRecruitmentList'); - - cy.wait('@getRecruitmentList').then((interception) => { - const contentData = interception.response?.body?.data?.content || []; - cy.wrap(contentData).as('recruitmentListData'); - cy.log(JSON.stringify(contentData, null, 1)); - }); - - cy.get('@recruitmentListData').then((recruitmentListData) => { - const titleExists = recruitmentListData.some((item) => item.title === '그래픽디자이너 채용 (신입)'); - expect(titleExists).to.be.true; - }); + cy.get('[data-cy="recruitment-title"]').should('contain', testRecruitmentData.title); + cy.get('[data-cy="recruitment-status"]').should('contain', '마감'); }); }); describe('PA 페이지에서 채용 공고를 삭제하고 PP 화면에 정상적으로 표시되는지 확인한다.', () => { before(() => { login(); + cy.fixture('Recruitment/recruitment_update_data.json').then((data) => { + testRecruitmentData = data; + }); }); it('채용 공고 관리 페이지에서 채용 공고를 삭제한다.', () => { cy.visit('/promotion-admin/recruitment/manage'); - cy.contains('[data-cy="posted-recruitment-title"]', '그래픽디자이너 채용 (신입)') + cy.contains('[data-cy="posted-recruitment-title"]', testRecruitmentData.title) .closest('[data-cy="recruitment-list-item"]') .find('[data-cy="delete-button"]') .click(); @@ -138,19 +102,12 @@ describe('PA 페이지에서 채용 공고를 삭제하고 PP 화면에 정상 it('PP 페이지에서 채용 공고가 정상적으로 삭제되었는지 확인한다.', () => { cy.visit('/recruitment'); - cy.intercept('GET', '/api/recruitment?page=*').as('getRecruitmentList'); - - cy.wait('@getRecruitmentList').then((interception) => { - const contentData = interception.response?.body?.data?.content || []; - cy.wrap(contentData).as('recruitmentListData'); - cy.log(JSON.stringify(contentData, null, 1)); - }); - - cy.get('@recruitmentListData').then((recruitmentListData) => { - const titleExists = recruitmentListData.some((item) => item.title === '그래픽디자이너 채용 (신입)'); - - // '그래픽디자이너 채용 (신입)' 공고가 없는지 확인 - expect(titleExists).to.be.false; + cy.get('body').then(($body) => { + if ($body.find('[data-cy="recruitment-title"]').length > 0) { + cy.get('[data-cy="recruitment-title"]').contains(testRecruitmentData.title).should('not.exist'); + } else { + cy.log('No recruitment title elements found.'); + } }); }); }); @@ -160,7 +117,6 @@ describe('PA 페이지에서 채용 공고를 삭제하고 PP 화면에 정상 const testImage = 'cypress/fixtures/Recruitment/bonus.png'; const testImage2 = 'cypress/fixtures/Recruitment/long_service.png'; let testBenefitData: BenefitData; -let benefitData: IBenefit[]; describe('PA 페이지에서 새로운 사내 복지를 등록하고 PP 화면에 정상적으로 표시되는지 확인한다.', () => { before(() => { @@ -190,18 +146,8 @@ describe('PA 페이지에서 새로운 사내 복지를 등록하고 PP 화면 it('PP 페이지에서 새롭게 등록된 사내 복지가 정상적으로 표시되는지 확인한다.', () => { cy.visit('/recruitment'); - cy.intercept('GET', '/api/benefit').as('getBenefitsData'); - cy.wait('@getBenefitsData').then((interception) => { - const benefitData = interception.response?.body?.data || []; - - cy.wrap(benefitData).as('benefitsData'); - cy.log(JSON.stringify(benefitData, null, 1)); - - cy.get('@benefitsData').then((data) => { - const hasIncentive = data.some((item) => item.title === '테스트 등록 제목'); - expect(hasIncentive).to.be.true; - }); - }); + cy.get('[data-cy="benefit-title"]').should('contain', testBenefitData.title); + cy.get('[data-cy="benefit-content"]').should('contain', testBenefitData.content); }); }); @@ -229,18 +175,8 @@ describe('PA 페이지에서 사내 복지를 수정하고 PP 화면에 정상 it('PP 페이지에서 수정된 사내 복지가 정상적으로 표시되는지 확인한다.', () => { cy.visit('/recruitment'); - cy.intercept('GET', '/api/benefit').as('getBenefitsData'); - cy.wait('@getBenefitsData').then((interception) => { - const benefitData = interception.response?.body?.data || []; - - cy.wrap(benefitData).as('benefitsData'); - cy.log(JSON.stringify(benefitData, null, 1)); - - cy.get('@benefitsData').then((data) => { - const hasIncentive = data.some((item) => item.title === '테스트 수정 제목'); - expect(hasIncentive).to.be.true; - }); - }); + cy.get('[data-cy="benefit-title"]').should('contain', testBenefitData.title); + cy.get('[data-cy="benefit-content"]').should('contain', testBenefitData.content); }); }); @@ -260,18 +196,12 @@ describe('PA 페이지에서 사내 복지를 삭제하고 PP 화면에 정상 it('PP 페이지에서 사내 복지가 정상적으로 삭제되었는지 확인한다.', () => { cy.visit('/recruitment'); - cy.intercept('GET', '/api/benefit').as('getBenefitsData'); - cy.wait('@getBenefitsData').then((interception) => { - const benefitData = interception.response?.body?.data || []; - - cy.wrap(benefitData).as('benefitsData'); - cy.log(JSON.stringify(benefitData, null, 1)); - }); - - cy.get('@benefitsData').then((benefitsData) => { - const titleExists = benefitsData.some((item) => item.title === '테스트 수정 제목'); - - expect(titleExists).to.be.false; + cy.get('body').then(($body) => { + if ($body.find('[data-cy="benefit-title"]').length > 0) { + cy.get('[data-cy="benefit-title"]').contains(testRecruitmentData.title).should('not.exist'); + } else { + cy.log('No benefit title elements found.'); + } }); }); }); @@ -302,87 +232,4 @@ describe('PP recruitment 페이지가 정상적으로 표시되는지 확인한 ); cy.get('@windowOpen').should('be.calledWithExactly', expectedURL, '_blank'); }); - - it('사용자는 Recruitment Section에서 현재 "예정" 또는 "진행" 또는 "마감" 상태의 채용 공고를 확인할 수 있다.', () => { - cy.intercept('GET', '/api/recruitment?page=*').as('getRecruitmentList'); - cy.wait('@getRecruitmentList').then((interception) => { - contentData = interception.response?.body?.data?.content || []; - - cy.wrap(contentData).as('recruitmentListData'); - cy.log(JSON.stringify(contentData, null, 1)); - - cy.get('@recruitmentListData').then((data) => { - const preparingCount = data.filter((item) => item.status === 'PREPARING').length; - const openCount = data.filter((item) => item.status === 'OPEN').length; - const closeCount = data.filter((item) => item.status === 'CLOSE').length; - - cy.log(`진행 예정 (PREPARING): ${preparingCount}`); - cy.log(`진행중 (OPEN): ${openCount}`); - cy.log(`마감 (CLOSE): ${closeCount}`); - - // 기대치 확인 예시 (테스트 검증용) - expect(preparingCount).to.be.a('number'); - expect(openCount).to.be.a('number'); - expect(closeCount).to.be.a('number'); - }); - }); - }); - - it('사용자는 "진행" 상태의 채용 공고를 클릭하면 해당 공고 정보를 확인할 수 있는 페이지를 새 창에서 확인할 수 있다.', () => { - cy.intercept('GET', '/api/recruitment?page=*').as('getRecruitmentList'); - - cy.wait('@getRecruitmentList').then((interception) => { - contentData = interception.response?.body?.data?.content || []; - - cy.wrap(contentData).as('recruitmentListData'); - cy.log(JSON.stringify(contentData, null, 1)); - }); - - cy.get('@recruitmentListData').then((recruitmentListData) => { - recruitmentListData.forEach((item, index) => { - cy.log(`Recruitment item ${index}:`, JSON.stringify(item, null, 1)); - }); - - const openRecruitment = recruitmentListData.find((item) => item.status === 'OPEN'); - - if (!openRecruitment) { - cy.log("현재 '진행'인 채용 공고가 없습니다."); - return; // `OPEN` 상태가 없으면 클릭 테스트를 건너뛰기 - } - - // `OPEN` 상태 데이터가 있을 경우 테스트 진행 - cy.intercept('GET', `/api/recruitment/${openRecruitment.id}`).as('getRecruitmentData'); - cy.window().then((win) => { - cy.stub(win, 'open').as('windowOpen'); - }); - - // `OPEN` 상태의 채용 공고 클릭 - cy.get(`[data-cy="post-item-${openRecruitment.id}"]`).click(); - - // API 요청이 성공적으로 호출되는지 확인 - cy.wait('@getRecruitmentData').then((interception) => { - recruitmentData = interception.response?.body?.data; - expect(recruitmentData).to.have.property('link'); - - // `window.open` 호출 및 URL 확인 - cy.get('@windowOpen').should('be.calledOnce'); - cy.get('@windowOpen').should('be.calledWithExactly', recruitmentData.link, '_blank'); - }); - }); - }); - - it('사용자는 Benefit Section에서 사내 복지를 확인할 수 있다.', () => { - cy.intercept('GET', '/api/benefit').as('getBenefitsData'); - cy.wait('@getBenefitsData').then((interception) => { - benefitData = interception.response?.body?.data || []; - - cy.wrap(benefitData).as('benefitsData'); - cy.log(JSON.stringify(benefitData, null, 1)); - cy.get('@benefitsData').then((data) => { - cy.log(`총 사내 복지 수: ${data.length}`); - - expect(data.length).to.be.a('number'); - }); - }); - }); }); diff --git a/cypress/fixtures/Recruitment/recruitment_submit_data.json b/cypress/fixtures/Recruitment/recruitment_submit_data.json index 1aaa275..ba782c5 100644 --- a/cypress/fixtures/Recruitment/recruitment_submit_data.json +++ b/cypress/fixtures/Recruitment/recruitment_submit_data.json @@ -2,5 +2,5 @@ "title": "그래픽디자이너 채용 (경력직)", "link": "https://m.saramin.co.kr/job-search/company-info-view/recruit?csn=cnIrYWJNNm1GRXdyd0dBckJuZXJUUT09&t_ref_content=generic", "startDate": "2024-11-01", - "deadline": "2024-11-30" + "deadline": "2024-12-31" } diff --git a/cypress/support/recruitmentTypes.ts b/cypress/support/recruitmentTypes.ts index d363a13..41356b7 100644 --- a/cypress/support/recruitmentTypes.ts +++ b/cypress/support/recruitmentTypes.ts @@ -1,27 +1,3 @@ -export type IContent = { - id: number; - status: string; - title: string; -}; - -export interface IRecruitment { - id: number; - title: string; - startDate: string; - deadline: string; - status: string; - createdAt: string; - link: string; -} - -export interface IBenefit { - id: number; - imageUrl: string; - imageFileName: string; - title: string; - content: string; -} - export interface RecruitmentData { title: string; link: string; diff --git a/src/components/PromotionAdmin/Request/UserInfo.tsx b/src/components/PromotionAdmin/Request/UserInfo.tsx index 3d48f26..b73b57c 100644 --- a/src/components/PromotionAdmin/Request/UserInfo.tsx +++ b/src/components/PromotionAdmin/Request/UserInfo.tsx @@ -3,10 +3,10 @@ import React, { useState } from 'react'; import styled from 'styled-components'; interface UserInfoProps { - clickedRequest: IRequestData; - } - - const UserInfo: React.FC = ({ clickedRequest }) => { + clickedRequest: IRequestData; +} + +const UserInfo: React.FC = ({ clickedRequest }) => { const [userInfoExpanded, setUserInfoExpanded] = useState(false); const toggleUserInfoExpansion = () => { @@ -44,15 +44,26 @@ interface UserInfoProps {
    {clickedRequest?.fileUrlList.map((url: string, index: number) => { - const fileName = url.split('amazonaws.com/')[1]; - return ( -
  • - -{' '} - - {fileName} - -
  • - ); + try { + const decodedUrl = decodeURIComponent(url); + const fileName = decodedUrl.split('amazonaws.com/')[1]; + + return ( +
  • + -{' '} + + {fileName} + +
  • + ); + } catch (error) { + console.error('Invalid URL or decoding error:', url); + return ( +
  • + - 파일명 표시 오류 +
  • + ); + } })}
@@ -69,7 +80,7 @@ const UserInfoWrapper = styled.div` `; const UserInfoTitle = styled.div` -width: fit-content; + width: fit-content; cursor: pointer; color: gray; font-weight: bold; diff --git a/src/constants/messages.ts b/src/constants/messages.ts index b58198d..7fbd2eb 100644 --- a/src/constants/messages.ts +++ b/src/constants/messages.ts @@ -73,6 +73,11 @@ const EXCEPTION_MSG = { INVALID_LINK: '유효하지 않은 URL입니다.', }; +const ERROR_MSG = { + SERVER_ERROR: + '현재 서버 또는 인터넷 연결 문제로 인해 문의 등록이 완료되지 않았습니다. 불편을 드려 죄송합니다. 문제가 지속될 경우, 문의해 주시면 신속히 도와드리겠습니다.', +}; + export const MSG = { BUTTON_MSG, ALERT_MSG, @@ -80,4 +85,5 @@ export const MSG = { PLACEHOLDER_MSG, INVALID_MSG, EXCEPTION_MSG, + ERROR_MSG, }; diff --git a/src/pages/PromotionAdmin/RequestPage/RequestCheckPage.tsx b/src/pages/PromotionAdmin/RequestPage/RequestCheckPage.tsx index fb0c4ac..b03e299 100644 --- a/src/pages/PromotionAdmin/RequestPage/RequestCheckPage.tsx +++ b/src/pages/PromotionAdmin/RequestPage/RequestCheckPage.tsx @@ -92,32 +92,34 @@ const RequestDetailPage = () => { { id: number; subject: string; date: string; content: string; state: string }[] >( clickedRequest && clickedRequest.answers - ? clickedRequest.answers.map((answer: { createdAt: string; id: number; text: string; state: string; }) => { - const createdAtDate = new Date(answer.createdAt); - const formattedDate = `${createdAtDate.getFullYear()}-${String(createdAtDate.getMonth() + 1).padStart( - 2, - '0' - )}-${String(createdAtDate.getDate()).padStart(2, '0')} ${String(createdAtDate.getHours()).padStart( - 2, - '0' - )}:${String(createdAtDate.getMinutes()).padStart(2, '0')}`; - - return { - id: answer.id, - subject: answer.text, - date: formattedDate, - content: answer.text, - state: answer.state, - }; - }) - : [] + ? clickedRequest.answers.map((answer: { createdAt: string; id: number; text: string; state: string }) => { + const createdAtDate = new Date(answer.createdAt); + const formattedDate = `${createdAtDate.getFullYear()}-${String(createdAtDate.getMonth() + 1).padStart( + 2, + '0', + )}-${String(createdAtDate.getDate()).padStart(2, '0')} ${String(createdAtDate.getHours()).padStart( + 2, + '0', + )}:${String(createdAtDate.getMinutes()).padStart(2, '0')}`; + + return { + id: answer.id, + subject: answer.text, + date: formattedDate, + content: answer.text, + state: answer.state, + }; + }) + : [], ); const emailItemsSliced = emailItems.slice(indexOfFirst, indexOfLast); const replyRequest = async (state: string) => { if (!clickedRequest) return; - const answerText = draftToHtml(convertToRaw(editorState.getCurrentContent())).replace(/<[^>]*>/g, '').trim(); + const answerText = draftToHtml(convertToRaw(editorState.getCurrentContent())) + .replace(/<[^>]*>/g, '') + .trim(); if (state === 'WAITING' || !answerText) { alert(state === 'WAITING' ? '답변한 메일을 대기 중으로 둘 수 없습니다.' : '내용을 입력하세요.'); @@ -139,10 +141,10 @@ const RequestDetailPage = () => { subject: answerText, date: `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart( 2, - '0' + '0', )}-${String(new Date().getDate()).padStart(2, '0')} ${String(new Date().getHours()).padStart( 2, - '0' + '0', )}:${String(new Date().getMinutes()).padStart(2, '0')}`, content: answerText, state: state.toUpperCase(), @@ -163,41 +165,41 @@ const RequestDetailPage = () => { }; return ( - + {requestDetailMatch && clickedRequest && ( <> - + - + <Title data-cy='client-name-title'> {clickedRequest.clientName} 님의 {clickedRequest.category} 문의 - + - + {loading && ( - + )} } /> { const newState = e.target.value; setReplyState(newState); @@ -205,22 +207,22 @@ const RequestDetailPage = () => { setTextValue(content); }} > - - - - + + + - + {textLength}/{MAX_TEXT_LENGTH}자 @@ -231,26 +233,25 @@ const RequestDetailPage = () => { clickedRequest && replyRequest(replyState); }} /> - - - - - - - - - - - - - ) -} - + + + + + + + + + + + + + )} + ); }; @@ -344,7 +345,6 @@ const ButtonWrapper = styled.div` padding: 1rem 0; `; - const StyledTextArea = styled.textarea` width: 95%; height: 18rem; diff --git a/src/pages/PromotionPage/ContactPage/ContactUsPage.tsx b/src/pages/PromotionPage/ContactPage/ContactUsPage.tsx index 4bd0a16..319c949 100644 --- a/src/pages/PromotionPage/ContactPage/ContactUsPage.tsx +++ b/src/pages/PromotionPage/ContactPage/ContactUsPage.tsx @@ -10,6 +10,7 @@ import { getCompanyBasicData } from '../../../apis/PromotionAdmin/dataEdit'; import { emailCheck, phoneFaxCheck } from '@/components/ValidationRegEx/ValidationRegEx'; import { theme } from '@/styles/theme'; import ErrorComponent from '@/components/Error/ErrorComponent'; +import { MSG } from '@/constants/messages'; interface ICircleProps { filled: boolean; @@ -37,7 +38,7 @@ type ICompanyBasic = { const ContactUsPage = () => { const navigator = useNavigate(); - const [error, setError] = useState(null); + const [error, setError] = useState(null); const [requestStep, setRequestStep] = useState(0); const [formData, setFormData] = useState({ category: '', @@ -80,7 +81,7 @@ const ContactUsPage = () => { const [isModalOpen, setIsModalOpen] = useState(false); useEffect(() => { - if (error!==null) { + if (error !== null) { setIsModalOpen(true); } }, [error]); @@ -328,7 +329,7 @@ const ContactUsPage = () => { const source = axios.CancelToken.source(); const timeoutId = setTimeout(() => { - source.cancel('요청이 10초 안에 완료되지 않아 취소되었습니다. 다시 시도해주세요.'); + source.cancel('요청 시간이 오래 소요되어 취소되었습니다. 다시 시도해주세요.'); }, 10000); axios @@ -354,11 +355,11 @@ const ContactUsPage = () => { }) .catch((error) => { if (axios.isCancel(error)) { - alert('서버 또는 인터넷 연결 문제로 문의 등록에 실패하였습니다.\n문제가 지속 될 경우 문의해주시기 바랍니다.'); + alert(MSG.ERROR_MSG.SERVER_ERROR); console.error('요청 취소: ', error.message); } else { clearTimeout(timeoutId); - alert('서버 또는 인터넷 연결 문제로 문의 등록에 실패하였습니다.\n다시 한번 시도하여 주시기 바랍니다.'); + alert(MSG.ERROR_MSG.SERVER_ERROR); console.error('에러 발생', error); } }) @@ -384,9 +385,9 @@ const ContactUsPage = () => { }; return ( - - {isModalOpen &&} - + + {isModalOpen && } + CONTACT diff --git a/src/pages/PromotionPage/RecruitmentPage/RecruitmentPage.tsx b/src/pages/PromotionPage/RecruitmentPage/RecruitmentPage.tsx index 0c801db..4227da4 100644 --- a/src/pages/PromotionPage/RecruitmentPage/RecruitmentPage.tsx +++ b/src/pages/PromotionPage/RecruitmentPage/RecruitmentPage.tsx @@ -46,10 +46,10 @@ const RecruitmentPage = () => { const [isModalOpen, setIsModalOpen] = useState(false); useEffect(() => { - if (recruitmentError!==null||benefitError!==null) { + if (recruitmentError !== null || benefitError !== null) { setIsModalOpen(true); } - }, [recruitmentError,benefitError]); + }, [recruitmentError, benefitError]); const closeModal = () => { setIsModalOpen(false); window.location.reload(); @@ -61,10 +61,10 @@ const RecruitmentPage = () => { // if (recruitmentError || benefitError) { // return
Error occurred!
; // } - + return ( - {isModalOpen &&} + {isModalOpen && } {/* 첫 번째 섹션: 채용 페이지 인트로 */} @@ -92,50 +92,51 @@ const RecruitmentPage = () => { - {/* 두 번째 섹션: 채용 게시판 */} - - -
진행중인 채용공고
- - {recruitmentData && recruitmentData.content.length > 0 ? ( - recruitmentData.content.map((recruitment) => ( - handleClickPost(recruitment.id, recruitment.status)} - > - - - {recruitment.status === 'CLOSE' ? '마감' : recruitment.status === 'OPEN' ? '진행' : '예정'} - - - - {recruitment.title} - - - )) - ) : ( - 현재 올라온 채용공고가 없습니다. - )} - -
-
+ {/* 두 번째 섹션: 채용 게시판 */} + + +
진행중인 채용공고
+ + {recruitmentData && recruitmentData.content.length > 0 ? ( + recruitmentData.content.map((recruitment) => ( + handleClickPost(recruitment.id, recruitment.status)} + > + + + {recruitment.status === 'CLOSE' ? '마감' : recruitment.status === 'OPEN' ? '진행' : '예정'} + + + + {recruitment.title} + + + )) + ) : ( + 현재 올라온 채용공고가 없습니다. + )} + +
+
{/* 세 번째 섹션: 회사 복지 정보 */} {benefitData && benefitData.length > 0 && ( - STUDIOEYE'S BENEFIT + {`STUDIOEYE'S BENEFIT`} {benefitData.map((benefit) => ( - {benefit.title} - {benefit.content} + {benefit.title} + {benefit.content} ))} @@ -344,7 +345,7 @@ const JobBoardSection = styled.div` `; const PostGrid = styled.div` - width: 100%; + width: 100%; max-width: 75rem; padding: 1rem; box-sizing: border-box; // 패딩 포함 폭 계산 @@ -365,11 +366,10 @@ const Header = styled.h3` const Content = styled.div` border-top: 1.5px solid black; border-bottom: 1.5px solid black; - `; const PostItem = styled.div<{ isOpen: boolean }>` width: 100%; - padding: 2.5rem 1rem; + padding: 2.5rem 1rem; background-color: ${theme.color.white.light}; border-top: 1.5px solid #ccc; display: flex; @@ -377,7 +377,7 @@ const PostItem = styled.div<{ isOpen: boolean }>` align-items: center; transition: all 0.3s ease-in-out; overflow: hidden; - min-height: 4rem; + min-height: 4rem; box-sizing: border-box; cursor: ${(props) => (props.isOpen ? 'pointer' : 'default')}; @@ -446,7 +446,7 @@ const BenefitsSection = styled.div` background-color: ${(props) => props.theme.color.white.light}; width: 100%; margin-top: 10rem; - margin-bottom: 3rem; + margin-bottom: 3rem; `; const BenefitSectionTitle = styled.h1` @@ -529,31 +529,29 @@ const BenefitContent = styled.p` const NoRecruitmentMessage = styled.div` font-family: ${(props) => props.theme.font.medium}; color: ${(props) => props.theme.color.black.light}; - font-size: clamp(1.5rem, 3vw, 2.2rem); + font-size: clamp(1.5rem, 3vw, 2.2rem); text-align: center; 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); + font-size: clamp(1.1rem, 2.5vw, 1.5rem); margin: 2.5rem 0; padding: 1.2rem 1.8rem; } @media ${(props) => props.theme.media.tablet} { - font-size: clamp(1rem, 2vw, 1.4rem); + 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); + font-size: clamp(0.9rem, 2vw, 1.3rem); margin: 1.5rem 0; padding: 0.8rem 1.2rem; } `; - - export default RecruitmentPage;