From df64e04a2aacd1ddf62d3e7e829398d63fa972f7 Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Mon, 17 Feb 2025 02:15:22 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=92=84=20design=20:=20=EC=A0=84?=
 =?UTF-8?q?=EC=97=AD=20=EC=BB=A4=EC=8A=A4=ED=85=80=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=EB=B0=94=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/globals.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

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;

From c91d16a4b7e098c2aa1067b24731e43c007d1bbb Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Mon, 17 Feb 2025 02:21:51 +0900
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=92=84=20design=20:=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=EC=9D=80=20=EB=AA=A8=EB=8B=AC=20=EB=82=B4=EB=B6=80?=
 =?UTF-8?q?=EB=A1=9C=20=EC=BB=A4=EC=8A=A4=ED=85=80=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=EB=B0=94=20=EB=B3=84=EB=8F=84=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/MyReviewKebabDropDown.tsx     |  10 +-
 .../_components/MyWIneKebabDropDown .tsx      |   6 +-
 .../wines/[id]/_components/ReviewDropdown.tsx |  12 +-
 .../wines/_components/WineFilterModal.tsx     |   8 +-
 src/components/modal/PostReviewModal.tsx      | 126 +++++++++------
 src/components/modal/PostWineModal.tsx        | 152 +++++++++---------
 6 files changed, 170 insertions(+), 144 deletions(-)

diff --git a/src/app/(with-header)/myprofile/_components/MyReviewKebabDropDown.tsx b/src/app/(with-header)/myprofile/_components/MyReviewKebabDropDown.tsx
index 7c14af9..0c29b1f 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 DeleteWineForm from '@/components/modal/DeleteWineModal';
 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,11 +81,13 @@ export default function MyReviewKebabDropDown({
       <Modal
         isOpen={isEditModalOpen}
         setIsOpen={setIsEditModalOpen}
-        className={`overflow-x-hidden rounded-2xl mobile:mb-0 mobile:h-[930px] mobile:rounded-b-none ${
+        className={`min-w-[375px] rounded-2xl transition-transform mobile:fixed mobile:bottom-0 mobile:left-0 mobile:mb-0 mobile:w-full mobile:rounded-b-none ${
           isEditModalOpen ? 'mobile:translate-y-0 mobile:animate-slide-up' : 'mobile:animate-slide-down mobile:translate-y-full'
         }`}
       >
-        <PatchReviewForm name={reviewInitialData.wine.name} id={id} onClose={closeEditModal} reviewInitialData={reviewInitialData} editMyReview={editMyReview} />
+        <div className='custom-scrollbar max-h-[90vh] overflow-y-auto'>
+          <PatchReviewForm name={reviewInitialData.wine.name} 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:max-w-[353px]'>
         <DeleteWineForm onClose={closeDeleteModal} onDelete={handleDeleteWine} />
diff --git a/src/app/(with-header)/myprofile/_components/MyWIneKebabDropDown .tsx b/src/app/(with-header)/myprofile/_components/MyWIneKebabDropDown .tsx
index 6ef3073..228915d 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 { fetchDeleteWine } from '@/lib/fetchWines';
+import kebab from '@/assets/icons/menu.svg';
 
 export interface WineDataProps {
   name: string;
@@ -89,7 +89,9 @@ export default function MyWIneKebabDropDown({
           isEditModalOpen ? 'mobile:translate-y-0 mobile:animate-slide-up' : 'mobile:animate-slide-down mobile:translate-y-full'
         }`}
       >
-        <PatchWineForm onClose={closeEditModal} id={`${id}`} wineInitialData={wineInitialData} editMyWine={editMyWine} />
+        <div className='custom-scrollbar max-h-[90vh] overflow-y-auto'>
+          <PatchWineForm onClose={closeEditModal} id={`${id}`} wineInitialData={wineInitialData} editMyWine={editMyWine} />
+        </div>
       </Modal>
       <Modal isOpen={isDeleteModalOpen} setIsOpen={setIsDeleteModalOpen} className='rounded-2xl mobile:mx-auto mobile:h-[172px] mobile:max-w-[353px]'>
         <DeleteWineForm onClose={closeDeleteModal} onDelete={handleDeleteWine} />
diff --git a/src/app/(with-header)/wines/[id]/_components/ReviewDropdown.tsx b/src/app/(with-header)/wines/[id]/_components/ReviewDropdown.tsx
index 4c1c8b5..8b132c1 100644
--- a/src/app/(with-header)/wines/[id]/_components/ReviewDropdown.tsx
+++ b/src/app/(with-header)/wines/[id]/_components/ReviewDropdown.tsx
@@ -1,9 +1,9 @@
 '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';
@@ -86,11 +86,13 @@ export default function ReviewDropdown({
       <Modal
         isOpen={isEditModalOpen}
         setIsOpen={setIsEditModalOpen}
-        className={`overflow-x-hidden rounded-2xl mobile:mb-0 mobile:h-[930px] mobile:rounded-b-none ${
+        className={`min-w-[375px] rounded-2xl transition-transform mobile:fixed mobile:bottom-0 mobile:left-0 mobile:mb-0 mobile:w-full mobile:rounded-b-none ${
           isEditModalOpen ? 'mobile:translate-y-0 mobile:animate-slide-up' : 'mobile:animate-slide-down mobile:translate-y-full'
         }`}
       >
-        <PatchReviewForm name={wineName} id={id} onClose={closeEditModal} reviewInitialData={reviewInitialData} editMyReview={editMyReview} />
+        <div className='custom-scrollbar max-h-[90vh] overflow-y-auto'>
+          <PatchReviewForm 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]'>
         <DeleteWineForm onClose={closeDeleteModal} onDelete={handleDeleteWine} />
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/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:
       <Modal
         isOpen={isOpen}
         setIsOpen={setIsOpen}
-        className={`overflow-x-hidden rounded-2xl mobile:mb-0 mobile:h-[930px] mobile:rounded-b-none ${
+        className={`min-w-[375px] rounded-2xl transition-transform mobile:fixed mobile:bottom-0 mobile:left-0 mobile:mb-0 mobile:w-full mobile:rounded-b-none ${
           isOpen ? 'mobile:translate-y-0 mobile:animate-slide-up' : 'mobile:animate-slide-down mobile:translate-y-full'
         }`}
       >
-        <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'>
-            <h1 className='text-2xl font-bold text-gray-800 mobile:text-xl'>리뷰 등록</h1>
-            <button type='button' onClick={closeModal}>
-              <Image src={close} width={34} height={34} className='mobile:h-[24px] mobile:w-[24px]' alt='창 닫기'></Image>
-            </button>
-          </div>
-          <form onSubmit={handleSubmit(handlePostReviewWine)}>
-            <div className='flex flex-col gap-10'>
-              <div className='flex flex-col gap-6'>
-                <div className='flex gap-4'>
-                  <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'>{wineData.name}</p>
-                    <InteractiveRating resetTrigger={resetTrigger} initialValue={0} size='large' onChange={(rate) => setValue('rating', rate)} />
+        <div className='custom-scrollbar max-h-[90vh] overflow-y-auto'>
+          <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'>
+              <h1 className='text-2xl font-bold text-gray-800 mobile:text-xl'>리뷰 등록</h1>
+              <button type='button' onClick={closeModal}>
+                <Image src={close} width={34} height={34} className='mobile:h-[24px] mobile:w-[24px]' alt='창 닫기'></Image>
+              </button>
+            </div>
+            <form onSubmit={handleSubmit(handlePostReviewWine)}>
+              <div className='flex flex-col gap-10'>
+                <div className='flex flex-col gap-6'>
+                  <div className='flex gap-4'>
+                    <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'>{wineData.name}</p>
+                      <InteractiveRating resetTrigger={resetTrigger} initialValue={0} size='large' onChange={(rate) => setValue('rating', rate)} />
+                    </div>
                   </div>
+                  <textarea
+                    placeholder='후기를 작성해 주세요'
+                    className='h-[120px] resize-none rounded-2xl border border-gray-100 px-5 py-[14px] align-text-top placeholder:text-lg placeholder:font-normal placeholder:text-gray-500 focus:outline-purple-100 pc:h-[120px] pc:w-[480px] mobile:h-[100px] mobile:w-auto mobile:rounded-xl placeholder:mobile:text-md'
+                    {...register('content')}
+                  />
                 </div>
-                <textarea
-                  placeholder='후기를 작성해 주세요'
-                  className='h-[120px] resize-none rounded-2xl border border-gray-100 px-5 py-[14px] align-text-top placeholder:text-lg placeholder:font-normal placeholder:text-gray-500 focus:outline-purple-100 pc:h-[120px] pc:w-[480px] mobile:h-[100px] mobile:w-auto mobile:rounded-xl placeholder:mobile:text-md'
-                  {...register('content')}
-                />
-              </div>
-              <div className='flex h-[212px] flex-col gap-6 mobile:h-[194px]'>
-                <h4 className='text-xl font-bold text-gray-800 mobile:text-2lg'>와인의 맛은 어땠나요?</h4>
-                <div>
-                  <ControlBar label='바디감' minLabel={'가벼워요'} maxLabel={'진해요'} value={0} onChange={handleLightBoldChange} name='바디감' isDraggable={true} size='small' reset={resetTrigger} />
-                  <ControlBar label='타닌' minLabel={'부드러워요'} maxLabel={'떫어요'} value={0} onChange={handleSmoothTannicChange} name='타닌' isDraggable={true} size='small' reset={resetTrigger} />
-                  <ControlBar label='당도' minLabel={'드라이해요'} maxLabel={'달아요'} value={0} onChange={handleDrySweetChange} name='당도' isDraggable={true} size='small' reset={resetTrigger} />
-                  <ControlBar label='산미' minLabel={'안셔요'} maxLabel={'많이셔요'} value={0} onChange={handleSoftAcidicChange} name='산미' isDraggable={true} size='small' reset={resetTrigger} />
+                <div className='flex h-[212px] flex-col gap-6 mobile:h-[194px]'>
+                  <h4 className='text-xl font-bold text-gray-800 mobile:text-2lg'>와인의 맛은 어땠나요?</h4>
+                  <div>
+                    <ControlBar
+                      label='바디감'
+                      minLabel={'가벼워요'}
+                      maxLabel={'진해요'}
+                      value={0}
+                      onChange={handleLightBoldChange}
+                      name='바디감'
+                      isDraggable={true}
+                      size='small'
+                      reset={resetTrigger}
+                    />
+                    <ControlBar
+                      label='타닌'
+                      minLabel={'부드러워요'}
+                      maxLabel={'떫어요'}
+                      value={0}
+                      onChange={handleSmoothTannicChange}
+                      name='타닌'
+                      isDraggable={true}
+                      size='small'
+                      reset={resetTrigger}
+                    />
+                    <ControlBar label='당도' minLabel={'드라이해요'} maxLabel={'달아요'} value={0} onChange={handleDrySweetChange} name='당도' isDraggable={true} size='small' reset={resetTrigger} />
+                    <ControlBar label='산미' minLabel={'안셔요'} maxLabel={'많이셔요'} value={0} onChange={handleSoftAcidicChange} name='산미' isDraggable={true} size='small' reset={resetTrigger} />
+                  </div>
                 </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) => (
-                    <button
-                      key={aroma.key}
-                      type='button'
-                      onClick={() => handleAromaClick(aroma.key)}
-                      className={`rounded-full border border-gray-300 px-[18px] py-[10px] font-medium mobile:px-[10px] mobile:py-[6px] mobile:text-md ${selectedAroma.includes(aroma.key) ? 'border border-purple-100 bg-purple-100 text-white' : 'border border-gray-300 bg-white text-gray-800'}`}
-                    >
-                      {aroma.name}
-                    </button>
-                  ))}
+                <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) => (
+                      <button
+                        key={aroma.key}
+                        type='button'
+                        onClick={() => handleAromaClick(aroma.key)}
+                        className={`rounded-full border border-gray-300 px-[18px] py-[10px] font-medium mobile:px-[10px] mobile:py-[6px] mobile:text-md ${selectedAroma.includes(aroma.key) ? 'border border-purple-100 bg-purple-100 text-white' : 'border border-gray-300 bg-white text-gray-800'}`}
+                      >
+                        {aroma.name}
+                      </button>
+                    ))}
+                  </div>
                 </div>
               </div>
-            </div>
-            <Button
-              text='리뷰 남기기'
-              type='submit'
-              variant='primary'
-              disabled={aromaValue.length === 0 || ratingValue === 0 || !textValue.trim()}
-              className='mt-12 h-[54px] w-auto whitespace-nowrap rounded-xl text-center text-lg disabled:bg-gray-400 pc:w-[480px] pc:px-[203.5px] pc:py-[14px] tablet:w-[480px] mobile:mb-8 mobile:w-full mobile:min-w-[300px]'
-            />
-          </form>
+              <Button
+                text='리뷰 남기기'
+                type='submit'
+                variant='primary'
+                disabled={aromaValue.length === 0 || ratingValue === 0 || !textValue.trim()}
+                className='mt-12 h-[54px] w-auto whitespace-nowrap rounded-xl text-center text-lg disabled:bg-gray-400 pc:w-[480px] pc:px-[203.5px] pc:py-[14px] tablet:w-[480px] mobile:mb-8 mobile:w-full mobile:min-w-[300px]'
+              />
+            </form>
+          </div>
         </div>
       </Modal>
     </div>
diff --git a/src/components/modal/PostWineModal.tsx b/src/components/modal/PostWineModal.tsx
index af33405..79581c4 100644
--- a/src/components/modal/PostWineModal.tsx
+++ b/src/components/modal/PostWineModal.tsx
@@ -119,85 +119,87 @@ export default function PostWineModal() {
           isOpen ? 'mobile:translate-y-0 mobile:animate-slide-up' : 'mobile:animate-slide-down mobile:translate-y-full'
         }`}
       >
-        <div className='flex flex-col gap-6 p-6 mobile:gap-4'>
-          <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>
-
-              <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='number'
-                  id='price'
-                  placeholder='가격 입력 (200만원 이하)'
-                  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('price')}
-                />
+        <div className='custom-scrollbar max-h-[90vh] overflow-y-auto'>
+          <div className='flex flex-col gap-6 p-6 mobile:gap-4'>
+            <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>
+
+                <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='number'
+                    id='price'
+                    placeholder='가격 입력 (200만원 이하)'
+                    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('price')}
+                  />
+                </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='원산지 입력'
+                    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>
+
+                <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 />
+                </div>
+
+                <div className='-my-[5px] flex flex-col gap-3 mobile:gap-[12px]'>
+                  <label htmlFor='image' className='text-lg font-bold text-gray-800 mobile:text-md'>
+                    와인 사진
+                  </label>
+                  <button
+                    type='button'
+                    className='relative flex h-[140px] w-[140px] cursor-pointer items-center justify-center overflow-hidden rounded-2xl border border-gray-300 mobile:h-[120px] mobile:w-[120px]'
+                  >
+                    {preview ? (
+                      <Image src={preview} alt='preview' fill sizes='10vw' className='object-contain' />
+                    ) : (
+                      <Image src={camera} alt='camera' width={32} height={32} className='h-[32px] w-[32px]' />
+                    )}
+                    <input id='image' type='file' className='absolute left-0 scale-[5] cursor-pointer opacity-0' onChange={handleFileChange} />
+                  </button>
+                </div>
               </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='원산지 입력'
-                  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 className='mt-10 flex gap-[10px] mobile:gap-2'>
+                <Button text='취소' variant='lightPurple' onClick={closeModal} />
+                <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>
-
-              <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 />
-              </div>
-
-              <div className='-my-[5px] flex flex-col gap-3 mobile:gap-[12px]'>
-                <label htmlFor='image' className='text-lg font-bold text-gray-800 mobile:text-md'>
-                  와인 사진
-                </label>
-                <button
-                  type='button'
-                  className='relative flex h-[140px] w-[140px] cursor-pointer items-center justify-center overflow-hidden rounded-2xl border border-gray-300 mobile:h-[120px] mobile:w-[120px]'
-                >
-                  {preview ? (
-                    <Image src={preview} alt='preview' fill sizes='10vw' className='object-contain' />
-                  ) : (
-                    <Image src={camera} alt='camera' width={32} height={32} className='h-[32px] w-[32px]' />
-                  )}
-                  <input id='image' type='file' className='absolute left-0 scale-[5] cursor-pointer opacity-0' onChange={handleFileChange} />
-                </button>
-              </div>
-            </div>
-
-            <div className='mt-10 flex gap-[10px] mobile:gap-2'>
-              <Button text='취소' variant='lightPurple' onClick={closeModal} />
-              <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>
+            </form>
+          </div>
         </div>
       </Modal>
     </div>

From e6b18db5a3745d19499b3a53d91653a70f376601 Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Mon, 17 Feb 2025 02:28:11 +0900
Subject: [PATCH 3/4] =?UTF-8?q?=E2=9C=A8=20feat=20:=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=20=EB=9D=BD=20=EA=B4=80=EB=A6=AC,=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=EB=B0=94=20CLS=20=ED=95=B4=EA=B2=B0=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20useScrollLock=20=ED=9B=85=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header.tsx      |  4 ++--
 src/components/modal/Modal.tsx |  3 +++
 src/hooks/useScrollLock.ts     | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 src/hooks/useScrollLock.ts

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 (
-    <div className='fixed top-[24px] z-50 flex w-full justify-center'>
+    <div className='fixed top-[24px] z-50 flex w-full justify-center' data-fixed='true'>
       <div className='mx-auto h-[70px] w-[1140px] rounded-xl bg-black tablet:mx-6 tablet:max-w-[1000px] mobile:mx-5 mobile:h-[50px] mobile:min-w-[343px] mobile:max-w-[700px]'>
         <header className='flex items-center justify-between px-[60px] py-[22.5px] mobile:px-[20px] mobile:py-[17.5px]'>
           <Link href='/'>
@@ -28,7 +28,7 @@ function LoggedInHeader() {
   const { profileImage } = useAuth();
 
   return (
-    <div className='fixed top-[24px] z-50 flex w-full justify-center'>
+    <div className='fixed top-[24px] z-50 flex w-full justify-center' data-fixed='true'>
       <div className='mx-auto h-[70px] w-[1140px] rounded-xl bg-black tablet:mx-6 tablet:max-w-[1000px] mobile:mx-5 mobile:h-[50px] mobile:min-w-[343px] mobile:max-w-[700px]'>
         <header className='flex h-[70px] items-center justify-between px-[60px] py-[12.5px] mobile:h-[50px] mobile:px-[20px] mobile:py-[12.5px]'>
           <Link href='/'>
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<HTMLDialogElement>(null);
   const [mounted, setMounted] = useState(false);
 
+  useScrollLock(isOpen);
+
   const escKeyModalClose = useCallback(
     (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
diff --git a/src/hooks/useScrollLock.ts b/src/hooks/useScrollLock.ts
new file mode 100644
index 0000000..52e453c
--- /dev/null
+++ b/src/hooks/useScrollLock.ts
@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+
+export function useScrollLock(isOpen: boolean) {
+  const getScrollbarWidth = () => window.innerWidth - document.documentElement.clientWidth;
+
+  const applyFixedPadding = (padding: string) => {
+    const fixedElements = document.querySelectorAll('[data-fixed="true"]');
+    fixedElements.forEach((el) => {
+      (el as HTMLElement).style.paddingRight = padding;
+    });
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      const scrollbarWidth = getScrollbarWidth();
+
+      document.body.style.overflow = 'hidden';
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+      applyFixedPadding(`${scrollbarWidth}px`);
+    } else {
+      document.body.style.overflow = '';
+      document.body.style.paddingRight = '';
+      applyFixedPadding('');
+    }
+
+    return () => {
+      document.body.style.overflow = '';
+      document.body.style.paddingRight = '';
+      applyFixedPadding('');
+    };
+  }, [isOpen]);
+}

From f6ba1c1fbb58d130c8f9daea97e2778221f4fe52 Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Mon, 17 Feb 2025 02:51:00 +0900
Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=9A=9A=20rename=20:=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=EB=AA=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../myprofile/_components/MyReviewKebabDropDown.tsx       | 8 ++++----
 .../myprofile/_components/MyWIneKebabDropDown .tsx        | 8 ++++----
 .../wines/[id]/_components/ReviewDropdown.tsx             | 8 ++++----
 .../modal/{DeleteWineModal.tsx => DeleteModal.tsx}        | 2 +-
 .../modal/{PatchReviewForm.tsx => PatchReviewModal.tsx}   | 2 +-
 .../modal/{PatchWineForm.tsx => PatchWineModal.tsx}       | 0
 6 files changed, 14 insertions(+), 14 deletions(-)
 rename src/components/modal/{DeleteWineModal.tsx => DeleteModal.tsx} (90%)
 rename src/components/modal/{PatchReviewForm.tsx => PatchReviewModal.tsx} (98%)
 rename src/components/modal/{PatchWineForm.tsx => PatchWineModal.tsx} (100%)

diff --git a/src/app/(with-header)/myprofile/_components/MyReviewKebabDropDown.tsx b/src/app/(with-header)/myprofile/_components/MyReviewKebabDropDown.tsx
index 0c29b1f..9dee7a1 100644
--- a/src/app/(with-header)/myprofile/_components/MyReviewKebabDropDown.tsx
+++ b/src/app/(with-header)/myprofile/_components/MyReviewKebabDropDown.tsx
@@ -5,8 +5,8 @@ import Image from 'next/image';
 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 { MyReview } from '@/types/review-data';
 import { fetchDeleteReview } from '@/lib/fetchMyReivew';
 import { EditReviewData } from '@/app/(with-header)/myprofile/_components/MyReviewListContainer';
@@ -86,11 +86,11 @@ export default function MyReviewKebabDropDown({
         }`}
       >
         <div className='custom-scrollbar max-h-[90vh] overflow-y-auto'>
-          <PatchReviewForm 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} />
         </div>
       </Modal>
       <Modal isOpen={isDeleteModalOpen} setIsOpen={setIsDeleteModalOpen} className='rounded-2xl mobile:mx-auto mobile:h-[172px] mobile:max-w-[353px]'>
-        <DeleteWineForm onClose={closeDeleteModal} onDelete={handleDeleteWine} />
+        <DeleteModal onClose={closeDeleteModal} onDelete={handleDeleteWine} />
       </Modal>
     </div>
   );
diff --git a/src/app/(with-header)/myprofile/_components/MyWIneKebabDropDown .tsx b/src/app/(with-header)/myprofile/_components/MyWIneKebabDropDown .tsx
index 228915d..79b513b 100644
--- a/src/app/(with-header)/myprofile/_components/MyWIneKebabDropDown .tsx	
+++ b/src/app/(with-header)/myprofile/_components/MyWIneKebabDropDown .tsx	
@@ -5,8 +5,8 @@ import Image from 'next/image';
 import { toast } from 'react-toastify';
 import Dropdown from '@/components/Dropdown';
 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';
 
@@ -90,11 +90,11 @@ export default function MyWIneKebabDropDown({
         }`}
       >
         <div className='custom-scrollbar max-h-[90vh] overflow-y-auto'>
-          <PatchWineForm onClose={closeEditModal} id={`${id}`} wineInitialData={wineInitialData} editMyWine={editMyWine} />
+          <PatchWineModal onClose={closeEditModal} id={`${id}`} wineInitialData={wineInitialData} editMyWine={editMyWine} />
         </div>
       </Modal>
       <Modal isOpen={isDeleteModalOpen} setIsOpen={setIsDeleteModalOpen} className='rounded-2xl mobile:mx-auto mobile:h-[172px] mobile:max-w-[353px]'>
-        <DeleteWineForm onClose={closeDeleteModal} onDelete={handleDeleteWine} />
+        <DeleteModal onClose={closeDeleteModal} onDelete={handleDeleteWine} />
       </Modal>
     </div>
   );
diff --git a/src/app/(with-header)/wines/[id]/_components/ReviewDropdown.tsx b/src/app/(with-header)/wines/[id]/_components/ReviewDropdown.tsx
index 8b132c1..4e9c122 100644
--- a/src/app/(with-header)/wines/[id]/_components/ReviewDropdown.tsx
+++ b/src/app/(with-header)/wines/[id]/_components/ReviewDropdown.tsx
@@ -7,8 +7,8 @@ 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({
@@ -91,11 +91,11 @@ export default function ReviewDropdown({
         }`}
       >
         <div className='custom-scrollbar max-h-[90vh] overflow-y-auto'>
-          <PatchReviewForm name={wineName} id={id} onClose={closeEditModal} reviewInitialData={reviewInitialData} editMyReview={editMyReview} />
+          <PatchReviewModal 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]'>
-        <DeleteWineForm onClose={closeDeleteModal} onDelete={handleDeleteWine} />
+        <DeleteModal onClose={closeDeleteModal} onDelete={handleDeleteWine} />
       </Modal>
     </div>
   );
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 (
     <div>
       <div className='flex h-[182px] w-[353px] flex-col justify-between px-4 pb-6 pt-8 mobile:mx-auto mobile:h-[172px]'>
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<string[]>(reviewInitialData?.aroma || []);
 
   const { register, handleSubmit, setValue, watch } = useForm<FormValues>({
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