✨ feat: 작성 페이지에서 공통으로 사용되는 서브헤더, 유학생 정보 컴포넌트 작성 Team-inglo#77

naarang · Oct 31, 2024 · 92c89c3 · 92c89c3
1 parent 077cd93
commit 92c89c3
Show file tree

Hide file tree

Showing 26 changed files with 2,406 additions and 143 deletions.
diff --git a/src/api/document.ts b/src/api/document.ts
@@ -1,12 +1,15 @@
 import {
+  EmployerInformation,
   IntegratedApplicationData,
   LaborContractDataResponse,
   LaborContractEmployeeInfo,
+  LaborContractEmployerInfo,
   PartTimePermitData,
   PartTimePermitFormRequest,
   SearchSchoolResponse,
 } from '@/types/api/document';
 import { api } from '.';
+import { RESTYPE } from '@/types/api/common';
 
 //시간제 취업허가서 작성 api 통신 함수
 export const postPartTimeEmployPermit = async ({
@@ -30,14 +33,29 @@ export const putPartTimeEmployPermit = async ({
 }: {
   id: number;
   document: PartTimePermitFormRequest;
-}): Promise<{ success: boolean }> => {
+}): Promise<RESTYPE<null>> => {
   const response = await api.put(
     `/users/documents/${id}/part-time-employment-permits`,
     document,
   );
   return response.data;
 };
 
+// 8.11 (고용주) 시간제 취업허가서 수정하기
+export const putPartTimeEmployPermitEmployer = async ({
+  id,
+  document,
+}: {
+  id: number;
+  document: EmployerInformation;
+}): Promise<RESTYPE<null>> => {
+  const response = await api.put(
+    `/owners/documents/${id}/part-time-employment-permits`,
+    document,
+  );
+  return response.data;
+};
+
 // 8.6 표준 근로계약서 작성 api 통신 함수
 export const postStandardLaborContracts = async ({
   id,
@@ -68,6 +86,21 @@ export const putStandardLaborContracts = async ({
   return response.data;
 };
 
+// 8.13 (고용주) 시간제 취업허가서 수정하기
+export const putLaborContractEmployer = async ({
+  id,
+  document,
+}: {
+  id: number;
+  document: LaborContractEmployerInfo;
+}): Promise<RESTYPE<null>> => {
+  const response = await api.put(
+    `/owners/documents/${id}/standard-labor-contracts`,
+    document,
+  );
+  return response.data;
+};
+
 // 8.8 통합신청서 작성 api 통신 함수
 export const postIntegratedApplications = async ({
   id,

diff --git a/src/components/Common/Dropdown.tsx b/src/components/Common/Dropdown.tsx
@@ -5,7 +5,7 @@ import DatePicker from '@/components/Common/DatePicker';
 // Dropdown 컴포넌트의 props 타입을 정의합니다.
 type DropDownProps = {
   title?: string; // 드롭다운의 제목 (선택적)
-  value: string | undefined; // 현재 선택된 값
+  value: string | null; // 현재 선택된 값
   placeholder: string; // 플레이스홀더 텍스트
   options: Array<string>; // 드롭다운 옵션 목록
   isCalendar?: boolean; // 캘린더 모드 여부 (선택적)
@@ -19,7 +19,7 @@ export const DropdownModal = ({
   onSelect,
 }: {
   options: string[];
-  value: string | undefined;
+  value: string | null;
   onSelect: (option: string) => void;
 }) => {
   return (
@@ -74,7 +74,7 @@ const Dropdown = ({
           <div className="flex-1 h-5 flex flex-row items-center justify-between">
             <input
               className="w-full relative leading-5 outline-none bg-white"
-              value={value}
+              value={value ?? ''}
               placeholder={placeholder}
               disabled
             />
@@ -88,7 +88,7 @@ const Dropdown = ({
                   isOpen ? '' : 'rotate-180'
                 }`}
               >
-                <ArrowIcon isMarked={value !== undefined} />
+                <ArrowIcon isMarked={value !== null} />
               </div>
             </button>
           </div>
@@ -99,7 +99,7 @@ const Dropdown = ({
             <DatePicker setSelectedDate={handleSelect} />
           ) : (
             <DropdownModal
-              value={value}
+              value={value ?? ''}
               options={options}
               onSelect={handleSelect}
             />

diff --git a/src/components/Common/Input.tsx b/src/components/Common/Input.tsx
@@ -16,12 +16,16 @@ type InputStatus = (typeof INPUT_STATUS)[keyof typeof INPUT_STATUS];
 type InputProps = {
   inputType: InputType; // 입력 필드의 타입
   placeholder: string; // 플레이스홀더 텍스트
-  value: string | undefined; // 입력 필드의 현재 값
+  value: string | null; // 입력 필드의 현재 값
   onChange: (value: string) => void; // 입력값 변경 시 호출될 함수
   canDelete: boolean; // 삭제 버튼 표시 여부
   clearInvalid?: () => void; // 토글 시 invalid 상태를 해제할 함수 (선택적)
   isInvalid?: boolean; // 유효하지 않은 입력 상태 여부 (선택적)
   onDelete?: () => void; // 삭제 버튼 클릭 시 호출될 함수 (선택적)
+  isPrefix?: boolean; // 접두사 여부
+  prefix?: string; // 접두사 내용
+  isUnit?: boolean; // 단위 여부
+  unit?: string; // 단위 내용
 };
 
 // inputStyler 함수: 입력 필드의 상태에 따른 스타일을 반환합니다.
@@ -46,6 +50,10 @@ const Input = ({
   clearInvalid,
   isInvalid,
   value,
+  isPrefix,
+  prefix,
+  isUnit,
+  unit,
 }: InputProps) => {
   // 현재 입력 필드의 상태를 관리합니다.
   const [currentStatus, setCurrentStatus] = useState<InputStatus>(
@@ -79,11 +87,13 @@ const Input = ({
     <div
       className={`w-full flex gap-2 items-center justify-between text-left body-2 border rounded-xl ${inputStyler(currentStatus)} bg-white py-[10px] pl-4 pr-[14px]`}
     >
+      {/* 접두사가 존재할 경우 표시합니다. */}
+      {isPrefix && <div className="w-8 body-2 text-[#464646]">{prefix}</div>}
       {/* 검색 타입일 경우 검색 아이콘을 표시합니다. */}
       {inputType === 'SEARCH' && <SearchIcon />}
       <input
         placeholder={placeholder}
-        value={value}
+        value={value ?? ''}
         className={'w-full outline-none placeholder:text-[var(--input-color)]'}
         onClick={() => handleFocus('click')}
         onBlur={() => handleFocus('blur')}
@@ -103,6 +113,8 @@ const Input = ({
       )}
       {/* 입력값 삭제 가능한 경우 삭제 아이콘을 표시합니다. */}
       {canDelete && <CloseIcon onClick={onDelete} />}
+      {/* 단위가 존재할 경우 표시합니다. */}
+      {isUnit && <div className="body-2 text-[#464646]">{unit}</div>}
     </div>
   );
 };

diff --git a/src/components/Common/WorkDayTimeWithRestBottomSheet.tsx b/src/components/Common/WorkDayTimeWithRestBottomSheet.tsx
@@ -3,32 +3,20 @@ import Button from '@/components/Common/Button';
 import { buttonTypeKeys } from '@/constants/components';
 import { useState } from 'react';
 import TimePicker from '@/components/Common/TimePicker';
+import { DayOfWeek, WorkDayTimeWithRest } from '@/types/api/document';
+import { DAYS } from '@/constants/documents';
 
 // TODO: 나중에 constant로 분리해주세요!
-const DAYS = {
-  ['월요일']: 'MONDAY',
-  ['화요일']: 'TUESDAY',
-  ['수요일']: 'WEDNESDAY',
-  ['목요일']: 'THURSDAY',
-  ['금요일']: 'FRIDAY',
-  ['토요일']: 'SATURDAY',
-  ['일요일']: 'SUNDAY',
-} as const;
 
 type DayType = (typeof DAYS)[keyof typeof DAYS];
 
-// api에게 보낼 데이터 형식
-type WorkDayTimeItemType = {
-  day_of_week: DayType;
-  work_start_time: string;
-  work_end_time: string;
-  break_start_time: string;
-  break_end_time: string;
-};
-
-const WorkDayTimeWithRestBottomSheet = () => {
-  const [isShowBottomsheet, setisShowBottomsheet] = useState<boolean>(true);
-
+const WorkDayTimeWithRestBottomSheet = ({
+  onClose,
+  isShowBottomsheet,
+}: {
+  onClose: (value: WorkDayTimeWithRest[]) => void;
+  isShowBottomsheet: boolean;
+}) => {
   const [dayOfWeek, setDayOfWeek] = useState<DayType[]>([]);
   const [workStartTime, setWorkStartTime] = useState<string | null>(null);
   const [workEndTime, setWorkEndTime] = useState<string | null>(null);
@@ -55,21 +43,18 @@ const WorkDayTimeWithRestBottomSheet = () => {
     return false;
   };
 
-  const onClickSubmit = () => {
+  const returnResult = () => {
     if (!isAvailableSubmit()) return;
-
-    const result: WorkDayTimeItemType[] = dayOfWeek.map((day) => {
+    const result: WorkDayTimeWithRest[] = dayOfWeek.map((day) => {
       return {
-        day_of_week: DAYS[day as keyof typeof DAYS],
+        day_of_week: DAYS[day as keyof typeof DAYS] as DayOfWeek,
         work_start_time: workStartTime!,
         work_end_time: workEndTime!,
         break_start_time: breakStartTime!,
         break_end_time: breakEndTime!,
       };
-    });
-
-    console.log(result); // TODO: API에 보낼 형식 맞춰놨쓔!
-    setisShowBottomsheet(false);
+    })
+    onClose(result)
   };
 
   return (
@@ -139,7 +124,7 @@ const WorkDayTimeWithRestBottomSheet = () => {
           fontColor={isAvailableSubmit() ? `text-[#1E1926]` : `text-[#BDBDBD]`}
           isBorder={false}
           title={'추가하기'}
-          onClick={onClickSubmit}
+          onClick={returnResult}
         />
       </div>
     </BottomSheetLayout>