Feat: 모달창 세로 스크롤 기능 추가

TripInfoWeb · Sep 15, 2024 · 4061065 · 4061065
1 parent dcf075f
commit 4061065
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 7 deletions.
diff --git a/src/components/common/DeleteModal.tsx b/src/components/common/DeleteModal.tsx
@@ -10,7 +10,7 @@ const DeleteModal = ({ loading, onDeleteClick, onCancelClick }: Props) => {
   return (
     <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-black/25">
       <HashSpinner loading={loading} />
-      <div className="flex h-fit w-96 flex-col items-center gap-6 rounded-xl bg-white p-6">
+      <div className="flex h-fit max-h-[calc(100%_-_48px)] w-96 max-w-[calc(100%_-_48px)] flex-col items-center gap-6 overflow-y-auto rounded-xl bg-white p-6">
         <h1 className="text-3xl">정말 삭제하시겠습니까?</h1>
         <p className="text-gray1">삭제하시면 다시 복구할 수 없습니다.</p>
         <div className="flex flex-row gap-4">

diff --git a/src/components/diary/write/AddressModal.tsx b/src/components/diary/write/AddressModal.tsx
@@ -30,7 +30,7 @@ const AddressModal = ({
 }: Props) => {
   return (
     <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-black/25">
-      <div className="flex h-fit w-[39.75rem] flex-col rounded-xl bg-white p-6 max-[744px]:w-[calc(100%_-_48px)]">
+      <div className="flex h-fit max-h-[calc(100%_-_48px)] w-[39.75rem] flex-col overflow-y-auto rounded-xl bg-white p-6 max-[744px]:w-[calc(100%_-_48px)]">
         <div className="flex flex-row items-center justify-end">
           <MdClose
             className="cursor-pointer text-gray2 hover:text-main"

diff --git a/src/components/diary/write/DateRangeModal.tsx b/src/components/diary/write/DateRangeModal.tsx
@@ -27,7 +27,7 @@ const DateRangeModal = ({
 }: Props) => {
   return (
     <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-black/25">
-      <div className="flex h-fit w-fit flex-col gap-4 rounded-xl bg-white p-6">
+      <div className="flex h-fit max-h-[calc(100%_-_48px)] w-fit max-w-[90%] flex-col gap-4 overflow-y-auto rounded-xl bg-white p-6">
         <div className="flex flex-row items-center justify-end">
           <MdClose
             className="cursor-pointer text-gray2 hover:text-main"
@@ -59,7 +59,7 @@ const DateRangeModal = ({
           rangeColors={["#00B488"]}
         />
         <button
-          className="mt-4 h-10 w-32 self-center rounded-full bg-main text-[0.9375rem] text-white hover:scale-105"
+          className="mt-4 min-h-10 w-32 self-center rounded-full bg-main text-[0.9375rem] text-white hover:scale-105"
           type="button"
           onClick={() => onChangeDateRange()}
         >

diff --git a/src/components/informations/list/InformationFilterModal.tsx b/src/components/informations/list/InformationFilterModal.tsx
@@ -17,7 +17,7 @@ const InformationFilterModal = ({
 }: Props) => {
   return (
     <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-black/25">
-      <div className="flex h-fit w-80 flex-col rounded-xl bg-white p-6">
+      <div className="flex h-fit max-h-[calc(100%_-_48px)] w-80 max-w-[calc(100%_-_48px)] flex-col overflow-y-auto rounded-xl bg-white p-6">
         <div className="flex flex-row items-center justify-end">
           <MdClose
             className="cursor-pointer text-gray2 hover:text-main"

diff --git a/src/components/informations/write/CategoryModal.tsx b/src/components/informations/write/CategoryModal.tsx
@@ -22,7 +22,7 @@ const CategoryModal = ({
 }: Props) => {
   return (
     <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-black/25">
-      <div className="flex h-fit w-[31.25rem] flex-col gap-8 rounded-xl bg-white p-8 max-[560px]:w-[90%]">
+      <div className="flex h-fit w-[31.25rem] max-w-[calc(100%_-_48px)] flex-col gap-8 rounded-xl bg-white p-8">
         <div className="flex flex-col gap-1">
           <div className="flex flex-row items-center justify-between">
             <h3 className="text-lg font-medium text-black">카테고리 선택</h3>

diff --git a/src/components/informations/write/PlaceModal.tsx b/src/components/informations/write/PlaceModal.tsx
@@ -58,7 +58,7 @@ const PlaceModal = ({
 
   return (
     <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-black/25">
-      <div className="flex h-fit w-[39.75rem] flex-col rounded-xl bg-white p-6 max-[744px]:w-[calc(100%_-_48px)]">
+      <div className="flex h-fit max-h-[calc(100%_-_48px)] w-[39.75rem] flex-col overflow-y-scroll rounded-xl bg-white p-6 max-[744px]:w-[calc(100%_-_48px)]">
         <div className="flex flex-row items-center justify-end">
           <MdClose
             className="cursor-pointer text-gray2 hover:text-main"