From 725738826653ee4c318acda74e03ecca8ddca6f5 Mon Sep 17 00:00:00 2001
From: park521 <gh10035@naver.com>
Date: Tue, 18 Feb 2025 11:33:44 +0900
Subject: [PATCH 1/5] =?UTF-8?q?:art:=20refactor=20:=20=EB=AA=A8=EB=8B=AC?=
 =?UTF-8?q?=20=EB=A6=AC=ED=8C=A9=ED=84=B0=20=EB=B0=8F=20=EB=B2=84=EA=B7=B8?=
 =?UTF-8?q?=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/MyReviewKebabDropDown.tsx     |   2 +-
 .../_components/MyWIneKebabDropDown .tsx      |   2 +-
 src/components/ControlBar.tsx                 |   2 +-
 src/components/Dropdown.tsx                   |   7 +-
 src/components/InteractiveRating.tsx          |   4 +
 src/components/ReviewModalControlBar.tsx      |  22 ---
 src/components/modal/Modal.tsx                |   9 +-
 src/components/modal/ModalFormInput.tsx       |  28 ++++
 src/components/modal/PatchReviewModal.tsx     |  39 +++--
 src/components/modal/PatchWineModal.tsx       | 131 ++++++++---------
 src/components/modal/PostReviewModal.tsx      |  24 ++--
 src/components/modal/PostWineModal.tsx        | 134 ++++++++----------
 12 files changed, 200 insertions(+), 204 deletions(-)
 delete mode 100644 src/components/ReviewModalControlBar.tsx
 create mode 100644 src/components/modal/ModalFormInput.tsx

diff --git a/src/app/(with-header)/myprofile/_components/MyReviewKebabDropDown.tsx b/src/app/(with-header)/myprofile/_components/MyReviewKebabDropDown.tsx
index 9dee7a1..9189970 100644
--- a/src/app/(with-header)/myprofile/_components/MyReviewKebabDropDown.tsx
+++ b/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]'>
diff --git a/src/app/(with-header)/myprofile/_components/MyWIneKebabDropDown .tsx b/src/app/(with-header)/myprofile/_components/MyWIneKebabDropDown .tsx
index 77d8842..320f2d4 100644
--- a/src/app/(with-header)/myprofile/_components/MyWIneKebabDropDown .tsx	
+++ b/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]'>
diff --git a/src/components/ControlBar.tsx b/src/components/ControlBar.tsx
index 121534e..bf9cfc9 100644
--- a/src/components/ControlBar.tsx
+++ b/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) {
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index f3a8b7b..1b2bdb7 100644
--- a/src/components/Dropdown.tsx
+++ b/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
diff --git a/src/components/InteractiveRating.tsx b/src/components/InteractiveRating.tsx
index 72f8e04..3839bf6 100644
--- a/src/components/InteractiveRating.tsx
+++ b/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}
diff --git a/src/components/ReviewModalControlBar.tsx b/src/components/ReviewModalControlBar.tsx
deleted file mode 100644
index 0132d1c..0000000
--- a/src/components/ReviewModalControlBar.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client';
-import ControlBar from '@/components/ControlBar';
-
-type ReviewModalControlBarProps = {
-  lightBold: number;
-  smoothTannic: number;
-  drySweet: number;
-  softAcidic: number;
-  isDraggable: boolean;
-  onChange: (name: string, value: number) => void;
-};
-
-export default function ReviewModalControlBar({ lightBold, smoothTannic, drySweet, softAcidic }: ReviewModalControlBarProps) {
-  return (
-    <div>
-      <ControlBar label='바디감' minLabel={'가벼워요'} maxLabel={'진해요'} value={lightBold} onChange={() => {}} name='바디감' isDraggable={true} size='small' />
-      <ControlBar label='타닌' minLabel={'부드러워요'} maxLabel={'떫어요'} value={smoothTannic} onChange={() => {}} name='타닌' isDraggable={true} size='small' />
-      <ControlBar label='당도' minLabel={'드라이해요'} maxLabel={'달아요'} value={drySweet} onChange={() => {}} name='당도' isDraggable={true} size='small' />
-      <ControlBar label='산미' minLabel={'안셔요'} maxLabel={'많이셔요'} value={softAcidic} onChange={() => {}} name='산미' isDraggable={true} size='small' />
-    </div>
-  );
-}
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index 7356dcc..7bb2533 100644
--- a/src/components/modal/Modal.tsx
+++ b/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();
diff --git a/src/components/modal/ModalFormInput.tsx b/src/components/modal/ModalFormInput.tsx
new file mode 100644
index 0000000..48b0bbf
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/modal/PatchReviewModal.tsx b/src/components/modal/PatchReviewModal.tsx
index 4922e69..c43f96c 100644
--- a/src/components/modal/PatchReviewModal.tsx
+++ b/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,6 +62,7 @@ const aromas: aroma[] = [
 ];
 
 interface postReviewPorp {
+  isOpen: boolean;
   name: string;
   id: number;
   onClose: () => void;
@@ -69,21 +70,25 @@ interface postReviewPorp {
   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'
diff --git a/src/components/modal/PatchWineModal.tsx b/src/components/modal/PatchWineModal.tsx
index 8c856eb..8b66ce4 100644
--- a/src/components/modal/PatchWineModal.tsx
+++ b/src/components/modal/PatchWineModal.tsx
@@ -1,15 +1,16 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
-import { useForm, SubmitHandler } from 'react-hook-form';
+import { useForm, SubmitHandler, Controller } from 'react-hook-form';
 import { toast } from 'react-toastify';
 import { fetchWithAuth } from '@/lib/auth';
 import Dropdown from '../Dropdown';
 import Button from '../Button';
 import camera from '@/assets/icons/photo.svg';
 import { WineDataProps } from '@/app/(with-header)/myprofile/_components/MyWIneKebabDropDown ';
+import ModalFormInput from './ModalFormInput';
 
 interface FormValues {
   name: string;
@@ -22,18 +23,21 @@ interface FormValues {
 type ImageValues = { image: FileList };
 
 interface postWinePorps {
+  isOpen: boolean;
   onClose: () => void;
   id: string;
   wineInitialData: WineDataProps;
   editMyWine: (id: number, editWineData: WineDataProps) => void;
 }
 
-export default function PatchWineModal({ onClose, id, wineInitialData, editMyWine }: postWinePorps) {
-  const [formattedPrice, setFormattedPrice] = useState<string>('');
+export default function PatchWineModal({ isOpen, onClose, id, wineInitialData, editMyWine }: postWinePorps) {
   const [preview, setPreview] = useState<string | null>(wineInitialData.image);
+  const [dropdownReset, setDropdownReset] = useState<boolean>(false);
   const router = useRouter();
 
-  const { register, handleSubmit, setValue } = useForm<FormValues>();
+  const { handleSubmit, setValue, control, reset } = useForm<FormValues>({
+    defaultValues: { name: wineInitialData.name, region: wineInitialData.region, image: wineInitialData.image, price: wineInitialData.price, type: wineInitialData.type },
+  });
 
   const options = [
     { value: () => setValue('type', 'RED'), label: 'Red' },
@@ -41,34 +45,12 @@ export default function PatchWineModal({ onClose, id, wineInitialData, editMyWin
     { value: () => setValue('type', 'SPARKLING'), label: 'Sparkling' },
   ];
 
-  const handlePriceChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const rawValue = event.target.value.replaceAll(',', '');
-
-    if (rawValue === '') {
-      setFormattedPrice('');
-      setValue('price', null);
-      return;
-    }
-
-    if (!/^\d*$/.test(rawValue)) return;
-
-    const numericValue = Number(rawValue);
-
-    if (numericValue > 2000000) {
-      alert('가격은 200만원 이하로 입력해 주세요.');
-      return;
-    }
-
-    setFormattedPrice(numericValue.toLocaleString());
-    setValue('price', numericValue);
-  };
-
   useEffect(() => {
-    if (wineInitialData.price !== null) {
-      setFormattedPrice(wineInitialData.price.toLocaleString());
-      setValue('price', wineInitialData.price);
+    if (!isOpen) {
+      reset();
+      setDropdownReset((prev) => !prev);
     }
-  }, [wineInitialData.price, setValue]);
+  }, [isOpen, reset]);
 
   const handlePatchWine: SubmitHandler<FormValues> = async (data) => {
     const { name, region, image, price, type } = data;
@@ -125,47 +107,51 @@ export default function PatchWineModal({ onClose, id, wineInitialData, editMyWin
       <p className='text-2xl font-bold text-gray-800 mobile:text-xl'>내가 등록한 와인</p>
       <form onSubmit={handleSubmit(handlePatchWine)}>
         <div className='flex flex-col gap-6 mobile:gap-4'>
-          <div className='flex flex-col gap-3 mobile:gap-[12px]'>
-            <label htmlFor='wineName' className='text-lg font-bold text-gray-800 mobile:text-md'>
-              와인 이름
-            </label>
-            <input
-              type='text'
-              id='wineName'
-              placeholder='와인 이름 입력'
-              defaultValue={wineInitialData.name}
-              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'
-              {...register('name')}
-            />
-          </div>
-
-          <div className='flex flex-col gap-3 mobile:gap-[12px]'>
-            <label htmlFor='price' className='text-lg font-bold text-gray-800 mobile:text-md'>
-              가격
-            </label>
-            <input
-              type='text'
-              id='price'
-              placeholder='가격 입력 (200만원 이하)'
-              value={formattedPrice}
-              onChange={handlePriceChange}
-              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>
-
-          <div className='flex flex-col gap-3 mobile:gap-[12px]'>
-            <label htmlFor='origin' className='text-lg font-bold text-gray-800 mobile:text-md'>
-              원산지
-            </label>
-            <input
-              type='text'
-              id='origin'
-              placeholder='원산지 입력'
-              defaultValue={wineInitialData.region}
-              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'
-              {...register('region')}
-            />
-          </div>
+          <Controller
+            name='name'
+            control={control}
+            render={({ field }) => <ModalFormInput {...field} label='와인 이름' placeholder='와인 이름 입력' type='text' inputId='wineName' value={field.value || ''} />}
+          />
+
+          <Controller
+            name='price'
+            control={control}
+            render={({ field }) => (
+              <ModalFormInput
+                {...field}
+                label='가격'
+                placeholder='가격 입력 (200만원 이하)'
+                type='text'
+                inputId='price'
+                value={field.value?.toLocaleString() || ''}
+                onChange={(e) => {
+                  const rawValue = e.target.value.replaceAll(',', '');
+
+                  if (rawValue === '') {
+                    field.onChange(null);
+                    return;
+                  }
+
+                  if (!/^\d*$/.test(rawValue)) return;
+
+                  const numericValue = Number(rawValue);
+
+                  if (numericValue > 2000000) {
+                    alert('가격은 200만원 이하로 입력해 주세요.');
+                    return;
+                  }
+
+                  field.onChange(numericValue);
+                }}
+              />
+            )}
+          />
+
+          <Controller
+            name='region'
+            control={control}
+            render={({ field }) => <ModalFormInput {...field} label='원산지' placeholder='원산지 입력' type='text' inputId='origin' value={field.value || ''} />}
+          />
 
           <div className='flex flex-col gap-3 mobile:gap-[12px]'>
             <label htmlFor='type' className='text-lg font-bold text-gray-800 mobile:text-md'>
@@ -179,6 +165,7 @@ export default function PatchWineModal({ onClose, id, wineInitialData, editMyWin
               placeholder='Red'
               changeButton
               defaultValue={{ label: wineInitialData.type, value: () => {} }}
+              reset={dropdownReset}
             />
           </div>
 
diff --git a/src/components/modal/PostReviewModal.tsx b/src/components/modal/PostReviewModal.tsx
index f7daed5..8f317db 100644
--- a/src/components/modal/PostReviewModal.tsx
+++ b/src/components/modal/PostReviewModal.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect } from 'react';
 import { useParams } from 'next/navigation';
 import Image from 'next/image';
 import { useForm, SubmitHandler } from 'react-hook-form';
@@ -24,7 +24,7 @@ interface FormValues {
   wineId: number;
 }
 
-interface wineDataValues {
+interface WineDataValues {
   id: number;
   name: string;
   region: string;
@@ -33,12 +33,12 @@ interface wineDataValues {
   type: string;
 }
 
-type aroma = {
+type Aroma = {
   key: string;
   name: string;
 };
 
-const aromas: aroma[] = [
+const AROMAS: Aroma[] = [
   { key: 'CHERRY', name: '체리' },
   { key: 'BERRY', name: '베리' },
   { key: 'OAK', name: '오크' },
@@ -71,7 +71,7 @@ const INICIALVALUES = {
 
 export default function PostReviewModal({ addReview }: { addReview: (newReview: AddReviewData) => void }) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [wineData, setWineData] = useState<wineDataValues>(INICIALVALUES);
+  const [wineData, setWineData] = useState<WineDataValues>(INICIALVALUES);
   const [selectedAroma, setSelectedAroma] = useState<string[]>([]);
   const [resetTrigger, setResetTrigger] = useState<boolean>(false);
   const { id } = useParams<{ id: string }>();
@@ -94,7 +94,9 @@ export default function PostReviewModal({ addReview }: { addReview: (newReview:
     setIsOpen(true);
   };
 
-  const closeModal = useCallback(() => {
+  const closeModal = () => {
+    setSelectedAroma([]);
+    setResetTrigger((prev) => !prev);
     reset({
       rating: 0,
       lightBold: 0,
@@ -105,14 +107,8 @@ export default function PostReviewModal({ addReview }: { addReview: (newReview:
       content: '',
       wineId: wineData.id,
     });
-    setSelectedAroma([]);
-    setResetTrigger((prev) => !prev);
     setIsOpen(false);
-  }, [reset, wineData.id]);
-
-  useEffect(() => {
-    if (!isOpen) closeModal();
-  }, [isOpen, closeModal]);
+  };
 
   const handleAromaClick = (aroma: string) => {
     setSelectedAroma((prevSelectedAroma) => (prevSelectedAroma.includes(aroma) ? prevSelectedAroma.filter((a) => a !== aroma) : [...prevSelectedAroma, aroma]));
@@ -277,7 +273,7 @@ export default function PostReviewModal({ addReview }: { addReview: (newReview:
                 <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'
diff --git a/src/components/modal/PostWineModal.tsx b/src/components/modal/PostWineModal.tsx
index 5aa6089..e8f8d1c 100644
--- a/src/components/modal/PostWineModal.tsx
+++ b/src/components/modal/PostWineModal.tsx
@@ -1,15 +1,16 @@
 'use client';
 
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
-import { useForm, SubmitHandler } from 'react-hook-form';
+import { useForm, SubmitHandler, Controller } from 'react-hook-form';
 import { fetchWithAuth } from '@/lib/auth';
 import Modal from '@/components/modal/Modal';
 import Dropdown from '../Dropdown';
 import Button from '../Button';
 import { toast } from 'react-toastify';
 import camera from '@/assets/icons/photo.svg';
+import FormInput from './ModalFormInput';
 
 interface FormValues {
   name: string;
@@ -23,11 +24,13 @@ type ImageValues = { image: FileList };
 
 export default function PostWineModal() {
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [formattedPrice, setFormattedPrice] = useState<string>('');
+  const [dropdownReset, setDropdownReset] = useState<boolean>(false);
   const [preview, setPreview] = useState<string | null>(null);
   const router = useRouter();
 
-  const { register, handleSubmit, setValue, watch, reset } = useForm<FormValues>();
+  const { handleSubmit, setValue, watch, reset, control } = useForm<FormValues>({
+    defaultValues: { name: '', region: '', price: null, type: '' },
+  });
   const name = watch('name');
   const region = watch('region');
   const image = watch('image');
@@ -44,39 +47,8 @@ export default function PostWineModal() {
     setIsOpen(true);
   };
 
-  const closeModal = useCallback(() => {
-    reset();
-    setValue('type', '');
-    setValue('price', null);
-    setFormattedPrice('');
-    setPreview(null);
+  const closeModal = () => {
     setIsOpen(false);
-  }, [reset, setValue]);
-
-  useEffect(() => {
-    if (!isOpen) closeModal();
-  }, [isOpen, closeModal]);
-
-  const handlePriceChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const rawValue = event.target.value.replaceAll(',', '');
-
-    if (rawValue === '') {
-      setFormattedPrice('');
-      setValue('price', null);
-      return;
-    }
-
-    if (!/^\d*$/.test(rawValue)) return;
-
-    const numericValue = Number(rawValue);
-
-    if (numericValue > 2000000) {
-      alert('가격은 200만원 이하로 입력해 주세요.');
-      return;
-    }
-
-    setFormattedPrice(numericValue.toLocaleString());
-    setValue('price', numericValue);
   };
 
   const handlePostWine: SubmitHandler<FormValues> = async (data) => {
@@ -134,6 +106,14 @@ export default function PostWineModal() {
     }
   };
 
+  useEffect(() => {
+    if (!isOpen) {
+      reset();
+      setDropdownReset((prev) => !prev);
+      setPreview(null);
+    }
+  }, [isOpen, reset]);
+
   return (
     <div>
       <Button
@@ -153,51 +133,57 @@ export default function PostWineModal() {
             <p className='text-2xl font-bold text-gray-800 mobile:text-xl'>와인 등록</p>
             <form onSubmit={handleSubmit(handlePostWine)}>
               <div className='flex flex-col gap-6 mobile:gap-4'>
-                <div className='flex flex-col gap-3 mobile:gap-[12px]'>
-                  <label htmlFor='wineName' className='text-lg font-bold text-gray-800 mobile:text-md'>
-                    와인 이름
-                  </label>
-                  <input
-                    type='text'
-                    id='wineName'
-                    placeholder='와인 이름 입력'
-                    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'
-                    {...register('name')}
-                  />
-                </div>
+                <Controller
+                  name='name'
+                  control={control}
+                  render={({ field }) => <FormInput {...field} label='와인 이름' placeholder='와인 이름 입력' type='text' inputId='wineName' value={field.value || ''} />}
+                />
 
-                <div className='flex flex-col gap-3 mobile:gap-[12px]'>
-                  <label htmlFor='price' className='text-lg font-bold text-gray-800 mobile:text-md'>
-                    가격
-                  </label>
-                  <input
-                    type='text'
-                    id='price'
-                    placeholder='가격 입력 (200만원 이하)'
-                    value={formattedPrice}
-                    onChange={handlePriceChange}
-                    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>
+                <Controller
+                  name='price'
+                  control={control}
+                  render={({ field }) => (
+                    <FormInput
+                      {...field}
+                      label='가격'
+                      placeholder='가격 입력 (200만원 이하)'
+                      type='text'
+                      inputId='price'
+                      value={field.value?.toLocaleString() || ''}
+                      onChange={(e) => {
+                        const rawValue = e.target.value.replaceAll(',', '');
+
+                        if (rawValue === '') {
+                          field.onChange(null);
+                          return;
+                        }
+
+                        if (!/^\d*$/.test(rawValue)) return;
+
+                        const numericValue = Number(rawValue);
+
+                        if (numericValue > 2000000) {
+                          alert('가격은 200만원 이하로 입력해 주세요.');
+                          return;
+                        }
+
+                        field.onChange(numericValue);
+                      }}
+                    />
+                  )}
+                />
 
-                <div className='flex flex-col gap-3 mobile:gap-[12px]'>
-                  <label htmlFor='origin' className='text-lg font-bold text-gray-800 mobile:text-md'>
-                    원산지
-                  </label>
-                  <input
-                    type='text'
-                    id='origin'
-                    placeholder='원산지 입력'
-                    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'
-                    {...register('region')}
-                  />
-                </div>
+                <Controller
+                  name='region'
+                  control={control}
+                  render={({ field }) => <FormInput {...field} label='원산지' placeholder='원산지 입력' type='text' inputId='origin' value={field.value || ''} />}
+                />
 
                 <div className='flex flex-col gap-3 mobile:gap-[12px]'>
                   <label htmlFor='type' className='text-lg font-bold text-gray-800 mobile:text-md'>
                     타입
                   </label>
-                  <Dropdown options={options} onSelect={(option) => option.value?.()} placeholder='Red' changeButton />
+                  <Dropdown options={options} onSelect={(option) => option.value?.()} placeholder='Red' changeButton reset={dropdownReset} />
                 </div>
 
                 <div className='-my-[5px] flex flex-col gap-3 mobile:gap-[12px]'>

From 7b22c6291a93ff02262977d6cad431dbc5e35a53 Mon Sep 17 00:00:00 2001
From: park521 <gh10035@naver.com>
Date: Tue, 18 Feb 2025 11:50:45 +0900
Subject: [PATCH 2/5] =?UTF-8?q?:bug:=20fix=20:=20=EB=88=84=EB=9D=BD?=
 =?UTF-8?q?=EB=90=9C=20props=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(with-header)/wines/[id]/_components/ReviewDropdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(with-header)/wines/[id]/_components/ReviewDropdown.tsx b/src/app/(with-header)/wines/[id]/_components/ReviewDropdown.tsx
index 4e9c122..e0ab724 100644
--- a/src/app/(with-header)/wines/[id]/_components/ReviewDropdown.tsx
+++ b/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]'>

From fe23892196c1edbab4315c870329cc796edd4c9d Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Tue, 18 Feb 2025 13:43:03 +0900
Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=90=9B=20fix=20:=20=EC=99=80=EC=9D=B8?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95=20=EB=AA=A8=EB=8B=AC=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=ED=95=84=EB=93=9C=20=EC=A4=91=20=ED=95=98=EB=82=98=EB=9D=BC?=
 =?UTF-8?q?=EB=8F=84=20=EB=B9=84=EC=96=B4=20=EC=9E=88=EC=9C=BC=EB=A9=B4=20?=
 =?UTF-8?q?'=EC=88=98=EC=A0=95=ED=95=98=EA=B8=B0'=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EB=B9=84=ED=99=9C=EC=84=B1=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/PatchWineModal.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/modal/PatchWineModal.tsx b/src/components/modal/PatchWineModal.tsx
index 8b66ce4..2a05eb6 100644
--- a/src/components/modal/PatchWineModal.tsx
+++ b/src/components/modal/PatchWineModal.tsx
@@ -35,10 +35,16 @@ export default function PatchWineModal({ isOpen, onClose, id, wineInitialData, e
   const [dropdownReset, setDropdownReset] = useState<boolean>(false);
   const router = useRouter();
 
-  const { handleSubmit, setValue, control, reset } = useForm<FormValues>({
+  const { handleSubmit, setValue, control, reset, watch } = useForm<FormValues>({
     defaultValues: { name: wineInitialData.name, region: wineInitialData.region, image: wineInitialData.image, price: wineInitialData.price, type: wineInitialData.type },
   });
 
+  const name = watch('name');
+  const region = watch('region');
+  const image = watch('image');
+  const price = watch('price');
+  const type = watch('type');
+
   const options = [
     { value: () => setValue('type', 'RED'), label: 'Red' },
     { value: () => setValue('type', 'WHITE'), label: 'White' },
@@ -189,7 +195,13 @@ export default function PatchWineModal({ isOpen, onClose, id, wineInitialData, e
 
         <div className='mt-10 flex gap-[10px] mobile:gap-2'>
           <Button text='취소' variant='lightPurple' onClick={onClose} />
-          <Button text='수정하기' type='submit' variant='primary' className='w-[294px] rounded-xl py-[16px] text-lg mobile:flex-1' />
+          <Button
+            text='수정하기'
+            type='submit'
+            variant='primary'
+            disabled={!name || !region || !image || !price || !type}
+            className='w-[294px] rounded-xl py-[16px] text-lg disabled:bg-gray-400 mobile:flex-1'
+          />
         </div>
       </form>
     </div>

From 650ec7e886e42172dbcfb2d2992301330cd8aafc Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Tue, 18 Feb 2025 13:48:40 +0900
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=90=9B=20fix=20:=20=EC=99=80=EC=9D=B8?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95=20=EB=AA=A8=EB=8B=AC=20=EB=8B=AB=EC=9D=84?=
 =?UTF-8?q?=20=EB=95=8C=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B4=88=EA=B8=B0?=
 =?UTF-8?q?=ED=99=94=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/PatchWineModal.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/modal/PatchWineModal.tsx b/src/components/modal/PatchWineModal.tsx
index 2a05eb6..72c1b63 100644
--- a/src/components/modal/PatchWineModal.tsx
+++ b/src/components/modal/PatchWineModal.tsx
@@ -54,9 +54,10 @@ export default function PatchWineModal({ isOpen, onClose, id, wineInitialData, e
   useEffect(() => {
     if (!isOpen) {
       reset();
+      setPreview(wineInitialData.image);
       setDropdownReset((prev) => !prev);
     }
-  }, [isOpen, reset]);
+  }, [isOpen, reset, wineInitialData.image]);
 
   const handlePatchWine: SubmitHandler<FormValues> = async (data) => {
     const { name, region, image, price, type } = data;

From 4d5e096369e548cda2c4f62ef0561c3fa9b69de6 Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Tue, 18 Feb 2025 13:54:49 +0900
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=94=A5=20remove=20:=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/signin/api/KakaoApi.tsx | 25 -------------------------
 1 file changed, 25 deletions(-)
 delete mode 100644 src/app/signin/api/KakaoApi.tsx

diff --git a/src/app/signin/api/KakaoApi.tsx b/src/app/signin/api/KakaoApi.tsx
deleted file mode 100644
index f89c2e9..0000000
--- a/src/app/signin/api/KakaoApi.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-export default async function KakaoApi() {
-  try {
-    const requestBody = {
-      appKey: process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY,
-      appSecret: '',
-      provider: 'KAKAO',
-    };
-
-    const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/oauthApps`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(requestBody),
-    });
-
-    if (!response.ok) {
-      throw new Error(`인증 실패 : ${response.statusText}`);
-    }
-
-    const data = await response.json();
-    return data;
-  } catch (error) {
-    console.error('카카오 앱 등록 오류 :', error);
-    throw error;
-  }
-}