[FEAT] 마이페이지 입찰 내역, 경매 출품 내역 구현 (#117)

* feat: 카테고리 mock 데이터 세팅 * feat: 헤더 수정 및 카테고리 헤더 추가 * feat: 헤더 구현 * feat: 임시 좌측 카테고리 구현 * design: searchBar 섹션 이동 * design: chevron 방향 수정 * feat: 카테고리 ui 구현 * feat: api 연동 * chore: 불필요 파일 제거 * chore: 불필요 코드 삭제 * feat: 카테고리 api 연동 * feat: 카테고리 페이지 이동 * feat: getCategory hook 수정 * feat: 카테고리 선택시 색상 변경 * chore: 불필요 로직 필요 * fix: 카테고리 전체보기시 url 수정 * fix: lint 수정 * fix: tsc error * feat: mock 데이터 연결 * fix: 코드 리뷰 반영 * fix: env 파일 재정의 * feat: 베너 로고 파비콘 수정 * feat: 입찰 내역 Collapsible추가 * chore: 링크 수정 * feat: 거래내역 입찰 내역 구현 * chore: 키워드 임시 삭제 * feat: 마이페이지 경매올린 상품 입찰 건 상품 list 렌더링 및 없을 떄 컴포넌트 구현 * fix: button 섹션 수정 * fix: lint 에러 수정 * fix: type 에러 수정 * fix: QA 반영 * fix: tsc 수정
Kernel360 · Nov 19, 2024 · d13aa13 · d13aa13
1 parent e4240a8
commit d13aa13
Show file tree

Hide file tree

Showing 38 changed files with 725 additions and 383 deletions.
diff --git a/src/apis/queryFunctions/User.ts b/src/apis/queryFunctions/User.ts
@@ -4,6 +4,9 @@ import {
   PatchPasswordParams,
   PatchProfileImageResponseData,
   UserResponseData,
+  BidAuctionHistoriesData,
+  BidAuctionHistoriesUnitData,
+  AuctionHistoriesData,
 } from '@/apis/types/User';
 import { ListParams, ListResponse, Response } from '@/apis/types/common';
 
@@ -27,7 +30,25 @@ export const patchPassword = async (param: PatchPasswordParams) => {
   return response.data;
 };
 
-// 찜 목록
+export const getBidAuctionHistories = async () => {
+  const response =
+    await apiClient.get<Response<ListResponse<BidAuctionHistoriesData[]>>>('/v2/auctions/bid/me');
+  return response.data;
+};
+
+export const getBidAuctionHistoriesUnit = async (auctionId: number | null) => {
+  const response = await apiClient.get<Response<ListResponse<BidAuctionHistoriesUnitData[]>>>(
+    `/v2/bids/me/${auctionId}`,
+  );
+  return response.data;
+};
+
+export const getAuctionHistories = async () => {
+  const response =
+    await apiClient.get<Response<ListResponse<AuctionHistoriesData[]>>>('/v2/auctions/me');
+  return response.data;
+};
+
 export const getAuctionLikeList = async (param: ListParams) => {
   const response = await apiClient.get<Response<ListResponse<GetAuctionLikeData[]>>>(
     `/v2/auctions/likes`,

diff --git a/src/apis/queryHooks/User/useGetAuctionHistories.ts b/src/apis/queryHooks/User/useGetAuctionHistories.ts
@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getAuctionHistories } from '@/apis/queryFunctions/User';
+
+function useGetAuctionHistories() {
+  const { data } = useQuery({
+    queryKey: ['getAuctionHistories'],
+    queryFn: () => getAuctionHistories(),
+  });
+
+  return { data: data?.result_data };
+}
+
+export default useGetAuctionHistories;
diff --git a/src/apis/queryHooks/User/useGetBidAuctionHistories.ts b/src/apis/queryHooks/User/useGetBidAuctionHistories.ts
@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getBidAuctionHistories } from '@/apis/queryFunctions/User';
+
+function useGetBidAuctionHistories() {
+  const { data } = useQuery({
+    queryKey: ['bidAuctionHistories'],
+    queryFn: () => getBidAuctionHistories(),
+  });
+
+  return { data: data?.result_data };
+}
+
+export default useGetBidAuctionHistories;
diff --git a/src/apis/queryHooks/User/useGetBidAuctionHistoriesUnit.ts b/src/apis/queryHooks/User/useGetBidAuctionHistoriesUnit.ts
@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getBidAuctionHistoriesUnit } from '@/apis/queryFunctions/User';
+
+function useGetBidAuctionHistoriesUnit(auctionId: number | null) {
+  const { data } = useQuery({
+    queryKey: ['bidAuctionHistories', auctionId],
+    queryFn: () => getBidAuctionHistoriesUnit(auctionId),
+    enabled: !!auctionId,
+  });
+
+  return { data: data?.result_data };
+}
+
+export default useGetBidAuctionHistoriesUnit;
diff --git a/src/apis/queryHooks/basicAuction/usePostBasicAuctionBid.ts b/src/apis/queryHooks/basicAuction/usePostBasicAuctionBid.ts
@@ -18,6 +18,7 @@ function usePostBasicAuctionBid() {
       queryClient.invalidateQueries({ queryKey: ['basicAuctionList'] });
       queryClient.invalidateQueries({ queryKey: ['basicAuctionBidList', params.id] });
       queryClient.invalidateQueries({ queryKey: ['nowPrice', params.id] });
+      queryClient.invalidateQueries({ queryKey: ['bidAuctionHistories'] });
       showToast('success', '입찰에 성공했습니다.');
     },
     onError: (e: AxiosError<Response<string>>, params) => {

diff --git a/src/apis/types/User.ts b/src/apis/types/User.ts
@@ -32,3 +32,25 @@ export interface GetAuctionLikeData {
   created_at: string;
   liked_date: string;
 }
+
+export interface BidAuctionHistoriesData {
+  auction_id: number;
+  title: string;
+  auction_status: string;
+  thumbnail_path: string;
+  bid_status: string;
+}
+
+export interface BidAuctionHistoriesUnitData {
+  bid_price: number;
+  created_at: string;
+}
+
+export interface AuctionHistoriesData {
+  auction_id: number;
+  title: string;
+  auction_status: string;
+  now_price: number | null;
+  end_date: string;
+  thumbnail_path: string;
+}
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/icon.ico b/src/app/icon.ico
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -25,10 +25,10 @@ const roboto = Roboto({
 });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Omocha',
+  description: 'Hello, Omocha!',
   icons: {
-    icon: './favicon.ico',
+    icon: './icon.ico',
   },
 };
 

diff --git a/src/app/mypage/record/components/BasicBid.css.ts b/src/app/mypage/record/components/BasicBid.css.ts
@@ -1,4 +1,6 @@
-import { style, globalStyle, styleVariants } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
+
+import colors from '@/styles/color';
 
 export const basicBid = style({
   display: 'flex',
@@ -9,74 +11,27 @@ export const basicBid = style({
   borderRadius: '8px',
 });
 
-export const list = style({
-  display: 'flex',
-  gap: '15px',
-  cursor: 'pointer',
-  padding: '20px 10px',
-  transition: 'background-color 0.3s, transform 0.2s',
-  borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
-  ':hover': {
-    transform: 'scale(1.02)',
-  },
-});
-
-globalStyle(`${list}:nth-last-child(1)`, {
-  borderBottom: 'none',
-});
-
-export const image = style({
-  width: '200px',
-  height: 'auto',
-  borderRadius: '4px',
-  boxShadow: '0 1px 4px rgba(0, 0, 0, 0.1)',
-});
-
-export const listRight = style({
+export const noListWrapper = style({
   display: 'flex',
   flexDirection: 'column',
+  alignItems: 'center',
   justifyContent: 'center',
-  gap: '10px',
-  listStyle: 'none',
-  margin: '15px 0',
+  gap: '20px',
+  marginTop: '70px',
 });
 
-export const listName = style({
-  display: 'inline-block',
-  fontSize: '14px',
-  width: '60px',
-  textAlign: 'end',
-  marginRight: '10px',
-  fontWeight: '600',
-});
+export const noListTitle = style({ fontSize: '16px', fontWeight: '500', color: colors.gray10 });
 
-export const listValue = style({
-  fontWeight: '500',
+export const noListButton = style({
+  padding: '10px 20px',
+  backgroundColor: colors.primary9,
+  color: colors.white,
+  borderRadius: '8px',
+  fontSize: '14px',
+  cursor: 'pointer',
 });
 
-export const bidStatus = styleVariants({
-  default: [
-    listValue,
-    {
-      color: 'black',
-    },
-  ],
-  bidding: [
-    listValue,
-    {
-      color: 'red',
-    },
-  ],
-  concluded: [
-    listValue,
-    {
-      color: 'rgb(35, 167, 80)',
-    },
-  ],
-  defeat: [
-    listValue,
-    {
-      color: 'rgb(95, 99, 104)',
-    },
-  ],
+export const collapsibleTrigger = style({
+  width: '100%',
+  cursor: 'pointer',
 });
diff --git a/src/app/mypage/record/components/BasicBidAuction.css.ts b/src/app/mypage/record/components/BasicBidAuction.css.ts
@@ -0,0 +1,127 @@
+import { style, globalStyle, styleVariants, keyframes } from '@vanilla-extract/css';
+
+import colors from '@/styles/color';
+
+export const list = style({
+  position: 'relative',
+  display: 'flex',
+  gap: '15px',
+  cursor: 'pointer',
+  padding: '20px 10px',
+  transition: 'background-color 0.3s, transform 0.2s',
+  borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
+  ':hover': {
+    transform: 'scale(1.02)',
+  },
+});
+
+const blinkAnimation = keyframes({
+  '0%': { opacity: 1 },
+  '50%': { opacity: 0.3 },
+  '100%': { opacity: 1 },
+});
+
+export const bidding = style({
+  fontSize: '12px',
+  position: 'absolute',
+  padding: '5px 10px',
+  borderRadius: '20px',
+  border: '1.5px solid red',
+  right: '30px',
+  top: '20px',
+  animation: `${blinkAnimation} 1.5s ease-in-out infinite`,
+});
+
+globalStyle(`${list}:nth-last-child(1)`, {
+  borderBottom: 'none',
+});
+
+export const image = style({
+  maxWidth: '120px',
+  width: '100%',
+  maxHeight: '120px',
+  height: '100%',
+  objectFit: 'contain',
+  borderRadius: '4px',
+  boxShadow: '0 1px 4px rgba(0, 0, 0, 0.1)',
+});
+
+export const listRight = style({
+  display: 'flex',
+  width: '100%',
+  flexDirection: 'column',
+  alignItems: 'baseline',
+  gap: '10px',
+  listStyle: 'none',
+});
+
+export const bidTitle = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '140px',
+  fontSize: '15px',
+  padding: '5px 10px',
+  borderRadius: '4px',
+  border: `1px solid ${colors.gray7} `,
+  cursor: 'pointer',
+});
+
+export const listName = style({
+  fontSize: '14px',
+  width: '70px',
+  marginRight: '10px',
+  fontWeight: '600',
+});
+
+export const listValue = style({
+  fontWeight: '500',
+});
+
+export const bidStatus = styleVariants({
+  default: [
+    listValue,
+    {
+      color: 'black',
+    },
+  ],
+  bidding: [
+    listValue,
+    {
+      color: 'red',
+    },
+  ],
+  concluded: [
+    listValue,
+    {
+      color: 'rgb(35, 167, 80)',
+    },
+  ],
+  defeat: [
+    listValue,
+    {
+      color: 'rgb(95, 99, 104)',
+    },
+  ],
+});
+
+export const myBidStatus = styleVariants({
+  default: [
+    listValue,
+    {
+      color: 'black',
+    },
+  ],
+  concluded: [
+    listValue,
+    {
+      color: 'rgb(35, 167, 80)',
+    },
+  ],
+  defeat: [
+    listValue,
+    {
+      color: 'rgb(95, 99, 104)',
+    },
+  ],
+});