codeit-part3-7 · Luganic · Aug 2, 2025 · Aug 1, 2025 · Aug 1, 2025 · Aug 1, 2025
diff --git a/public/images/image1.svg b/public/images/image1.svg
diff --git a/public/images/image2.svg b/public/images/image2.svg
diff --git a/public/images/image3.svg b/public/images/image3.svg
diff --git a/public/images/image4.svg b/public/images/image4.svg
diff --git a/src/components/Modal/WineModal/AddWineModal.tsx b/src/components/Modal/WineModal/AddWineModal.tsx
@@ -15,31 +15,26 @@ import SelectDropdown from '../../common/dropdown/SelectDropdown';
 import Input from '../../common/Input';
 import BasicModal from '../../common/Modal/BasicModal';
 import { Button } from '../../ui/button';
-
 interface WineForm {
   wineName: string;
   winePrice: number;
   wineOrigin: string;
   wineImage: FileList;
   wineType: string;
 }
-
 interface AddWineModalProps {
   showRegisterModal: boolean;
   setShowRegisterModal: (state: boolean) => void;
 }
-
 const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalProps) => {
   const [category, setCategory] = useState('');
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const queryClient = useQueryClient();
   const isDesktop = useMediaQuery('(min-width: 640px)');
-
   const triggerFileSelect = () => {
     fileInputRef.current?.click();
   };
-
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
@@ -50,7 +45,6 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
       setPreviewImage(null);
     }
   };
-
   const {
     register,
     handleSubmit,
@@ -62,7 +56,6 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
   } = useForm<WineForm>({
     mode: 'onBlur',
   });
-
   const resetForm = () => {
     reset({
       wineName: '',
@@ -75,10 +68,11 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
     setPreviewImage(null);
     if (fileInputRef.current) fileInputRef.current.value = '';
   };
-
   const handlePostWine = async (form: WineForm) => {
     const file = form.wineImage[0];
-    const imageUrl = await uploadImage(file);
+    const newFileName = file.name.replace(/\s/g, '-');
+    const newFile = new File([file], newFileName, { type: file.type });
+    const imageUrl = await uploadImage(newFile);
     const requestData: PostWineRequest = {
       name: form.wineName,
       region: form.wineOrigin,
@@ -88,7 +82,6 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
     };
     return postWine(requestData);
   };
-
   const postWineMutation = useMutation({
     mutationFn: handlePostWine,
     onSuccess: () => {
@@ -103,7 +96,6 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
       console.log('와인 등록 실패', error);
     },
   });
-
   const onSubmit = async (form: WineForm) => {
     let file = form.wineImage[0];
     file = renameFileIfNeeded(file); //이미지파일 이름 정규화
@@ -112,16 +104,12 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
       wineImage: [file] as unknown as FileList,
     });
   };
-
   const categoryOptions = [
     { label: 'Red', value: 'Red' },
     { label: 'White', value: 'White' },
     { label: 'Sparkling', value: 'Sparkling' },
   ];
-
   const selectedCategoryLabel = categoryOptions.find((opt) => opt.value === category)?.label;
-
-  //모달창 끄면 리셋되게
   const closeModalReset = (isOpen: boolean) => {
     setShowRegisterModal(isOpen);
     if (!isOpen) {
@@ -130,11 +118,8 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
       }, 50);
     }
   };
-  ////
-
   const renderForm = () => (
     <form onSubmit={handleSubmit(onSubmit)} encType='multipart/form-data' className='mx-2'>
-      {/* 이름 */}
       <p className='custom-text-md-medium md:custom-text-lg-medium mt-[22px] mb-[10px]'>
         와인 이름
       </p>
@@ -150,7 +135,6 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
         placeholder='와인 이름 입력'
         className='custom-text-md-regular md:custom-text-lg-regular'
       />
-      {/* 가격 */}
       <p className='custom-text-md-medium md:custom-text-lg-medium mt-[22px] mb-[10px]'>가격</p>
       <Input
         {...register('winePrice', {
@@ -164,7 +148,6 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
         placeholder='가격 입력'
         className='[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none custom-text-md-regular md:custom-text-lg-regular'
       />
-      {/* 원산지 */}
       <p className='custom-text-md-medium md:custom-text-lg-medium mt-[22px] mb-[10px]'>원산지</p>
       <Input
         {...register('wineOrigin', {
@@ -178,7 +161,6 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
         placeholder='원산지 입력'
         className='custom-text-md-regular md:custom-text-lg-regular'
       />
-      {/* 타입 */}
       <p className='custom-text-md-medium md:custom-text-lg-medium mt-[22px] mb-[10px]'>타입</p>
       <SelectDropdown
         selectedValue={category}
@@ -204,7 +186,7 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
         <div className='relative'>
           <p className='text-red-500 absolute mt-1'>{errors.wineType.message}</p>
         </div>
-      )}{' '}
+      )}
       <Input
         {...register('wineType', {
           required: '타입을 선택해 주세요.',
@@ -214,7 +196,6 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
         type='text'
         className='hidden'
       />
-      {/* 사진 */}
       <p className='custom-text-md-medium md:custom-text-lg-medium mt-[24px]'>와인 사진</p>
       <Input
         {...register('wineImage', {
@@ -239,7 +220,6 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
           onClick={triggerFileSelect}
         >
           {previewImage ? (
-            // eslint-disable-next-line @next/next/no-img-element
             <img src={previewImage} alt='미리보기' className='w-full h-full object-cover' />
           ) : (
             <div className='flex flex-col items-center text-gray-400'>
@@ -255,7 +235,6 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
       </div>
     </form>
   );
-
   const renderButton = (
     <div className='flex gap-2 w-full'>
       <Button
@@ -284,7 +263,6 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
       </Button>
     </div>
   );
-
   return isDesktop ? (
     <BasicModal
       type='register'
@@ -307,5 +285,4 @@ const AddWineModal = ({ showRegisterModal, setShowRegisterModal }: AddWineModalP
     </BasicBottomSheet>
   );
 };
-
 export default AddWineModal;
diff --git a/src/components/common/Filter/WineTypeFilter.tsx b/src/components/common/Filter/WineTypeFilter.tsx
@@ -19,7 +19,7 @@ const WineTypeFilter = ({
 }: WineTypeFilterProps) => {
   const { type, setType, minPrice, maxPrice, setPriceRange, rating, setRating } = useFilterStore();
 
-  const wineTypeOptions: WineType[] = ['Red', 'White', 'Sparkling'];
+  const wineTypeOptions: WineType[] = ['RED', 'WHITE', 'SPARKLING'];
   const priceRange: [number, number] = [minPrice, maxPrice];
 
   const borderClass = 'border-b border-gray-100';
@@ -65,19 +65,19 @@ const WineTypeFilter = ({
             </Label>
           </div>
           <div className='flex items-center gap-3 custom-text-lg-medium'>
-            <RadioGroupItem value='4.6' id='rate1' />
+            <RadioGroupItem value='5.0' id='rate1' />
             <Label htmlFor='rate1'>4.5 - 5.0</Label>
           </div>
           <div className='flex items-center gap-3'>
-            <RadioGroupItem value='4.1' id='rate2' />
+            <RadioGroupItem value='4.5' id='rate2' />
             <Label htmlFor='rate2'>4.0 - 4.5</Label>
           </div>
           <div className='flex items-center gap-3'>
-            <RadioGroupItem value='3.6' id='rate3' />
+            <RadioGroupItem value='4.0' id='rate3' />
             <Label htmlFor='rate3'>3.5 - 4.0</Label>
           </div>
           <div className='flex items-center gap-3'>
-            <RadioGroupItem value='3.1' id='rate4' />
+            <RadioGroupItem value='3.5' id='rate4' />
             <Label htmlFor='rate4'>3.0 - 3.5</Label>
           </div>
         </RadioGroup>

diff --git a/src/components/common/winelist/WineCard.tsx b/src/components/common/winelist/WineCard.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Link from 'next/link';
 
 import StarIcon from '@/assets/icons/star.svg';
@@ -24,7 +22,6 @@ export default function WineCard({ id, image, name, rating }: WineCardProps) {
           'md:w-[232px] md:h-[185px]',
         )}
       >
-        {/* 왼쪽: 이미지 카드 */}
         <div className='flex-shrink-0'>
           <ImageCard
             imageSrc={image}
@@ -33,7 +30,6 @@ export default function WineCard({ id, image, name, rating }: WineCardProps) {
           />
         </div>
 
-        {/* 오른쪽: 평점 + 별점 + 이름 */}
         <div className='w-[80px] h-[97px] flex flex-col justify-start mt-[10px] ml-[5px] md:w-[100px] md:h-[125px] md:ml-[20px]'>
           <div className='text-[28px] font-extrabold leading-100% text-gray-800 md:text-[36px] '>
             {rating.toFixed(1)}

diff --git a/src/components/common/winelist/WineListCard.tsx b/src/components/common/winelist/WineListCard.tsx
@@ -9,6 +9,7 @@ import { Button } from '@/components/ui/button';
 import { useInfiniteScroll } from '@/hooks/useInfiniteScroll';
 import { useWineListQuery } from '@/hooks/useWineListQuery';
 import { cn } from '@/lib/utils';
+import { GetWinesResponse } from '@/types/wineListType';
 
 export default function WineListCard() {
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isError } =
@@ -27,8 +28,10 @@ export default function WineListCard() {
   if (isLoading) return <p>불러오는 중...</p>;
   if (isError || !data) return <p>와인 데이터를 불러올 수 없습니다.</p>;
 
-  /* 전체 와인 리스트 조합 */
-  const wineList = data.pages.flatMap((page) => page.list);
+  const wineList = data.pages.flatMap(
+    (page) =>
+      (page as GetWinesResponse)?.list?.filter((wine) => !wine.image.includes('example.com')) ?? [],
+  );
 
   return (
     <div className='flex flex-col gap-[24px] px-[16px] mt-[12px] min-w-[370px] md:px-[20px] md:mt-[24px] xl:px-0 max-w-[1140px] mx-auto xl:max-w-[800px]'>
@@ -68,22 +71,22 @@ export default function WineListCard() {
 
                 <div className='flex flex-row items-start mt-[23px] w-full ml-0 gap-[6px] md:hidden'>
                   <div className='text-[28px] font-extrabold text-gray-800 w-auto h-auto'>
-                    {wine.rating.toFixed(1)}
+                    {wine.avgRating?.toFixed(1)}
                   </div>
                   <div className='flex flex-col gap-[5px] ml-[15px] w-[100px] h-auto mt-[-6px]'>
                     <div className='flex gap-[4px] flex-nowrap'>
                       {Array.from({ length: 5 }).map((_, i) => (
                         <StarIcon
                           key={i}
                           className={cn(
-                            wine.rating >= i + 1 ? 'fill-purpleDark' : 'fill-gray-300',
+                            wine.avgRating >= i + 1 ? 'fill-purpleDark' : 'fill-gray-300',
                             'w-3 h-3',
                           )}
                         />
                       ))}
                     </div>
                     <div className='custom-text-xs-regular text-gray-500 break-words'>
-                      47개의 후기
+                      {wine.reviewCount}개의 후기
                     </div>
                   </div>
                 </div>
@@ -98,22 +101,22 @@ export default function WineListCard() {
 
             <div className='hidden md:flex flex-col items-start absolute top-[40px] right-[-10px] z-10'>
               <div className='text-[48px] font-extrabold text-gray-800 leading-[48px] md:mt-[9px]'>
-                {wine.rating.toFixed(1)}
+                {wine.avgRating?.toFixed(1)}
               </div>
               <div className='flex flex-col gap-[5px] w-[160px] mt-[15px] items-start'>
                 <div className='flex gap-[4px] flex-nowrap'>
                   {Array.from({ length: 5 }).map((_, i) => (
                     <StarIcon
                       key={i}
                       className={cn(
-                        wine.rating >= i + 1 ? 'fill-purpleDark' : 'fill-gray-300',
+                        wine.avgRating >= i + 1 ? 'fill-purpleDark' : 'fill-gray-300',
                         'w-[16px] h-[16px]',
                       )}
                     />
                   ))}
                 </div>
                 <div className='custom-text-sm-regular text-gray-500 break-words w-[100px] text-left mt-[7px]'>
-                  47개의 후기
+                  {wine.reviewCount}개의 후기
                 </div>
               </div>
             </div>
@@ -132,13 +135,12 @@ export default function WineListCard() {
                 최신 후기
               </div>
               <div className='text-[14px] text-gray-500 leading-[24px] break-words'>
-                {wine.review}
+                {wine.recentReview ? wine.recentReview.content : '아직 후기가 없습니다.'}
               </div>
             </div>
           </div>
         </Link>
       ))}
-      {/* 무한 스크롤 감지 */}
       <div ref={observerRef} className='h-[1px]' />
     </div>
   );