Merge remote-tracking branch 'origin/feat/70-UI-refactor' into feat/#69

src/api/hooks/useFcmUpdate.ts

@@ -0,0 +1,33 @@
+import { useMutation } from "@tanstack/react-query";
+import { apiClient } from "../instance";
+
+interface FcmUpdateRequest {
+  token: string;
+  isNotificatioinEnabled?: boolean;
+  notificationOffset?: number;
+}
+
+interface FcmUpdateResponse {
+  message: string;
+}
+
+const useFcmUpdate = () => {
+  return useMutation<FcmUpdateResponse, Error, FcmUpdateRequest>({
+    mutationFn: async (data: FcmUpdateRequest) => {
+      const response = await apiClient.put<FcmUpdateResponse>(
+        "/api/fcm/update",
+        {
+          token: data.token,
+          isNotificationEnabled: data.isNotificatioinEnabled ?? true,
+          notificationOffset: data.notificationOffset ?? 0,
+        },
+      );
+      return response.data;
+    },
+    onError: (error) => {
+      console.error("FCM 토큰 업데이트 실패:", error);
+    },
+  });
+};
+
+export default useFcmUpdate;

src/components/features/CustomCalendar/CustomCalendar.tsx

@@ -58,6 +58,19 @@ const StyledInput = styled.input`
     box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2); /* focus:ring-2 focus:ring-[#2196F3] */
   }
 `;
+const ToggleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+  font-size: 1.2rem;
+  margin-bottom: 10px;
+`;
+
+const ToggleSwitch = styled.input`
+  width: 20px;
+  height: 20px;
+`;
 
 export interface CalendarEvent {
   id: string;
@@ -222,6 +235,12 @@ const EventContent = ({
               e.stopPropagation();
               handleOptionClick("edit");
             }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleOptionClick("edit");
+              }
+            }}
           >
             수정
           </div>
@@ -242,6 +261,12 @@ const EventContent = ({
               e.stopPropagation();
               handleOptionClick("delete");
             }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleOptionClick("delete");
+              }
+            }}
           >
             삭제
           </div>
@@ -558,7 +583,20 @@ const CustomCalendar: React.FC<CustomCalendarProps> = ({
                   )
                 }
               />
-              <Button onClick={handleEditSubmit}>저장</Button>
+              <ToggleContainer>
+                공개 여부
+                <ToggleSwitch
+                  type="checkbox"
+                  checked={!!currentEditPlan.accessibility} // Converts null to false
+                  onChange={(e) =>
+                    setCurrentEditPlan((prev) => ({
+                      ...prev!,
+                      accessibility: e.target.checked,
+                    }))
+                  }
+                />
+              </ToggleContainer>
+              <Button onClick={handleEditSubmit}>추가</Button>
             </ModalContainer>
           </Modal>
         )}

src/components/features/DatePicker/DatePicker.css

@@ -1,43 +0,0 @@
-.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;
-}