2. 병원회원페이지 채용공고 탭 [기업 채용 공고(CRUD)]

👩‍⚕️ 병의원 채용프로세스 관리 서비스, 메디매치 👨‍⚕️

• 관심사의 분리, 추상화를 위해 노력했습니다. 컴포넌트를 기능단위로 나눴고, 가독성과 관심사의 분리를 위해 custom hooks를 사용해 로직과 UI를 분리하였습니다.

• 제가 구현한 기능의 컴포넌트와 Hook들이 밑에 정리돼있습니다.

병원회원페이지 채용공고 탭 [기업 채용 공고(CRUD)]

채용공고 등록하기

채용공고 수정, 폐기, 미리보기

/src/pages/company/CompanyJobPosting.tsx

💻 CompanyJobPosting Component

병원회원이 자신의 채용 공고를 관리하는 기능을 제공하는 컴포넌트입니다.

• useJobPostManagement hook을 사용하여 채용공고와 관련된 모든 서버 통신 작업을 처리합니다.
• JobPostingList컴포넌트를 사용하여 채용공고 목록을 표시합니다.
• PostEditModal 컴포넌트를 사용하여 채용공고를 등록하거나 수정하는 기능을 제공합니다.

📄 useJobPostManagement Hook

채용공고와 관련된 모든 서버 통신 작업을 처리합니다.

• useQuery와 useMutation을 사용하여 서버에서 채용공고를 가져오고, 추가, 수정, 삭제하는 기능을 제공합니다.

💻 JobPostingList Component

병원의 채용공고 목록을 표시하는 컴포넌트입니다.

• 미리보기 버튼을 클릭하면 previewModalOpen이 true값이 되면서 PreviewModal 컴포넌트가 열립니다.
• 수정 버튼을 클릭하면 PostEditModal 컴포넌트가 열립니다.

💻 PreviewModal Component

선택한 채용공고의 미리보기를 보여주는 모달 창입니다.

• useJobPostFile과 useJobPostManagement hook을 사용하여 특정 채용공고에 대한 정보를 가져옵니다.

📄 useJobPostFile Hook

특정 채용공고의 파일을 가져오는 데 사용됩니다.

• useQuery를 사용하여 서버에서 채용공고 파일 url을 가져옵니다.
• onClickPdfOpen함수는 새 창에서 PDF파일을 열기 위해 사용됩니다.

💻 PostEditModal Component

채용공고를 등록하거나 수정하는 기능을 제공하는 컴포넌트입니다.

• useForm과 yup을 사용하여 폼 상태를 관리하고 사용자 입력의 유효성을 검사합니다.

💻 SelectBox Component

채용공고를 등록하는데 있어서 사용자에게 선택 사항을 제공하고, 사용자의 선택을 관리하는 컴포넌트로 중복되는 코드를 재사용하기위해 만들었습니다.

💻 InputBox Component

채용공고를 등록하는데 있어서 사용자의 텍스트 입력을 받고, 해당 입력을 관리하는 컴포넌트로 중복되는 코드를 재사용하기위해 만들었습니다.