Merge pull request #97 from Leets-Official/96-feat/위시리스트-API-연결-및-코드-리팩토링

[Feat] 위시리스트 api 연결 및 코드 리팩토링

Author: KyeongJooni

src/app/routes.ts

@@ -23,7 +23,7 @@ export default [
     route('repair', 'routes/(main)/repair/index.tsx'),
 
     // seller
-    route('seller/:userId', 'routes/(main)/seller/index.tsx'),
+    route('seller/:postId', 'routes/(main)/seller/index.tsx'),
 
     // 로그인 필요 페이지 (미로그인 시 /login 으로 리다이렉트)
     layout('layout/ProtectedLayout.tsx', [

src/pages/buy-detail/model/useManageActions.ts

@@ -18,13 +18,17 @@ export const useManageActions = (item: BuyItem | undefined) => {
       state: {
         postId: item.id,
         title: item.title,
-        price: item.priceValue,
-        imageUrl: item.image,
+        price: String(item.priceValue),
+        imageUrls: item.imageUrls,
         manufacturer: item.specs.manufacturer,
         modelName: item.specs.model,
         colorName: item.specs.color,
         storageSize: item.specs.storage,
         description: item.description.join('\n'),
+        productCondition: item.used,
+        scratchCondition: item.hasScratch,
+        screenCondition: item.screenCracked,
+        batteryCondition: item.batteryStatus,
       },
     });
   };
@@ -33,7 +37,7 @@ export const useManageActions = (item: BuyItem | undefined) => {
     deleteModal.close();
     try {
       await deleteMutation.mutateAsync();
-      showToast('삭제되었습니다', 'success');
+      showToast('삭제되었습니다', 'error');
       navigate(ROUTES.MAIN);
     } catch {
       showToast('삭제에 실패했습니다. 다시 시도해 주세요.', 'error');

src/pages/buy-detail/ui/BuyDetailPage.tsx

@@ -1,11 +1,11 @@
 import { buildDetailInfo } from '@pages/buy-detail/model/buildDetailInfo';
 import { useManageActions } from '@pages/buy-detail/model/useManageActions';
-import { useBuyItemQuery } from '@shared/apis/buy';
+import { useBuyItemQuery, useTogglePostWishlistMutation } from '@shared/apis/buy';
 import { useCreateRoomMutation } from '@shared/apis/chat';
 import { ROUTES } from '@shared/constants';
-import { LoadingFallback } from '@shared/ui/LoadingFallback';
 import { NotFoundFallback } from '@shared/ui/NotFoundFallback';
 import { useNavigate, useParams } from 'react-router';
+import { BuyDetailSkeleton } from './BuyDetailSkeleton';
 import { ContactActions } from './ContactActions';
 import { ManageActions } from './ManageActions';
 import { ProductImageSection } from './ProductImageSection';
@@ -19,6 +19,7 @@ const BuyDetailPage = () => {
   const { data: item, isLoading } = useBuyItemQuery(id);
   const { deleteModal, isDeleting, handleEdit, handleDelete } = useManageActions(item);
   const createRoomMutation = useCreateRoomMutation();
+  const toggleWishlistMutation = useTogglePostWishlistMutation();
 
   const handleContact = () => {
     if (!item) {
@@ -32,7 +33,7 @@ const BuyDetailPage = () => {
   };
 
   if (isLoading) {
-    return <LoadingFallback message="상품 정보를 불러오는 중이에요." />;
+    return <BuyDetailSkeleton />;
   }
 
   if (!item) {
@@ -51,7 +52,12 @@ const BuyDetailPage = () => {
   return (
     <main className="md:px-xxxl mx-auto flex w-full max-w-[1200px] flex-col items-start gap-5 px-(--margin-l) lg:gap-[157px] lg:px-0">
       <div className="flex w-full flex-col items-start gap-5 lg:flex-row">
-        <ProductImageSection image={item.image} title={item.title} seller={item.seller} />
+        <ProductImageSection
+          postId={item.id}
+          images={item.imageUrls.length > 0 ? item.imageUrls : [item.image]}
+          title={item.title}
+          seller={item.seller}
+        />
 
         <div className="flex w-full shrink-0 flex-col items-start gap-10 lg:w-[590px] lg:gap-[108px]">
           <ProductInfoSection
@@ -72,7 +78,11 @@ const BuyDetailPage = () => {
               onDeleteConfirm={handleDelete}
             />
           ) : (
-            <ContactActions liked={item.liked} onContact={handleContact} />
+            <ContactActions
+              liked={item.liked}
+              onContact={handleContact}
+              onToggleFavorite={() => toggleWishlistMutation.mutate(item.id)}
+            />
           )}
         </div>
       </div>

src/pages/buy-detail/ui/BuyDetailSkeleton.tsx

@@ -0,0 +1,56 @@
+export const BuyDetailSkeleton = () => {
+  return (
+    <main className="md:px-xxxl mx-auto flex w-full max-w-[1200px] flex-col items-start gap-5 px-(--margin-l) lg:gap-[157px] lg:px-0">
+      <div className="flex w-full flex-col items-start gap-5 lg:flex-row">
+        {/* 이미지 섹션 */}
+        <div className="flex w-full shrink-0 flex-col items-start gap-[30px] lg:w-[590px]">
+          <div className="aspect-square w-full animate-pulse rounded-(--radius-s) bg-gray-200 lg:h-[568px] lg:w-[590px]" />
+          <div className="flex items-center gap-[23px]">
+            <div className="h-[52px] w-[52px] animate-pulse rounded-full bg-gray-200" />
+            <div className="h-6 w-24 animate-pulse rounded bg-gray-200" />
+          </div>
+        </div>
+
+        {/* 정보 섹션 */}
+        <div className="flex w-full shrink-0 flex-col items-start gap-10 lg:w-[590px] lg:gap-[108px]">
+          <div className="flex flex-col items-start gap-[27px] self-stretch">
+            <div className="flex flex-col items-start gap-[21px] self-stretch">
+              <div className="flex flex-col items-start gap-[38px] self-stretch">
+                <div className="h-8 w-3/4 animate-pulse rounded bg-gray-200" />
+                <div className="h-10 w-32 animate-pulse rounded bg-gray-200" />
+              </div>
+
+              <div className="h-px w-full bg-gray-100 lg:w-[584px]" />
+
+              <div className="gap-xxs flex flex-col items-start self-stretch">
+                <div className="flex flex-col items-start gap-[6px] self-stretch">
+                  {Array.from({ length: 4 }).map((_, index) => (
+                    <div key={index} className="flex items-center gap-[11px]">
+                      <div className="h-4 w-12 animate-pulse rounded bg-gray-200" />
+                      <div className="h-5 w-24 animate-pulse rounded bg-gray-200" />
+                    </div>
+                  ))}
+                </div>
+                <div className="h-4 w-40 animate-pulse rounded bg-gray-200" />
+              </div>
+            </div>
+
+            <div className="h-px w-full bg-gray-100 lg:w-[584px]" />
+
+            <div className="flex min-h-[80px] flex-col gap-2 self-stretch">
+              <div className="h-4 w-full animate-pulse rounded bg-gray-200" />
+              <div className="h-4 w-5/6 animate-pulse rounded bg-gray-200" />
+              <div className="h-4 w-4/6 animate-pulse rounded bg-gray-200" />
+            </div>
+          </div>
+
+          {/* 액션 버튼 */}
+          <div className="flex w-full gap-4">
+            <div className="h-12 w-12 animate-pulse rounded-(--radius-l) bg-gray-200" />
+            <div className="h-12 flex-1 animate-pulse rounded-(--radius-l) bg-gray-200" />
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};

src/pages/buy-detail/ui/ProductImageSection.tsx

@@ -1,18 +1,54 @@
+import { ChevronLeftIcon, ChevronRightIcon } from '@shared/assets/icons';
 import { ROUTES } from '@shared/constants';
 import { Profile } from '@shared/ui/Profile';
+import { cn } from '@shared/utils/cn';
+import { useRef, useState } from 'react';
 import { Link } from 'react-router';
 
 type ProductImageSectionProps = {
-  image: string;
+  postId: string;
+  images: string[];
   title: string;
   seller: {
-    id?: string;
     nickname: string;
     profileImage?: string;
   };
 };
 
-export const ProductImageSection = ({ image, title, seller }: ProductImageSectionProps) => {
+export const ProductImageSection = ({ postId, images, title, seller }: ProductImageSectionProps) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const touchStartX = useRef(0);
+  const hasMultipleImages = images.length > 1;
+
+  const goToPrevious = () => {
+    if (currentIndex > 0) {
+      setCurrentIndex((prev) => prev - 1);
+    }
+  };
+
+  const goToNext = () => {
+    if (currentIndex < images.length - 1) {
+      setCurrentIndex((prev) => prev + 1);
+    }
+  };
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    touchStartX.current = e.touches[0].clientX;
+  };
+
+  const handleTouchEnd = (e: React.TouchEvent) => {
+    const touchEndX = e.changedTouches[0].clientX;
+    const diff = touchStartX.current - touchEndX;
+
+    if (Math.abs(diff) > 50) {
+      if (diff > 0) {
+        goToNext();
+      } else {
+        goToPrevious();
+      }
+    }
+  };
+
   const sellerContent = (
     <>
       <Profile size="chat" image={seller.profileImage} alt={`${seller.nickname} 프로필`} className="shrink-0" />
@@ -22,16 +58,72 @@ export const ProductImageSection = ({ image, title, seller }: ProductImageSectio
 
   return (
     <div className="flex w-full shrink-0 flex-col items-start gap-[30px] lg:w-[590px]">
-      <div className="aspect-square w-full overflow-hidden rounded-(--radius-s) bg-gray-50 lg:h-[568px] lg:w-[590px]">
-        <img src={image} alt={title} className="h-full w-full object-cover" />
+      <div
+        className="group relative aspect-square w-full overflow-hidden rounded-(--radius-s) bg-gray-50 lg:h-[568px] lg:w-[590px]"
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
+      >
+        <div
+          className="flex h-full transition-transform duration-300 ease-out"
+          style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+        >
+          {images.map((image, index) => (
+            <img
+              key={index}
+              src={image}
+              alt={`${title} ${index + 1}`}
+              className="h-full w-full shrink-0 object-cover"
+            />
+          ))}
+        </div>
+
+        {hasMultipleImages && (
+          <>
+            {currentIndex > 0 && (
+              <button
+                type="button"
+                onClick={goToPrevious}
+                className="absolute top-1/2 left-4 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white/80 text-gray-700 opacity-0 shadow-md transition-opacity group-hover:opacity-100"
+                aria-label="이전 이미지"
+              >
+                <ChevronLeftIcon className="h-6 w-6" />
+              </button>
+            )}
+            {currentIndex < images.length - 1 && (
+              <button
+                type="button"
+                onClick={goToNext}
+                className="absolute top-1/2 right-4 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white/80 text-gray-700 opacity-0 shadow-md transition-opacity group-hover:opacity-100"
+                aria-label="다음 이미지"
+              >
+                <ChevronRightIcon className="h-6 w-6" />
+              </button>
+            )}
+
+            <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2">
+              {images.map((_, index) => (
+                <button
+                  key={index}
+                  type="button"
+                  onClick={() => setCurrentIndex(index)}
+                  className={cn(
+                    'h-2 w-2 rounded-full transition-colors',
+                    index === currentIndex ? 'bg-green-500' : 'bg-white/60'
+                  )}
+                  aria-label={`${index + 1}번째 이미지로 이동`}
+                />
+              ))}
+            </div>
+          </>
+        )}
       </div>
-      {seller.id ? (
-        <Link to={`${ROUTES.SELLER_PROFILE}/${seller.id}`} className="flex items-center gap-[23px]">
-          {sellerContent}
-        </Link>
-      ) : (
-        <div className="flex items-center gap-[23px]">{sellerContent}</div>
-      )}
+      <Link
+        to={`${ROUTES.SELLER_PROFILE}/${postId}`}
+        state={{ nickname: seller.nickname, profileImage: seller.profileImage }}
+        className="flex items-center gap-[23px]"
+      >
+        {sellerContent}
+      </Link>
     </div>
   );
 };

src/pages/buy/ui/BuyFilter.tsx

@@ -119,7 +119,7 @@ export const BuyFilter = ({
                 {showAllModels ? '접기' : '더보기'}
               </button>
             )}
-            <span className="typo-caption-2 mt-2 text-gray-400">시리즈 모델 포함</span>
+            <span className="typo-caption-2 mt-2 text-gray-400">* 시리즈 모델 포함</span>
           </FilterSection>
 
           <FilterSection title="가격">

src/pages/buy/ui/BuyPage.tsx

@@ -4,9 +4,8 @@ import { useBuyAutocompleteQuery } from '@shared/apis/buy';
 import { CloseIcon } from '@shared/assets/icons';
 import { ROUTES } from '@shared/constants';
 import { useDebounce } from '@shared/hooks';
-import { Card } from '@shared/ui/Card';
+import { Card, CardSkeleton } from '@shared/ui/Card';
 import { EmptyState } from '@shared/ui/EmptyState';
-import { LoadingFallback } from '@shared/ui/LoadingFallback';
 import { SearchBar } from '@shared/ui/SearchBar';
 import { cn } from '@shared/utils/cn';
 import { type KeyboardEvent, useMemo, useState } from 'react';
@@ -47,6 +46,7 @@ const BuyPage = () => {
 
   const [isSearchFocused, setIsSearchFocused] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
+  const [hasSelected, setHasSelected] = useState(false);
   const debouncedQuery = useDebounce(query.trim(), 300);
 
   const { data: suggestions = [] } = useBuyAutocompleteQuery(debouncedQuery);
@@ -59,11 +59,12 @@ const BuyPage = () => {
     return suggestions.filter((item) => item.toLowerCase().includes(normalized.toLowerCase()));
   }, [debouncedQuery, suggestions]);
 
-  const showSuggestions = isSearchFocused && filteredSuggestions.length > 0;
+  const showSuggestions = isSearchFocused && filteredSuggestions.length > 0 && !hasSelected;
 
   const selectSuggestion = (value: string) => {
     setQuery(value);
     setActiveIndex(-1);
+    setHasSelected(true);
   };
 
   const handleSearchKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
@@ -89,11 +90,7 @@ const BuyPage = () => {
     }
   };
 
-  const showEmpty = filteredItems.length === 0;
-
-  if (isLoading) {
-    return <LoadingFallback message="상품을 불러오는 중이에요." />;
-  }
+  const showEmpty = !isLoading && filteredItems.length === 0;
 
   return (
     <main className="md:px-xxxl mx-auto flex w-full max-w-[1200px] flex-col items-center gap-6 px-(--margin-l) md:gap-10 lg:gap-[68px] lg:px-0">
@@ -102,7 +99,10 @@ const BuyPage = () => {
           <SearchBar
             placeholder="어떤 제품을 찾으시나요?"
             value={query}
-            onChange={setQuery}
+            onChange={(value) => {
+              setQuery(value);
+              setHasSelected(false);
+            }}
             onSearch={() => {}}
             onFocus={() => setIsSearchFocused(true)}
             onBlur={() => setIsSearchFocused(false)}
@@ -163,17 +163,19 @@ const BuyPage = () => {
           ) : (
             <>
               <div className="lg:gap-xl grid w-full grid-cols-2 gap-4 sm:grid-cols-3 sm:gap-5 md:grid-cols-4 md:gap-6 lg:grid-cols-5">
-                {filteredItems.map((item) => (
-                  <Link key={item.id} to={`${ROUTES.BUY}/${item.id}`} className="block focus-visible:outline-none">
-                    <Card
-                      image={item.image}
-                      title={item.title}
-                      price={item.priceLabel}
-                      date={item.dateLabel}
-                      className={cn(!item.available && 'opacity-50')}
-                    />
-                  </Link>
-                ))}
+                {isLoading
+                  ? Array.from({ length: 10 }).map((_, index) => <CardSkeleton key={index} />)
+                  : filteredItems.map((item) => (
+                      <Link key={item.id} to={`${ROUTES.BUY}/${item.id}`} className="block focus-visible:outline-none">
+                        <Card
+                          image={item.image}
+                          title={item.title}
+                          price={item.priceLabel}
+                          date={item.dateLabel}
+                          className={cn(!item.available && 'opacity-50')}
+                        />
+                      </Link>
+                    ))}
               </div>
               <div ref={observerRef} className="h-10 w-full" />
             </>