From 63689fe09b23f1ac7ccebbb2f39531b98143a3ab Mon Sep 17 00:00:00 2001 From: Hanseul Lee Date: Mon, 30 Sep 2024 14:06:31 +0900 Subject: [PATCH] :lipstick: Add portfolio box UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #271 지원서 양식 기본틀 완성 --- .../ProfileRecruit/PdfUserApplication.jsx | 174 +++++++++++++++++- .../PdfUserApplicationStyled.jsx | 44 +++++ 2 files changed, 211 insertions(+), 7 deletions(-) diff --git a/gongjakso/src/pages/ProfileRecruit/PdfUserApplication.jsx b/gongjakso/src/pages/ProfileRecruit/PdfUserApplication.jsx index c1230dc..2aae115 100644 --- a/gongjakso/src/pages/ProfileRecruit/PdfUserApplication.jsx +++ b/gongjakso/src/pages/ProfileRecruit/PdfUserApplication.jsx @@ -1,29 +1,36 @@ import React, { useEffect, useState } from 'react'; import * as S from './PdfUserApplicationStyled'; import * as T from '../../features/modal/ApplyModal.styled'; +import * as U from '../Portfolio/Portfolio.Styled'; import { useParams } from 'react-router-dom'; import Logo from '../../assets/images/applicationLogo.svg'; import { getMyApplication } from '../../service/apply_service'; -import { getMyPortfolio } from '../../service/post_service'; +import { getPortfolio } from '../../service/portfolio_service'; const PdfUserApplication = () => { const { id } = useParams(); const [myApp, setmyApp] = useState([]); - const [portfolioData, setportfolioData] = useState([]); + const [portId, setPortId] = useState(); + const [portfolio, setPortfolio] = useState([]); useEffect(() => { // [GET] 특정 지원자 지원서 조회 API getMyApplication(id).then(res => { setmyApp(res?.data); - }); - - // [GET] 내 포트폴리오 리스트 조회 API - getMyPortfolio().then(res => { - setportfolioData(res?.data); + setPortId(res?.data.portfolio_id); }); }, [id]); + useEffect(() => { + if (portId) { + // [GET] 포트폴리오 상세 조회 API + getPortfolio(portId).then(res => { + setPortfolio(res?.data); + }); + } + }, [portId]); + return ( <> @@ -54,6 +61,159 @@ const PdfUserApplication = () => { 지원이유 {myApp?.body} + + {!myApp?.is_private && ( +
+ + 학력 + {portfolio?.data?.educationList?.map( + (education, index) => ( + + + + {education.school || + '학교 정보 없음'} + + + {education.grade || + '학년 정보 없음'} + + + {education.state || + '상태 정보 없음'} + + + + ), + )} + + + + 경력사항 + {portfolio?.data?.workList?.map((work, index) => ( + + + + (회사명){' '} + {work.company || '정보 없음'} + + + (부서명/직책) {work.partition || ''} + + + + + + 입사일 + + {work.enteredAt || '정보 없음'} + + + + 퇴사일 + + {work.exitedAt || '미정'} + + + + {work.isActive ? '재직 중' : '퇴사'} + + + + + + {work.detail} + + + + ))} + + + + 대외활동 + {portfolio?.data?.educationList?.map( + (education, index) => ( + + + + {education.school || + '학교 정보 없음'} + + + {education.grade || + '학년 정보 없음'} + + + + ), + )} + + + + 수상경력 + {portfolio?.data?.educationList?.map( + (education, index) => ( + + + + {education.school || + '학교 정보 없음'} + + + {education.grade || + '학년 정보 없음'} + + + {education.state || + '상태 정보 없음'} + + + + ), + )} + + + + 자격증 + {portfolio?.data?.educationList?.map( + (education, index) => ( + + + + {education.school || + '학교 정보 없음'} + + + {education.grade || + '학년 정보 없음'} + + + {education.state || + '상태 정보 없음'} + + + + ), + )} + + + + SNS + {portfolio?.data?.educationList?.map( + (education, index) => ( + + + + {education.school || + '학교 정보 없음'} + + + + ), + )} + +
+ )} ); diff --git a/gongjakso/src/pages/ProfileRecruit/PdfUserApplicationStyled.jsx b/gongjakso/src/pages/ProfileRecruit/PdfUserApplicationStyled.jsx index 64f6cc8..8c3ac23 100644 --- a/gongjakso/src/pages/ProfileRecruit/PdfUserApplicationStyled.jsx +++ b/gongjakso/src/pages/ProfileRecruit/PdfUserApplicationStyled.jsx @@ -53,3 +53,47 @@ export const ContentBox = styled.div` border-radius: 9px; font-size: ${({ theme }) => theme.fontSize.m}; `; + +export const BoxDetail = styled.div` + display: flex; + flex-direction: column; + width: 100%; + margin-top: -0.5rem; +`; + +export const InputContainer = styled.div` + display: flex; + justify-content: space-between; + flex-direction: row; + width: 100%; +`; + +export const PortBox = styled.div` + width: ${props => props.$w}; + height: 3.438rem; + margin-top: 1.5rem; + margin-right: 0.5rem; + border: 1.5px solid ${({ theme }) => theme.Grey}; + padding: 0.983rem 1.125rem; + font-size: ${({ theme }) => theme.fontSize.m}; + border-radius: 9px; + color: #828293; + display: flex; + align-items: center; +`; + +export const FlexPortBox = styled(PortBox)` + display: flex; + justify-content: space-between; +`; + +export const WorkContent = styled.div` + width: 100%; + display: inline-block; + padding: 0.983rem 1.125rem; + margin-top: 1.5rem; + font-size: ${({ theme }) => theme.fontSize.m}; + border: 1.5px solid ${({ theme }) => theme.Grey}; + border-radius: 9px; + color: #828293; +`;