feat: 나의 판매 내역 완성

Author: jw0202058

src/features/home/components/ItemCard/index.tsx

@@ -6,9 +6,10 @@ import type { ItemInterface } from '@/features/home/types';
 import ItemTokenList from '@/common/components/ItemTokenList';
 import PriceToken from '@/features/home/components/ItemCard/PriceToken';
 import getImageUrl from '@/common/utils/getImageUrl';
+import type { UserItemInterface } from '@/features/myTrade/types';
 
 interface Props {
-  data: ItemInterface;
+  data: ItemInterface | UserItemInterface;
 }
 const ItemCard = ({ data }: Props) => {
   const isRental = data.transactionTypes.includes('RENTAL');

src/features/myTrade/apis/useGetUserItem.ts

@@ -0,0 +1,25 @@
+import client from '@/common/utils/client';
+import { useQuery } from '@tanstack/react-query';
+import { QUERY_KEYS } from '@/libs/queryKeys';
+import type { UserItemInterface } from '../types';
+
+export interface UserItemResponse {
+  message: string;
+  data: UserItemInterface[];
+}
+
+const getUserItem = async (userId: number) => {
+  const res = await client.get<UserItemResponse>(`/api/v1/user/${userId}/item`);
+
+  console.log(res);
+
+  return res.data.data;
+};
+
+export const useGetUserItem = (userId: number) => {
+  return useQuery({
+    queryKey: [QUERY_KEYS.USER_ITEM_LIST, userId],
+    queryFn: () => getUserItem(userId),
+    staleTime: 0,
+  });
+};

src/features/myTrade/components/myTradeItemList/index.tsx

@@ -0,0 +1,39 @@
+import NoResult from '@/common/components/NoResult';
+import ItemCard from '@/features/home/components/ItemCard';
+
+import * as s from './style.css';
+import { useGetUserItem } from '../../apis/useGetUserItem';
+import { useNavigate } from 'react-router';
+import NotFoundPage from '@/pages/NotFoundPage';
+import Btn from '@/common/components/Button';
+
+interface Props {
+  userId: number;
+}
+
+const UserItemList = ({ userId }: Props) => {
+  const { data: userItems, isSuccess, isLoading } = useGetUserItem(userId);
+  const navigate = useNavigate();
+
+  if (isLoading) return null;
+  if (!userItems) return <NotFoundPage />;
+
+  const isEmpty = isSuccess && userItems.length === 0;
+
+  return (
+    <div className={s.Content({ isEmpty })}>
+      {isEmpty ? (
+        <div className={s.NoResult}>
+          <NoResult type="like" />
+          <Btn mode="main" className={s.Button} onClick={() => navigate('/')}>
+            홈으로 돌아가기
+          </Btn>
+        </div>
+      ) : (
+        userItems.map(item => <ItemCard key={item.itemId} data={item} />)
+      )}
+    </div>
+  );
+};
+
+export default UserItemList;

src/features/myTrade/components/myTradeItemList/style.css.ts

@@ -0,0 +1,55 @@
+import { css, cva } from '@styled-system/css';
+
+export const Container = cva({
+  base: {
+    display: 'flex',
+    flexDir: 'column',
+    gap: '1rem',
+  },
+  variants: {
+    isEmpty: {
+      true: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100%',
+      },
+    },
+  },
+});
+
+export const Wrapper = css({
+  display: 'flex',
+  flexDir: 'column',
+  flex: 1,
+  h: '100%',
+});
+
+export const NoResult = css({
+  display: 'flex',
+  flexDir: 'column',
+  gap: '1rem',
+  alignItems: 'center',
+});
+
+export const Content = cva({
+  base: {
+    display: 'flex',
+    flexDir: 'column',
+    p: '1rem',
+    overflowY: 'auto',
+    gap: '1rem',
+  },
+  variants: {
+    isEmpty: {
+      true: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100%',
+      },
+    },
+  },
+});
+
+export const Button = css({
+  width: '17rem',
+});

src/features/myTrade/types.ts

@@ -0,0 +1,20 @@
+import type { Color, ProductType, Quality, Size, TradeMethods, TransactionType } from '@/libs/types/item';
+
+export interface UserItemInterface {
+  itemId: number;
+  productTypes: ProductType[];
+  transactionTypes: TransactionType[];
+  thumbnail: string;
+  title: string;
+  rentalFee: number;
+  salePrice: number;
+  deposit: number;
+  size: Size;
+  color: Color;
+  quality: Quality;
+  tradeMethods: TradeMethods[];
+  likeCount: number;
+  chatRoomCount: number;
+  repostDate: string;
+  isSold: boolean;
+}

src/libs/queryKeys.ts

@@ -9,6 +9,7 @@ export const QUERY_KEYS = {
   ITEM_COUNT: 'item-count', // 상품 검색 결과 개수
   ITEM_CHAT_LIST: 'item-chat', // 특정 아이템에 대한 채팅 리스트
   LIKE_LIST: 'like', // 내 좋아요 목록
+  USER_ITEM_LIST: 'user-item-list', // 특정 유저의 아이템 리스트
   USER: 'user', // 내 정보
   PICK_DETAIL: 'pick', // 특정 id에 해당하는 약속 상세
   APPOINTMENT_LIST: 'pick-list', // 나의 픽 페이지 리스트

src/pages/MyItemPage/index.tsx

@@ -0,0 +1,25 @@
+import CustomHeader from '@/common/components/CustomHeader';
+import SafeArea from '@/common/components/SafeArea';
+import { useGetUser } from '@/features/my/apis/useGetUser';
+import UserItemList from '@/features/myTrade/components/myTradeItemList';
+import { useNavigate } from 'react-router';
+import NotFoundPage from '../NotFoundPage';
+import * as s from './style.css';
+
+const MyItemPage = () => {
+  const navigate = useNavigate();
+  const { data: getUser } = useGetUser();
+
+  if (!getUser) return <NotFoundPage />;
+
+  return (
+    <SafeArea>
+      <CustomHeader onClick={() => navigate(-1)} title="나의 판매 내역" />
+      <div className={s.Wrapper}>
+        <UserItemList userId={getUser?.id} />
+      </div>
+    </SafeArea>
+  );
+};
+
+export default MyItemPage;

src/pages/MyItemPage/style.css.ts

@@ -0,0 +1,7 @@
+import { css } from '@styled-system/css';
+
+export const Wrapper = css({
+  display: 'flex',
+  flex: 1,
+  height: 'calc(100% - {sizes.HEADER_HEIGHT})',
+});