Merge pull request #146 from hanaro-on-and-on/featl#145

feat/#145 알바생 캘린더 상세 근무 정보 확인 컴포넌트 구현

src/components/employee/DetailWorkInfo.tsx

@@ -0,0 +1,86 @@
+import ColorTag from '../ui/ColorTag';
+import WhiteBox from '../ui/WhiteBox';
+import WorkPlaceName from '../ui/WorkPlaceName';
+
+type Prop = {
+  scheduleInfo: ScheduleInfo;
+};
+
+type ScheduleInfo = {
+  id: number;
+  workPlaceName: string; //
+  workPlaceColorCode: string; //
+  attendDate: string;
+  startTime: Date;
+  endDate: Date;
+  payment: number;
+  isConnected?: boolean;
+  restMinute?: number;
+  attendanceType?: string;
+};
+
+const DetailWorkInfo = ({ scheduleInfo }: Prop) => {
+  const dateConvert = (date: string) => {
+    const year = +date.substring(0, 4);
+    const month = +date.substring(4, 6);
+    const day = +date.substring(6);
+
+    // const dat = new Date();
+    // dat.setFullYear(+year);
+    // dat.setMonth(+month);
+    // dat.setDate(+day);
+
+    return { year, month, day };
+  };
+
+  const dateFormat = ({
+    year,
+    month,
+    day,
+  }: {
+    year: number;
+    month: number;
+    day: number;
+  }) => {
+    return `${year}.${month === 0 ? '00' : month}.${day === 0 ? '00' : day}`;
+  };
+
+  return (
+    <>
+      <WhiteBox border className='w-full'>
+        <div className='flex flex-col gap-5 px-2 py-5 w-full'>
+          <div className='flex justify-between'>
+            <WorkPlaceName
+              name={scheduleInfo.workPlaceName}
+              colorType={scheduleInfo.workPlaceColorCode}
+            />
+            <div>
+              {scheduleInfo.attendanceType === 'REAL' && (
+                <ColorTag className='bg-pink-100 text-black'>
+                  출석 완료
+                </ColorTag>
+              )}
+            </div>
+          </div>
+
+          <div className='flex flex-col gap-5 '>
+            <div className='flex justify-between'>
+              <div className='font-semibold text-start'>근무일자</div>
+              <div className='text-end'>
+                {dateFormat(dateConvert(scheduleInfo.attendDate))}
+              </div>
+            </div>
+            <div className='flex justify-between'>
+              <div className='font-semibold text-start'>시급</div>
+              <div className='text-end'>
+                {scheduleInfo.payment.toLocaleString()}원
+              </div>
+            </div>
+          </div>
+        </div>
+      </WhiteBox>
+    </>
+  );
+};
+
+export default DetailWorkInfo;

src/pages/LoginPgae/LoginPage.tsx

@@ -4,6 +4,7 @@ import BtnBottom from '../../components/BtnBottom';
 import login, { LoginReturnType, ROLE } from '../../components/login';
 import ModalCenter from '../../components/ModalCenter';
 import { useNavigate } from 'react-router-dom';
+import DetailWorkInfo from '../../components/employee/DetailWorkInfo';
 
 const LoginPage = () => {
   const [pwErr, pwIdErr] = useState<string>('');
@@ -51,7 +52,7 @@ const LoginPage = () => {
       )}
       <Frame navTitle='로그인'>
         <div className='w-full h-full flex flex-col gap-10 my-10 justify-between'>
-          <div className='flex flex-col gap-3 h-full'>
+          <div className='flex flex-col gap-3 '>
             <div className='text-2xl font-bold mb-3'>Log-in</div>
             <div className='text-gray-300 text-sm mb-10'>
               간편 비밀번호를 입력해주세요
@@ -67,6 +68,7 @@ const LoginPage = () => {
               <span className='text-red-500 text-sm'>{pwErr}</span>
             </div>
           </div>
+
           <BtnBottom text='로그인' action={onLogin} />
         </div>
       </Frame>