From 42b51c58ee206d3ab151c549047fdc3e794fb527 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=88=ED=9D=AC=EC=9B=90?= Date: Sun, 4 Feb 2024 17:41:44 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20fix:=20Alert=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=EC=97=90=EC=84=9C=20x=EB=B2=84=ED=8A=BC=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../event/[id]/edit/_components/EditContent.tsx | 8 +++++++- app/_components/modal/AddressModal.tsx | 11 ++++------- app/_components/modal/AlertModal.tsx | 2 +- app/_components/modal/ModalMaterial.tsx | 13 ++++++++----- 4 files changed, 20 insertions(+), 14 deletions(-) diff --git a/app/(route)/(header)/event/[id]/edit/_components/EditContent.tsx b/app/(route)/(header)/event/[id]/edit/_components/EditContent.tsx index 9b09c2a4..fac72196 100644 --- a/app/(route)/(header)/event/[id]/edit/_components/EditContent.tsx +++ b/app/(route)/(header)/event/[id]/edit/_components/EditContent.tsx @@ -5,7 +5,9 @@ import SubInput from "@/(route)/post/_components/_inputs/SubInput"; import { PostType } from "@/(route)/post/page"; import classNames from "classnames"; import { useFormContext } from "react-hook-form"; +import Alert from "@/components/Alert"; import BottomButton from "@/components/button/BottomButton"; +import AlertModal from "@/components/modal/AlertModal"; import TextModal from "@/components/modal/TextModal"; import { useModal } from "@/hooks/useModal"; import { useStore } from "@/store/index"; @@ -72,11 +74,15 @@ const EditContent = () => { +
openModal("endEdit")}> 수정사항 등록 {modal === "endEdit" && ( - + + 수정사항은 사용자 3인 이상의 +
승인 후에 반영됩니다. + )}
); diff --git a/app/_components/modal/AddressModal.tsx b/app/_components/modal/AddressModal.tsx index c76e855c..0bc87cb0 100644 --- a/app/_components/modal/AddressModal.tsx +++ b/app/_components/modal/AddressModal.tsx @@ -1,20 +1,17 @@ "use client"; -import { EditPostType } from "@/(route)/(header)/event/[id]/edit/page"; import { PostType } from "@/(route)/post/page"; import DaumPostcodeEmbed from "react-daum-postcode"; -import { UseFormSetValue } from "react-hook-form"; +import { useFormContext } from "react-hook-form"; import Modal from "./ModalMaterial"; interface Props { - setValue: UseFormSetValue; closeModal: () => void; } -/** - * TODO: 바텀시트로 변경 예정 - */ -const AddressModal = ({ setValue, closeModal }: Props) => { +const AddressModal = ({ closeModal }: Props) => { + const { setValue } = useFormContext(); + return ( { return ( - + {children} 확인 diff --git a/app/_components/modal/ModalMaterial.tsx b/app/_components/modal/ModalMaterial.tsx index 76da97c9..1ddce5ad 100644 --- a/app/_components/modal/ModalMaterial.tsx +++ b/app/_components/modal/ModalMaterial.tsx @@ -9,16 +9,19 @@ import ModalPortal from "./ModalPortal"; interface ModalFrameProps extends ModalBaseType { children: ReactNode; + hasNotCloseBtn?: boolean; } -const ModalFrame = ({ children, closeModal }: ModalFrameProps) => { +const ModalFrame = ({ children, closeModal, hasNotCloseBtn = false }: ModalFrameProps) => { return (
-
- +
+ {hasNotCloseBtn || ( + + )}
event.stopPropagation()}> {children}
From c5e3d079d79986d84bd3a4143bf371941f1ec7ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=88=ED=9D=AC=EC=9B=90?= Date: Sun, 4 Feb 2024 20:33:25 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=90=9B=20bug:=20=EC=BA=98=EB=A6=B0?= =?UTF-8?q?=EB=8D=94=20=EB=AA=A8=EB=8B=AC=20=EC=97=90=EB=9F=AC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../post/_components/_inputs/MainInput.tsx | 10 +++++-- .../bottom-sheet/CalendarBottomSheet.tsx | 27 ++++++------------- 2 files changed, 16 insertions(+), 21 deletions(-) diff --git a/app/(route)/post/_components/_inputs/MainInput.tsx b/app/(route)/post/_components/_inputs/MainInput.tsx index 9c63d4c8..61a69307 100644 --- a/app/(route)/post/_components/_inputs/MainInput.tsx +++ b/app/(route)/post/_components/_inputs/MainInput.tsx @@ -2,7 +2,6 @@ import { useFormContext } from "react-hook-form"; import AddressBottomSheet from "@/components/bottom-sheet/AddressBottomSheet"; import CalenderBottomSheet from "@/components/bottom-sheet/CalendarBottomSheet"; import InputText from "@/components/input/InputText"; -import AddressModal from "@/components/modal/AddressModal"; import { useBottomSheet } from "@/hooks/useBottomSheet"; import { useModal } from "@/hooks/useModal"; import { validateEdit } from "@/utils/editValidate"; @@ -42,7 +41,14 @@ const MainInput = () => {
{bottomSheet === "address" && } - {bottomSheet === "date" && } + {bottomSheet === "date" && ( + setValue("endDate", date)} + setStartDateFilter={(date: string) => setValue("startDate", date)} + isFormatting + /> + )} ); }; diff --git a/app/_components/bottom-sheet/CalendarBottomSheet.tsx b/app/_components/bottom-sheet/CalendarBottomSheet.tsx index c09c0fab..2c42f9c9 100644 --- a/app/_components/bottom-sheet/CalendarBottomSheet.tsx +++ b/app/_components/bottom-sheet/CalendarBottomSheet.tsx @@ -1,44 +1,33 @@ "use client"; -import { PostType } from "@/(route)/post/page"; import "@/styles/customCalendar.css"; import { format } from "date-fns"; import { ko } from "date-fns/locale"; import { useEffect, useState } from "react"; import { DateRange, DayPicker } from "react-day-picker"; -import { useFormContext } from "react-hook-form"; import { CALENDAR_STYLE } from "@/constants/calendarStyle"; import BottomSheet from "./BottomSheetMaterial"; interface Props { closeBottomSheet: () => void; - setStartDateFilter?: (data: string) => void; - setEndDateFilter?: (date: string) => void; + setStartDateFilter: (data: string) => void; + setEndDateFilter: (date: string) => void; + isFormatting?: boolean; } // TODO: 값 설정을 버튼이 눌렸을 때로 수정 필요 -const CalenderBottomSheet = ({ closeBottomSheet, setStartDateFilter, setEndDateFilter }: Props) => { - const { setValue } = useFormContext(); +const CalenderBottomSheet = ({ closeBottomSheet, setStartDateFilter, setEndDateFilter, isFormatting = false }: Props) => { const [range, setRange] = useState(); + const formatStyle = isFormatting ? "yyyy.MM.dd" : "PPP EE"; useEffect(() => { if (range?.from) { if (!range.to) { - if (setStartDateFilter) { - setStartDateFilter(format(range.from, "PPP EE", { locale: ko })); - } - setValue("startDate", format(range.from, "yyyy-MM-dd")); + setStartDateFilter(format(range.from, formatStyle, { locale: ko })); } else if (range.to) { - if (setStartDateFilter) { - setStartDateFilter(format(range.from, "PPP EE", { locale: ko })); - } - if (setEndDateFilter) { - setEndDateFilter(format(range.to, "PPP EE", { locale: ko })); - } - setValue("startDate", format(range.from, "yyyy-MM-dd")); - setValue("endDate", format(range.to, "yyyy-MM-dd")); - // closeBottomSheet(); + setStartDateFilter(format(range.from, formatStyle, { locale: ko })); + setEndDateFilter(format(range.to, formatStyle, { locale: ko })); } } }, [range]); From 73324b66a69c193f600b98a7e54298db5b592abb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=88=ED=9D=AC=EC=9B=90?= Date: Sun, 4 Feb 2024 20:42:07 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20fix:=20=EC=BA=98?= =?UTF-8?q?=EB=A6=B0=EB=8D=94=20=EB=AA=A8=EB=8B=AC=20=ED=8F=AC=EB=A7=A4?= =?UTF-8?q?=ED=8C=85=20=ED=86=B5=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/(route)/post/_components/_inputs/MainInput.tsx | 1 - app/_components/bottom-sheet/CalendarBottomSheet.tsx | 12 +++++------- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/app/(route)/post/_components/_inputs/MainInput.tsx b/app/(route)/post/_components/_inputs/MainInput.tsx index 61a69307..fb565e8d 100644 --- a/app/(route)/post/_components/_inputs/MainInput.tsx +++ b/app/(route)/post/_components/_inputs/MainInput.tsx @@ -46,7 +46,6 @@ const MainInput = () => { closeBottomSheet={closeBottomSheet} setEndDateFilter={(date: string) => setValue("endDate", date)} setStartDateFilter={(date: string) => setValue("startDate", date)} - isFormatting /> )} diff --git a/app/_components/bottom-sheet/CalendarBottomSheet.tsx b/app/_components/bottom-sheet/CalendarBottomSheet.tsx index 2c42f9c9..3cfdfbc8 100644 --- a/app/_components/bottom-sheet/CalendarBottomSheet.tsx +++ b/app/_components/bottom-sheet/CalendarBottomSheet.tsx @@ -1,33 +1,31 @@ "use client"; -import "@/styles/customCalendar.css"; import { format } from "date-fns"; import { ko } from "date-fns/locale"; import { useEffect, useState } from "react"; import { DateRange, DayPicker } from "react-day-picker"; import { CALENDAR_STYLE } from "@/constants/calendarStyle"; +import "@/styles/customCalendar.css"; import BottomSheet from "./BottomSheetMaterial"; interface Props { closeBottomSheet: () => void; setStartDateFilter: (data: string) => void; setEndDateFilter: (date: string) => void; - isFormatting?: boolean; } // TODO: 값 설정을 버튼이 눌렸을 때로 수정 필요 -const CalenderBottomSheet = ({ closeBottomSheet, setStartDateFilter, setEndDateFilter, isFormatting = false }: Props) => { +const CalenderBottomSheet = ({ closeBottomSheet, setStartDateFilter, setEndDateFilter }: Props) => { const [range, setRange] = useState(); - const formatStyle = isFormatting ? "yyyy.MM.dd" : "PPP EE"; useEffect(() => { if (range?.from) { if (!range.to) { - setStartDateFilter(format(range.from, formatStyle, { locale: ko })); + setStartDateFilter(format(range.from, "yyyy.MM.dd", { locale: ko })); } else if (range.to) { - setStartDateFilter(format(range.from, formatStyle, { locale: ko })); - setEndDateFilter(format(range.to, formatStyle, { locale: ko })); + setStartDateFilter(format(range.from, "yyyy.MM.dd", { locale: ko })); + setEndDateFilter(format(range.to, "yyyy.MM.dd", { locale: ko })); } } }, [range]);