🌧️ :: 기능 추가

메인 전공 사진 변경, 면접 기록 퍼블리싱, 지원자 관리 페이지 연동

src/MainRouter.tsx

@@ -8,6 +8,7 @@ import Mypage from "./page/Mypage";
 import ApplicantDetailpage from "./page/ApplicantDetailpage";
 import ClubMgtpage from "./page/ClubMgtpage";
 import ClubDetailsViewpage from "./page/ClubDetailsViewpage";
+import Recordpage from "./page/Recordpage";
 
 function MainRouter() {
   return (
@@ -25,6 +26,7 @@ function MainRouter() {
         />
         <Route path="/ApplicantDetail" element={<ApplicantDetailpage />} />
         <Route path="/ClubDetails" element={<ClubDetailsViewpage />} />
+        <Route path="/Record" element={<Recordpage />} />
       </Routes>
     </BrowserRouter>
   );

src/assets/index.ts

@@ -1,16 +1,8 @@
 export { default as Alarm } from "./img/Alarm.png";
 export { default as LogoBlack } from "./img/LogoBlack.png";
 export { default as LogoWhite } from "./img/LogoWhite.png";
-export { default as Banner1 } from "./img/banner1.png";
-export { default as Banner2 } from "./img/banner2.png";
-export { default as Banner3 } from "./img/banner3.png";
-export { default as Banner4 } from "./img/banner4.png";
-export { default as Banner5 } from "./img/banner5.png";
-export { default as Banner6 } from "./img/banner6.png";
 export { default as LeftArrow } from "./img/LeftArrow.png";
 export { default as RightArrow } from "./img/RigntArrow.png";
-export { default as ClubImg } from "./img/ClubImg.png";
-export { default as LogoImg } from "./img/Bonobono.png";
 export { default as Edit } from "./img/Edit.png";
 export { default as Plus } from "./img/Plus.png";
 export { default as Remove } from "./img/Remove.png";
@@ -25,3 +17,15 @@ export { default as Github } from "./img/Github.png";
 export { default as Instagram } from "./img/Instagram.png";
 export { default as Down } from "./img/Down.png";
 export { default as Up } from "./img/Up.png";
+export { default as Front } from "./img/Front.png";
+export { default as Back } from "./img/Back.png";
+export { default as AI } from "./img/AI.png";
+export { default as Embedded } from "./img/Embedded.png";
+export { default as Flutter } from "./img/Flutter.png";
+export { default as DevOps } from "./img/DevOps.png";
+export { default as FullStack } from "./img/FullStack.png";
+export { default as Security } from "./img/Security.png";
+export { default as ios } from "./img/ios.png";
+export { default as Android } from "./img/Android.png";
+export { default as Game } from "./img/Game.png";
+export { default as Design } from "./img/Design.png";

src/components/Alarm.tsx

@@ -85,25 +85,54 @@ const Alarm = () => {
       {my.map((alarm) => (
         <AlarmWrapper key={alarm.alarmId}>
           <AlarmTime>{elapsedTime(Date.now())}</AlarmTime>
-          {alarm.alarmType === "PASS_RESULT" && (
+          {alarm.alarmType === "REPORT_PASS_RESULT" && (
             <>
               {alarm.passingResult === "PASS" ? (
                 <>
-                  <AlarmTitle>{`${alarm.clubName} 합격 🎉`}</AlarmTitle>
+                  <AlarmTitle>{`${alarm.clubName} 1차 서류 합격 🎉`}</AlarmTitle>
+                  <div>
+                    <Contents>{`${alarm.userName}님, ${
+                      alarm.clubName
+                    }의 ${MajorLabel(
+                      alarm.major
+                    )}분야의 1차 서류 합격을 축하드립니다.`}</Contents>
+                    <Button>면접 시간 선택</Button>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <AlarmTitle>{`${alarm.clubName} 1차 서류 불합격 😢`}</AlarmTitle>
                   <Contents>{`${alarm.userName}님, ${
                     alarm.clubName
                   }의 ${MajorLabel(
                     alarm.major
-                  )}분야의 합격을 축하드립니다.`}</Contents>
+                  )}분야 1차 서류 불합격하셨습니다.`}</Contents>
+                </>
+              )}
+            </>
+          )}
+          {alarm.alarmType === "INTERVIEW_PASS_RESULT" && (
+            <>
+              {alarm.passingResult === "PASS" ? (
+                <>
+                  <AlarmTitle>{`${alarm.clubName} 최종 합격 🎉`}</AlarmTitle>
+                  <div>
+                    <Contents>{`${alarm.userName}님, ${
+                      alarm.clubName
+                    }의 ${MajorLabel(
+                      alarm.major
+                    )}분야의 최종 합격을 축하드립니다.`}</Contents>
+                    <Button>면접 시간 선택</Button>
+                  </div>
                 </>
               ) : (
                 <>
-                  <AlarmTitle>{`${alarm.clubName} 불합격 😢`}</AlarmTitle>
+                  <AlarmTitle>{`${alarm.clubName} 최종 불합격 😢`}</AlarmTitle>
                   <Contents>{`${alarm.userName}님, ${
                     alarm.clubName
                   }의 ${MajorLabel(
                     alarm.major
-                  )}분야의 불합격하셨습니다.`}</Contents>
+                  )}분야 최종 불합격하셨습니다.`}</Contents>
                 </>
               )}
             </>
@@ -123,12 +152,6 @@ const Alarm = () => {
               )}
             </>
           )}
-          {alarm.alarmType === "ANNOUNCEMENT" && (
-            <>
-              <AlarmTitle>{alarm.title}</AlarmTitle>
-              <Contents>{alarm.contents}</Contents>
-            </>
-          )}
         </AlarmWrapper>
       ))}
     </Container>
@@ -153,6 +176,16 @@ const Title = styled.p`
   font-size: 24px;
 `;
 
+const Button = styled.div`
+  width: 80px;
+  height: 20px;
+  background-color: #333b3d;
+  border-radius: 5px;
+  color: white;
+  font-size: 10px;
+  font-family: "Pretendard";
+`;
+
 const AlarmWrapper = styled.div`
   display: flex;
   flex-direction: column;

src/components/ApplicantMgt.tsx

@@ -1,84 +1,198 @@
-import { Link } from "react-router-dom";
 import styled from "styled-components";
+import { instance } from "../apis/axios";
+import { useEffect, useState } from "react";
+import ApplicantModal from "./applicantModal";
 
-interface Props {
+interface Applicant {
+  classNumber: string;
   name: string;
-  info: string;
+  hopeMajor: string;
+  interviewStartTime: string;
+  interviewEndTime: string;
+  reportPassingResult: string;
+  interviewPassingResult: string;
 }
 
-const ApplicantMgt: React.FC<Props> = (props) => {
+const MajorLabel = (hopeMajor: string) => {
+  switch (hopeMajor) {
+    case "FRONT":
+      return "프론트엔드";
+    case "BACK":
+      return "백엔드";
+    case "SECURITY":
+      return "보안";
+    case "IOS":
+      return "아이오에스";
+    case "AND":
+      return "안드로이드";
+    case "FLUTTER":
+      return "플러터";
+    case "EMBEDDED":
+      return "임베디드";
+    case "AI":
+      return "인공지능";
+    case "DEVOPS":
+      return "데브옵스";
+    case "DESIGN":
+      return "디자인";
+    case "GAME":
+      return "게임개발";
+    default:
+      return "알 수 없음";
+  }
+};
+
+const reportresultLabel = (reportPassingResult: string) => {
+  switch (reportPassingResult) {
+    case "PASS":
+      return "합격";
+    case "FAIL":
+      return "불합격";
+    case "WAIT":
+      return "대기";
+  }
+};
+
+const interviewresultLabel = (interviewPassingResult: string) => {
+  switch (interviewPassingResult) {
+    case "PASS":
+      return "합격";
+    case "FAIL":
+      return "불합격";
+    case "WAIT":
+      return "대기";
+  }
+};
+
+const ApplicantMgt = () => {
+  const [applicants, setApplicants] = useState<Applicant[]>([]);
+  const [selectedApplicant, setSelectedApplicant] = useState<Applicant | null>(
+    null
+  );
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalVisible(!isModalVisible);
+  };
+
+  const handleApplicantClick = (applicant: Applicant) => {
+    setSelectedApplicant(applicant);
+    handleModalToggle();
+  };
+
+  const fetchData = async () => {
+    await instance
+      .get("/report/applicant/대동여지도")
+      .then((res) => {
+        setApplicants(res.data);
+        console.log(res);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
   return (
     <Container>
-      <ApplicantWrapper>
-        <Applicant>
-          <ApplicantName to="/ApplicantDetail">{props.name}</ApplicantName>
-          <ApplicantInfo>{props.info}</ApplicantInfo>
-        </Applicant>
-        <Button>
-          <PassBtn>합격</PassBtn>
-          <FailureBtn>불합격</FailureBtn>
-        </Button>
-      </ApplicantWrapper>
+      {applicants &&
+        applicants.map((applicant, index) => (
+          <Box>
+            <Application key={index}>
+              <Applicant>
+                <ApplicantName onClick={() => handleApplicantClick(applicant)}>
+                  {applicant.name}
+                </ApplicantName>
+                <ApplicantInfo>
+                  {applicant.classNumber} &nbsp;
+                  {MajorLabel(applicant.hopeMajor)}
+                </ApplicantInfo>
+                <ApplicantTime>
+                  면접 일시 : {applicant.interviewStartTime} ~
+                  {applicant.interviewEndTime}
+                </ApplicantTime>
+              </Applicant>
+              <ResultWrapper>
+                <ReportInterview>
+                  서류 :{reportresultLabel(applicant.reportPassingResult)}
+                </ReportInterview>
+                <ReportInterview>
+                  면접 :{interviewresultLabel(applicant.interviewPassingResult)}
+                </ReportInterview>
+              </ResultWrapper>
+            </Application>
+          </Box>
+        ))}
+      <Modal>
+        {selectedApplicant && isModalVisible && (
+          <ApplicantModal onModalToggle={handleModalToggle} />
+        )}
+      </Modal>
     </Container>
   );
 };
 
-const Container = styled.div``;
+const Container = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 300px 300px 300px);
+  row-gap: 16px;
+  column-gap: 60px;
+`;
 
-const ApplicantWrapper = styled.div`
-  width: 370px;
-  height: 110px;
-  display: flex;
-  padding: 16px 36px;
-  justify-content: space-between;
-  align-items: center;
+const Modal = styled.div`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+const Box = styled.div`
+  height: 123px;
+  padding: 15px;
   border: 1px solid rgba(110, 110, 135, 0.5);
+  background-color: white;
   border-radius: 10px;
 `;
 
+const Application = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
 const Applicant = styled.div`
   display: flex;
   flex-direction: column;
   gap: 5px;
 `;
 
-const ApplicantName = styled(Link)`
-  font-size: 32px;
-  font-weight: 900;
+const ApplicantName = styled.p`
+  font-size: 36px;
+  font-family: "DXhimchanBold";
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
 `;
 
 const ApplicantInfo = styled.p`
-  font-size: 16px;
-  font-weight: 500;
+  font-size: 20px;
 `;
 
-const Button = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+const ApplicantTime = styled.p`
+  font-size: 16px;
 `;
 
-const PassBtn = styled.div`
+const ResultWrapper = styled.div`
   display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100px;
-  height: 35px;
-  border-radius: 8px;
-  color: #ffffff;
-  background-color: #ffb800;
-  padding: 8px 28px;
-  cursor: pointer;
+  flex-direction: column;
+  gap: 5px;
 `;
 
-const FailureBtn = styled.div`
-  width: 100px;
-  height: 35px;
-  border-radius: 8px;
-  color: #ffffff;
-  background-color: #6e6e87;
-  padding: 8px 24px;
-  cursor: pointer;
+const ReportInterview = styled.div`
+  font-size: 13px;
 `;
 
 export default ApplicantMgt;