Skip to content

Commit

Permalink
💄 Add portfolio box UI
Browse files Browse the repository at this point in the history 
#271 지원서 양식 기본틀 완성
  • Loading branch information
@sseuldev @Herrypi
sseuldev authored and Herrypi committed Sep 30, 2024
1 parent bc36fe6 commit 63689fe
Show file tree
Hide file tree
Showing 2 changed files with 211 additions and 7 deletions.
174 changes: 167 additions & 7 deletions gongjakso/src/pages/ProfileRecruit/PdfUserApplication.jsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<>
<S.TopBox>
Expand Down Expand Up @@ -54,6 +61,159 @@ const PdfUserApplication = () => {
<S.SubTitle>지원이유</S.SubTitle>
<S.ContentBox>{myApp?.body}</S.ContentBox>
</S.DetailBox>

{!myApp?.is_private && (
<div>
<S.DetailBox>
<S.SubTitle>학력</S.SubTitle>
{portfolio?.data?.educationList?.map(
(education, index) => (
<S.BoxDetail key={index}>
<S.InputContainer>
<S.PortBox $w="50%">
{education.school ||
'학교 정보 없음'}
</S.PortBox>
<S.PortBox $w="24rem">
{education.grade ||
'학년 정보 없음'}
</S.PortBox>
<S.PortBox $w="24rem">
{education.state ||
'상태 정보 없음'}
</S.PortBox>
</S.InputContainer>
</S.BoxDetail>
),
)}
</S.DetailBox>

<S.DetailBox>
<S.SubTitle>경력사항</S.SubTitle>
{portfolio?.data?.workList?.map((work, index) => (
<S.BoxDetail key={index}>
<S.InputContainer>
<S.PortBox $w="58%">
(회사명){' '}
{work.company || '정보 없음'}
</S.PortBox>
<S.PortBox $w="40%">
(부서명/직책) {work.partition || ''}
</S.PortBox>
</S.InputContainer>

<S.InputContainer>
<S.FlexPortBox $w="32%">
<span>입사일</span>
<span>
{work.enteredAt || '정보 없음'}
</span>
</S.FlexPortBox>
<S.FlexPortBox $w="32%">
<span>퇴사일</span>
<span>
{work.exitedAt || '미정'}
</span>
</S.FlexPortBox>
<S.PortBox $w="32%">
{work.isActive ? '재직 중' : '퇴사'}
</S.PortBox>
</S.InputContainer>

<S.InputContainer>
<S.WorkContent>
{work.detail}
</S.WorkContent>
</S.InputContainer>
</S.BoxDetail>
))}
</S.DetailBox>

<S.DetailBox>
<S.SubTitle>대외활동</S.SubTitle>
{portfolio?.data?.educationList?.map(
(education, index) => (
<S.BoxDetail key={index}>
<S.InputContainer>
<S.PortBox $w="70%">
{education.school ||
'학교 정보 없음'}
</S.PortBox>
<S.PortBox $w="22rem">
{education.grade ||
'학년 정보 없음'}
</S.PortBox>
</S.InputContainer>
</S.BoxDetail>
),
)}
</S.DetailBox>

<S.DetailBox>
<S.SubTitle>수상경력</S.SubTitle>
{portfolio?.data?.educationList?.map(
(education, index) => (
<S.BoxDetail key={index}>
<S.InputContainer>
<S.PortBox $w="50%">
{education.school ||
'학교 정보 없음'}
</S.PortBox>
<S.PortBox $w="24rem">
{education.grade ||
'학년 정보 없음'}
</S.PortBox>
<S.PortBox $w="24rem">
{education.state ||
'상태 정보 없음'}
</S.PortBox>
</S.InputContainer>
</S.BoxDetail>
),
)}
</S.DetailBox>

<S.DetailBox>
<S.SubTitle>자격증</S.SubTitle>
{portfolio?.data?.educationList?.map(
(education, index) => (
<S.BoxDetail key={index}>
<S.InputContainer>
<S.PortBox $w="50%">
{education.school ||
'학교 정보 없음'}
</S.PortBox>
<S.PortBox $w="24rem">
{education.grade ||
'학년 정보 없음'}
</S.PortBox>
<S.PortBox $w="24rem">
{education.state ||
'상태 정보 없음'}
</S.PortBox>
</S.InputContainer>
</S.BoxDetail>
),
)}
</S.DetailBox>

<S.DetailBox>
<S.SubTitle>SNS</S.SubTitle>
{portfolio?.data?.educationList?.map(
(education, index) => (
<S.BoxDetail key={index}>
<S.InputContainer>
<S.PortBox $w="90%">
{education.school ||
'학교 정보 없음'}
</S.PortBox>
</S.InputContainer>
</S.BoxDetail>
),
)}
</S.DetailBox>
</div>
)}
</S.GlobalBox>
</>
);
Expand Down
44 changes: 44 additions & 0 deletions gongjakso/src/pages/ProfileRecruit/PdfUserApplicationStyled.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;

0 comments on commit 63689fe

Please sign in to comment.