Merge pull request #305 from TripInfoWeb/dev_informations

Feat: 모달창 스크롤

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">

src/components/common/Header.tsx

@@ -144,7 +144,6 @@ const Header = ({
                   }
                 ></div>
                 <div className="h-[1.875rem] w-[4rem] animate-pulseAuth font-semibold text-black hover:text-main"></div>
-                <div className="text-gray-400">|</div>
               </>
             ) : userId > 0 ? (
               <>

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"

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()}
         >

src/components/diary/write/QuillEditor.tsx

@@ -34,8 +34,10 @@ const QuillEditor = ({
         theme="snow"
         placeholder="여행은 어땠나요? 자유롭게 기록하고 싶은 것들을 작성해보세요."
         onChange={(value, delta, source, editor) => {
+          console.log(`day: ${temp}`);
           console.log(value, temp, delta, source, editor); // TODO
 
+
           if (source === "api" && value === "<p><br></p>") {
             return;
           }

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"

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>

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"

src/containers/common/HeaderContainer.tsx

@@ -77,6 +77,7 @@ const HeaderContainer = () => {
       }
     };
     login();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

src/containers/common/HeaderSidebarContainer.tsx

@@ -2,7 +2,7 @@
 
 import HeaderSidebar from "@/components/common/HeaderSidebar";
 import useAuthStore from "@/store/authStore";
-import { debounce } from "@/utils/debounc";
+import { debounce } from "@/utils/debounce";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 

src/containers/diary/detail/DiaryViewerContainer.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import DiaryViewer from "@/components/diary/detail/DiaryViewer";
+import usePreventBodyScroll from "@/hooks/usePreventBodyScroll";
 import { GetDiaryResponseDto } from "@/types/DiaryDto";
 import { useMemo, useState } from "react";
 
@@ -25,6 +26,8 @@ const DiaryViewerContainer = ({ data }: Props) => {
     setCurrentDay(day);
   };
 
+  usePreventBodyScroll(modalVisible);
+
   return (
     <DiaryViewer
       data={data}

src/containers/diary/edit/DiaryEditorContainer.tsx

@@ -13,6 +13,7 @@ import sanitizeHtml from "sanitize-html";
 import { parse } from "node-html-parser";
 import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import usePreventBodyScroll from "@/hooks/usePreventBodyScroll";
 
 interface Props {
   diaryData: GetDiaryResponseDto;
@@ -28,6 +29,9 @@ const DiaryEditorContainer = ({ diaryData }: Props) => {
   const [originalThumbnailUrl, setOriginalThumbnailUrl] = useState<string>("");
   const [originalContentUrl, setOriginalContentUrl] = useState<string[][]>([]);
 
+  usePreventBodyScroll(dateRangeModal);
+  usePreventBodyScroll(addressModal);
+
   const methods = useForm<{
     userId: number;
     title: string;

src/containers/diary/write/DiaryEditorContainer.tsx

@@ -13,6 +13,7 @@ import sanitizeHtml from "sanitize-html";
 import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import parse from "node-html-parser";
+import usePreventBodyScroll from "@/hooks/usePreventBodyScroll";
 
 const DiaryEditorContainer = () => {
   const router = useRouter();
@@ -22,6 +23,9 @@ const DiaryEditorContainer = () => {
   const [addressModal, setAddressModal] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
 
+  usePreventBodyScroll(dateRangeModal);
+  usePreventBodyScroll(addressModal);
+
   const methods = useForm<{
     userId: number;
     title: string;

src/containers/informations/detail/ButtonListContainer.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import ButtonList from "@/components/informations/detail/ButtonList";
+import usePreventBodyScroll from "@/hooks/usePreventBodyScroll";
 import useAuthStore from "@/store/authStore";
 import { useState } from "react";
 
@@ -13,6 +14,8 @@ const ButtonListContainer = ({ userId, informationId }: Props) => {
   const { id } = useAuthStore();
   const [modalVisible, setModalVisible] = useState<boolean>(false);
 
+  usePreventBodyScroll(modalVisible);
+
   return (
     <ButtonList
       visible={userId === id}

src/containers/informations/detail/ImageListContainer.tsx

@@ -2,6 +2,7 @@
 
 import ImageList from "@/components/informations/detail/ImageList";
 import useDragScroll from "@/hooks/useDragScroll";
+import usePreventBodyScroll from "@/hooks/usePreventBodyScroll";
 import { useState } from "react";
 
 interface Props {
@@ -15,6 +16,8 @@ const ImageListContainer = ({ images }: Props) => {
   );
   const [viewerVisible, setViewerVisible] = useState<boolean>(false);
 
+  usePreventBodyScroll(viewerVisible);
+
   return (
     <ImageList
       scrollHook={scrollHook}

src/containers/informations/edit/InformationEditorContainer.tsx

@@ -3,6 +3,7 @@
 import InformationEditor from "@/components/informations/write/InformationEditor";
 import sanitizeOption from "@/constants/common/sanitizeOption";
 import useDragScroll from "@/hooks/useDragScroll";
+import usePreventBodyScroll from "@/hooks/usePreventBodyScroll";
 import { InformationUpdateFormSchema } from "@/lib/zod/schema/InformationUpdateFormSchema";
 import useAuthStore from "@/store/authStore";
 import useEditorStore from "@/store/editorStore";
@@ -88,6 +89,9 @@ const InformationEditorContainer = ({ informationId, data }: Props) => {
   // 카테고리 선택 모달창이 보이는지 여부
   const [categoryModal, setCategoryModal] = useState<boolean>(false);
 
+  usePreventBodyScroll(locationModal);
+  usePreventBodyScroll(categoryModal);
+
   const showLocationModal = () => {
     methods.setValue("province", "");
     methods.setValue("city", "");
@@ -230,7 +234,7 @@ const InformationEditorContainer = ({ informationId, data }: Props) => {
     const data: UpdateInformationRequestDto = {
       title: informationTitle,
       address: informationAddress,
-      content: informationContent,
+      content: sanitizeHtml(informationContent, sanitizeOption),
       tips: tips.join(";"),
       placeModifyRequest: {
         searchId: placeId,

src/containers/informations/list/InformationFilterModalContainer.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import InformationFilterModal from "@/components/informations/list/InformationFilterModal";
+import usePreventBodyScroll from "@/hooks/usePreventBodyScroll";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 interface Props {
   closeModal: () => void;

src/containers/informations/list/InformationSearchContainer.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import InformationSearch from "@/components/informations/list/InformationSearch";
+import usePreventBodyScroll from "@/hooks/usePreventBodyScroll";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
 
@@ -19,6 +20,7 @@ const InformationSearchContainer = () => {
   const [searchDropdownVisible, setSearchDropdownVisible] =
     useState<boolean>(false);
   const router = useRouter();
+  usePreventBodyScroll(modalVisible);
 
   const onChangeSearchValue = (value: string) => {
     if (searchMethod === "제목") {

src/containers/informations/write/CategoryModalContainer.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import CategoryModal from "@/components/informations/write/CategoryModal";
-import useEditorStore from "@/store/editorStore";
 import { CategoryResponseDto } from "@/types/CategoryDto";
 import { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";

src/containers/informations/write/InformationEditorContainer.tsx

@@ -3,6 +3,7 @@
 import InformationEditor from "@/components/informations/write/InformationEditor";
 import sanitizeOption from "@/constants/common/sanitizeOption";
 import useDragScroll from "@/hooks/useDragScroll";
+import usePreventBodyScroll from "@/hooks/usePreventBodyScroll";
 import { InformationCreateFormSchema } from "@/lib/zod/schema/InformationCreateFormSchema";
 import useAuthStore from "@/store/authStore";
 import useEditorStore from "@/store/editorStore";
@@ -74,6 +75,9 @@ const InformationEditorContainer = () => {
   // 카테고리 선택 모달창이 보이는지 여부
   const [categoryModal, setCategoryModal] = useState<boolean>(false);
 
+  usePreventBodyScroll(locationModal);
+  usePreventBodyScroll(categoryModal);
+
   const showLocationModal = () => {
     methods.setValue("province", "");
     methods.setValue("city", "");

src/hooks/usePreventBodyScroll.ts

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+
 /**
  * @description 모달창을 열었을 때 바디 스크롤을 막으려고 만든 hook
  * @example usePreventBodyScroll(isOpenModal);