[#98] Refactor/공통컴포넌트 모달

src/app/(with-header)/myprofile/_components/MyReviewKebabDropDown.tsx

@@ -86,7 +86,7 @@ export default function MyReviewKebabDropDown({
         }`}
       >
         <div className='custom-scrollbar max-h-[90vh] overflow-y-auto'>
-          <PatchReviewModal name={reviewInitialData.wine.name} id={id} onClose={closeEditModal} reviewInitialData={reviewInitialData} editMyReview={editMyReview} />
+          <PatchReviewModal name={reviewInitialData.wine.name} id={id} onClose={closeEditModal} reviewInitialData={reviewInitialData} editMyReview={editMyReview} isOpen={isEditModalOpen} />
         </div>
       </Modal>
       <Modal isOpen={isDeleteModalOpen} setIsOpen={setIsDeleteModalOpen} className='rounded-2xl mobile:mx-auto mobile:h-[172px] mobile:max-w-[353px]'>

src/app/(with-header)/myprofile/_components/MyWIneKebabDropDown .tsx

@@ -90,7 +90,7 @@ export default function MyWIneKebabDropDown({
         }`}
       >
         <div className='custom-scrollbar max-h-[90vh] overflow-y-auto'>
-          <PatchWineModal onClose={closeEditModal} id={`${id}`} wineInitialData={wineInitialData} editMyWine={editMyWine} />
+          <PatchWineModal onClose={closeEditModal} id={`${id}`} wineInitialData={wineInitialData} editMyWine={editMyWine} isOpen={isEditModalOpen} />
         </div>
       </Modal>
       <Modal isOpen={isDeleteModalOpen} setIsOpen={setIsDeleteModalOpen} className='rounded-2xl mobile:mx-auto mobile:h-[172px] mobile:max-w-[353px]'>

src/app/(with-header)/wines/[id]/_components/ReviewDropdown.tsx

@@ -91,7 +91,7 @@ export default function ReviewDropdown({
         }`}
       >
         <div className='custom-scrollbar max-h-[90vh] overflow-y-auto'>
-          <PatchReviewModal name={wineName} id={id} onClose={closeEditModal} reviewInitialData={reviewInitialData} editMyReview={editMyReview} />
+          <PatchReviewModal isOpen={isEditModalOpen} name={wineName} id={id} onClose={closeEditModal} reviewInitialData={reviewInitialData} editMyReview={editMyReview} />
         </div>
       </Modal>
       <Modal isOpen={isDeleteModalOpen} setIsOpen={setIsDeleteModalOpen} className='rounded-2xl mobile:mx-auto mobile:h-[172px] mobile:w-[353px]'>

src/components/ControlBar.tsx

@@ -29,7 +29,7 @@ export default function ControlBar({ reset = false, label, minLabel, maxLabel, v
 
   useEffect(() => {
     setDragValue(value);
-  }, [value]);
+  }, [reset, value]);
 
   useEffect(() => {
     if (value === 0) {

src/components/Dropdown.tsx

@@ -19,9 +19,10 @@ interface DropdownProps {
   ulClassName?: string;
   liClassName?: string;
   defaultValue?: DropdownOption | null;
+  reset?: boolean;
 }
 
-function Dropdown({ options, onSelect, placeholder, changeButton = false, children, buttonClassName, ulClassName, liClassName, defaultValue = null }: DropdownProps) {
+function Dropdown({ options, onSelect, placeholder, changeButton = false, children, buttonClassName, ulClassName, liClassName, defaultValue = null, reset = false }: DropdownProps) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [selected, setSelected] = useState<DropdownOption | null>(defaultValue);
   const dropdownRef = useRef<HTMLDivElement | null>(null);
@@ -47,6 +48,10 @@ function Dropdown({ options, onSelect, placeholder, changeButton = false, childr
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
+  useEffect(() => {
+    setSelected(defaultValue);
+  }, [reset, defaultValue]);
+
   return (
     <div ref={dropdownRef} className='relative'>
       <button

src/components/InteractiveRating.tsx

@@ -19,6 +19,10 @@ export default function InteractiveRating({ initialValue = 0, onChange, size = '
     }
   }, [resetTrigger, initialValue]);
 
+  useEffect(() => {
+    setValue(initialValue);
+  }, [resetTrigger, initialValue]);
+
   return (
     <Rating
       value={value}

src/components/modal/Modal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useScrollLock } from '@/hooks/useScrollLock';
 
@@ -13,7 +13,6 @@ interface ModalProps {
 
 export default function Modal({ children, isOpen, setIsOpen, className }: ModalProps) {
   const dialogRef = useRef<HTMLDialogElement>(null);
-  const [mounted, setMounted] = useState(false);
 
   useScrollLock(isOpen);
 
@@ -45,11 +44,7 @@ export default function Modal({ children, isOpen, setIsOpen, className }: ModalP
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, [handleClickOutside]);
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) return null;
+  if (typeof document === 'undefined') return null;
 
   if (isOpen) {
     dialogRef.current?.showModal();

src/components/modal/ModalFormInput.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+interface ModalFormInputTypes {
+  value?: string | number | string[];
+  label: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  type: string;
+  inputId: string;
+}
+
+export default function ModalFormInput({ value, label, onChange, placeholder, type, inputId }: ModalFormInputTypes) {
+  return (
+    <div className='flex flex-col gap-3 mobile:gap-[12px]'>
+      <label htmlFor={inputId} className='text-lg font-bold text-gray-800 mobile:text-md'>
+        {label}
+      </label>
+      <input
+        type={type}
+        id={inputId}
+        placeholder={placeholder}
+        onChange={onChange}
+        value={value}
+        className='h-[48px] rounded-2xl border border-gray-300 bg-white px-5 py-[14px] text-lg focus:outline-purple-100 mobile:h-[42px] mobile:rounded-xl'
+      />
+    </div>
+  );
+}

src/components/modal/PatchReviewModal.tsx

@@ -34,12 +34,12 @@ interface FormValues {
   wineId: number;
 }
 
-type aroma = {
+type Aroma = {
   key: string;
   name: string;
 };
 
-const aromas: aroma[] = [
+const AROMAS: Aroma[] = [
   { key: 'CHERRY', name: '체리' },
   { key: 'BERRY', name: '베리' },
   { key: 'OAK', name: '오크' },
@@ -62,28 +62,33 @@ const aromas: aroma[] = [
 ];
 
 interface postReviewPorp {
+  isOpen: boolean;
   name: string;
   id: number;
   onClose: () => void;
   reviewInitialData?: MyReview;
   editMyReview?: (id: number, editReviewData: EditReviewData, updatedAt: string) => void;
 }
 
-export default function PatchReviewModal({ name, id, onClose, reviewInitialData, editMyReview }: postReviewPorp) {
+export default function PatchReviewModal({ isOpen, name, id, onClose, reviewInitialData, editMyReview }: postReviewPorp) {
+  const [resetTrigger, setResetTrigger] = useState<boolean>(false);
   const [selectedAroma, setSelectedAroma] = useState<string[]>(reviewInitialData?.aroma || []);
 
-  const { register, handleSubmit, setValue, watch } = useForm<FormValues>({
+  const { register, handleSubmit, setValue, watch, reset } = useForm<FormValues>({
     defaultValues: {
+      rating: reviewInitialData?.rating || 0,
       lightBold: reviewInitialData?.lightBold || 0,
       smoothTannic: reviewInitialData?.smoothTannic || 0,
       drySweet: reviewInitialData?.drySweet || 0,
       softAcidic: reviewInitialData?.softAcidic || 0,
+      aroma: reviewInitialData?.aroma || [],
+      content: reviewInitialData?.content || '',
     },
   });
 
-  const aromaValue = watch('aroma', reviewInitialData?.aroma || []);
-  const ratingValue = watch('rating', reviewInitialData?.rating || 0);
-  const textValue = watch('content', reviewInitialData?.content || '');
+  const aromaValue = watch('aroma');
+  const ratingValue = watch('rating');
+  const textValue = watch('content');
 
   const handleAromaClick = (aroma: string) => {
     setSelectedAroma((prevSelectedAroma) => (prevSelectedAroma.includes(aroma) ? prevSelectedAroma.filter((a) => a !== aroma) : [...prevSelectedAroma, aroma]));
@@ -103,13 +108,13 @@ export default function PatchReviewModal({ name, id, onClose, reviewInitialData,
   };
 
   const handlePatchReviewWine: SubmitHandler<FormValues> = async (data) => {
-    const { rating, lightBold, smoothTannic, drySweet, softAcidic, aroma, content, wineId } = data;
+    const { rating, lightBold, smoothTannic, drySweet, softAcidic, aroma, content } = data;
 
     try {
       const response = await fetchWithAuth(`${process.env.NEXT_PUBLIC_BASE_URL}/reviews/${id}`, {
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ rating, lightBold, smoothTannic, drySweet, softAcidic, aroma, content, wineId }),
+        body: JSON.stringify({ rating, lightBold, smoothTannic, drySweet, softAcidic, aroma, content }),
       });
 
       if (!response?.ok || response === null) {
@@ -137,6 +142,14 @@ export default function PatchReviewModal({ name, id, onClose, reviewInitialData,
     setValue('aroma', selectedAroma);
   }, [selectedAroma, setValue]);
 
+  useEffect(() => {
+    if (!isOpen) {
+      reset();
+      setResetTrigger((prev) => !prev);
+      setSelectedAroma(reviewInitialData?.aroma || []);
+    }
+  }, [isOpen, reset, reviewInitialData?.aroma]);
+
   return (
     <div className='flex w-full flex-col gap-12 p-6 pc:w-[528px] tablet:w-[528px] mobile:h-[762px] mobile:w-full mobile:gap-10 mobile:py-8'>
       <div className='flex items-center justify-between'>
@@ -152,7 +165,7 @@ export default function PatchReviewModal({ name, id, onClose, reviewInitialData,
               <Image src={wineIcon} alt='와인 이미지' className='h-[68px] w-[68px] rounded-lg bg-gray-100 p-[7px] mobile:h-[67px] mobile:w-[67px]' />
               <div className='flex flex-col gap-2'>
                 <p className='text-2lg font-semibold text-gray-800 mobile:text-lg'>{name}</p>
-                <InteractiveRating initialValue={reviewInitialData?.rating || 0} size='large' onChange={(rate) => setValue('rating', rate)} />
+                <InteractiveRating initialValue={reviewInitialData?.rating || 0} size='large' onChange={(rate) => setValue('rating', rate)} resetTrigger={resetTrigger} />
               </div>
             </div>
             <textarea
@@ -174,6 +187,7 @@ export default function PatchReviewModal({ name, id, onClose, reviewInitialData,
                 name='바디감'
                 isDraggable={true}
                 size='small'
+                reset={resetTrigger}
               />
               <ControlBar
                 label='타닌'
@@ -184,6 +198,7 @@ export default function PatchReviewModal({ name, id, onClose, reviewInitialData,
                 name='타닌'
                 isDraggable={true}
                 size='small'
+                reset={resetTrigger}
               />
               <ControlBar
                 label='당도'
@@ -194,6 +209,7 @@ export default function PatchReviewModal({ name, id, onClose, reviewInitialData,
                 name='당도'
                 isDraggable={true}
                 size='small'
+                reset={resetTrigger}
               />
               <ControlBar
                 label='산미'
@@ -204,13 +220,14 @@ export default function PatchReviewModal({ name, id, onClose, reviewInitialData,
                 name='산미'
                 isDraggable={true}
                 size='small'
+                reset={resetTrigger}
               />
             </div>
           </div>
           <div className='flex flex-col gap-6'>
             <h4 className='text-xl font-bold text-gray-800 mobile:text-2lg'>기억에 남는 향이 있나요?</h4>
             <div className='flex flex-wrap gap-[10px]'>
-              {aromas.map((aroma) => (
+              {AROMAS.map((aroma) => (
                 <button
                   key={aroma.key}
                   type='button'