feat/#88 공지 연동 완료

hanaro-on-and-on · Jul 9, 2024 · 474753a · 474753a
1 parent 72132d2
commit 474753a
Show file tree

Hide file tree

Showing 13 changed files with 243 additions and 123 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -30,6 +30,8 @@ import WorkEmployeeAddComplete from './components/owner-workplace/WorkEmployeeAd
 import OwnerGreeting from './pages/LandingPage/OwnerGreeting';
 import OwnerAddMainAccount from './pages/LandingPage/OwnerAddMainAccount';
 import LoginPage from './pages/LoginPgae/LoginPage';
+import CalendarEmployee from './components/employee/CalendarEmployee';
+import WorkPlaceAdd from './components/owner-workplace/WorkPlaceAdd';
 
 function App() {
   return (
@@ -40,7 +42,9 @@ function App() {
         <Route path='/test' element={<Test />} />
         {/* <Route path='/ui' element={<UiTest />} /> */}
         {/* <Route path='/owner/myWorkPlaces/add' element={<WorkPlaceAddPage />} /> */}
+        <Route path='/owner/addPlace' element={<WorkPlaceAdd />} />
         <Route path='/owner/*' element={<OwnerMainPage />}>
+          <Route path='test' element={<CalendarEmployee />} />
           <Route path='calendar' element={<CalendarCustom />} />
           <Route path='calendar/:date' element={<DateDetail />} />
           <Route path='calendar/:date/add' element={<AttendanceCreate />} />

diff --git a/src/api/apiClient.ts b/src/api/apiClient.ts
@@ -338,6 +338,18 @@ class ApiClient implements employeeApi, userApi, ownerApi {
   }
 
   // ==========================
+  // 알바생 - 캘린더 데이터
+  public async getEmployeeCalendarData(
+    year: number,
+    month: number
+  ): Promise<EmployeeCalendarDataResponse> {
+    const response: BaseResponse<EmployeeCalendarDataResponse> =
+      await this.axiosInstance.request({
+        method: 'get',
+        url: `employee/salaries/calendar?year=${year}&month=${month}`,
+      });
+    return response.data;
+  }
 
   // 사장님 - 캘린더 데이터
   public async getCalendarData(
@@ -426,6 +438,19 @@ class ApiClient implements employeeApi, userApi, ownerApi {
       });
     return response.data;
   }
+  // 사장님 - 공지 추가
+  public async registerNotice(
+    id: number,
+    request: RegisterNoticeRequest
+  ): Promise<RegisterNoticeResponse> {
+    const response: BaseResponse<RegisterNoticeResponse> =
+      await this.axiosInstance.request({
+        method: 'post',
+        url: `/owner/work-places/${id}/notifications`,
+        data: request,
+      });
+    return response.data;
+  }
 
   //==========================
   // 생성 메소드

diff --git a/src/api/interfaces/employeeApi.ts b/src/api/interfaces/employeeApi.ts
@@ -75,6 +75,11 @@ interface employeeApi {
   employeeContractSign(
     employmentContractId: number
   ): Promise<EmployeeContractSignRequest>;
+
+  getEmployeeCalendarData(
+    year: number,
+    month: number
+  ): Promise<EmployeeCalendarDataResponse>;
 }
 
 export default employeeApi;
diff --git a/src/api/interfaces/ownerApi.ts b/src/api/interfaces/ownerApi.ts
@@ -21,8 +21,15 @@ interface ownerApi {
     request: Partial<EmployeeContract>
   ): Promise<RegisterEmployeeResponse>;
 
+  // 사장님 - 근로 수동 추가
   registerAttendance(
     request: RegisterAttendanceManualRequest
   ): Promise<RegisterAttendanceManualResponse>;
+
+  // 사장님 - 공지 추가
+  registerNotice(
+    id: number,
+    request: RegisterNoticeRequest
+  ): Promise<RegisterNoticeResponse>;
 }
 export default ownerApi;
diff --git a/src/components/employee/CalendarEmployee.css b/src/components/employee/CalendarEmployee.css
@@ -0,0 +1,42 @@
+.react-calendar {
+  border: none !important;
+  width: 100% !important;
+  height: 70% !important;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.react-calendar__navigation {
+  margin-top: 8px;
+}
+
+/* 요일 타일 스타일링 */
+.react-calendar__month-view__weekdays {
+  @apply bg-hanaLightGreen text-center p-1 font-semibold rounded-md;
+}
+
+/* 요일 타일 텍스트 스타일링 */
+.react-calendar__month-view__weekdays__weekday {
+  @apply text-sm text-white;
+}
+
+/* 날짜 타일 기본 스타일링 */
+.react-calendar__tile {
+  @apply text-center p-2 m-1 hover:bg-blue-100 flex flex-col border border-b-2;
+  border-bottom: 2px solid #ccc !important;
+}
+
+/* 오늘 날짜 타일 스타일링 */
+/* .react-calendar__tile--now {
+  @apply !bg-blue-300 !text-white;
+} */
+
+/* 선택된 날짜 타일 스타일링 .react-calendar__tile--active {
+  @apply !bg-yellow-100 !text-white;
+} */
+
+/* 선택할 수 없는 날짜 타일 스타일링 */
+.react-calendar__tile--disabled {
+  @apply text-gray-400;
+}
diff --git a/src/components/employee/CalendarEmployee.tsx b/src/components/employee/CalendarEmployee.tsx
@@ -1,12 +1,14 @@
 import { useEffect, useState } from 'react';
-import './CalendarCustom.css';
+import './CalendarEmployee.css';
 import Calendar, { OnArgs } from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
-import CalendarMark from './CalendarMark';
+// import CalendarMark from './CalendarMark';
 import { useNavigate } from 'react-router-dom';
 import { useCalendarData } from '../../contexts/Calender-Data-Context';
 import ApiClient from '../../api/apiClient';
 import { parseYYYMMDD } from '../../utils/date-util';
+import { useEmployeeCalendarData } from '../../contexts/Employee-Calender-Data-Context';
+import CalendarMark from '../ui/CalendarMark';
 
 type ValuePiece = Date | null;
 type Value = ValuePiece | [ValuePiece, ValuePiece];
@@ -15,7 +17,7 @@ const currentDate = new Date();
 
 const CalendarEmployee = () => {
   const [value, setValue] = useState<Value>(currentDate);
-  const { calendarData, setCalendarData } = useCalendarData();
+  const { calendarData, setCalendarData } = useEmployeeCalendarData();
   const navigate = useNavigate();
 
   console.log('🚀  CalendarCustom  value:', value);
@@ -30,7 +32,7 @@ const CalendarEmployee = () => {
 
   const fetchData = async (year: number, month: number) => {
     try {
-      const response = await ApiClient.getInstance().getCalendarData(
+      const response = await ApiClient.getInstance().getEmployeeCalendarData(
         year,
         month
       );
@@ -58,7 +60,7 @@ const CalendarEmployee = () => {
   const getListForDate = (date: Date) => {
     const list = [];
     calendarData &&
-      calendarData.workPlaceList.map((workPlace) => {
+      calendarData.list.map((workPlace) => {
         if (
           new Date(parseYYYMMDD(workPlace.attendDate)).toDateString() ===
           date.toDateString()
@@ -92,21 +94,14 @@ const CalendarEmployee = () => {
     if (view === 'month') {
       // const events = getEventsForDate(date);
       const list = getListForDate(date);
+      console.log(list, '>>>>>>>>>>>>>>>>>');
       return (
+        // <div>헬로</div>
         <div className='h-full w-full'>
           {list.map((data) => (
-            <CalendarMark key={`${data}`} {...data} />
+            <div key={`${data}`}>{data.workPlaceName}</div>
+            // <CalendarMark key={`${data}`} {...data} />
           ))}
-          {/* {events.map((event) => (
-            <CalendarMark key={event.attendanceId} {...event} />
-            // <div
-            //   key={event.attendanceId}
-            //   className={`text-xs p-1 rounded-md mb-1 bg-color-${event.workPlaceColor}`}
-            //   title={`${event.employeeName} - ${event.workPlaceName}`}
-            // >
-            //   {event.employeeName} - {event.workPlaceName}
-            // </div>
-          ))} */}
         </div>
       );
     }

diff --git a/src/components/owner-workplace/MyWorkPlaceDetail.tsx b/src/components/owner-workplace/MyWorkPlaceDetail.tsx
@@ -8,7 +8,7 @@ import WorkEmployeeListView from './WorkEmployeeListView';
 import { AiOutlinePlusCircle } from 'react-icons/ai';
 import NotificationAdd from './NotificationAdd';
 import { useEmployeeContract } from '../../contexts/EmployeeContract-Context';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import ApiClient from '../../api/apiClient';
 import Notification from './Notification';
 
@@ -20,6 +20,8 @@ enum ToggleStatus {
 const MyWorkPlaceDetail = () => {
   const navigate = useNavigate();
   const { id } = useParams();
+  const [searchParams] = useSearchParams();
+  const selected = searchParams.get('selected');
 
   const [data, setData] = useState<MyPlaceDetailResponse | null>(null);
   const currentDate = new Date();
@@ -34,8 +36,10 @@ const MyWorkPlaceDetail = () => {
     fetchData(year, month);
   }, [year, month]);
   useEffect(() => {
+    console.log('🚀  showAddNotification:', showAddNotification);
+    console.log('>>>>>>>>>>>> 호출되나여?');
     fetchNotifications();
-  }, []);
+  }, [showAddNotification]);
 
   const fetchData = async (year: number, month: number) => {
     try {
@@ -77,7 +81,7 @@ const MyWorkPlaceDetail = () => {
 
   return (
     data && (
-      <VStack className='m-6 gap-4'>
+      <VStack className='m-6 gap-4 h-full'>
         <VStack className='border border-gray-300 rounded-md items-center justify-center gap-3 py-2'>
           <button className='flex items-center gap-3 text-sm'>
             {`${year}년 ${month}월 ${isCurrentDate(currentDate, year, month) ? '예정' : '확정'} 인건비`}{' '}
@@ -133,7 +137,7 @@ const MyWorkPlaceDetail = () => {
           !showAddNotification &&
           notifiactions && (
             <>
-              <div className='flex flex-col max-h-screen border border-gray-300 rounded-lg overflow-y-scroll'>
+              <div className='flex flex-col max-h-/3 border border-gray-300 rounded-lg overflow-y-scroll'>
                 {notifiactions.list.map((n) => (
                   <Notification key={n.notificationId} {...n} />
                 ))}

diff --git a/src/components/owner-workplace/NotificationAdd.tsx b/src/components/owner-workplace/NotificationAdd.tsx
@@ -1,12 +1,50 @@
+import { useNavigate, useParams } from 'react-router-dom';
 import BtnBottom from '../BtnBottom';
 import BtnChoiceBox from '../ui/BtnChoiceBox';
 import { HStack, VStack } from '../ui/Stack';
+import { ChangeEvent, useState } from 'react';
+import ApiClient from '../../api/apiClient';
 
 type NotificationAddProps = {
   closeAddNotification: () => void;
 };
 
 const NotificationAdd = ({ closeAddNotification }: NotificationAddProps) => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [title, setTitle] = useState<string>('');
+  const [content, setContent] = useState<string>('');
+  const [error, setError] = useState<string>('');
+  // console.log(id);
+
+  const onChangeTitle = (e: ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value);
+  };
+  const onChangeContent = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setContent(e.target.value);
+  };
+
+  const fetchNotice = async (id: number, title: string, content: string) => {
+    try {
+      const response = await ApiClient.getInstance().registerNotice(id, {
+        title,
+        content,
+      });
+      console.log('API 호출 결과:', response);
+    } catch (error) {
+      console.error('API 호출 실패:', error);
+    }
+  };
+
+  const onClickConfirm = async () => {
+    if (id && title && content) {
+      await fetchNotice(Number(id), title, content);
+      closeAddNotification();
+    } else {
+      setError('제목과 내용을 입력해주세요.');
+    }
+  };
+
   return (
     <>
       <VStack className='border border-gray-300 p-4 rounded-lg'>
@@ -16,6 +54,8 @@ const NotificationAdd = ({ closeAddNotification }: NotificationAddProps) => {
           </label>
           <input
             id='title'
+            value={title}
+            onChange={onChangeTitle}
             className='border border-gray-300 px-3 py-1 rounded-lg'
             placeholder='제목을 입력해주세요.'
           />
@@ -27,33 +67,22 @@ const NotificationAdd = ({ closeAddNotification }: NotificationAddProps) => {
           </label>
           <textarea
             id='content'
+            value={content}
+            onChange={onChangeContent}
             className='border border-gray-300 px-3 py-1 h-72 rounded-lg'
             placeholder='내용을 입력해주세요.'
           />
         </VStack>
+
+        {error && <div>{error}</div>}
       </VStack>
 
       <BtnChoiceBox
         actionName={'등록'}
         closeName={'취소'}
-        onAction={() => {}}
+        onAction={onClickConfirm}
         onClose={closeAddNotification}
       />
-
-      {/* <HStack className='gap-2 justify-between'>
-        <button
-          onClick={closeAddNotification}
-          className='bg-gray-400 rounded-md w-1/4 text-white font-semibold h-[45px] text-center'
-        >
-          취소
-        </button>
-        <button
-          onClick={closeAddNotification}
-          className='bg-hanaLightGreen rounded-md w-3/4 text-white font-semibold h-[45px] text-center'
-        >
-          등록
-        </button>
-      </HStack> */}
     </>
   );
 };

diff --git a/src/components/owner-workplace/WorkPlaceAdd.tsx b/src/components/owner-workplace/WorkPlaceAdd.tsx
@@ -0,0 +1,18 @@
+import Nav from '../Nav';
+import { VStack } from '../ui/Stack';
+
+const WorkPlaceAdd = () => {
+  return (
+    <div style={{ height: '90vh' }}>
+      <Nav title='사장님 ON'></Nav>
+
+      <VStack className='p-6'>
+        <h2 className='text-2xl text-left font-bold'>사업자이신가요?</h2>
+        <h3 className='text-left font-semibold text-gray-400'>
+          사업자등록번호로 사업장을 등록할 수 있어요.
+        </h3>
+      </VStack>
+    </div>
+  );
+};
+export default WorkPlaceAdd;