From 54e862ef8e448fe8adf5700aed3d0e3108b801d0 Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Sun, 16 Feb 2025 03:21:23 +0900
Subject: [PATCH 01/11] =?UTF-8?q?=F0=9F=90=9B=20fix=20:=20=EC=8A=AC?=
 =?UTF-8?q?=EB=9D=BC=EC=9D=B4=EB=8D=94=20=EB=B3=80=EA=B2=BD=20=ED=9B=84=20?=
 =?UTF-8?q?=EC=9A=94=EC=B2=AD=EC=9D=B4=20=EB=B0=9C=EC=83=9D=ED=95=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20onFinalChange=20=EC=9D=B4=EB=B2=A4?=
 =?UTF-8?q?=ED=8A=B8=20=ED=95=B8=EB=93=A4=EB=9F=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wines/_components/FilterPrice.tsx         | 14 ++++++-
 .../wines/_components/WineFilter.tsx          |  7 +++-
 .../wines/_components/WineFilterModal.tsx     | 37 ++++++++++---------
 3 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/src/app/(with-header)/wines/_components/FilterPrice.tsx b/src/app/(with-header)/wines/_components/FilterPrice.tsx
index fc6a58f..21ef3f2 100644
--- a/src/app/(with-header)/wines/_components/FilterPrice.tsx
+++ b/src/app/(with-header)/wines/_components/FilterPrice.tsx
@@ -5,9 +5,10 @@ const MAX_PRICE = 2000000;
 type FilterPriceProps = {
   priceRange: [number, number];
   onPriceChange: (values: number[]) => void;
+  onFinalChange: (values: number[]) => void;
 };
 
-const FilterPrice = ({ priceRange, onPriceChange }: FilterPriceProps) => {
+const FilterPrice = ({ priceRange, onPriceChange, onFinalChange }: FilterPriceProps) => {
   return (
     <div>
       <div className='mb-5 text-xl font-bold text-gray-800'>PRICE</div>
@@ -23,6 +24,7 @@ const FilterPrice = ({ priceRange, onPriceChange }: FilterPriceProps) => {
           max={MAX_PRICE}
           values={priceRange}
           onChange={onPriceChange}
+          onFinalChange={onFinalChange}
           renderTrack={({ props, children }) => (
             <div {...props} className='relative h-[6px] w-full rounded-full bg-gray-100'>
               <div
@@ -35,7 +37,15 @@ const FilterPrice = ({ priceRange, onPriceChange }: FilterPriceProps) => {
               {children}
             </div>
           )}
-          renderThumb={({ props, index }) => <div {...props} key={index} className='absolute h-5 w-5 -translate-y-1/2 rounded-full border border-gray-300 bg-white' />}
+          renderThumb={({ props, index }) => {
+            return (
+              <div {...props} key={index} className='relative z-10 h-5 w-5 -translate-y-1/2 rounded-full border border-gray-300 bg-white shadow-md focus:outline-none'>
+                <div
+                  className={`absolute inset-[-9px] -z-10 rounded-full bg-purple-100 opacity-0 transition-transform duration-300 ease-out hover:scale-100 hover:opacity-10 focus-visible:scale-100 focus-visible:opacity-10`}
+                />
+              </div>
+            );
+          }}
         />
       </div>
     </div>
diff --git a/src/app/(with-header)/wines/_components/WineFilter.tsx b/src/app/(with-header)/wines/_components/WineFilter.tsx
index 7958f5e..b6a5985 100644
--- a/src/app/(with-header)/wines/_components/WineFilter.tsx
+++ b/src/app/(with-header)/wines/_components/WineFilter.tsx
@@ -24,6 +24,11 @@ export default function WineFilter({ onChangeFilter }: WineFilterProps) {
   const handlePriceChange = (values: number[]) => {
     const [minPrice, maxPrice] = values;
     setPriceRange([minPrice, maxPrice]);
+  };
+
+  const handleFinalPriceChange = (values: number[]) => {
+    const [minPrice, maxPrice] = values;
+    setPriceRange([minPrice, maxPrice]);
     onChangeFilter({ type: selectedType, minPrice, maxPrice, rating: selectedRating });
   };
 
@@ -35,7 +40,7 @@ export default function WineFilter({ onChangeFilter }: WineFilterProps) {
   return (
     <div className='flex flex-col gap-[56px]'>
       <FilterTypes selectedType={selectedType} onTypeChange={handleTypeChange} />
-      <FilterPrice priceRange={priceRange} onPriceChange={handlePriceChange} />
+      <FilterPrice priceRange={priceRange} onPriceChange={handlePriceChange} onFinalChange={handleFinalPriceChange} />
       <FilterRating selectedRating={selectedRating} onRatingChange={handleRatingChange} />
     </div>
   );
diff --git a/src/app/(with-header)/wines/_components/WineFilterModal.tsx b/src/app/(with-header)/wines/_components/WineFilterModal.tsx
index 2f5fb32..036f4c6 100644
--- a/src/app/(with-header)/wines/_components/WineFilterModal.tsx
+++ b/src/app/(with-header)/wines/_components/WineFilterModal.tsx
@@ -24,10 +24,28 @@ export default function WineFilterModal({ isOpen, onClose, onApply, onFilterChan
   const [selectedRating, setSelectedRating] = useState<number | null>(initialFilters.rating);
 
   const handlePriceChange = (values: number[]) => {
-    if (values.length !== 2) return;
     setPriceRange([values[0], values[1]]);
   };
 
+  const handleFinalPriceChange = (values: number[]) => {
+    setPriceRange([values[0], values[1]]);
+  };
+
+  const handleFilterApply = () => {
+    onApply({ type: selectedType, minPrice: priceRange[0], maxPrice: priceRange[1], rating: selectedRating });
+    onClose();
+  };
+
+  const handleReset = () => {
+    setSelectedType(null);
+    setPriceRange([0, MAX_PRICE]);
+    setSelectedRating(null);
+  };
+
+  useEffect(() => {
+    onFilterChange({ type: selectedType, minPrice: priceRange[0], maxPrice: priceRange[1], rating: selectedRating });
+  }, [selectedType, priceRange, selectedRating, onFilterChange]);
+
   useEffect(() => {
     document.body.style.overflow = isOpen ? 'hidden' : 'auto';
     return () => {
@@ -51,21 +69,6 @@ export default function WineFilterModal({ isOpen, onClose, onApply, onFilterChan
     };
   }, [handleKeyDown]);
 
-  const handleFilterApply = () => {
-    onApply({ type: selectedType, minPrice: priceRange[0], maxPrice: priceRange[1], rating: selectedRating });
-    onClose();
-  };
-
-  const handleReset = () => {
-    setSelectedType(null);
-    setPriceRange([0, MAX_PRICE]);
-    setSelectedRating(null);
-  };
-
-  useEffect(() => {
-    onFilterChange({ type: selectedType, minPrice: priceRange[0], maxPrice: priceRange[1], rating: selectedRating });
-  }, [selectedType, priceRange, selectedRating, onFilterChange]);
-
   if (!isOpen) return null;
 
   return (
@@ -83,7 +86,7 @@ export default function WineFilterModal({ isOpen, onClose, onApply, onFilterChan
 
         <div className='flex flex-col gap-[56px]'>
           <FilterTypes selectedType={selectedType} onTypeChange={setSelectedType} />
-          <FilterPrice priceRange={priceRange} onPriceChange={handlePriceChange} />
+          <FilterPrice priceRange={priceRange} onPriceChange={handlePriceChange} onFinalChange={handleFinalPriceChange} />
           <FilterRating selectedRating={selectedRating} onRatingChange={setSelectedRating} />
         </div>
 

From 2613ee75f8e2d53bdf015b59e6699e91cc7dd368 Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Sun, 16 Feb 2025 03:32:15 +0900
Subject: [PATCH 02/11] =?UTF-8?q?=F0=9F=92=84=20design=20:=20Types,=20Rati?=
 =?UTF-8?q?ng=20=ED=95=84=ED=84=B0=EC=97=90=20hover=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=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/_components/FilterRating.tsx | 2 +-
 src/app/(with-header)/wines/_components/FilterTypes.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(with-header)/wines/_components/FilterRating.tsx b/src/app/(with-header)/wines/_components/FilterRating.tsx
index 073a193..a6fcfdf 100644
--- a/src/app/(with-header)/wines/_components/FilterRating.tsx
+++ b/src/app/(with-header)/wines/_components/FilterRating.tsx
@@ -20,7 +20,7 @@ const FilterRating = ({ selectedRating, onRatingChange }: FilterRatingProps) =>
               <input type='radio' name='rating' className='peer hidden' checked={selectedRating === item.value} onChange={() => onRatingChange(item.value)} />
               <div className='hidden h-[10px] w-[10px] rounded-[3px] bg-purple-100 peer-checked:block'></div>
             </div>
-            <span className={selectedRating === item.value ? 'text-purple-100' : ''}>{item.label}</span>
+            <span className={`${selectedRating === item.value ? 'text-purple-100' : ''} hover:text-purple-100`}>{item.label}</span>
           </label>
         ))}
       </div>
diff --git a/src/app/(with-header)/wines/_components/FilterTypes.tsx b/src/app/(with-header)/wines/_components/FilterTypes.tsx
index 15ea19d..e4d6cd4 100644
--- a/src/app/(with-header)/wines/_components/FilterTypes.tsx
+++ b/src/app/(with-header)/wines/_components/FilterTypes.tsx
@@ -16,7 +16,7 @@ const FilterTypes = ({ selectedType, onTypeChange }: FilterTypesProps) => {
         {['Red', 'White', 'Sparkling'].map((type) => (
           <button
             key={type}
-            className={`rounded-[100px] px-[18px] py-[10px] text-lg font-medium ${selectedType === type ? 'border border-purple-100 bg-purple-100 text-white' : 'border border-gray-300 bg-white text-gray-800'}`}
+            className={`rounded-[100px] border px-[18px] py-[10px] text-lg font-medium ${selectedType === type ? 'border border-purple-100 bg-purple-100 text-white' : 'border border-gray-300 bg-white text-gray-800 hover:border-purple-100 hover:bg-purple-100 hover:bg-opacity-10'}`}
             onClick={() => handleTypeClick(type)}
           >
             {type}

From e78871c9433850fd0033cb0fa70e75437e0f8e5b Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Sun, 16 Feb 2025 03:36:22 +0900
Subject: [PATCH 03/11] =?UTF-8?q?=E2=9C=A8=20feat=20:=20=EC=99=80=EC=9D=B8?=
 =?UTF-8?q?=20=EB=93=B1=EB=A1=9D=20=EC=8B=9C=20alert=20=EB=8C=80=EC=8B=A0?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EB=B9=84=ED=99=9C=EC=84=B1=ED=99=94=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=84=B1=EA=B3=B5/=EC=8B=A4=ED=8C=A8=20=EB=A9=94?=
 =?UTF-8?q?=EC=8B=9C=EC=A7=80=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/PostWineModal.tsx | 74 +++++++++++++++-----------
 1 file changed, 42 insertions(+), 32 deletions(-)

diff --git a/src/components/modal/PostWineModal.tsx b/src/components/modal/PostWineModal.tsx
index a0d3b1c..72f0a2d 100644
--- a/src/components/modal/PostWineModal.tsx
+++ b/src/components/modal/PostWineModal.tsx
@@ -8,6 +8,7 @@ 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';
 
 interface FormValues {
@@ -25,7 +26,12 @@ export default function PostWineModal() {
   const [preview, setPreview] = useState<string | null>(null);
   const router = useRouter();
 
-  const { register, handleSubmit, setValue } = useForm<FormValues>();
+  const { register, handleSubmit, setValue, watch, reset } = useForm<FormValues>();
+  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' },
@@ -38,33 +44,31 @@ export default function PostWineModal() {
   };
 
   const closeModal = () => {
+    reset();
+    setValue('type', '');
+    setPreview(null);
     setIsOpen(false);
   };
 
   const handlePostWine: SubmitHandler<FormValues> = async (data) => {
-    const { name, region, image, price, type } = data;
-
-    if (!name || !region || !image || !price || !type) {
-      alert('모든 정보를 입력해 주세요.');
-      return;
-    }
-
     try {
-      const response = await fetchWithAuth(`${process.env.NEXT_PUBLIC_BASE_URL}/wines`, {
+      const response = await fetchWithAuth(`${process.env.NEXT_PUBLIC_BASE_URL}/wine`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name, region, image, price: Number(price), type }),
+        body: JSON.stringify({ ...data, price: Number(data.price) }),
       });
 
-      if (!response?.ok || response === null) {
+      if (!response?.ok) {
         throw new Error('와인 등록에 실패했습니다');
       }
 
       const body = await response.json();
+      toast.success('와인이 등록되었습니다.');
       router.push(`/wines/${body.id}`);
     } catch (error) {
-      console.error('와인 등록 에러:', error);
-      console.log(data);
+      console.error('와인 등록 실패:', error);
+      toast.error('와인 등록에 실패했습니다.');
+      closeModal();
     }
   };
 
@@ -72,26 +76,33 @@ export default function PostWineModal() {
     const { image } = data;
     const formData = new FormData();
     formData.append('image', image[0]);
+
     try {
-      const response = await fetchWithAuth(`${process.env.NEXT_PUBLIC_BASE_URL}/images/upload`, { method: 'POST', body: formData });
+      const response = await fetchWithAuth(`${process.env.NEXT_PUBLIC_BASE_URL}/images/upload`, {
+        method: 'POST',
+        body: formData,
+      });
 
-      if (!response?.ok || response === null) {
-        throw new Error('Failed to upload image');
+      if (!response?.ok) {
+        throw new Error('이미지 업로드에 실패했습니다');
       }
 
       const uploadResult = await response.json();
       return uploadResult.url;
     } catch (error) {
-      console.log(error);
+      console.error('이미지 업로드 실패:', error);
     }
   }
 
   const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const image = event.target.files;
-    if (!image) return;
-    const imageUrl = await postImageApi({ image });
-    setValue('image', `${imageUrl}`);
-    setPreview(imageUrl);
+    const files = event.target.files;
+    if (!files || files.length === 0) return;
+
+    const imageUrl = await postImageApi({ image: files });
+    if (imageUrl) {
+      setValue('image', imageUrl);
+      setPreview(imageUrl);
+    }
   };
 
   return (
@@ -155,14 +166,7 @@ export default function PostWineModal() {
                 <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 />
               </div>
 
               <div className='-my-[5px] flex flex-col gap-3 mobile:gap-[12px]'>
@@ -174,7 +178,7 @@ export default function PostWineModal() {
                   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='h-[140px] w-[140px] object-contain mobile:h-[120px] mobile:w-[120px]' />
+                    <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]' />
                   )}
@@ -185,7 +189,13 @@ export default function PostWineModal() {
 
             <div className='mt-10 flex gap-[10px] mobile:gap-2'>
               <Button text='취소' variant='lightPurple' onClick={closeModal} />
-              <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 9f37fc76d26a2d9ebec1cef5b66bf15c8562e472 Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Sun, 16 Feb 2025 03:42:42 +0900
Subject: [PATCH 04/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20:=20?=
 =?UTF-8?q?=EC=B6=94=EC=B2=9C=20=EC=99=80=EC=9D=B8=20=EB=AA=A9=EB=A1=9D=20?=
 =?UTF-8?q?fetch=20=EC=8B=A4=ED=8C=A8=20=EC=8B=9C=20Refresh=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=ED=95=98?=
 =?UTF-8?q?=EC=97=AC=20=EC=97=90=EB=9F=AC=20=EC=B2=98=EB=A6=AC=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/RecommendWineContainer.tsx    | 46 ++++++++++++-------
 src/components/Refresh.tsx                    |  2 +-
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/app/(with-header)/wines/_components/RecommendWineContainer.tsx b/src/app/(with-header)/wines/_components/RecommendWineContainer.tsx
index 32e935c..18e33dd 100644
--- a/src/app/(with-header)/wines/_components/RecommendWineContainer.tsx
+++ b/src/app/(with-header)/wines/_components/RecommendWineContainer.tsx
@@ -1,34 +1,46 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { fetchRecommendWine } from '@/lib/fetchRecommendWine';
+import { Wine } from '@/types/wine';
 import RecommendWine from './RecommendWine';
 import RecommendWineListSkeleton from './skeleton/RecommendWineListSkeleton';
-import { Wine } from '@/types/wine';
+import Refresh from '@/components/Refresh';
 
 export default function RecommendWineContainer() {
   const [recommendedList, setRecommendedList] = useState<Wine[]>([]);
-  const [loading, setLoading] = useState<boolean>(true);
+  const [isloading, setIsLoading] = useState<boolean>(true);
+  const [hasError, setHasError] = useState(false);
 
-  useEffect(() => {
-    const getRecommendedWines = async () => {
-      setLoading(true);
-      try {
-        const wines = await fetchRecommendWine();
-        setRecommendedList(wines);
-      } catch (error) {
-        console.error('추천 와인 목록을 가져오는 데 실패했습니다.', error);
-      } finally {
-        setLoading(false);
-      }
-    };
+  const getRecommendedWines = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const wines = await fetchRecommendWine();
+      setRecommendedList(wines);
+      setHasError(false);
+    } catch (error) {
+      setHasError(true);
+      console.error('추천 와인 목록을 가져오는 데 실패했습니다.', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
 
+  useEffect(() => {
     getRecommendedWines();
-  }, []);
+  }, [getRecommendedWines]);
 
-  if (loading) {
+  if (isloading) {
     return <RecommendWineListSkeleton count={8} />;
   }
 
+  if (hasError) {
+    return (
+      <div className='flex h-[299px] flex-col justify-center rounded-2xl bg-gray-100 mobile:h-[241px]'>
+        <Refresh handleLoad={getRecommendedWines} iconSize='w-0 h-0' iconTextGap='gap-[10px]' buttonStyle='px-[20px] py-[8px] mobile:px-[16px] mobile:py-[6px] mobile:text-md' />
+      </div>
+    );
+  }
+
   return <RecommendWine recommendedList={recommendedList} />;
 }
diff --git a/src/components/Refresh.tsx b/src/components/Refresh.tsx
index 57c4800..24defbd 100644
--- a/src/components/Refresh.tsx
+++ b/src/components/Refresh.tsx
@@ -24,7 +24,7 @@ export default function Refresh({ handleLoad, buttonStyle = 'px-[30px] py-[10px]
           <p className='text-center text-lg text-gray-500 mobile:text-md'>실패했습니다.</p>
         </div>
       </div>
-      <Button onClick={onClickRefreshBtn} text='새로고침' className={`rounded-[100px] ${buttonStyle}`} />
+      <Button onClick={onClickRefreshBtn} text='새로고침' className={`rounded-[100px] font-semibold ${buttonStyle}`} />
     </div>
   );
 }

From 749670976d9e09fcef1326b1fc73eba06b0cc426 Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Sun, 16 Feb 2025 03:43:35 +0900
Subject: [PATCH 05/11] =?UTF-8?q?=F0=9F=92=84=20design=20:=20RecommendWine?=
 =?UTF-8?q?CardSkeleton=20css=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/skeleton/RecommendWineCardSkeleton.tsx    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/(with-header)/wines/_components/skeleton/RecommendWineCardSkeleton.tsx b/src/app/(with-header)/wines/_components/skeleton/RecommendWineCardSkeleton.tsx
index 7037dfc..db178ed 100644
--- a/src/app/(with-header)/wines/_components/skeleton/RecommendWineCardSkeleton.tsx
+++ b/src/app/(with-header)/wines/_components/skeleton/RecommendWineCardSkeleton.tsx
@@ -1,11 +1,11 @@
 export default function RecommendWineCardSkeleton() {
   return (
     <div className='flex h-[185px] w-[232px] animate-pulse justify-between gap-[28px] rounded-xl bg-white px-[30px] pt-6 mobile:h-[160px] mobile:w-[193px] mobile:gap-[25px] mobile:px-[25px]'>
-      <div className='h-[161px] w-[44px] flex-shrink-0 rounded bg-gray-200 mobile:h-[136px] mobile:w-[38px]'></div>
+      <div className='h-[161px] w-[44px] flex-shrink-0 rounded-t-md bg-gray-200 mobile:h-[136px] mobile:w-[38px]'></div>
       <div className='flex w-full flex-col gap-[10px] mobile:h-[136px] mobile:w-[80px] mobile:gap-3'>
-        <div className='h-[40px] w-[60px] rounded bg-gray-200 mobile:h-[30px] mobile:w-[50px]'></div>
-        <div className='h-[24px] w-[100px] rounded bg-gray-200 mobile:h-[18px] mobile:w-[80px]'></div>
-        <div className='h-[18px] w-[100px] rounded bg-gray-200 mobile:h-[18px] mobile:w-[80px]'></div>
+        <div className='h-[40px] w-[60px] rounded-md bg-gray-200 mobile:h-[30px] mobile:w-[50px]'></div>
+        <div className='h-[24px] w-[100px] rounded-md bg-gray-200 mobile:h-[18px] mobile:w-[80px]'></div>
+        <div className='h-[18px] w-[100px] rounded-md bg-gray-200 mobile:h-[18px] mobile:w-[80px]'></div>
       </div>
     </div>
   );

From 00e5fde586088268333967668c9ff255dcb6480a Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Sun, 16 Feb 2025 03:46:13 +0900
Subject: [PATCH 06/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20:=20?=
 =?UTF-8?q?=EC=99=80=EC=9D=B8=20=EB=AA=A9=EB=A1=9D=20fetch=20=EC=8B=A4?=
 =?UTF-8?q?=ED=8C=A8=20=EC=8B=9C=20Refresh=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80=ED=95=98=EC=97=AC=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20=EC=B2=98=EB=A6=AC=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wines/_components/WineListContainer.tsx        | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/app/(with-header)/wines/_components/WineListContainer.tsx b/src/app/(with-header)/wines/_components/WineListContainer.tsx
index 2b97b68..13a0625 100644
--- a/src/app/(with-header)/wines/_components/WineListContainer.tsx
+++ b/src/app/(with-header)/wines/_components/WineListContainer.tsx
@@ -10,6 +10,7 @@ import WineFilter from './WineFilter';
 import WineFilterModal from './WineFilterModal';
 import WineCard from './WineCard';
 import PostWineModal from '@/components/modal/PostWineModal';
+import Refresh from '@/components/Refresh';
 import LoadingSpinner from '@/components/LoadingSpinner';
 import filterIcon from '@/assets/icons/filter.svg';
 
@@ -28,6 +29,7 @@ export default function WineListContainer() {
   const [isFilterModalOpen, setFilterModalOpen] = useState<boolean>(false);
   const [pendingFilters, setPendingFilters] = useState(filters);
   const [isLoading, setIsLoading] = useState(false);
+  const [hasError, setHasError] = useState(false);
   const [nextCursor, setNextCursor] = useState<number | null>(null);
   const [hasMore, setHasMore] = useState(true);
   const lastWineRef = useRef<HTMLDivElement | null>(null);
@@ -48,7 +50,9 @@ export default function WineListContainer() {
       setWines((prev) => [...prev, ...response.list]);
       setNextCursor(response.nextCursor);
       setHasMore(response.nextCursor !== null);
+      setHasError(false);
     } catch (error) {
+      setHasError(true);
       console.error(error);
     } finally {
       setIsLoading(false);
@@ -146,6 +150,16 @@ export default function WineListContainer() {
       <WineFilterModal isOpen={isFilterModalOpen} onClose={() => setFilterModalOpen(false)} onApply={applyFilters} initialFilters={pendingFilters} onFilterChange={setPendingFilters} />
       <div className='flex min-h-0 flex-col'>
         <div className='scrollbar-hidden flex h-[650px] max-h-screen flex-col gap-[62px] tablet:h-[550px]'>
+          {hasError && (
+            <div className='pc:mt-28 tablet:mt-20 mobile:mt-10'>
+              <Refresh
+                handleLoad={loadMoreWines}
+                buttonStyle='px-[20px] py-[8px] mobile:px-[16px] mobile:py-[6px] mobile:text-md mobile:font-semibold'
+                iconSize='w-[100px] h-[100px] mobile:w-[60px] mobile:h-[60px]'
+                iconTextGap='gap-[10px]'
+              />
+            </div>
+          )}
           {wines.map((wine, index) => (
             <WineCard key={`${wine.id}-${index}`} ref={index === wines.length - 1 ? lastWineRef : null} wine={wine} />
           ))}

From ec27aba02cefb6a44a0066ce300d20084b0a5c46 Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Sun, 16 Feb 2025 03:58:33 +0900
Subject: [PATCH 07/11] =?UTF-8?q?=E2=9C=A8=20feat=20:=20=EC=99=80=EC=9D=B8?=
 =?UTF-8?q?=20=EB=AA=A9=EB=A1=9D=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20?=
 =?UTF-8?q?UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/skeleton/WineCardSkeleton.tsx | 31 +++++++++++++++++++
 .../_components/skeleton/WineListSkeleton.tsx | 11 +++++++
 2 files changed, 42 insertions(+)
 create mode 100644 src/app/(with-header)/wines/_components/skeleton/WineCardSkeleton.tsx
 create mode 100644 src/app/(with-header)/wines/_components/skeleton/WineListSkeleton.tsx

diff --git a/src/app/(with-header)/wines/_components/skeleton/WineCardSkeleton.tsx b/src/app/(with-header)/wines/_components/skeleton/WineCardSkeleton.tsx
new file mode 100644
index 0000000..40ce495
--- /dev/null
+++ b/src/app/(with-header)/wines/_components/skeleton/WineCardSkeleton.tsx
@@ -0,0 +1,31 @@
+export default function WineCardSkeleton() {
+  return (
+    <div className='rounded-2xl border border-gray-300 hover:shadow-lg pc:w-[796px]'>
+      <div className='flex justify-between gap-[81px] tablet:gap-[47px] mobile:gap-9'>
+        <div className='ml-[60px] mt-10 h-[208px] w-[60px] overflow-hidden rounded-t-md bg-gray-100 tablet:ml-10 mobile:ml-5' />
+        <div className='mb-[24px] mr-[60px] mt-[36px] flex flex-1 flex-col justify-between gap-4 mobile:mb-[28px] mobile:mr-[30px] mobile:mt-[40px]'>
+          <div className='flex justify-between tablet:gap-3 mobile:flex-col mobile:gap-[22px]'>
+            <div className='flex h-[162px] flex-col items-start justify-between mobile:h-[100px]'>
+              <div className='h-[42px] rounded-md bg-gray-100 pc:w-[350px] tablet:w-[380px] mobile:w-[200px]' />
+              <div className='mb-4 mt-5 h-[26px] w-[150px] rounded-md bg-gray-100 mobile:my-2' />
+              <div className='h-[42px] w-[124px] rounded-md bg-gray-100 mobile:h-[36px] mobile:w-[90px]' />
+            </div>
+            <div className='flex h-[162px] flex-col justify-between gap-1 mobile:mr-2 mobile:h-[51px] mobile:flex-row mobile:items-center mobile:gap-0'>
+              <div className='mobile:mr-1 mobile:flex mobile:flex-1 mobile:items-center mobile:gap-[15px]'>
+                <div className='mb-[10px] h-[48px] w-[80px] rounded-md bg-gray-100 mobile:mb-0 mobile:h-[48px] mobile:w-[60px]' />
+                <div className='flex-col mobile:flex'>
+                  <div className='h-[26px] w-[120px] rounded-md bg-gray-100 mobile:h-[24px] mobile:w-[110px]' />
+                  <div className='mt-[10px] h-[24px] w-[70px] max-w-[120px] rounded-md bg-gray-100 mobile:mt-[4px] mobile:h-[20px]' />
+                </div>
+              </div>
+              <div className='h-9 w-9 rounded-md bg-gray-100 pc:self-end tablet:self-end mobile:h-[32px] mobile:w-[32px] mobile:self-auto' />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className='flex flex-col gap-[10px] border-t-[1px] border-t-gray-300 mobile:gap-2'>
+        <div className='mx-[60px] my-5 h-[62px] rounded-md bg-gray-100 tablet:mx-10 mobile:mx-6 mobile:my-3 mobile:h-[58px]' />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(with-header)/wines/_components/skeleton/WineListSkeleton.tsx b/src/app/(with-header)/wines/_components/skeleton/WineListSkeleton.tsx
new file mode 100644
index 0000000..9204ce5
--- /dev/null
+++ b/src/app/(with-header)/wines/_components/skeleton/WineListSkeleton.tsx
@@ -0,0 +1,11 @@
+import WineCardSkeleton from './WineCardSkeleton';
+
+export default function WineListSkeleton({ count }: { count: number }) {
+  return (
+    <div className='flex h-[650px] max-h-screen animate-pulse flex-col gap-[62px] overflow-hidden tablet:h-[550px]'>
+      {new Array(count).fill(0).map((_, idx) => (
+        <WineCardSkeleton key={`wine-item-skeleton-${idx}`} />
+      ))}
+    </div>
+  );
+}

From 18b71570a6d7389b49d5544b2ec2b3445039acd0 Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Sun, 16 Feb 2025 04:00:10 +0900
Subject: [PATCH 08/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20:=20?=
 =?UTF-8?q?=EC=99=80=EC=9D=B8=20=EB=AA=A9=EB=A1=9D=20=EB=A1=9C=EB=94=A9=20?=
 =?UTF-8?q?=EC=8B=9C=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20UI=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9=ED=95=98=EC=97=AC=20=EB=A1=9C=EB=94=A9=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(with-header)/wines/_components/WineListContainer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(with-header)/wines/_components/WineListContainer.tsx b/src/app/(with-header)/wines/_components/WineListContainer.tsx
index 13a0625..8825b18 100644
--- a/src/app/(with-header)/wines/_components/WineListContainer.tsx
+++ b/src/app/(with-header)/wines/_components/WineListContainer.tsx
@@ -11,7 +11,7 @@ import WineFilterModal from './WineFilterModal';
 import WineCard from './WineCard';
 import PostWineModal from '@/components/modal/PostWineModal';
 import Refresh from '@/components/Refresh';
-import LoadingSpinner from '@/components/LoadingSpinner';
+import WineListSkeleton from './skeleton/WineListSkeleton';
 import filterIcon from '@/assets/icons/filter.svg';
 
 const MAX_PRICE = 2000000;
@@ -163,7 +163,7 @@ export default function WineListContainer() {
           {wines.map((wine, index) => (
             <WineCard key={`${wine.id}-${index}`} ref={index === wines.length - 1 ? lastWineRef : null} wine={wine} />
           ))}
-          {isLoading && <LoadingSpinner />}
+          {isLoading && <WineListSkeleton count={2} />}
         </div>
       </div>
     </div>

From da588d0294874b0f86d915b8f3a9dbd4d9320150 Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Sun, 16 Feb 2025 17:10:10 +0900
Subject: [PATCH 09/11] =?UTF-8?q?=F0=9F=94=A7=20chore=20:=20=EC=A0=84?=
 =?UTF-8?q?=EC=97=AD=20=EB=A9=94=ED=83=80=EB=8D=B0=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(with-header)/page.tsx | 12 ------------
 src/app/layout.tsx             | 14 +++++++++++++-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/app/(with-header)/page.tsx b/src/app/(with-header)/page.tsx
index 6a01858..c2cb4bf 100644
--- a/src/app/(with-header)/page.tsx
+++ b/src/app/(with-header)/page.tsx
@@ -1,5 +1,4 @@
 import Image from 'next/image';
-import { Metadata } from 'next';
 import Button from '@/components/Button';
 import bannerDesktop from '@/assets/images/banner_desktop.png';
 import bannerTablet from '@/assets/images/banner_tablet.png';
@@ -11,17 +10,6 @@ import section2Small from '@/assets/images/section2_sm.png';
 import section3Large from '@/assets/images/section3_lg.png';
 import section3Small from '@/assets/images/section3_sm.png';
 
-export const metadata: Metadata = {
-  metadataBase: new URL('https://wine-lab.vercel.app/'),
-  title: 'WINE - 나만의 와인 창고',
-  description: '한 곳에서 관리하는 나만의 와인 창고',
-  openGraph: {
-    title: 'WINE - 나만의 와인 창고',
-    description: '한 곳에서 관리하는 나만의 와인 창고',
-    images: ['/thumbnail.png'],
-  },
-};
-
 export default function Home() {
   return (
     <div className='bg-gray-100'>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7db81b3..972fcb3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,8 @@
 import localFont from 'next/font/local';
+import { Metadata } from 'next';
 import { AuthProvider } from '@/contexts/AuthProvider';
-import './globals.css';
 import { ToastContainer, Slide } from 'react-toastify';
+import './globals.css';
 
 const pretendard = localFont({
   src: '../fonts/PretendardVariable.woff2',
@@ -9,6 +10,17 @@ const pretendard = localFont({
   variable: '--font-pretendard',
 });
 
+export const metadata: Metadata = {
+  metadataBase: new URL('https://wine-lab.vercel.app/'),
+  title: 'WINE - 나만의 와인 창고',
+  description: '한 곳에서 관리하는 나만의 와인 창고',
+  openGraph: {
+    title: 'WINE - 나만의 와인 창고',
+    description: '한 곳에서 관리하는 나만의 와인 창고',
+    images: ['/thumbnail.png'],
+  },
+};
+
 export default function RootLayout({
   children,
 }: Readonly<{

From 696baad687ff82c9ae945fe68655d17b7dc898c4 Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Sun, 16 Feb 2025 18:11:11 +0900
Subject: [PATCH 10/11] =?UTF-8?q?=E2=9C=A8=20feat=20:=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20=ED=8F=BC=EC=97=90=EC=84=9C=20=EC=97=94=ED=84=B0=20?=
 =?UTF-8?q?=ED=82=A4=EB=A1=9C=20=EC=A0=9C=EC=B6=9C=20=EA=B0=80=EB=8A=A5?=
 =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/signin/_components/LoginForm.tsx | 4 ++--
 src/app/signup/page.tsx                  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/signin/_components/LoginForm.tsx b/src/app/signin/_components/LoginForm.tsx
index a0f2a6b..534233d 100644
--- a/src/app/signin/_components/LoginForm.tsx
+++ b/src/app/signin/_components/LoginForm.tsx
@@ -65,7 +65,7 @@ export default function LoginForm() {
   };
 
   return (
-    <form>
+    <form onSubmit={handleSubmit(handleLogin)}>
       <div className='flex flex-col pb-[28px] mobile:pb-4'>
         <label htmlFor='email' className='pb-[10px] font-medium leading-[26px] text-gray-800 mobile:text-[14px]'>
           이메일
@@ -92,7 +92,7 @@ export default function LoginForm() {
       </div>
 
       <div className='flex w-full flex-col gap-[15px] pb-8 pt-14 mobile:pb-6 mobile:pt-10'>
-        <Button type='button' onClick={handleSubmit(handleLogin)} text='로그인' className='h-[50px] rounded-2xl border mobile:text-[14px]'></Button>
+        <Button type='submit' onClick={handleSubmit(handleLogin)} text='로그인' className='h-[50px] rounded-2xl border mobile:text-[14px]'></Button>
         <button type='button' onClick={handleGoogleLogin} className='flex h-[50px] items-center justify-center gap-3 rounded-2xl border border-gray-300 bg-white'>
           <Image src={googleIcon} alt='구글아이콘' />
           <p className='font-medium mobile:text-[14px]'>Google로 시작하기</p>
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index 33520c2..dac1d30 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -14,7 +14,7 @@ export default function Signup() {
           </Link>
           <SignupForm></SignupForm>
           <div className='flex gap-[14px]'>
-            <p className='font-normal text-gray-500 mobile:text-[14px]'>계정이 없으신가요?</p>
+            <p className='font-normal text-gray-500 mobile:text-[14px]'>계정이 이미 있으신가요?</p>
             <Link href='/signin' className='font-medium text-purple-100 underline mobile:text-[14px]'>
               로그인하기
             </Link>

From 641ce3458d6bf1a5c74eee5c47c72b2b937987f4 Mon Sep 17 00:00:00 2001
From: LMS10 <ggb7410@naver.com>
Date: Sun, 16 Feb 2025 18:47:35 +0900
Subject: [PATCH 11/11] =?UTF-8?q?=F0=9F=90=9B=20fix=20:=20API=20=EC=97=94?=
 =?UTF-8?q?=EB=93=9C=ED=8F=AC=EC=9D=B8=ED=8A=B8=20=EC=88=98=EC=A0=95=20(/w?=
 =?UTF-8?q?ine=20=E2=86=92=20/wines)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/PostWineModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/modal/PostWineModal.tsx b/src/components/modal/PostWineModal.tsx
index 72f0a2d..af33405 100644
--- a/src/components/modal/PostWineModal.tsx
+++ b/src/components/modal/PostWineModal.tsx
@@ -52,7 +52,7 @@ export default function PostWineModal() {
 
   const handlePostWine: SubmitHandler<FormValues> = async (data) => {
     try {
-      const response = await fetchWithAuth(`${process.env.NEXT_PUBLIC_BASE_URL}/wine`, {
+      const response = await fetchWithAuth(`${process.env.NEXT_PUBLIC_BASE_URL}/wines`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ ...data, price: Number(data.price) }),