From b319df86a769467e0d6173e9d36142c059800038 Mon Sep 17 00:00:00 2001
From: jennyjoo <100cllr@gmail.com>
Date: Tue, 9 Jul 2024 09:10:34 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=95=8C=EB=B0=94=EC=83=9D=20=EC=BA=98?=
 =?UTF-8?q?=EB=A6=B0=EB=8D=94=20=EC=83=81=EC=84=B8=20=EA=B7=BC=EB=AC=B4=20?=
 =?UTF-8?q?=ED=99=95=EC=9D=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/employee/DetailWorkInfo.tsx | 86 ++++++++++++++++++++++
 src/pages/LoginPgae/LoginPage.tsx          |  4 +-
 2 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 src/components/employee/DetailWorkInfo.tsx

diff --git a/src/components/employee/DetailWorkInfo.tsx b/src/components/employee/DetailWorkInfo.tsx
new file mode 100644
index 0000000..1bafee9
--- /dev/null
+++ b/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;
diff --git a/src/pages/LoginPgae/LoginPage.tsx b/src/pages/LoginPgae/LoginPage.tsx
index e9c64da..6dec998 100644
--- a/src/pages/LoginPgae/LoginPage.tsx
+++ b/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>