Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style/#147 마이페이지 근로계약서 조회 화면 수정 #148

Merged
merged 1 commit into from
Jul 9, 2024
Merged

style/#147 마이페이지 근로계약서 조회 화면 수정 #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
218 changes: 110 additions & 108 deletions src/components/Contract.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,117 +26,119 @@ const Contract = ({ contractId }: Prop) => {

return (
<>
<table className='border-collapse border border-gray-200 max-w-full w-full mx-auto text-sm'>
<thead className='w-full'>
<tr>
<th className='border border-gray-200 px-4 py-2'>계약서 항목</th>
<th className='border border-gray-200 px-4 py-2'>내용</th>
</tr>
</thead>
<tbody className='max-w-full'>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end'>
근무지
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
{contract?.workPlaceName}
</td>
</tr>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end '>
근무지 주소
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
{contract?.workSite}
</td>
</tr>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end'>
근무 내용
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
{contract?.workDetail}
</td>
</tr>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end'>
근무 시작일
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
{contract?.workStartDate.toLocaleString()}
</td>
</tr>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end'>
나의 주소
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
{contract?.employeeAddress}
</td>
</tr>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end'>
나의 연락처
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
{contract?.employeePhone}
</td>
</tr>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end'>
휴무일
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
{contract?.restDayOfWeek}
</td>
</tr>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end'>
시급
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
{contract?.payPerHour}
</td>
</tr>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end'>
급여일
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
{contract?.paymentDay}
</td>
</tr>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end'>
근무일
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
<div className='flex flex-col gap-2'>
{contract?.workTimes?.map((item, index) => (
<>
<div
key={item.workDayOfWeek}
className='flex justify-between '
>
<div className='text-start font-bold text-base'>
{item.workDayOfWeek.charAt(0)}
</div>
<div className='flex flex-col gap-1'>
<div className='text-sm'>
{item.workStartTime}-{item.workEndTime}
{contract && (
<table className='border-collapse border border-gray-200 max-w-full w-full mx-auto text-sm'>
<thead className='w-full'>
<tr>
<th className='border border-gray-200 px-4 py-2'>계약서 항목</th>
<th className='border border-gray-200 px-4 py-2'>내용</th>
</tr>
</thead>
<tbody className='max-w-full'>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end'>
근무지
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
{contract?.workPlaceName}
</td>
</tr>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end '>
근무지 주소
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
{contract?.workSite}
</td>
</tr>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end'>
근무 내용
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
{contract?.workDetail}
</td>
</tr>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end'>
근무 시작일
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
{contract?.workStartDate.toLocaleString()}
</td>
</tr>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end'>
나의 주소
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
{contract?.employeeAddress}
</td>
</tr>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end'>
나의 연락처
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
{contract?.employeePhone}
</td>
</tr>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end'>
휴무일
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
{contract?.restDayOfWeek}
</td>
</tr>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end'>
시급
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
{contract?.payPerHour}
</td>
</tr>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end'>
급여일
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
{contract?.paymentDay}
</td>
</tr>
<tr>
<td className='border border-gray-200 px-4 py-2 bg-gray-100 font-semibold text-end'>
근무일
</td>
<td className='border border-gray-200 px-4 py-2 text-end'>
<div className='flex flex-col gap-2'>
{contract?.workTimes?.map((item, index) => (
<>
<div
key={item.workDayOfWeek}
className='flex justify-between '
>
<div className='text-start font-semibold text-base'>
{item.workDayOfWeek.charAt(0)}
</div>
<div className='text-sm'>
(휴) {item.restStartTime}-{item.restEndTime}
<div className='flex flex-col gap-1'>
<div className='text-sm'>
{item.workStartTime}-{item.workEndTime}
</div>
<div className='text-sm'>
(휴) {item.restStartTime}-{item.restEndTime}
</div>
</div>
</div>
</div>
</>
))}
</div>
</td>
</tr>
</tbody>
</table>
</>
))}
</div>
</td>
</tr>
</tbody>
</table>
)}
</>
);
};
Expand Down
2 changes: 1 addition & 1 deletion src/components/ModalCenter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const ModalCenter = ({
)}
>
<div className='font-bold'>{title}</div>
<div className='max-w-full w-full'>{children}</div>
<div className='max-w-full w-full overflow-y-scroll'>{children}</div>
<div className='flex gap-5 w-full'>
{hasDecline && (
<BtnGray
Expand Down
1 change: 0 additions & 1 deletion src/pages/LoginPgae/LoginPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ const LoginPage = () => {
<div className='text-gray-300 text-sm mb-10'>
간편 비밀번호를 입력해주세요
</div>

<div>
<input
placeholder='비밀번호'
Expand Down
92 changes: 9 additions & 83 deletions src/pages/employee/MyPageTab/MyPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import ApiClient from '../../../api/apiClient';
import ModalBottom from '../../../components/ModalBottom';
import ToolBarLink from '../../../components/ui/ToolBarLink';
import { EmployeeMenuList } from '../datas';
import Contract from '../../../components/Contract';
import ModalCenter from '../../../components/ModalCenter';

const MyPage = () => {
const navigation = useNavigate();
Expand Down Expand Up @@ -69,91 +71,15 @@ const MyPage = () => {
return (
<>
{isModalOpen && paperDetail && (
<ModalBottom
title='근로계약서'
<ModalCenter
closeModal={closeModal}
btnBottom
btnText='확인'
action={closeModal}
confirmText='확인'
confirmAction={closeModal}
className='w-[90%] h-[70%]'
title='근로 계약서'
>
<div className='flex flex-col gap-3 mb-5 text-sm max-h-[450px] overflow-y-scroll'>
<div className='flex justify-between w-full pt-5'>
<div className='font-semibold text-start'>근무지</div>
<div>
<WorkPlaceName
name={paperDetail?.workPlaceName}
colorType='02'
/>
</div>
</div>
<div className='flex justify-between w-full'>
<div className='font-semibold text-start'>근무지 주소</div>
<div>{paperDetail?.workSite}</div>
</div>
<div className='flex justify-between w-full'>
<div className='font-semibold text-start'>근무 내용</div>
<div>{paperDetail?.workDetail}</div>
</div>
<div className='flex justify-between w-full'>
<div className='font-semibold text-start'>근무 시작일</div>
<div>
{paperDetail.workStartDate
.toString()
.substring(
0,
paperDetail.workStartDate.toString().indexOf('T')
)}
</div>
</div>

<div className='flex justify-between'>
<div className='font-semibold text-start'>나의 주소</div>
<div>{paperDetail?.employeeAddress}</div>
</div>
<div className='flex justify-between gap-10'>
<div className='font-semibold text-start'>나의 연락처</div>
<div>{paperDetail?.employeePhone}</div>
</div>
<div className='flex justify-between w-full'>
<div className='font-semibold text-start'>휴무일</div>
<div>{paperDetail?.restDayOfWeek}</div>
</div>
<div className='flex justify-between w-full'>
<div className='font-semibold text-start'>시급</div>
<div>{paperDetail?.payPerHour.toLocaleString()}원</div>
</div>
<div className='flex justify-between w-full'>
<div className='font-semibold text-start'>급여일</div>
<div>{paperDetail?.paymentDay}일</div>
</div>

<div className='flex justify-between w-full'>
<div className='font-semibold text-start mb-2'>근무일</div>
<div className='flex flex-col gap-3 justify-between'>
{paperDetail?.workTimes?.map((item) => {
return (
<div
key={item.workDayOfWeek}
className='flex justify-between'
>
<div className='text-start pr-3'>
{item.workDayOfWeek}
</div>
<div className='flex flex-col'>
<div>
근무시간 {item.workStartTime} - {item.workEndTime}
</div>
<div>
휴게시간 {item.restStartTime} - {item.restEndTime}
</div>
</div>
</div>
);
})}
</div>
</div>
</div>
</ModalBottom>
<Contract contractId={paperDetail.employmentContractId} />
</ModalCenter>
)}
<Frame navTitle='알바ON'>
<ToolBarLink options={EmployeeMenuList} />
Expand Down
2 changes: 1 addition & 1 deletion src/pages/employee/PartTimeTab/PaymentMain.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const PaymentMain = () => {
{/* 토글 버튼 */}
<NavToggle
first='급여관리'
second='근무 관리'
second='근무지 관리'
firstSelected={() => {
selectPayment();
setYearMonth(today);
Expand Down
Loading