= ({
[onPlanChange, plans],
);
+ // useCallback으로 메모이제이션
+ const eventContent = useCallback(
+ (eventInfo: EventContentArg) =>
+ renderEventContent(eventInfo, currentView, handleDelete, handleEdit, isReadOnly),
+ [handleDelete, handleEdit, isReadOnly],
+ );
return (
{calendarOwner &&
{calendarOwner}
}
@@ -281,20 +396,13 @@ const CustomCalendar: React.FC = ({
eventResizableFromStart={!isReadOnly}
eventDrop={isReadOnly ? undefined : handleEventChange}
eventResize={handleEventChange}
- eventContent={(eventInfo) =>
- renderEventContent(
- eventInfo,
- currentView,
- handleDelete,
- handleEdit,
- isReadOnly,
- )
- }
+ eventContent={eventContent}
selectable={false}
selectMirror={false}
dayMaxEvents
weekends
firstDay={1}
+ timeZone="UTC"
events={parsedEvents}
viewDidMount={({ view }) => setCurrentView(view.type)}
datesSet={(dateInfo) => setCurrentDate(dateInfo.start)}
@@ -308,46 +416,54 @@ const CustomCalendar: React.FC = ({
/>
{isEditModalOpen && currentEditPlan && (
setIsEditModalOpen(false)}>
- 플랜 수정
-
- setCurrentEditPlan((prev) =>
- prev ? { ...prev, title: e.target.value } : prev,
- )
- }
- />
-
- setCurrentEditPlan((prev) =>
- prev ? { ...prev, description: e.target.value } : prev,
- )
- }
- />
- 공개 여부:
-
- setCurrentEditPlan((prev) =>
- prev ? { ...prev, accessibility: e.target.checked } : prev,
- )
- }
- />
- 완료 여부:
-
- setCurrentEditPlan((prev) =>
- prev ? { ...prev, complete: e.target.checked } : prev,
- )
- }
- />
-
+
+ 플랜 수정
+
+ setCurrentEditPlan((prev) =>
+ prev ? { ...prev, title: e.target.value } : prev,
+ )
+ }
+ />
+
+ setCurrentEditPlan((prev) =>
+ prev ? { ...prev, description: e.target.value } : prev,
+ )
+ }
+ />
+
+ 공개 여부
+
+ setCurrentEditPlan((prev) => ({
+ ...prev,
+ accessibility: e.target.checked,
+ }))
+ }
+ />
+
+
+ 완료 여부
+
+ setCurrentEditPlan((prev) => ({
+ ...prev,
+ complete: e.target.checked,
+ }))
+ }
+ />
+
+
+
)}
diff --git a/src/components/features/CustomCalendar/PlanModal.tsx b/src/components/features/CustomCalendar/PlanModal.tsx
deleted file mode 100644
index f8f7fae..0000000
--- a/src/components/features/CustomCalendar/PlanModal.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, { ReactNode } from "react";
-import styled from "@emotion/styled";
-
-interface ModalProps {
- onClose: () => void;
- children: ReactNode;
-}
-
-const Overlay = styled.div`
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.5);
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 1000;
-`;
-
-const ModalContainer = styled.div`
- background: white;
- padding: 20px;
- border-radius: 8px;
- width: 90%;
- max-width: 500px;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-`;
-
-const ModalHeader = styled.div`
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 16px;
-`;
-
-const CloseButton = styled.button`
- background: none;
- border: none;
- font-size: 1.5rem;
- cursor: pointer;
- color: #333;
-`;
-
-const ModalTitle = styled.h2`
- font-size: 1.25rem;
- font-weight: bold;
-`;
-
-const ModalContent = styled.div`
- margin-top: 10px;
- display: flex;
- flex-direction: column;
- gap: 10px;
-`;
-
-const Modal: React.FC = ({ onClose, children }) => {
- return (
-
- e.stopPropagation()}>
-
- 플랜 수정
- ×
-
- {children}
-
-
- );
-};
-
-export default Modal;
diff --git a/src/components/features/DatePicker/DatePicker.css b/src/components/features/DatePicker/DatePicker.css
new file mode 100644
index 0000000..7711efd
--- /dev/null
+++ b/src/components/features/DatePicker/DatePicker.css
@@ -0,0 +1,43 @@
+.custom-datepicker-wrapper {
+ position: relative;
+ z-index: 100;
+}
+
+.custom-calendar {
+ border: 1px solid #ddd !important;
+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+/* 시간 선택 컨테이너 스타일 */
+.react-datepicker__time-container {
+ border-left: 1px solid #ddd !important;
+ width: 100px !important;
+ display: block !important;
+}
+
+.react-datepicker {
+ display: flex !important;
+}
+
+.react-datepicker__time-box {
+ width: 100px !important;
+ margin: 0 !important;
+}
+
+/* 시간 리스트 스타일 */
+.react-datepicker__time-list {
+ height: 200px !important;
+ overflow-y: scroll !important;
+ width: 100% !important;
+}
+
+.react-datepicker__time-list-item {
+ padding: 5px 10px !important;
+ height: auto !important;
+}
+
+/* 선택된 시간 스타일 */
+.react-datepicker__time-list-item--selected {
+ background-color: #216ba5 !important;
+ color: white !important;
+}
\ No newline at end of file
diff --git a/src/components/features/DatePicker/DatePicker.tsx b/src/components/features/DatePicker/DatePicker.tsx
new file mode 100644
index 0000000..3577c96
--- /dev/null
+++ b/src/components/features/DatePicker/DatePicker.tsx
@@ -0,0 +1,180 @@
+import { forwardRef, InputHTMLAttributes } from "react";
+import styled from "@emotion/styled";
+import DatePicker from "react-datepicker";
+import { Global, css } from "@emotion/react";
+import "react-datepicker/dist/react-datepicker.css";
+
+// StyledInput 스타일 정의
+const StyledInput = styled.input`
+ width: 100%;
+ padding: 12px;
+ margin-bottom: 10px;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ font-size: 1rem;
+ &:focus {
+ outline: none;
+ border-color: #6c63ff;
+ box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.3);
+ }
+`;
+
+// 커스텀 입력 컴포넌트 타입 정의
+interface CustomDateInputProps extends InputHTMLAttributes {
+ onClick?: () => void;
+ value?: string;
+}
+
+// DatePicker의 커스텀 입력 컴포넌트
+const CustomDateInput = forwardRef(
+ ({ value, onClick, placeholder }, ref) => (
+
+ ),
+);
+
+interface ReactDatePickerProps {
+ placeholderText: string;
+ onDateChange: (date: Date | null) => void;
+ selectedDate?: Date | null;
+ showTimeSelect?: boolean; // 시간 선택 기능
+ dateFormat?: string; // 날짜 포맷 설정
+}
+
+const ReactDatePicker = ({
+ placeholderText,
+ onDateChange,
+ selectedDate,
+ showTimeSelect = false,
+ dateFormat = "yyyy/MM/dd",
+}: ReactDatePickerProps) => {
+ const handleDateChange = (date: Date | null) => {
+ if (date) {
+ const utcDate = new Date(
+ date.getTime() - date.getTimezoneOffset() * 60000,
+ );
+ onDateChange(utcDate);
+ } else {
+ onDateChange(null);
+ }
+ };
+
+ return (
+ <>
+
+ }
+ />
+
+ );
+};
+
+export default ReactDatePicker;
diff --git a/src/main.tsx b/src/main.tsx
index af59181..ad55e7a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -19,13 +19,14 @@ import "./index.css";
// });
if ("serviceWorker" in navigator) {
- navigator.serviceWorker.getRegistrations().then((registrations) => {
- registrations.forEach((registration) => {
- if (registration.active && registration.scope.includes("mock")) {
- registration.unregister(); // 서비스 워커 해제
- }
+ navigator.serviceWorker
+ .register("/firebase-messaging-sw.js")
+ .then((registration) => {
+ console.log("Service Worker 등록 성공:", registration);
+ })
+ .catch((error) => {
+ console.error("Service Worker 등록 실패:", error);
});
- });
}
ReactDOM.createRoot(document.getElementById("root")!).render(
diff --git a/src/pages/Main/MainPage.tsx b/src/pages/Main/MainPage.tsx
index 400af6c..d34cb5a 100644
--- a/src/pages/Main/MainPage.tsx
+++ b/src/pages/Main/MainPage.tsx
@@ -1,4 +1,3 @@
-// mainPage.tsx
import { useEffect, useRef } from "react";
import styled from "@emotion/styled";
import { useNavigate, useLocation } from "react-router-dom";
@@ -9,13 +8,15 @@ import { useGetPlans } from "@/api/hooks/useGetPlans";
import useCreatePlan from "@/api/hooks/useCreatePlan";
import Button from "@/components/common/Button/Button";
import RouterPath from "@/router/RouterPath";
+import { requestForToken, setupOnMessageListener } from "@/api/firebaseConfig"; // Import Firebase functions
+import { apiClient } from "@/api/instance";
const PageContainer = styled.div`
background-color: #ffffff;
padding: 20px;
`;
-export default function MainlPage() {
+export default function MainPage() {
const location = useLocation();
const { data: Plans, isLoading, error, refetch } = useGetPlans();
const savePlanMutation = useCreatePlan();
@@ -30,7 +31,7 @@ export default function MainlPage() {
}, [location, refetch]);
useEffect(() => {
- if (hasMounted.current) return; // strict모드로 인한 두 번 실행을 막기위해
+ if (hasMounted.current) return;
hasMounted.current = true;
const savePlans = async () => {
@@ -45,24 +46,26 @@ export default function MainlPage() {
);
try {
- for (const plan of parsedPlans) {
- await savePlanMutation.mutateAsync({
- plan: {
- title: plan.title,
- description: plan.description,
- startDate: plan.start.toISOString(),
- endDate: plan.end.toISOString(),
- accessibility: plan.accessibility ?? true,
- isCompleted: plan.complete ?? false,
- },
- });
- }
+ await Promise.all(
+ parsedPlans.map((plan) =>
+ savePlanMutation.mutateAsync({
+ plan: {
+ title: plan.title,
+ description: plan.description,
+ startDate: plan.start.toISOString(),
+ endDate: plan.end.toISOString(),
+ accessibility: plan.accessibility ?? true,
+ isCompleted: plan.complete ?? false,
+ },
+ }),
+ ),
+ );
sessionStorage.removeItem("plans");
console.log("세션의 플랜이 저장되었습니다.");
- isPlanSaved.current = true; // Set flag after saving
+ isPlanSaved.current = true;
refetch();
- } catch (error) {
- console.error("세션의 플랜 저장 실패:", error);
+ } catch (err) {
+ console.error("세션의 플랜 저장 실패:", err);
}
}
};
@@ -71,6 +74,29 @@ export default function MainlPage() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
+ // Notification functionality
+ useEffect(() => {
+ const registerFcmToken = async () => {
+ const permission = await Notification.requestPermission();
+ if (permission === "granted") {
+ try {
+ const fcmToken = await requestForToken();
+ if (fcmToken) {
+ await apiClient.post("/api/fcm/register", { token: fcmToken });
+ console.log("FCM 토큰이 성공적으로 등록되었습니다.");
+ }
+ } catch (err) {
+ console.error("FCM 토큰 등록 중 오류 발생:", err);
+ }
+ } else {
+ console.log("알림 권한이 거부되었습니다.");
+ }
+ };
+
+ registerFcmToken();
+ setupOnMessageListener(); // Set up the listener for foreground messages
+ }, []);
+
const handleModifyClick = () => {
navigate(RouterPath.MAIN_MODIFY, { state: { plans: Plans } });
};
diff --git a/src/pages/Main/MainPageModify.tsx b/src/pages/Main/MainPageModify.tsx
index 20a90c7..3320620 100644
--- a/src/pages/Main/MainPageModify.tsx
+++ b/src/pages/Main/MainPageModify.tsx
@@ -1,16 +1,48 @@
import { useState } from "react";
import styled from "@emotion/styled";
import { useLocation, useNavigate } from "react-router-dom";
+import ReactDatePicker from "@/components/features/DatePicker/DatePicker";
import CustomCalendar, {
CalendarEvent,
} from "@/components/features/CustomCalendar/CustomCalendar";
-import useModifyPlan from "@/api/hooks/useModifyPlans";
+import { apiClient } from "@/api/instance";
import useCreatePlan from "@/api/hooks/useCreatePlan";
import useDeletePlan from "@/api/hooks/useDeletePlan";
import Button from "@/components/common/Button/Button";
import Modal from "@/components/common/Modal/Modal";
import RouterPath from "@/router/RouterPath";
+const ModalContainer = styled.div`
+ padding: 20px;
+ background-color: white;
+ border-radius: 12px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 15px;
+`;
+
+const Title = styled.h2`
+ font-size: 1.8rem;
+ font-weight: bold;
+ color: #333;
+ margin-bottom: 20px;
+`;
+
+const StyledInput = styled.input`
+ width: 100%;
+ padding: 12px;
+ margin-bottom: 10px;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ font-size: 1rem;
+ &:focus {
+ outline: none;
+ border-color: #6c63ff;
+ box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.3);
+ }
+`;
+
const PageContainer = styled.div`
max-width: 1200px;
margin: 0 auto;
@@ -39,7 +71,7 @@ export default function PlanModifyPage() {
});
const navigate = useNavigate();
- const { mutate: modifyPlan } = useModifyPlan();
+ const [pendingPlans, setPendingPlans] = useState(false);
const { mutate: createPlan } = useCreatePlan();
const { mutate: deletePlan } = useDeletePlan();
@@ -54,8 +86,8 @@ export default function PlanModifyPage() {
accessibility,
isCompleted,
} = newPlanData;
- const utcStartDate = new Date(startDate).toISOString();
- const utcEndDate = new Date(endDate).toISOString();
+ const utcStartDate = new Date(`${startDate}Z`).toISOString();
+ const utcEndDate = new Date(`${endDate}Z`).toISOString();
createPlan(
{
@@ -76,9 +108,9 @@ export default function PlanModifyPage() {
...modifiedPlans,
{
...newPlanData,
- id: newPlanId, // 응답 데이터의 id 사용
- start: new Date(startDate),
- end: new Date(endDate),
+ id: newPlanId,
+ start: new Date(utcStartDate),
+ end: new Date(utcEndDate),
complete: isCompleted,
},
]);
@@ -120,23 +152,30 @@ export default function PlanModifyPage() {
};
const handleSaveAll = () => {
- modifiedPlans.forEach((plan) => {
- if (plan.id && !Number.isNaN(Number(plan.id))) {
- modifyPlan({
- planId: Number(plan.id),
- planData: {
+ setPendingPlans(true);
+ Promise.all(
+ modifiedPlans
+ .filter((plan) => plan.id && !Number.isNaN(Number(plan.id)))
+ .map((plan) =>
+ apiClient.put(`/api/plans/${plan.id}`, {
title: plan.title,
description: plan.description,
- startDate: plan.start.toISOString(),
- endDate: plan.end.toISOString(),
+ startDate: new Date(plan.start).toISOString(),
+ endDate: new Date(plan.end).toISOString(),
accessibility: plan.accessibility ?? true,
isCompleted: plan.complete ?? false,
- },
- });
- }
- });
- alert("수정사항이 저장되었습니다.");
- navigate(RouterPath.MAIN, { state: { refetchNeeded: true } });
+ }),
+ ),
+ )
+ .then(() => {
+ alert("수정사항이 저장되었습니다.");
+ setPendingPlans(false);
+ navigate(RouterPath.MAIN, { state: { refetchNeeded: true } });
+ })
+ .catch((error) => {
+ alert(`저장 중 오류 발생: ${error.message}`);
+ setPendingPlans(false);
+ });
};
return (
@@ -148,6 +187,7 @@ export default function PlanModifyPage() {
onPlanChange={handlePlanChange}
onDeletePlan={handleDeletePlan}
/>
+ {pendingPlans && 저장 중...
}