Merge pull request #199 from DevKor-github/feat/#169/my-trade

feat: 프로필 이미지 수정

Author: jw0202058

src/common/components/UserProfileImage/index.tsx

@@ -6,10 +6,11 @@ interface Props {
   src: string | null;
   nickname: string;
   isMyEdit?: boolean;
+  isEdited?: boolean;
 }
 
-export const UserProfileImage = ({ src, nickname, isMyEdit }: Props) => {
-  const cn = isMyEdit ? s.MyProfileEditImage : s.ProfileImage;
+export const UserProfileImage = ({ src, nickname, isMyEdit, isEdited }: Props) => {
+  const cn = isMyEdit ? s.MyProfileEditImage({ isImgEdited: isEdited }) : s.ProfileImage;
   const profileImage = src ? getImageUrl(src) : defaultImg;
 
   return <img className={cn} src={profileImage} alt={nickname} />;

src/common/components/UserProfileImage/style.css.ts

@@ -1,4 +1,4 @@
-import { css } from '@styled-system/css';
+import { css, cva } from '@styled-system/css';
 
 export const ProfileImage = css({
   w: '2.625rem',
@@ -11,13 +11,23 @@ export const ProfileImage = css({
   objectFit: 'cover',
 });
 
-export const MyProfileEditImage = css({
-  borderRadius: 'full',
-  display: 'block',
-  w: '7.5rem',
-  h: '7.5rem',
-  flexShrink: 0,
-  aspectRatio: '1/1',
-  bg: 'systemGray4',
-  objectFit: 'cover',
+export const MyProfileEditImage = cva({
+  base: {
+    borderRadius: 'full',
+    display: 'block',
+    w: '7.5rem',
+    h: '7.5rem',
+    flexShrink: 0,
+    aspectRatio: '1/1',
+    bg: 'systemGray4',
+    objectFit: 'cover',
+    border: '1px solid #2C2C2E',
+  },
+  variants: {
+    isImgEdited: {
+      true: {
+        // 피그마 답변 받고 수정
+      },
+    },
+  },
 });

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/my/components/MyTrade/index.tsx

@@ -46,10 +46,8 @@ const MyTrade = () => {
       <div className={s.Title}>나의 거래</div>
       <div className={s.Menu}>
         <Menu Icon="mgc_heart_fill" Title="관심 목록" Addr="/liked" />
+        <Menu Icon="mgc_shopping_bag_1_fill" Title="나의 판매 내역" Addr="/my-trade" />
         <Menu Icon="mgc_exit_fill" Title="로그아웃" Addr="/my-trade" />
-        {/* TODO: api 나오면 달아주기 */}
-        {/* <Menu Icon="mgc_document_fill" Title="최근 본 게시물" Addr="/recent" /> */}
-        {/* <Menu Icon="mgc_shopping_bag_1_fill" Title="나의 판매 내역" Addr="/my-trade" /> */}
       </div>
     </div>
   );

src/features/myEdit/components/MyEditContent/index.tsx

@@ -11,9 +11,10 @@ interface Props {
   setFile: (value: File) => void;
   profileImageUrl: string | null;
   isNicknameEdited: boolean;
+  isImgEdited: boolean;
 }
 
-const MyEditContent = ({ nickname, setNickname, isNicknameEdited, setFile, profileImageUrl }: Props) => {
+const MyEditContent = ({ nickname, setNickname, isNicknameEdited, setFile, profileImageUrl, isImgEdited }: Props) => {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const [src, setSrc] = useState<string | null>(profileImageUrl);
 
@@ -32,7 +33,7 @@ const MyEditContent = ({ nickname, setNickname, isNicknameEdited, setFile, profi
   return (
     <div className={s.Wrapper}>
       <div className={s.EditImage} onClick={onClickCamera}>
-        <UserProfileImage nickname={nickname} src={src} isMyEdit />
+        <UserProfileImage nickname={nickname} src={src} isMyEdit isEdited={isImgEdited} />
         <div className={cx('mgc_camera_2_fill', s.SelectPhoto)} />
       </div>
 

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', // 나의 픽 페이지 리스트