Merge pull request #101 from Leets-Official/86-feat/마이페이지-API-연결

[Feat] 마이페이지 API 연동

Author: YeBeenChoi

src/pages/buy/ui/BuyFilter.tsx

@@ -15,6 +15,7 @@ const FilterSection = ({ title, children }: { title: string; children: ReactNode
 type FilterItem = {
   id: string;
   label: string;
+  [key: string]: unknown;
 };
 
 type ModelItem = FilterItem & {
@@ -36,6 +37,8 @@ export type BuyFilterProps = {
   onSetShowAllModels: (value: boolean) => void;
   onReset: () => void;
   defaultModelCount?: number;
+  availableOnly?: boolean;
+  onSetAvailableOnly?: (value: boolean) => void;
 };
 
 export const BuyFilter = ({

src/pages/mypage/model/filterTradeItems.ts

@@ -6,7 +6,7 @@ export const filterTradeItems = (items: TradeListItem[], status: StatusFilter):
     return items;
   }
   if (status === 'buying') {
-    return items.filter((item) => item.status === 'buying' || item.status === 'reserved');
+    return items.filter((item) => item.status === 'buying');
   }
   return items.filter((item) => item.status === status);
 };

src/pages/mypage/model/useMyPageState.ts

@@ -1,25 +1,180 @@
-import { BUY_ITEMS, FAVORITE_PRODUCT_ITEMS, FAVORITE_REPAIR_ITEMS, SELL_ITEMS } from '@shared/mocks/data/mypage';
-import { useState } from 'react';
+import {
+  useMyPageBuyHistoryQuery,
+  useMyPageProfileQuery,
+  useMyPageSellHistoryQuery,
+  type TradeHistoryItem,
+  type TradeHistoryQueryStatus,
+  type TradeHistoryStatus,
+} from '@shared/apis/mypage';
+import {
+  useWishlistPostListQuery,
+  useWishlistShopListQuery,
+  type WishlistPostItem,
+  type WishlistShopItem,
+} from '@shared/apis/wishlist';
+import { useCallback, useMemo, useState } from 'react';
 import { createStatusTabs } from './createStatusTabs';
 import { filterTradeItems } from './filterTradeItems';
 import type { FavoriteCategory, FavoriteTabs, MainTabId, StatusFilter } from './types';
+import type { TradeListItem } from '@pages/mypage/ui/TradeItemList';
+import type { RepairListItem } from '@shared/ui/RepairList';
+
+const formatPrice = (value: number) => `${new Intl.NumberFormat('ko-KR').format(value)}원`;
+const formatDate = (value: string) => {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}.${month}.${day}`;
+};
+
+const mapHistoryItem = (item: TradeHistoryItem, options?: { statusLabel?: string }): TradeListItem => ({
+  id: String(item.postId),
+  modelName: item.title,
+  price: formatPrice(item.price),
+  date: formatDate(item.createdAt),
+  status: item.status === 'COMPLETED' ? 'completed' : 'buying',
+  statusLabel: options?.statusLabel,
+  imageUrl: item.thumbnailUrl ?? undefined,
+});
+
+const mapWishlistPostItem = (item: WishlistPostItem, index: number): TradeListItem => {
+  const resolvedId = item.postId ?? item.id ?? `wishlist-post-${index}`;
+  return {
+    id: String(resolvedId),
+    modelName: item.title ?? '상품',
+    price: item.price !== undefined ? formatPrice(item.price) : '가격 정보 없음',
+    date: item.createdAt ? formatDate(item.createdAt) : '',
+    status: 'favorite',
+    favoriteActive: true,
+    imageUrl: item.thumbnailUrl ?? item.thumbnail ?? undefined,
+  };
+};
+
+const mapWishlistShopItem = (item: WishlistShopItem, index: number): RepairListItem => ({
+  id: `${item.shopName ?? 'shop'}-${index}`,
+  name: item.shopName ?? '수리점',
+  address: item.location ?? '',
+  favoriteActive: true,
+});
 
 export const useMyPageState = () => {
+  const { data: profileData } = useMyPageProfileQuery();
+  const { data: wishlistPosts = [] } = useWishlistPostListQuery();
+  const { data: wishlistShops = [] } = useWishlistShopListQuery();
   const [activeTab, setActiveTab] = useState<MainTabId>('buy');
   const [buyStatus, setBuyStatus] = useState<StatusFilter>('all');
   const [sellStatus, setSellStatus] = useState<StatusFilter>('all');
   const [favoriteCategory, setFavoriteCategory] = useState<FavoriteCategory>('product');
+  const [sellStatusOverrides, setSellStatusOverrides] = useState<Record<number, TradeHistoryStatus>>({});
+
+  const mapStatusToQuery = (status: StatusFilter): TradeHistoryQueryStatus => {
+    if (status === 'completed') {
+      return 'COMPLETED';
+    }
+    if (status === 'buying') {
+      return 'RESERVED';
+    }
+    return 'ALL';
+  };
+
+  const buyStatusQuery = mapStatusToQuery(buyStatus);
+  const sellStatusQuery = mapStatusToQuery(sellStatus);
+
+  const { data: buyAllHistory } = useMyPageBuyHistoryQuery('ALL');
+  const { data: sellAllHistory } = useMyPageSellHistoryQuery('ALL');
+  const { data: buyHistory } = useMyPageBuyHistoryQuery(buyStatusQuery);
+  const { data: sellHistory } = useMyPageSellHistoryQuery(sellStatusQuery);
+
+  const buyItemsForCount = useMemo(
+    () => (buyAllHistory ?? profileData?.buyList ?? []).map((item) => mapHistoryItem(item)),
+    [buyAllHistory, profileData?.buyList]
+  );
+
+  const resolveSellStatus = useCallback(
+    (item: TradeHistoryItem): TradeHistoryStatus => {
+      return sellStatusOverrides[item.postId] ?? item.status;
+    },
+    [sellStatusOverrides]
+  );
+
+  const mapSellHistoryItem = useCallback(
+    (item: TradeHistoryItem): TradeListItem => {
+      const resolvedStatus = resolveSellStatus(item);
+      const mapped = mapHistoryItem(
+        {
+          ...item,
+          status: resolvedStatus,
+        },
+        { statusLabel: resolvedStatus === 'COMPLETED' ? '판매완료' : '판매중' }
+      );
+      const uiStatus = resolvedStatus === 'COMPLETED' ? 'completed' : 'buying';
+      return {
+        ...mapped,
+        status: uiStatus,
+        statusEditable: true,
+        statusOptions: [
+          { value: 'buying', label: '판매중' },
+          { value: 'completed', label: '판매완료' },
+        ],
+        onStatusChange: (nextStatus) => {
+          const nextHistoryStatus: TradeHistoryStatus = nextStatus === 'completed' ? 'COMPLETED' : 'RESERVED';
+          setSellStatusOverrides((prev) => ({
+            ...prev,
+            [item.postId]: nextHistoryStatus,
+          }));
+        },
+      };
+    },
+    [resolveSellStatus]
+  );
+
+  const sellItemsForCount = useMemo(
+    () => (sellAllHistory ?? []).map((item) => mapSellHistoryItem(item)),
+    [sellAllHistory, mapSellHistoryItem]
+  );
+
+  const buyItems = useMemo(() => {
+    const serverItems = buyHistory ?? (buyStatusQuery === 'ALL' ? buyAllHistory : undefined);
+    if (buyStatusQuery !== 'ALL' && serverItems && serverItems.length === 0 && buyItemsForCount.length) {
+      return filterTradeItems(buyItemsForCount, buyStatus);
+    }
+    const baseItems = serverItems ?? buyAllHistory ?? profileData?.buyList ?? [];
+    return baseItems.map((item) =>
+      mapHistoryItem(item, { statusLabel: item.status === 'COMPLETED' ? '구매완료' : '구매중' })
+    );
+  }, [buyHistory, buyStatusQuery, buyAllHistory, buyItemsForCount, buyStatus, profileData?.buyList]);
+  const sellItems = useMemo(() => {
+    const serverItems = sellHistory ?? (sellStatusQuery === 'ALL' ? sellAllHistory : undefined);
+    if (sellStatusQuery !== 'ALL' && serverItems && serverItems.length === 0 && sellItemsForCount.length) {
+      return filterTradeItems(sellItemsForCount, sellStatus);
+    }
+    const baseItems = serverItems ?? sellAllHistory ?? [];
+    return baseItems.map((item) => mapSellHistoryItem(item));
+  }, [sellHistory, sellStatusQuery, sellAllHistory, sellItemsForCount, sellStatus, mapSellHistoryItem]);
+
+  const buyStatusTabs = createStatusTabs(buyItemsForCount, { buying: '구매중', completed: '구매완료' });
+  const sellStatusTabs = createStatusTabs(sellItemsForCount, { buying: '판매중', completed: '판매완료' });
 
-  const buyStatusTabs = createStatusTabs(BUY_ITEMS, { buying: '구매중', completed: '구매완료' });
-  const sellStatusTabs = createStatusTabs(SELL_ITEMS, { buying: '판매중', completed: '판매완료' });
+  const favoriteProductItems = useMemo(
+    () => wishlistPosts.map((item, index) => mapWishlistPostItem(item, index)),
+    [wishlistPosts]
+  );
+  const favoriteRepairItems = useMemo(
+    () => wishlistShops.map((item, index) => mapWishlistShopItem(item, index)),
+    [wishlistShops]
+  );
 
   const favoriteTabs: FavoriteTabs = [
-    { id: 'product', label: '상품', count: FAVORITE_PRODUCT_ITEMS.length },
-    { id: 'repair', label: '수리점', count: FAVORITE_REPAIR_ITEMS.length },
+    { id: 'product', label: '상품', count: favoriteProductItems.length },
+    { id: 'repair', label: '수리점', count: favoriteRepairItems.length },
   ];
 
-  const filteredBuyItems = filterTradeItems(BUY_ITEMS, buyStatus);
-  const filteredSellItems = filterTradeItems(SELL_ITEMS, sellStatus);
+  const filteredBuyItems = filterTradeItems(buyItems, buyStatus);
+  const filteredSellItems = filterTradeItems(sellItems, sellStatus);
 
   const currentStatusTabs = activeTab === 'buy' ? buyStatusTabs : sellStatusTabs;
   const currentStatus = activeTab === 'buy' ? buyStatus : sellStatus;
@@ -60,7 +215,10 @@ export const useMyPageState = () => {
     currentFilteredItems,
 
     // Raw data
-    favoriteProductItems: FAVORITE_PRODUCT_ITEMS,
-    favoriteRepairItems: FAVORITE_REPAIR_ITEMS,
+    profileData,
+    buyItems,
+    sellItems,
+    favoriteProductItems,
+    favoriteRepairItems,
   };
 };

src/pages/mypage/ui/AccountSettingsPage.tsx

@@ -1,18 +1,31 @@
+import { useMyPageProfileQuery } from '@shared/apis/mypage';
 import { ChevronRightIcon, PictureIcon } from '@shared/assets/icons';
 import { ROUTES } from '@shared/constants';
 import { MY_PAGE_PROFILE } from '@shared/mocks/data/mypage';
 import { Profile } from '@shared/ui/Profile';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router';
 import { PageContainer } from './PageContainer';
 import { getProfileSummary, saveProfile } from '../model/profileStorage';
 
 const AccountSettingsPage = () => {
   const navigate = useNavigate();
-  const profileSummary = getProfileSummary();
-  const [profileImage, setProfileImage] = useState(profileSummary.profileImage ?? MY_PAGE_PROFILE.profileImage);
+  const { data: profileData } = useMyPageProfileQuery();
+  const storedProfileSummary = getProfileSummary();
+  const profileSummary = {
+    nickname: profileData?.nickname ?? storedProfileSummary.nickname,
+    email: profileData?.email ?? storedProfileSummary.email,
+    profileImage: profileData?.profileImageUrl ?? storedProfileSummary.profileImage ?? MY_PAGE_PROFILE.profileImage,
+  };
+  const [profileImage, setProfileImage] = useState(profileSummary.profileImage);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
+  useEffect(() => {
+    if (profileData?.profileImageUrl) {
+      setProfileImage(profileData.profileImageUrl);
+    }
+  }, [profileData?.profileImageUrl]);
+
   const handleProfileClick = () => {
     fileInputRef.current?.click();
   };

src/pages/mypage/ui/CommonTabs.tsx

@@ -16,6 +16,7 @@ export type CommonTabsProps<TId extends string = string> = {
   countClassName: string;
   countActiveClassName: string;
   countInactiveClassName: string;
+  countColorMode?: 'active' | 'positive';
   itemClassName?: string;
 };
 
@@ -29,32 +30,38 @@ export const CommonTabs = <TId extends string>({
   countClassName,
   countActiveClassName,
   countInactiveClassName,
+  countColorMode = 'active',
   itemClassName,
 }: CommonTabsProps<TId>) => {
   return (
     <section className="mt-10">
       <h2 className="typo-title-3 text-gray-900">{title}</h2>
       <div className="mt-6 border-b border-gray-200">
         <div className={cn('items-center self-stretch', gridClassName)}>
-          {tabs.map((tab) => (
-            <button
-              key={tab.id}
-              type="button"
-              onClick={() => onChange(tab.id)}
-              className={cn(
-                'relative flex cursor-pointer flex-col items-center gap-1 pb-4 text-center transition-colors',
-                itemClassName,
-                activeId === tab.id
-                  ? 'text-gray-900 after:absolute after:-bottom-px after:left-1/2 after:h-0.5 after:w-29.5 after:-translate-x-1/2 after:bg-black'
-                  : 'text-gray-500'
-              )}
-            >
-              <span className={labelClassName}>{tab.label}</span>
-              <span className={cn(countClassName, activeId === tab.id ? countActiveClassName : countInactiveClassName)}>
-                {tab.count}
-              </span>
-            </button>
-          ))}
+          {tabs.map((tab) => {
+            const isCountHighlighted = countColorMode === 'positive' ? tab.count > 0 : activeId === tab.id;
+            return (
+              <button
+                key={tab.id}
+                type="button"
+                onClick={() => onChange(tab.id)}
+                className={cn(
+                  'relative flex cursor-pointer flex-col items-center gap-1 pb-4 text-center transition-colors',
+                  itemClassName,
+                  activeId === tab.id
+                    ? 'text-gray-900 after:absolute after:-bottom-px after:left-1/2 after:h-0.5 after:w-29.5 after:-translate-x-1/2 after:bg-black'
+                    : 'text-gray-500'
+                )}
+              >
+                <span className={labelClassName}>{tab.label}</span>
+                <span
+                  className={cn(countClassName, isCountHighlighted ? countActiveClassName : countInactiveClassName)}
+                >
+                  {tab.count}
+                </span>
+              </button>
+            );
+          })}
         </div>
       </div>
     </section>

src/pages/mypage/ui/MyPage.tsx

@@ -18,8 +18,6 @@ const MAIN_TABS: Array<MyPageTab<MainTabId>> = [
 
 const MyPage = () => {
   const navigate = useNavigate();
-  const profileSummary = getProfileSummary();
-
   const {
     activeTab,
     setActiveTab,
@@ -32,7 +30,14 @@ const MyPage = () => {
     currentFilteredItems,
     favoriteProductItems,
     favoriteRepairItems,
+    profileData,
   } = useMyPageState();
+  const fallbackProfile = getProfileSummary();
+  const profileSummary = {
+    nickname: profileData?.nickname ?? fallbackProfile.nickname,
+    email: profileData?.email ?? fallbackProfile.email,
+    profileImage: profileData?.profileImageUrl ?? fallbackProfile.profileImage,
+  };
 
   const handleRepairContact = (_item: RepairListItem) => {
     // NOTE: 수리점 연락하기 기능 연동 후 처리 예정
@@ -72,14 +77,15 @@ const MyPage = () => {
               countClassName="typo-title-3"
               countActiveClassName="text-green-700"
               countInactiveClassName="text-gray-900"
+              countColorMode="positive"
               itemClassName="lg:first:justify-self-start lg:last:justify-self-end"
             />
             {favoriteCategory === 'product' ? (
               <TradeItemList items={favoriteProductItems} emptyMessage="찜한 목록이 아직 없어요." />
             ) : (
               <RepairList
                 items={favoriteRepairItems}
-                emptyMessage="찜한 수리점이 아직 없어요."
+                emptyMessage="찜한 목록이 아직 없어요."
                 onContact={handleRepairContact}
                 onFindRoute={handleRepairFindRoute}
               />
@@ -97,6 +103,7 @@ const MyPage = () => {
               countClassName="typo-title-3"
               countActiveClassName="text-green-700"
               countInactiveClassName="text-gray-900"
+              countColorMode="positive"
               itemClassName="lg:first:justify-self-start lg:last:justify-self-end"
             />
             <TradeItemList items={currentFilteredItems} emptyMessage="선택한 조건에 해당하는 상품은 없어요." />

src/pages/mypage/ui/ProfileInfoPage.tsx

@@ -1,3 +1,4 @@
+import { useMyPageProfileQuery } from '@shared/apis/mypage';
 import { ROUTES } from '@shared/constants';
 import { useNavigate } from 'react-router';
 import { PageContainer } from './PageContainer';
@@ -6,7 +7,13 @@ import { getPersonalInfoDefaults, saveProfile } from '../model/profileStorage';
 
 const ProfileInfoPage = () => {
   const navigate = useNavigate();
-  const defaultValues = getPersonalInfoDefaults();
+  const { data: profileData } = useMyPageProfileQuery();
+  const storedDefaults = getPersonalInfoDefaults();
+  const defaultValues = {
+    ...storedDefaults,
+    nickname: profileData?.nickname ?? storedDefaults.nickname,
+    email: profileData?.email ?? storedDefaults.email,
+  };
 
   return (
     <main className="min-h-screen bg-white">