Skip to content

Commit

Permalink
Merge pull request #425 from Bamdoliro/feat/#421
Browse files Browse the repository at this point in the history 
어드민 원서 상세조회 페이지 성적 테이블 개발
  • Loading branch information
@arkk200
arkk200 authored Sep 20, 2023
2 parents a46283f + 04bfccf commit 92aae79
Show file tree
Hide file tree
Showing 8 changed files with 289 additions and 38 deletions.
2 changes: 1 addition & 1 deletion apps/admin/src/components/form/FormDetailContent/FormStatus/FormStatus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const FormStatus = ({ id }: Props) => {
</Row>
</FormStatusBox>
<Column gap={8}>
<Button size="SMALL">원서 상태 변경하기</Button>
<Button size="SMALL">최종 접수 상태 변경하기</Button>
<Button size="SMALL" option="SECONDARY">
제출 서류 조회하기
</Button>
Expand Down
14 changes: 6 additions & 8 deletions apps/admin/src/components/form/FormDetailContent/성적/교과성적/교과성적.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useFormDetailQuery } from '@/services/form/queries';
import getAchievementLevelsGroupList from '@/utils/functions/getAchievementLevelsGroupList';
import styled from 'styled-components';
import { Column } from '@maru/ui';
import 교과성적Header from './교과성적Header/교과성적Header';
import 교과성적Item from './교과성적Item/교과성적Item';

Expand All @@ -18,20 +18,18 @@ const 교과성적 = ({ id }: Props) => {
console.log(achievementLevelsGroupList);

return (
<Styled교과성적>
<Column>
<교과성적Header />
{achievementLevelsGroupList.map((group) => (
<교과성적Item
subjectName={group.subjectName}
achievementLevel21={group.achievementLevels[0]}
achievementLevel22={group.achievementLevels[1]}
achievementLevel31={group.achievementLevels[2]}
achievementLevel21={group.achievementLevels[0] || '없음'}
achievementLevel22={group.achievementLevels[1] || '없음'}
achievementLevel31={group.achievementLevels[2] || '없음'}
/>
))}
</Styled교과성적>
</Column>
);
};

export default 교과성적;

const Styled교과성적 = styled.div``;
51 changes: 23 additions & 28 deletions apps/admin/src/components/form/FormDetailContent/성적/교과성적/교과성적Header/교과성적Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,34 @@
import { Column, Row, Th } from '@maru/ui';
import styled from 'styled-components';

const 교과성적Header = () => {
return (
<Styled교과성적Header>
<Row>
<Th width={123} height={100} borderTopLeftRadius={12}>
과목
<Row>
<Th width={123} height={100} borderTopLeftRadius={12}>
과목
</Th>
<Column>
<Th width={279} height={50}>
2학년
</Th>
<Column>
<Th width={279} height={50}>
2학년
</Th>
<Row>
<Th option="SECONDARY" width="50%" height={50}>
1학기
</Th>
<Th option="SECONDARY" width="50%" height={50}>
2학기
</Th>
</Row>
</Column>
<Column>
<Th width={140} height={50} borderTopRightRadius={12}>
3학년
</Th>
<Th option="SECONDARY" width={140} height={50}>
<Row>
<Th option="SECONDARY" width="50%" height={50}>
1학기
</Th>
</Column>
</Row>
</Styled교과성적Header>
<Th option="SECONDARY" width="50%" height={50}>
2학기
</Th>
</Row>
</Column>
<Column>
<Th width={140} height={50} borderTopRightRadius={12}>
3학년
</Th>
<Th option="SECONDARY" width={140} height={50}>
1학기
</Th>
</Column>
</Row>
);
};

export default 교과성적Header;

const Styled교과성적Header = styled.div``;
60 changes: 60 additions & 0 deletions apps/admin/src/components/form/FormDetailContent/성적/봉사시간/봉사시간.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { useFormDetailQuery } from '@/services/form/queries';
import { color, font } from '@maru/theme';
import { CellInput, Column, Row, Td, Th } from '@maru/ui';
import { styled } from 'styled-components';

interface Props {
id: number;
}

const 봉사시간 = ({ id }: Props) => {
const { data: formDetailData } = useFormDetailQuery(id);

return (
<Column>
<Row>
<Th borderTopLeftRadius={12} width={162} height={56}>
학년
</Th>
<Th borderTopRightRadius={12} width={318} height={56}>
봉사시간
</Th>
</Row>
<Row>
<Td width={162} height={56} option="SECONDARY">
1학년
</Td>
<Td width={318} height={56}>
<CellInput value={formDetailData?.grade.volunteerTime1} readOnly />
<Hour>시간</Hour>
</Td>
</Row>
<Row>
<Td width={162} height={56} option="SECONDARY">
2학년
</Td>
<Td width={318} height={56}>
<CellInput value={formDetailData?.grade.volunteerTime2} readOnly />
<Hour>시간</Hour>
</Td>
</Row>
<Row>
<Td borderBottomLeftRadius={12} width={162} height={56} option="SECONDARY">
3학년
</Td>
<Td borderBottomRightRadius={12} width={318} height={56}>
<CellInput value={formDetailData?.grade.volunteerTime3} readOnly />
<Hour>시간</Hour>
</Td>
</Row>
</Column>
);
};

export default 봉사시간;

const Hour = styled.p`
${font.p2}
color: ${color.gray900};
margin-left: 8px;
`;
6 changes: 6 additions & 0 deletions apps/admin/src/components/form/FormDetailContent/성적/성적.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ import { Column, Row } from '@maru/ui';
import { SwitchCase } from '@toss/react';
import { useState } from 'react';
import 교과성적 from './교과성적/교과성적';
import 봉사시간 from './봉사시간/봉사시간';
import 자격증 from './자격증/자격증';
import 출결상황 from './출결상황/출결상황';

interface Props {
id: number;
Expand All @@ -27,6 +30,9 @@ const 성적 = ({ id }: Props) => {
value={currentGraduationStep}
caseBy={{
'교과 성적': <교과성적 id={id} />,
'출결 상황': <출결상황 id={id} />,
'봉사 시간': <봉사시간 id={id} />,
자격증: <자격증 id={id} />,
}}
/>
</Row>
Expand Down
98 changes: 98 additions & 0 deletions apps/admin/src/components/form/FormDetailContent/성적/자격증/자격증.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import { useFormDetailQuery } from '@/services/form/queries';
import { CheckBox, Column, Row, Td, Th } from '@maru/ui';

interface Props {
id: number;
}

const 자격증 = ({ id }: Props) => {
const { data: formDetailData } = useFormDetailQuery(id);

const is기능사included =
formDetailData?.grade.certificateList.includes('CRAFTSMAN_INFORMATION_PROCESSING') ||
formDetailData?.grade.certificateList.includes(
'CRAFTSMAN_INFORMATION_EQUIPMENT_OPERATION',
) ||
formDetailData?.grade.certificateList.includes('CRAFTSMAN_COMPUTER');

return (
<Column>
<Row>
<Th width={416} height={56} borderTopLeftRadius={12}>
자격증명
</Th>
<Th width={200} height={56}>
시행기관
</Th>
<Th width={120} height={56}>
반영점수
</Th>
<Th width={80} height={56} borderTopRightRadius={12}>
선택
</Th>
</Row>
<Row>
<Td width={416} height={56}>
정보처리기능사, 정보기기운용기능사, 전자계산기기능사
</Td>
<Td width={200} height={56}>
한국산업인력공단
</Td>
<Td width={120} height={56}>
4점
</Td>
<Td width={80} height={56}>
<CheckBox checked={is기능사included} />
</Td>
</Row>
<Row>
<Td width={416} height={168} borderBottomLeftRadius={12}>
컴퓨터활용능력
</Td>
<Td width={200} height={168}>
한국산업인력공단
</Td>
<Column>
<Row>
<Td width={120} height={56}>
1급(3점)
</Td>
<Td width={80} height={56}>
<CheckBox
checked={formDetailData?.grade.certificateList.includes(
'COMPUTER_SPECIALIST_LEVEL_1',
)}
/>
</Td>
</Row>
<Row>
<Td width={120} height={56}>
2급(2점)
</Td>
<Td width={80} height={56}>
<CheckBox
checked={formDetailData?.grade.certificateList.includes(
'COMPUTER_SPECIALIST_LEVEL_2',
)}
/>
</Td>
</Row>
<Row>
<Td width={120} height={56}>
3급(1점)
</Td>
<Td width={80} height={56} borderBottomRightRadius={12}>
<CheckBox
checked={formDetailData?.grade.certificateList.includes(
'COMPUTER_SPECIALIST_LEVEL_3',
)}
/>
</Td>
</Row>
</Column>
</Row>
</Column>
);
};

export default 자격증;
94 changes: 94 additions & 0 deletions apps/admin/src/components/form/FormDetailContent/성적/출결상황/출결상황.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import { useFormDetailQuery } from '@/services/form/queries';
import { CellInput, Column, Row, Td, Th } from '@maru/ui';

interface Props {
id: number;
}

const 출결상황 = ({ id }: Props) => {
const { data: formDetailData } = useFormDetailQuery(id);

return (
<Column>
<Row>
<Th width={140} height={56} borderTopLeftRadius={12}>
학년
</Th>
<Th width={140} height={56}>
미인정 결석
</Th>
<Th width={140} height={56}>
미인정 지각
</Th>
<Th width={140} height={56}>
미인정 조퇴
</Th>
<Th width={140} height={56} borderTopRightRadius={12}>
미인정 결과
</Th>
</Row>
<Row>
<Td option="SECONDARY" width={140} height={56}>
1학년
</Td>
<Td width={140} height={56}>
<CellInput value={formDetailData?.grade.attendance1.absenceCount} readOnly />
</Td>
<Td width={140} height={56}>
<CellInput value={formDetailData?.grade.attendance1.latenessCount} readOnly />
</Td>
<Td width={140} height={56}>
<CellInput value={formDetailData?.grade.attendance1.earlyLeaveCount} readOnly />
</Td>
<Td width={140} height={56}>
<CellInput
value={formDetailData?.grade.attendance1.classAbsenceCount}
readOnly
/>
</Td>
</Row>
<Row>
<Td option="SECONDARY" width={140} height={56}>
2학년
</Td>
<Td width={140} height={56}>
<CellInput value={formDetailData?.grade.attendance2.absenceCount} readOnly />
</Td>
<Td width={140} height={56}>
<CellInput value={formDetailData?.grade.attendance2.latenessCount} readOnly />
</Td>
<Td width={140} height={56}>
<CellInput value={formDetailData?.grade.attendance2.earlyLeaveCount} readOnly />
</Td>
<Td width={140} height={56}>
<CellInput
value={formDetailData?.grade.attendance2.classAbsenceCount}
readOnly
/>
</Td>
</Row>
<Row>
<Td option="SECONDARY" width={140} height={56} borderBottomLeftRadius={12}>
3학년
</Td>
<Td width={140} height={56}>
<CellInput value={formDetailData?.grade.attendance3.absenceCount} readOnly />
</Td>
<Td width={140} height={56}>
<CellInput value={formDetailData?.grade.attendance3.latenessCount} readOnly />
</Td>
<Td width={140} height={56}>
<CellInput value={formDetailData?.grade.attendance3.earlyLeaveCount} readOnly />
</Td>
<Td width={140} height={56}>
<CellInput
value={formDetailData?.grade.attendance3.classAbsenceCount}
readOnly
/>
</Td>
</Row>
</Column>
);
};

export default 출결상황;
2 changes: 1 addition & 1 deletion packages/maru-ui/src/Input/SearchInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const SearchInput = ({
export default SearchInput;

const StyledSearchInput = styled.div`
${flex({ alignItems: 'center' })}
${flex({ alignItems: 'center', justifyContent: 'space-between' })}
height: 40px;
padding: 0 12px 0 16px;
background-color: ${color.white};
Expand Down

0 comments on commit 92aae79

Please sign in to comment.