FEAT: 알림페이지 수정

src/App.tsx

@@ -6,6 +6,7 @@ import EventManage from "./pages/EventManage";
 import BranchManage from "./pages/BranchManage";
 import ReviewManage from "./pages/ReviewManage";
 import UserManage from "./pages/UserManage";
+import PushMessage from "./pages/PushMessage";
 import { ThemeProvider, createTheme } from "@mui/material";
 import EventNew from "./pages/EventNew";
 import EventEdit from "./pages/EventEdit";
@@ -31,6 +32,7 @@ function App() {
           <Route path="/branch/edit/:id" element={<BranchEdit />}></Route>
           <Route path="/branch" element={<BranchManage />}></Route>
           <Route path="/user" element={<UserManage />}></Route>
+          <Route path="/pushmessage" element={<PushMessage />}></Route>
           <Route path="/review" element={<ReviewManage />}></Route>
           <Route path="*" element={<NotFound />}></Route>
         </Routes>

src/components/branch-new/BranchNew.tsx

@@ -66,7 +66,7 @@ export default function BrnachNew() {
           </Box>
           <Box sx={{ display: "flex", gap: "10px" }}>
             <CancelButton />
-            <SubmitButton />
+            <SubmitButton value="등록" />
           </Box>
         </Box>
         <BranchInputForm

src/components/event-new/EventNew.tsx

@@ -73,7 +73,7 @@ export default function EventNew() {
           </Box>
           <Box sx={{ display: "flex", gap: "10px" }}>
             <CancelButton />
-            <SubmitButton />
+            <SubmitButton value="등록" />
           </Box>
         </Box>
         <EventInputForm

src/components/push-message/PushInputForm.tsx

@@ -0,0 +1,99 @@
+import {
+  Box,
+  Typography,
+  TextField,
+  Checkbox,
+  FormControlLabel,
+} from "@mui/material";
+import { customColors } from "../../styles/base/Variable.style";
+import DateTimePickerInput from "../reuse/input/DateTimePickerInput";
+import { useState } from "react";
+import { PushInputFormProps } from "../../interface/PushMessage.interface";
+import RowFieldInput from "../reuse/input/RowFieldInput";
+
+export default function PushInputForm({
+  title,
+  setTitle,
+  description,
+  setDescription,
+  screenData,
+  setScreenData,
+  reservationDate,
+  setReservationDate,
+}: PushInputFormProps) {
+  const [isDatePickerEnabled, setDatePickerEnabled] = useState(false);
+
+  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setDatePickerEnabled(event.target.checked);
+    // 체크박스가 해제되면 reservationDate를 현재 시간으로 초기화 -> 현재시간일 경우 서버로 null 값을 보냄
+    if (!event.target.checked) {
+      setReservationDate(new Date());
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        width: "auto",
+        display: "inline-block",
+        overflow: "hidden",
+        border: `2px solid ${customColors.sub_pink}`,
+        borderRadius: "0px 10px 10px 10px",
+        minWidth: "50vw",
+      }}
+    >
+      <Box
+        sx={{
+          margin: "50px 20px 50px 20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "70px",
+        }}
+      >
+        <RowFieldInput
+          label="제목"
+          value={title}
+          width="90%"
+          row={3}
+          maxLength={100}
+          setInput={setTitle}
+        />
+        <RowFieldInput
+          label="내용"
+          value={description}
+          width="90%"
+          row={6}
+          maxLength={300}
+          setInput={setDescription}
+        />
+        <RowFieldInput
+          label="스크린정보"
+          value={screenData}
+          width="70%"
+          row={2}
+          maxLength={null}
+          setInput={setScreenData}
+        />
+
+        <Box sx={{ display: "flex", gap: "20px" }}>
+          <FormControlLabel
+            label="예약발송"
+            control={
+              <Checkbox
+                checked={isDatePickerEnabled}
+                onChange={handleCheckboxChange}
+              />
+            }
+          />
+          {isDatePickerEnabled && (
+            <DateTimePickerInput
+              date={reservationDate}
+              setDate={setReservationDate}
+              name={"예약 발송일"}
+            />
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+}

src/components/push-message/PushMessage.tsx

@@ -0,0 +1,118 @@
+import { Box } from "@mui/material";
+import { customColors } from "../../styles/base/Variable.style";
+import PushInputForm from "./PushInputForm";
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+import SubmitButton from "../reuse/button/SubmitButton";
+
+export default function PushMessage() {
+  const isUserPage = location.pathname === "/user";
+
+  const [title, setTitle] = useState<string>("");
+  const [description, setDescription] = useState<string>("");
+  const [screenData, setScreenData] = useState<string>("");
+  const [reservationDate, setReservationDate] = useState<Date>(new Date());
+
+  /* 전송 버튼 입력시 */
+  const onClickEditButton = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    try {
+      console.log(title);
+      console.log(description);
+      console.log(screenData);
+      console.log(reservationDate);
+
+      const modifiedReservationDate =
+        reservationDate <= new Date() ? null : reservationDate;
+      if (modifiedReservationDate == null) {
+        alert("알림을 지금 전송하였습니다.");
+        // reservationDate가 현재 시간과 같다면 null을 서버로 보냄
+      } else {
+        alert("알림 예약이 완료되었습니다.");
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const navigate = useNavigate();
+
+  const onClickUserManageButton = () => {
+    navigate("/user"); // 클릭 시 /user로 이동
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        margin: "40px 0px 40px 0px",
+        minWidth: "20vw",
+      }}
+      component="form"
+      onSubmit={onClickEditButton}
+    >
+      <Box sx={{ width: "95%", marginLeft: "20px" }}>
+        <Box
+          sx={{
+            display: "flex",
+            width: "100%",
+            justifyContent: "space-between",
+          }}
+        >
+          <Box sx={{ display: "flex" }}>
+            <Box
+              sx={{
+                fontWeight: "600",
+                padding: "15px 10px 15px 10px",
+                borderRadius: "10px 10px 0 0",
+                border: `2px solid ${customColors.sub_pink}`,
+                borderBottom: "none",
+                backgroundColor: isUserPage
+                  ? `${customColors.sub_pink}`
+                  : `${customColors.white}`,
+                fontSize: "18px",
+                cursor: "pointer",
+              }}
+              onClick={onClickUserManageButton}
+            >
+              사용자 관리
+            </Box>
+            <Box
+              sx={{
+                fontWeight: "600",
+                borderRadius: "10px 10px 0 0",
+                border: `2px solid ${customColors.sub_pink}`,
+                borderBottom: "none",
+                padding: "15px 10px 15px 10px",
+                backgroundColor: isUserPage
+                  ? `${customColors.white}`
+                  : `${customColors.sub_pink}`,
+                fontSize: "18px",
+                cursor: "pointer",
+              }}
+            >
+              알림 전송
+            </Box>
+          </Box>
+
+          <Box sx={{ display: "flex", gap: "50px" }}>
+            <Box sx={{ display: "flex", gap: "10px" }}>
+              <SubmitButton value="전송" />
+            </Box>
+          </Box>
+        </Box>
+        <PushInputForm
+          title={title}
+          setTitle={setTitle}
+          description={description}
+          setDescription={setDescription}
+          screenData={screenData}
+          setScreenData={setScreenData}
+          reservationDate={reservationDate}
+          setReservationDate={setReservationDate}
+        />
+      </Box>
+    </Box>
+  );
+}

src/components/push-message/PushMessageForm.tsx

@@ -0,0 +1,13 @@
+import SideBar from "../reuse/sidebar/SideBar";
+import Box from "@mui/material/Box";
+import PushMessage from "./PushMessage";
+
+// 알림 전송 페이지
+export default function PushMessageForm() {
+  return (
+    <Box sx={{ display: "flex" }}>
+      <SideBar />
+      <PushMessage />
+    </Box>
+  );
+}

src/components/reuse/button/SubmitButton.tsx

@@ -1,15 +1,15 @@
 import { Button } from "@mui/material";
+import { SubmitButtonProps } from "../../../interface/reuse/Button.interface";
 
-export default function SubmitButton() {
-
+export default function SubmitButton({ value }: SubmitButtonProps) {
   return (
     <Button
       sx={{ margin: "0px 10px 5px 0px" }}
       color="primary"
       variant="contained"
       type="submit"
     >
-      등록
+      {value}
     </Button>
   );
 }

src/components/reuse/input/DatePickerInput.tsx

@@ -15,7 +15,7 @@ export default function DatePickerInput({
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DatePicker
-        format="YYYY년 MM월 DD일"
+        format="YYYY-MM-DD"
         label={name}
         value={formatDate}
         onChange={(newDate) => setDate(dayjs(newDate).toDate())}

src/components/reuse/input/DateTimePickerInput.tsx

@@ -0,0 +1,28 @@
+import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { DateTimePickerInputProps } from "../../../interface/reuse/Input.interface";
+import dayjs from "dayjs";
+
+export default function DateTimePickerInput({
+  date,
+  setDate,
+  name,
+}: DateTimePickerInputProps) {
+  /* 백엔드 요청에따라 Date 또는 string 타입으로 수정 */
+  const formatDate = dayjs(date);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DateTimePicker
+        label={name}
+        value={formatDate}
+        onChange={(newDate) => setDate(dayjs(newDate).toDate())}
+        views={["year", "month", "day", "hours", "minutes"]}
+        format="YYYY년 MM월 DD일 HH시 mm분"
+        ampm={false}
+        disablePast
+      />
+    </LocalizationProvider>
+  );
+}

src/components/reuse/input/RowFieldInput.tsx

@@ -0,0 +1,44 @@
+import { Box, Typography, TextField } from "@mui/material";
+import { RowFieldInputType } from "../../../interface/reuse/Input.interface";
+
+export default function RowFieldInput({
+  label,
+  value,
+  width,
+  row,
+  maxLength,
+  setInput,
+}: RowFieldInputType) {
+  const onInputChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    setInput(e.currentTarget.value);
+  };
+  return (
+    <Box sx={{ display: "flex" }}>
+      <Typography
+        sx={{ width: "130px" }}
+        fontSize={18}
+        fontWeight={600}
+        display="flex"
+        alignItems="center"
+      >
+        {label}
+      </Typography>
+      <TextField
+        sx={{ width: { width } }}
+        variant="outlined"
+        label={label}
+        value={value}
+        onChange={onInputChangeHandler}
+        multiline
+        rows={row}
+        inputProps={{ maxLength }}
+      />
+      {maxLength && (
+        <Typography sx={{ marginLeft: "10px" }} variant="body2">
+          {value.length}/{maxLength}
+        </Typography>
+      )}
+    </Box>
+  );
+}