diff --git a/src/app/(with-header)/myprofile/_components/MyReviewKebabDropDown.tsx b/src/app/(with-header)/myprofile/_components/MyReviewKebabDropDown.tsx index 7c14af9..9dee7a1 100644 --- a/src/app/(with-header)/myprofile/_components/MyReviewKebabDropDown.tsx +++ b/src/app/(with-header)/myprofile/_components/MyReviewKebabDropDown.tsx @@ -4,13 +4,13 @@ import { useState } from 'react'; import Image from 'next/image'; import { toast } from 'react-toastify'; import Dropdown from '@/components/Dropdown'; -import kebab from '@/assets/icons/menu.svg'; import Modal from '@/components/modal/Modal'; -import DeleteWineForm from '@/components/modal/DeleteWineModal'; -import PatchReviewForm from '@/components/modal/PatchReviewForm'; +import PatchReviewModal from '@/components/modal/PatchReviewModal'; +import DeleteModal from '@/components/modal/DeleteModal'; import { MyReview } from '@/types/review-data'; import { fetchDeleteReview } from '@/lib/fetchMyReivew'; import { EditReviewData } from '@/app/(with-header)/myprofile/_components/MyReviewListContainer'; +import kebab from '@/assets/icons/menu.svg'; export default function MyReviewKebabDropDown({ reviewInitialData, @@ -81,14 +81,16 @@ export default function MyReviewKebabDropDown({ - +
+ +
- + ); diff --git a/src/app/(with-header)/myprofile/_components/MyWIneKebabDropDown .tsx b/src/app/(with-header)/myprofile/_components/MyWIneKebabDropDown .tsx index 6ef3073..79b513b 100644 --- a/src/app/(with-header)/myprofile/_components/MyWIneKebabDropDown .tsx +++ b/src/app/(with-header)/myprofile/_components/MyWIneKebabDropDown .tsx @@ -4,11 +4,11 @@ import { useState } from 'react'; import Image from 'next/image'; import { toast } from 'react-toastify'; import Dropdown from '@/components/Dropdown'; -import kebab from '@/assets/icons/menu.svg'; import Modal from '@/components/modal/Modal'; -import PatchWineForm from '@/components/modal/PatchWineForm'; -import DeleteWineForm from '@/components/modal/DeleteWineModal'; +import PatchWineModal from '@/components/modal/PatchWineModal'; +import DeleteModal from '@/components/modal/DeleteModal'; import { fetchDeleteWine } from '@/lib/fetchWines'; +import kebab from '@/assets/icons/menu.svg'; export interface WineDataProps { name: string; @@ -89,10 +89,12 @@ export default function MyWIneKebabDropDown({ isEditModalOpen ? 'mobile:translate-y-0 mobile:animate-slide-up' : 'mobile:animate-slide-down mobile:translate-y-full' }`} > - +
+ +
- + ); diff --git a/src/app/(with-header)/wines/[id]/_components/ReviewDropdown.tsx b/src/app/(with-header)/wines/[id]/_components/ReviewDropdown.tsx index 4c1c8b5..4e9c122 100644 --- a/src/app/(with-header)/wines/[id]/_components/ReviewDropdown.tsx +++ b/src/app/(with-header)/wines/[id]/_components/ReviewDropdown.tsx @@ -1,14 +1,14 @@ 'use client'; -import Image from 'next/image'; + import { useState } from 'react'; +import Image from 'next/image'; import { fetchWithAuth } from '@/lib/auth'; -import { MyReview } from '@/types/review-data'; -import { EditReviewData } from '@/types/review-data'; +import { MyReview, EditReviewData } from '@/types/review-data'; import { toast } from 'react-toastify'; import Dropdown from '@/components/Dropdown'; import Modal from '@/components/modal/Modal'; -import PatchReviewForm from '@/components/modal/PatchReviewForm'; -import DeleteWineForm from '@/components/modal/DeleteWineModal'; +import PatchReviewModal from '@/components/modal/PatchReviewModal'; +import DeleteModal from '@/components/modal/DeleteModal'; import menu from '@/assets/icons/menu.svg'; export default function ReviewDropdown({ @@ -86,14 +86,16 @@ export default function ReviewDropdown({ - +
+ +
- + ); diff --git a/src/app/(with-header)/wines/_components/WineFilterModal.tsx b/src/app/(with-header)/wines/_components/WineFilterModal.tsx index 036f4c6..70f77d7 100644 --- a/src/app/(with-header)/wines/_components/WineFilterModal.tsx +++ b/src/app/(with-header)/wines/_components/WineFilterModal.tsx @@ -6,6 +6,7 @@ import FilterTypes from './FilterTypes'; import FilterPrice from './FilterPrice'; import FilterRating from './FilterRating'; import Button from '@/components/Button'; +import { useScrollLock } from '@/hooks/useScrollLock'; import closeIcon from '@/assets/icons/close.svg'; const MAX_PRICE = 2000000; @@ -46,12 +47,7 @@ export default function WineFilterModal({ isOpen, onClose, onApply, onFilterChan onFilterChange({ type: selectedType, minPrice: priceRange[0], maxPrice: priceRange[1], rating: selectedRating }); }, [selectedType, priceRange, selectedRating, onFilterChange]); - useEffect(() => { - document.body.style.overflow = isOpen ? 'hidden' : 'auto'; - return () => { - document.body.style.overflow = 'auto'; - }; - }, [isOpen]); + useScrollLock(isOpen); const handleKeyDown = useCallback( (event: KeyboardEvent) => { diff --git a/src/app/globals.css b/src/app/globals.css index 556b809..c754a02 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -10,6 +10,23 @@ body { min-width: 375px; } +@layer base { + * { + @apply custom-scrollbar; + } + .custom-scrollbar::-webkit-scrollbar { + width: 8px; + } + .custom-scrollbar::-webkit-scrollbar-thumb { + background-color: #CFDBEA; + border-radius: 4px; + } + .custom-scrollbar::-webkit-scrollbar-track { + background-color: #F2F4F8; + border-radius: 4px; + } +} + @layer utilities { .line-clamp-2 { display: -webkit-box; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 939e07a..e483728 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -8,7 +8,7 @@ import ProfileImgDropdown from './ProfileImgDropdown'; function LoggedOutHeader() { return ( -
+
@@ -28,7 +28,7 @@ function LoggedInHeader() { const { profileImage } = useAuth(); return ( -
+
diff --git a/src/components/modal/DeleteWineModal.tsx b/src/components/modal/DeleteModal.tsx similarity index 90% rename from src/components/modal/DeleteWineModal.tsx rename to src/components/modal/DeleteModal.tsx index 65edc32..616bfc8 100644 --- a/src/components/modal/DeleteWineModal.tsx +++ b/src/components/modal/DeleteModal.tsx @@ -5,7 +5,7 @@ interface DeleteWinePorps { onDelete: () => void; } -export default function DeleteWineForm({ onClose, onDelete }: DeleteWinePorps) { +export default function DeleteModal({ onClose, onDelete }: DeleteWinePorps) { return (
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx index e246171..7356dcc 100644 --- a/src/components/modal/Modal.tsx +++ b/src/components/modal/Modal.tsx @@ -2,6 +2,7 @@ import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; +import { useScrollLock } from '@/hooks/useScrollLock'; interface ModalProps { children: ReactNode; @@ -14,6 +15,8 @@ export default function Modal({ children, isOpen, setIsOpen, className }: ModalP const dialogRef = useRef(null); const [mounted, setMounted] = useState(false); + useScrollLock(isOpen); + const escKeyModalClose = useCallback( (e: KeyboardEvent) => { if (e.key === 'Escape') { diff --git a/src/components/modal/PatchReviewForm.tsx b/src/components/modal/PatchReviewModal.tsx similarity index 98% rename from src/components/modal/PatchReviewForm.tsx rename to src/components/modal/PatchReviewModal.tsx index 64cbca6..4922e69 100644 --- a/src/components/modal/PatchReviewForm.tsx +++ b/src/components/modal/PatchReviewModal.tsx @@ -69,7 +69,7 @@ interface postReviewPorp { editMyReview?: (id: number, editReviewData: EditReviewData, updatedAt: string) => void; } -export default function PatchReviewForm({ name, id, onClose, reviewInitialData, editMyReview }: postReviewPorp) { +export default function PatchReviewModal({ name, id, onClose, reviewInitialData, editMyReview }: postReviewPorp) { const [selectedAroma, setSelectedAroma] = useState(reviewInitialData?.aroma || []); const { register, handleSubmit, setValue, watch } = useForm({ diff --git a/src/components/modal/PatchWineForm.tsx b/src/components/modal/PatchWineModal.tsx similarity index 100% rename from src/components/modal/PatchWineForm.tsx rename to src/components/modal/PatchWineModal.tsx diff --git a/src/components/modal/PostReviewModal.tsx b/src/components/modal/PostReviewModal.tsx index 2a07465..ae5f6e5 100644 --- a/src/components/modal/PostReviewModal.tsx +++ b/src/components/modal/PostReviewModal.tsx @@ -213,66 +213,88 @@ export default function PostReviewModal({ addReview }: { addReview: (newReview: -
-
-

리뷰 등록

- -
-
-
-
-
- 와인 이미지 -
-

{wineData.name}

- setValue('rating', rate)} /> +
+
+
+

리뷰 등록

+ +
+ +
+
+
+ 와인 이미지 +
+

{wineData.name}

+ setValue('rating', rate)} /> +
+