Merge pull request #373 from TripInfoWeb/dev_etc

Dev etc
TripInfoWeb · Sep 22, 2024 · dfb7d15 · dfb7d15
2 parents 86aa9af + 113b8f3
commit dfb7d15
Show file tree

Hide file tree

Showing 16 changed files with 27 additions and 108 deletions.
diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx
@@ -1,8 +1,8 @@
 import useOutsideClick from "@/hooks/useOutsideClick";
 import usePreventBodyScroll from "@/hooks/usePreventBodyScroll";
-import Image from "next/image";
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { MdClose } from "react-icons/md";
 
 interface ModalProps extends React.PropsWithChildren {
   isOpen: boolean;
@@ -80,17 +80,18 @@ export const Modal = ({
       >
         {isHeaderBar && (
           <div
-            className={`flex h-[3rem] w-full justify-end rounded-t-[1rem] ${headerBarStyle}`}
+            className={`relative flex h-[3rem] w-full justify-end rounded-t-[1rem] ${headerBarStyle}`}
           >
             <button
               onClick={() => onClose()}
-              className="transform-origin-center mr-[.5rem] mt-[1rem] h-[2rem] w-[2rem] scale-100 transform transition-transform duration-300 hover:scale-150"
+              className="sticky mt-[2.5rem] mr-[2.5rem] z-50 h-[2rem] w-[2rem] scale-100 transform transition-transform duration-300"
             >
-              <Image
-                src={"/gathering/close-icon.svg"}
-                alt={"close-icon"}
-                width={20}
-                height={20}
+              <MdClose
+                className="cursor-pointer text-gray2 hover:text-main"
+                size={"2.5rem"}
+                onClick={() => {
+                  onClose();
+                }}
               />
             </button>
           </div>

diff --git a/src/components/gathering/createUpdate/editor/GatheringEditorCategory.tsx b/src/components/gathering/createUpdate/editor/GatheringEditorCategory.tsx
@@ -63,7 +63,7 @@ const GatheringEditorCategory = ({
           </span>
         )}
       </div>
-      <Modal isOpen={modalState.isOpen} onClose={() => modalState.closeModal()}>
+      <Modal isOpen={modalState.isOpen} onClose={() => modalState.closeModal()} isHeaderBar={true}>
         <GatheringCategoryModal
           closeModal={modalState.closeModal}
           categoryList={categoryList}

diff --git a/src/components/gathering/createUpdate/editor/GatheringEditorDeadline.tsx b/src/components/gathering/createUpdate/editor/GatheringEditorDeadline.tsx
@@ -52,7 +52,7 @@ const GatheringEditorDeadline = ({ modalState }: IGatheringEditorDeadline) => {
           </span>
         )}
       </div>
-      <Modal isOpen={modalState.isOpen} onClose={() => modalState.closeModal()}>
+      <Modal isOpen={modalState.isOpen} onClose={() => modalState.closeModal()} isHeaderBar={true}>
         <GatheringDeadlineModal closeModal={() => modalState.closeModal()} />
       </Modal>
     </div>

diff --git a/src/components/gathering/createUpdate/editor/GatheringEditorParticipantsFilter.tsx b/src/components/gathering/createUpdate/editor/GatheringEditorParticipantsFilter.tsx
@@ -67,7 +67,7 @@ const GatheringEditorParticipantsFilter = ({
           )}
         </button>
       </div>
-      <Modal isOpen={modalState.isOpen} onClose={() => modalState.closeModal()}>
+      <Modal isOpen={modalState.isOpen} onClose={() => modalState.closeModal()} isHeaderBar={true}>
         <GatheringParticipantsFilterModal closeModal={modalState.closeModal} />
       </Modal>
     </div>

diff --git a/src/components/gathering/createUpdate/editor/GatheringEditorPeriod.tsx b/src/components/gathering/createUpdate/editor/GatheringEditorPeriod.tsx
@@ -74,7 +74,7 @@ const GatheringEditorPeriod = ({ modalState }: IGatheringEditorPeriod) => {
           </span>
         )}
       </div>
-      <Modal isOpen={modalState.isOpen} onClose={() => modalState.closeModal()}>
+      <Modal isOpen={modalState.isOpen} onClose={() => modalState.closeModal()} isHeaderBar={true}>
         <GatheringPeriodModal closeModal={() => modalState.closeModal()} />
       </Modal>
     </div>

diff --git a/src/components/gathering/createUpdate/editor/GatheringEditorPlace.tsx b/src/components/gathering/createUpdate/editor/GatheringEditorPlace.tsx
@@ -37,7 +37,7 @@ const GatheringEditorPlace = ({ modalState }: IGatheringEditorPlace) => {
           </span>
         )}
       </div>
-      <Modal isOpen={modalState.isOpen} onClose={() => modalState.closeModal()}>
+      <Modal isOpen={modalState.isOpen} onClose={() => modalState.closeModal()} isHeaderBar={true}>
         <GatheringPlaceModal closeModal={() => modalState.closeModal()} />
       </Modal>
     </div>

diff --git a/src/components/gathering/createUpdate/editor/GatheringEditorTime.tsx b/src/components/gathering/createUpdate/editor/GatheringEditorTime.tsx
@@ -45,8 +45,8 @@ const GatheringEditorTime = ({ modalState }: IGatheringEditorTime) => {
           </span>
         )}
       </div>
-      <Modal isOpen={modalState.isOpen} onClose={() => modalState.closeModal()}>
-        <GatheringTimeModal closeModal={() => modalState.closeModal()} />
+      <Modal isOpen={modalState.isOpen} onClose={() => modalState.closeModal()} isHeaderBar={true}>
+        <GatheringTimeModal closeModal={() => modalState.closeModal()}  />
       </Modal>
     </div>
   );

diff --git a/src/components/gathering/createUpdate/editor/modal/GatheringCategoryModal.tsx b/src/components/gathering/createUpdate/editor/modal/GatheringCategoryModal.tsx
@@ -1,5 +1,4 @@
 import "@/styles/reactDataRange.css";
-import Image from "next/image";
 import { useState } from "react";
 import { useFormContext } from "react-hook-form";
 
@@ -28,20 +27,9 @@ const GatheringCategoryModal = (props: IGatheringCategoryModalProps) => {
   return (
     <div
       className={
-        "relative flex h-auto w-[calc(100vw-2rem)] max-w-[40rem] flex-col overflow-y-scroll rounded-2xl bg-white p-[2.75rem] scrollbar-hide"
+        "relative flex h-auto w-[calc(100vw-2rem)] max-w-[40rem] flex-col overflow-y-scroll rounded-b-2xl bg-white p-[2.75rem] scrollbar-hide"
       }
     >
-      <button
-        className="absolute right-[1.5rem] top-[1.5rem]"
-        onClick={() => props.closeModal()}
-      >
-        <Image
-          src={"/gathering/close-icon.svg"}
-          alt={"close-icon"}
-          width={20}
-          height={20}
-        />
-      </button>
       <div className={"flex flex-col gap-y-1"}>
         <h2 className="w-full text-start text-2xl font-bold text-black">
           카테고리 선택

diff --git a/src/components/gathering/createUpdate/editor/modal/GatheringDeadlineModal.tsx b/src/components/gathering/createUpdate/editor/modal/GatheringDeadlineModal.tsx
@@ -9,7 +9,6 @@ import {
   subDays,
 } from "date-fns";
 import { ko } from "date-fns/locale";
-import Image from "next/image";
 import { useState } from "react";
 import { Calendar } from "react-date-range";
 import { useFormContext } from "react-hook-form";
@@ -63,20 +62,9 @@ const GatheringDeadlineModal = (props: IGatheringDeadlineModalProps) => {
   return (
     <div
       className={
-        "relative h-full max-h-[38rem] w-[calc(100vw-1rem)] max-w-[25rem] overflow-y-scroll rounded-2xl bg-white p-[1rem] scrollbar-hide"
+        "relative h-full max-h-[38rem] w-[calc(100vw-1rem)] max-w-[25rem] overflow-y-scroll rounded-b-2xl bg-white p-[1rem] scrollbar-hide"
       }
     >
-      <button
-        className="absolute right-[1rem] top-[1.5rem]"
-        onClick={() => props.closeModal()}
-      >
-        <Image
-          src={"/gathering/close-icon.svg"}
-          alt={"close-icon"}
-          width={20}
-          height={20}
-        />
-      </button>
       <h2 className={"mt-[2rem] h-[2rem] text-2xl font-bold text-black"}>
         모임 마감일 선택
       </h2>

diff --git a/src/components/gathering/createUpdate/editor/modal/GatheringParticipantsFilterModal.tsx b/src/components/gathering/createUpdate/editor/modal/GatheringParticipantsFilterModal.tsx
@@ -84,20 +84,9 @@ const GatheringParticipantsFilterModal = (
   return (
     <div
       className={
-        "relative h-full max-h-[40rem] w-[calc(100vw-1rem)] max-w-[40rem] overflow-scroll rounded-2xl bg-white p-[2.75rem] scrollbar-hide"
+        "relative h-full max-h-[40rem] w-[calc(100vw-1rem)] max-w-[40rem] overflow-scroll rounded-b-2xl bg-white p-[2.75rem] scrollbar-hide"
       }
     >
-      <button
-        className="absolute right-[1rem] top-[1.5rem]"
-        onClick={() => props.closeModal()}
-      >
-        <Image
-          src={"/gathering/close-icon.svg"}
-          alt={"close-icon"}
-          width={20}
-          height={20}
-        />
-      </button>
       <h2 className={"h-[2rem] text-2xl font-bold text-black"}>참여자 선택</h2>
       <section className="flex w-full flex-col gap-y-[2rem] pt-[3rem]">
         <article

diff --git a/src/components/gathering/createUpdate/editor/modal/GatheringPeriodModal.tsx b/src/components/gathering/createUpdate/editor/modal/GatheringPeriodModal.tsx
@@ -1,7 +1,6 @@
 import "@/styles/reactDataRange.css";
 import { add, addDays, format, isAfter } from "date-fns";
 import ko from "date-fns/locale/ko";
-import Image from "next/image";
 import { useEffect, useState } from "react";
 import { DateRangePicker, RangeKeyDict } from "react-date-range";
 import { useFormContext } from "react-hook-form";
@@ -70,20 +69,9 @@ const GatheringPeriodModal = (props: IGatheringPeriodModalProps) => {
   return (
     <div
       className={
-        "relative h-full max-h-[50rem] w-[calc(100vw-1rem)] overflow-y-scroll rounded-2xl bg-white p-[1rem] scrollbar-hide max-[799px]:max-w-[25rem] min-[800px]:max-h-[36rem] min-[800px]:w-[49rem]"
+        "relative h-full max-h-[50rem] w-[calc(100vw-1rem)] overflow-y-scroll rounded-b-2xl bg-white p-[1rem] scrollbar-hide max-[799px]:max-w-[25rem] min-[800px]:max-h-[36rem] min-[800px]:w-[49rem]"
       }
     >
-      <button
-        className="absolute right-[1rem] top-[1.5rem]"
-        onClick={() => props.closeModal()}
-      >
-        <Image
-          src={"/gathering/close-icon.svg"}
-          alt={"close-icon"}
-          width={20}
-          height={20}
-        />
-      </button>
       <h2 className={"mt-[2rem] h-[2rem] text-2xl font-bold text-black"}>
         날짜 선택
       </h2>

diff --git a/src/components/gathering/createUpdate/editor/modal/GatheringPlaceModal.tsx b/src/components/gathering/createUpdate/editor/modal/GatheringPlaceModal.tsx
@@ -163,21 +163,8 @@ const GatheringPlaceModal = (props: IGatheringPlaceModalProps) => {
 
   return (
     <div
-      className={`relative h-full w-[calc(100vw-1rem)] max-w-[40rem] overflow-y-scroll rounded-2xl bg-white p-[1rem] scrollbar-hide ${menu == "address" ? "max-h-[874px]" : "max-h-[800px]"}`}
+      className={`relative h-full w-[calc(100vw-1rem)] max-w-[40rem] overflow-y-scroll rounded-b-2xl bg-white p-[1rem] scrollbar-hide ${menu == "address" ? "max-h-[874px]" : "max-h-[800px]"}`}
     >
-      <button
-        className="absolute right-[1.5rem] top-[1.5rem]"
-        onClick={() => {
-          props.closeModal();
-        }}
-      >
-        <Image
-          src={"/gathering/close-icon.svg"}
-          alt={"close-icon"}
-          width={20}
-          height={20}
-        />
-      </button>
       <h2
         className={
           "mb-[1.875rem] mt-[2rem] h-[2rem] text-2xl font-bold text-black"

diff --git a/src/components/gathering/createUpdate/editor/modal/GatheringTimeModal.tsx b/src/components/gathering/createUpdate/editor/modal/GatheringTimeModal.tsx
@@ -49,25 +49,14 @@ const GatheringTimeModal = (props: IGatheringTimeModalProps) => {
   return (
     <div
       className={
-        "relative h-full max-h-[22rem] w-[calc(100vw-1rem)] max-w-[30rem] overflow-y-scroll rounded-2xl bg-white p-[2.75rem] scrollbar-hide"
+        "relative h-full max-h-[22rem] w-[calc(100vw-1rem)] max-w-[30rem] overflow-y-scroll rounded-b-[1rem] bg-white p-[2.75rem] scrollbar-hide"
       }
     >
       <div
         className={
           "flex min-h-full flex-col items-center justify-start bg-white"
         }
       >
-        <button
-          className="absolute right-[1.5rem] top-[1.5rem]"
-          onClick={() => props.closeModal()}
-        >
-          <Image
-            src={"/gathering/close-icon.svg"}
-            alt={"close-icon"}
-            width={20}
-            height={20}
-          />
-        </button>
         <h2 className={"w-full text-start text-2xl font-bold text-black"}>
           시간 선택
         </h2>

diff --git a/src/components/gathering/read/modal/GatheringFilterModal.tsx b/src/components/gathering/read/modal/GatheringFilterModal.tsx
@@ -187,20 +187,9 @@ const GatheringFilterModal = ({ closeModal }: IGatheringFilterModalProps) => {
   return (
     <div
       className={
-        "relative h-full max-h-[47.5rem] w-[calc(100vw-1rem)] max-w-[40rem] overflow-y-scroll rounded-2xl bg-white p-[3rem] scrollbar-hide"
+        "relative h-full max-h-[47.5rem] w-[calc(100vw-1rem)] max-w-[40rem] overflow-y-scroll rounded-b-2xl bg-white p-[3rem] scrollbar-hide"
       }
     >
-      <button
-        className="absolute right-[1.5rem] top-[1.5rem]"
-        onClick={() => closeModal()}
-      >
-        <Image
-          src={"/gathering/close-icon.svg"}
-          alt={"close-icon"}
-          width={20}
-          height={20}
-        />
-      </button>
       <h2 className={"h-[2rem] text-2xl font-bold text-black"}> 조건 선택 </h2>
       <div className="flex w-full flex-col gap-y-[2rem] pt-[3rem]">
         <div className={"flex flex-col gap-y-[1rem]"}>

diff --git a/src/components/informations/list/InformationSearch.tsx b/src/components/informations/list/InformationSearch.tsx
@@ -1,8 +1,8 @@
-import { IoIosArrowDown } from "react-icons/io";
-import { VscSettings } from "react-icons/vsc";
 import InformationFilterModalContainer from "@/containers/informations/list/InformationFilterModalContainer";
-import Link from "next/link";
 import Image from "next/image";
+import Link from "next/link";
+import { IoIosArrowDown } from "react-icons/io";
+import { VscSettings } from "react-icons/vsc";
 
 interface Props {
   pathname: string;

diff --git a/src/containers/gathering/read/GatheringFilterContainer.tsx b/src/containers/gathering/read/GatheringFilterContainer.tsx
@@ -28,7 +28,7 @@ const GatheringFilterContainer = (props: IGatheringFilterContainer) => {
         <VscSettings size={"1.25rem"} />
         <div>필터</div>
       </button>
-      <Modal isOpen={isModal} onClose={() => setIsModal(false)}>
+      <Modal isOpen={isModal} onClose={() => setIsModal(false)} isHeaderBar={true}>
         <GatheringFilterModal closeModal={() => setIsModal(false)} />
       </Modal>
     </>