Merge pull request #57 from naya-h2/refactor/Modal

⚡️ fix: Alert모달에서 x버튼 삭제
P1Z7 · Feb 4, 2024 · 7fcbe35 · 7fcbe35
2 parents 1943ff3 + 73324b6
commit 7fcbe35
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 35 deletions.
diff --git 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 = () => {
       <StarInput />
       <SubInput />
       <DetailInput />
+      <div className="pb-84" />
       <BottomButton isDisabled={!isValid} onClick={() => openModal("endEdit")}>
         수정사항 등록
       </BottomButton>
       {modal === "endEdit" && (
-        <TextModal title="텍스트 모달 타이틀" btnText="오케이" textareaId="text" closeModal={closeModal} {...{ control: control, placeholder: "텍스트 모달입니다." }} />
+        <AlertModal closeModal={closeModal}>
+          수정사항은 사용자 3인 이상의
+          <br /> 승인 후에 반영됩니다.
+        </AlertModal>
       )}
     </div>
   );

diff --git 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,13 @@ const MainInput = () => {
         </div>
       </div>
       {bottomSheet === "address" && <AddressBottomSheet closeBottomSheet={closeBottomSheet} />}
-      {bottomSheet === "date" && <CalenderBottomSheet closeBottomSheet={closeBottomSheet} />}
+      {bottomSheet === "date" && (
+        <CalenderBottomSheet
+          closeBottomSheet={closeBottomSheet}
+          setEndDateFilter={(date: string) => setValue("endDate", date)}
+          setStartDateFilter={(date: string) => setValue("startDate", date)}
+        />
+      )}
     </>
   );
 };

diff --git a/app/_components/bottom-sheet/CalendarBottomSheet.tsx b/app/_components/bottom-sheet/CalendarBottomSheet.tsx
@@ -1,44 +1,31 @@
 "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 "@/styles/customCalendar.css";
 import BottomSheet from "./BottomSheetMaterial";
 
 interface Props {
   closeBottomSheet: () => void;
-  setStartDateFilter?: (data: string) => void;
-  setEndDateFilter?: (date: string) => void;
+  setStartDateFilter: (data: string) => void;
+  setEndDateFilter: (date: string) => void;
 }
 
 // TODO: 값 설정을 버튼이 눌렸을 때로 수정 필요
 
 const CalenderBottomSheet = ({ closeBottomSheet, setStartDateFilter, setEndDateFilter }: Props) => {
-  const { setValue } = useFormContext<PostType>();
   const [range, setRange] = useState<DateRange | undefined>();
 
   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, "yyyy.MM.dd", { 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, "yyyy.MM.dd", { locale: ko }));
+        setEndDateFilter(format(range.to, "yyyy.MM.dd", { locale: ko }));
       }
     }
   }, [range]);

diff --git 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<PostType>;
   closeModal: () => void;
 }
 
-/**
- * TODO: 바텀시트로 변경 예정
- */
-const AddressModal = ({ setValue, closeModal }: Props) => {
+const AddressModal = ({ closeModal }: Props) => {
+  const { setValue } = useFormContext<PostType>();
+
   return (
     <Modal.Frame closeModal={closeModal}>
       <DaumPostcodeEmbed

diff --git a/app/_components/modal/AlertModal.tsx b/app/_components/modal/AlertModal.tsx
@@ -14,7 +14,7 @@ interface AlertModalType extends ModalBaseType {
  */
 const AlertModal = ({ children, hasCancelBtn, closeModal, handleBtnClick }: AlertModalType) => {
   return (
-    <Modal.Frame closeModal={closeModal}>
+    <Modal.Frame closeModal={closeModal} hasNotCloseBtn>
       <Modal.Title>{children}</Modal.Title>
       <Modal.Button hasCancelBtn={hasCancelBtn} handleYesClick={handleBtnClick || closeModal} handleNoClick={closeModal}>
         확인

diff --git 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 (
     <ModalPortal>
       <div onClick={closeModal} className="fixed left-0 top-0 z-popup flex h-screen w-full items-center justify-center bg-gray-900 bg-opacity-70 text-center">
-        <div className="bg-white-black relative w-[308px] rounded-md px-20 pb-20 pt-40 text-16">
-          <button onClick={closeModal} className="absolute right-12 top-12">
-            <CloseIcon stroke="#C1C5CC" width="2.4rem" height="2.4rem" />
-          </button>
+        <div className="relative w-[308px] rounded-md bg-white-black px-20 pb-20 pt-40 text-16">
+          {hasNotCloseBtn || (
+            <button onClick={closeModal} className="absolute right-12 top-12">
+              <CloseIcon stroke="#C1C5CC" />
+            </button>
+          )}
           <div className="flex flex-col gap-20" onClick={(event) => event.stopPropagation()}>
             {children}
           </div>