diff --git a/src/@types/Auction.d.ts b/src/@types/Auction.d.ts deleted file mode 100644 index a93f326d..00000000 --- a/src/@types/Auction.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -declare module 'Auction' { - export interface Auction { - id: number; - name: string; - minPrice: number; - cdnPath: string; - } - export interface PreRegisterAuction extends Auction { - likeCount: number; - } - export interface RegisterAuction extends Auction { - participantCount: number; - timeRemaining: number; - } - export interface AuctionDetails extends RegisterAuction { - isParticipating: boolean; - bidAmount: number; - remainingBidCount: number; - } -} diff --git a/src/@types/AuctionDetails.d.ts b/src/@types/AuctionDetails.d.ts new file mode 100644 index 00000000..6f60dc6d --- /dev/null +++ b/src/@types/AuctionDetails.d.ts @@ -0,0 +1,27 @@ +declare module 'AuctionDetails' { + export interface IAuctionDetailsBase { + productId: number; + sellerName: string; + description: string; + productName: string; + minPrice: number; + imageList: string[]; + } + + export interface IAuctionDetails extends IAuctionDetailsBase { + timeRemaining: number; + status: string; + isSeller: boolean; + participantCount: number; + isParticipating: boolean; + bidId: number | null; + bidAmount: number; + remainingBidCount: number; + } + + export interface IPreAuctionDetails extends IAuctionDetailsBase { + createdAt: string; + likeCount: number; + isLiked: boolean; + } +} diff --git a/src/@types/AuctionItem.d.ts b/src/@types/AuctionItem.d.ts new file mode 100644 index 00000000..8579148f --- /dev/null +++ b/src/@types/AuctionItem.d.ts @@ -0,0 +1,39 @@ +declare module 'AuctionItem' { + export interface IAuctionItemBase { + id: number; + name: string; + minPrice: number; + cdnPath: string; + } + + export interface IPreAuctionItem extends IAuctionItemBase { + likeCount: number; + isLiked: boolean; + } + + export interface IPreAuctionRegisteredItem extends IPreAuctionItem { + createdAt: string; + } + + export interface IAuctionItem extends IAuctionItemBase { + participantCount: number; + timeRemaining: number; + isParticipating: boolean; + } + export interface IAuctionRegisteredItem extends IAuctionItem { + status: string; + createdAt: string; + } + + export interface IUserAuctionWonItem extends IAuctionItemBase { + endDateTime: string; + winningBid: number; + } + + export interface IUserAuctionLostItem extends IAuctionItemBase { + endDateTime: string; + highestBid: number; + } + + export interface IUserAuctionHistoryItem extends Omit {} +} diff --git a/src/@types/Register.d.ts b/src/@types/Register.d.ts index a6b17779..9a77d264 100644 --- a/src/@types/Register.d.ts +++ b/src/@types/Register.d.ts @@ -1,5 +1,5 @@ declare module 'Register' { - export interface RegisterType { + export interface IRegister { productName: string; description: string; minPrice: number; diff --git a/src/@types/myAuctionData.d.ts b/src/@types/myAuctionData.d.ts index 4a9fa0f4..ac426f54 100644 --- a/src/@types/myAuctionData.d.ts +++ b/src/@types/myAuctionData.d.ts @@ -1,7 +1,7 @@ -import type { Auction } from 'Auction'; +import type { IAuctionItemBase } from 'AuctionItem'; // 개별 제품의 인터페이스 -export interface AuctionItem extends Auction { +export interface AuctionItem extends IAuctionItemBase { status: string; createdAt: string; } diff --git a/src/@types/productList.d.ts b/src/@types/productList.d.ts index 2208cea4..02c2d9bc 100644 --- a/src/@types/productList.d.ts +++ b/src/@types/productList.d.ts @@ -1,3 +1,13 @@ +import type { + IAuctionItem, + IAuctionRegisteredItem, + IPreAuctionItem, + IPreAuctionRegisteredItem, + IUserAuctionHistoryItem, + IUserAuctionLostItem, + IUserAuctionWonItem, +} from 'AuctionItem'; + // 기본적인 페이지네이션 데이터를 위한 인터페이스 export interface PaginationData { hasNext: boolean; @@ -9,62 +19,10 @@ export interface PaginationData { last: boolean; } -// 공통된 리스트 아이템 인터페이스 -export interface AuctionListItem { - id: number; - name: string; - cdnPath: string | null; - minPrice: number; -} - -// 진행중인 경매 목록 -export interface OngoingAuctionListItem extends AuctionListItem { - timeRemaining: number; - participantCount: number; - isParticipating: boolean; -} - -// 사전 경매 목록 -export interface PreEnrollProductListItem extends AuctionListItem { - likeCount: number; - isLiked: boolean; -} - -// 정식 등록 경매 -export interface OngoingAuctionRegisterdItem extends OngoingAuctionListItem { - status: string; - createdAt: string; -} - -// 사전 등록 경매 -export interface PreEnrollProductRegisteredItem - extends PreEnrollProductListItem { - createdAt: string; -} - -// 참여 성공한 경매 -export interface MyWonAuctionListItem extends AuctionListItem { - endDateTime: string; - winningBid: number; -} - -export interface MyLostAuctionListItem extends AuctionListItem { - endDateTime: string; - highestBid: number; -} - -// 참여 경매 목록 -export interface MyHistoryAuctionListItem extends AuctionListItem { - timeRemaining: number; - participantCount: number; -} - -export type OngoingAuctionListData = PaginationData; -export type PreEnrollProductListData = PaginationData; -export type OngoingAuctionRegisteredData = - PaginationData; -export type PreEnrollProductRegisteredData = - PaginationData; -export type MyWonAuctionListData = PaginationData; -export type MyHistoryAuctionListData = PaginationData; -export type MyLostAuctionListData = PaginationData; +export type OngoingAuctionListData = PaginationData; +export type PreEnrollProductListData = PaginationData; +export type OngoingAuctionRegisteredData = PaginationData; +export type PreEnrollProductRegisteredData = PaginationData; +export type MyWonAuctionListData = PaginationData; +export type MyHistoryAuctionListData = PaginationData; +export type MyLostAuctionListData = PaginationData; diff --git a/src/components/bid/Bid.test.tsx b/src/components/bid/Bid.test.tsx index 6c5c5fb5..2081d016 100644 --- a/src/components/bid/Bid.test.tsx +++ b/src/components/bid/Bid.test.tsx @@ -18,7 +18,7 @@ vi.mocked(useGetAuctionDetails).mockReturnValue({ isParticipating: false, isSeller: false, minPrice: 23000, - name: 'qwer 미니 2집', + productName: 'qwer 미니 2집', participantCount: 4, productId: 14, remainingBidCount: 0, diff --git a/src/components/bid/EditBid.test.tsx b/src/components/bid/EditBid.test.tsx index 407153b6..15cdf1f6 100644 --- a/src/components/bid/EditBid.test.tsx +++ b/src/components/bid/EditBid.test.tsx @@ -18,7 +18,7 @@ vi.mocked(useGetAuctionDetails).mockReturnValue({ isParticipating: false, isSeller: false, minPrice: 23000, - name: 'qwer 미니 2집', + productName: 'qwer 미니 2집', participantCount: 4, productId: 14, remainingBidCount: 0, diff --git a/src/components/details/AuctionItem.tsx b/src/components/details/AuctionItem.tsx deleted file mode 100644 index 29da0cee..00000000 --- a/src/components/details/AuctionItem.tsx +++ /dev/null @@ -1,28 +0,0 @@ -export interface AuctionItem { - productId: number; - sellerName: string; - name: string; - description: string; - minPrice: number; - timeRemaining: number; - status: string; - isSeller: boolean; - participantCount: number; - isParticipating: boolean; - bidId: number | null; - bidAmount: number; - remainingBidCount: number; - imageList: string[]; -} - -export interface PreAuctionItem { - productId: number; - productName: string; - sellerName: string; - minPrice: number; - createdAt: string; - description: string; - likeCount: number; - isLiked: boolean; - imageUrls: string[]; -} diff --git a/src/components/details/queries.ts b/src/components/details/queries.ts index d92a8054..168b1c09 100644 --- a/src/components/details/queries.ts +++ b/src/components/details/queries.ts @@ -1,18 +1,18 @@ import { API_END_POINT } from '@/constants/api'; -import { AuctionItem } from './AuctionItem'; import { httpClient } from '@/api/axios'; import { queryKeys } from '@/constants/queryKeys'; import { useSuspenseQuery } from '@tanstack/react-query'; +import { IAuctionDetails } from 'AuctionDetails'; export const useGetAuctionDetails = (auctionId: number) => { - const getAuctionDetails = async (): Promise => { + const getAuctionDetails = async (): Promise => { const response = await httpClient.get(`${API_END_POINT.AUCTIONS}/${auctionId}`); return response.data; }; const { data: auctionDetails } = useSuspenseQuery({ - queryKey: [queryKeys.DETAILS, auctionId], + queryKey: [queryKeys.AUCTION_DETAILS, auctionId], queryFn: getAuctionDetails, }); diff --git a/src/components/heart/queries.ts b/src/components/heart/queries.ts index 96de80e3..e7515b36 100644 --- a/src/components/heart/queries.ts +++ b/src/components/heart/queries.ts @@ -1,12 +1,12 @@ import { UseMutateFunction, useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'; import { API_END_POINT } from '@/constants/api'; +import type { IPreAuctionItem } from 'AuctionItem'; import { httpClient } from '@/api/axios'; import { queryKeys } from '@/constants/queryKeys'; -import { PreRegisterAuction } from 'Auction'; export const useGetPreRegisterHeart = () => { - const getPreRegisterHeart = async (): Promise => { + const getPreRegisterHeart = async (): Promise => { const response = await httpClient.get(`${API_END_POINT.PRE_REGISTER}/history`); return response.data.items; @@ -21,7 +21,7 @@ export const useGetPreRegisterHeart = () => { }; export const useDeletePreRegisterHeart = (): { - mutate: UseMutateFunction; + mutate: UseMutateFunction; } => { const queryClient = useQueryClient(); const deletePreRegisterHeart = async (id: number) => { @@ -31,7 +31,7 @@ export const useDeletePreRegisterHeart = (): { const { mutate } = useMutation({ mutationFn: deletePreRegisterHeart, - onSuccess: (data: PreRegisterAuction[]) => { + onSuccess: (data: IPreAuctionItem[]) => { queryClient.setQueryData([queryKeys.PRE_REGISTER_HEART], data); queryClient.invalidateQueries({ queryKey: [queryKeys.PRE_REGISTER_HEART], diff --git a/src/components/home/HomeAuctionItem.tsx b/src/components/home/HomeAuctionItem.tsx index bebabf89..91aabd88 100644 --- a/src/components/home/HomeAuctionItem.tsx +++ b/src/components/home/HomeAuctionItem.tsx @@ -1,4 +1,4 @@ -import type { PreRegisterAuction, RegisterAuction } from 'Auction'; +import type { IAuctionItem, IPreAuctionItem } from 'AuctionItem'; import LikeCount from '../common/atomic/LikeCount'; import MinPrice from '../common/atomic/MinPrice'; @@ -7,9 +7,7 @@ import TimeLabel from '../common/atomic/TimeLabel'; import { truncateText } from '@/utils/truncateText'; import { useNavigate } from 'react-router-dom'; -type HomeAuctionItemProps = T extends 'pre-register' - ? { kind: 'pre-register'; auction: PreRegisterAuction } - : { kind: 'register'; auction: RegisterAuction }; +type HomeAuctionItemProps = T extends 'pre-register' ? { kind: 'pre-register'; auction: IPreAuctionItem } : { kind: 'register'; auction: IAuctionItem }; const HomeAuctionItem = ({ kind, auction }: HomeAuctionItemProps) => { const navigate = useNavigate(); diff --git a/src/components/home/queries.ts b/src/components/home/queries.ts index 74a9d2d0..f864915c 100644 --- a/src/components/home/queries.ts +++ b/src/components/home/queries.ts @@ -1,19 +1,20 @@ -import type { PreRegisterAuction, RegisterAuction } from 'Auction'; -import { useSuspenseQueries } from '@tanstack/react-query'; +import type { IAuctionItem, IPreAuctionItem } from 'AuctionItem'; + import { API_END_POINT } from '@/constants/api'; import { httpClient } from '@/api/axios'; import { queryKeys } from '@/constants/queryKeys'; +import { useSuspenseQueries } from '@tanstack/react-query'; export const useGetHomeAuctions = () => { - const getBestAuctions = async (): Promise => { + const getBestAuctions = async (): Promise => { const response = await httpClient.get(`${API_END_POINT.BEST}`); return response.data; }; - const getImminentAuctions = async (): Promise => { + const getImminentAuctions = async (): Promise => { const response = await httpClient.get(`${API_END_POINT.IMMINENT}`); return response.data; }; - const getPreRegisterAuctions = async (): Promise => { + const getPreRegisterAuctions = async (): Promise => { const response = await httpClient.get(`${API_END_POINT.PRE_REGISTER}`); return response.data.items; }; diff --git a/src/components/order/OrderHistoryProduct.tsx b/src/components/order/OrderHistoryProduct.tsx index e836434d..303acb8c 100644 --- a/src/components/order/OrderHistoryProduct.tsx +++ b/src/components/order/OrderHistoryProduct.tsx @@ -1,9 +1,9 @@ -import { MyHistoryAuctionListItem } from '@/@types/productList'; -import { LuUsers } from 'react-icons/lu'; +import type { IUserAuctionHistoryItem } from 'AuctionItem'; import { IoPricetagsOutline } from 'react-icons/io5'; +import { LuUsers } from 'react-icons/lu'; import ProductItem from '../common/item/ProductItem'; -const OrderHistoryProduct = ({ product }: { product: MyHistoryAuctionListItem }) => { +const OrderHistoryProduct = ({ product }: { product: IUserAuctionHistoryItem }) => { return (
diff --git a/src/components/order/OrderLostProduct.tsx b/src/components/order/OrderLostProduct.tsx index c5f24342..bcc52825 100644 --- a/src/components/order/OrderLostProduct.tsx +++ b/src/components/order/OrderLostProduct.tsx @@ -1,9 +1,9 @@ -import { MyLostAuctionListItem } from '@/@types/productList'; +import type { IUserAuctionLostItem } from 'AuctionItem'; import { IoPricetagsOutline } from 'react-icons/io5'; import { LuUsers } from 'react-icons/lu'; import ProductItem from '../common/item/ProductItem'; -const OrderLostProduct = ({ product }: { product: MyLostAuctionListItem }) => { +const OrderLostProduct = ({ product }: { product: IUserAuctionLostItem }) => { return (
diff --git a/src/components/order/OrderWonProduct.tsx b/src/components/order/OrderWonProduct.tsx index 5526a9bf..63124b20 100644 --- a/src/components/order/OrderWonProduct.tsx +++ b/src/components/order/OrderWonProduct.tsx @@ -1,9 +1,9 @@ -import { MyWonAuctionListItem } from '@/@types/productList'; +import type { IUserAuctionWonItem } from 'AuctionItem'; import { IoPricetagsOutline } from 'react-icons/io5'; import { LuUsers } from 'react-icons/lu'; import ProductItem from '../common/item/ProductItem'; -const OrderWonProduct = ({ product }: { product: MyWonAuctionListItem }) => { +const OrderWonProduct = ({ product }: { product: IUserAuctionWonItem }) => { return (
diff --git a/src/components/productList/OngoingProduct.tsx b/src/components/productList/OngoingProduct.tsx index 4147e68d..8d6b1332 100644 --- a/src/components/productList/OngoingProduct.tsx +++ b/src/components/productList/OngoingProduct.tsx @@ -1,11 +1,11 @@ import Button from '../common/Button'; +import type { IAuctionItem } from 'AuctionItem'; import { IoPricetagsOutline } from 'react-icons/io5'; import { LuUsers } from 'react-icons/lu'; -import { OngoingAuctionListItem } from '@/@types/productList'; import ProductItem from '../common/item/ProductItem'; import { useNavigate } from 'react-router-dom'; -const OngoingProduct = ({ product }: { product: OngoingAuctionListItem }) => { +const OngoingProduct = ({ product }: { product: IAuctionItem }) => { const navigate = useNavigate(); const handleClick = () => navigate(`/auctions/bid/${product.id}`); return ( diff --git a/src/components/productList/PreEnrollProduct.tsx b/src/components/productList/PreEnrollProduct.tsx index 1bf1549a..dbec69f5 100644 --- a/src/components/productList/PreEnrollProduct.tsx +++ b/src/components/productList/PreEnrollProduct.tsx @@ -1,10 +1,10 @@ -import { PreEnrollProductListItem } from '@/@types/productList'; +import Button from '../common/Button'; import { FaHeart } from 'react-icons/fa'; +import type { IPreAuctionItem } from 'AuctionItem'; import { IoPricetagsOutline } from 'react-icons/io5'; import ProductItem from '../common/item/ProductItem'; -import Button from '../common/Button'; -const PreEnrollProduct = ({ product }: { product: PreEnrollProductListItem }) => { +const PreEnrollProduct = ({ product }: { product: IPreAuctionItem }) => { return (
diff --git a/src/components/user/OngoingMyRegister.tsx b/src/components/user/OngoingMyRegister.tsx index 42d1dcfe..871541d7 100644 --- a/src/components/user/OngoingMyRegister.tsx +++ b/src/components/user/OngoingMyRegister.tsx @@ -1,10 +1,10 @@ -import { OngoingAuctionRegisterdItem } from '@/@types/productList'; import { LuUsers } from 'react-icons/lu'; import { IoPricetagsOutline } from 'react-icons/io5'; import ProductItem from '../common/item/ProductItem'; import Button from '../common/Button'; +import type { IAuctionRegisteredItem } from 'AuctionItem'; -const OngoingMyRegister = ({ product }: { product: OngoingAuctionRegisterdItem }) => { +const OngoingMyRegister = ({ product }: { product: IAuctionRegisteredItem }) => { return (
diff --git a/src/components/user/PreEnrollMyRegister.tsx b/src/components/user/PreEnrollMyRegister.tsx index 32109259..1ab951eb 100644 --- a/src/components/user/PreEnrollMyRegister.tsx +++ b/src/components/user/PreEnrollMyRegister.tsx @@ -1,10 +1,10 @@ -import { PreEnrollProductRegisteredItem } from '@/@types/productList'; +import Button from '../common/Button'; import { FaHeart } from 'react-icons/fa'; +import type { IPreAuctionRegisteredItem } from 'AuctionItem'; import { IoPricetagsOutline } from 'react-icons/io5'; import ProductItem from '../common/item/ProductItem'; -import Button from '../common/Button'; -const PreEnrollMyRegister = ({ product }: { product: PreEnrollProductRegisteredItem }) => { +const PreEnrollMyRegister = ({ product }: { product: IPreAuctionRegisteredItem }) => { return (
diff --git a/src/components/auction/queries.ts b/src/components/userAuction/queries.ts similarity index 100% rename from src/components/auction/queries.ts rename to src/components/userAuction/queries.ts diff --git a/src/constants/queryKeys.ts b/src/constants/queryKeys.ts index 05f5c39f..f787d169 100644 --- a/src/constants/queryKeys.ts +++ b/src/constants/queryKeys.ts @@ -14,7 +14,7 @@ export const queryKeys = Object.freeze({ AUCTION_HISTORY: 'AUCTION_HISTORY', AUCTION_WON: 'AUCTION_WON', AUCTION_LOST: 'AUCTION_LOST', - DETAILS: 'DETAILS', + AUCTION_DETAILS: 'DETAILS', NOTIFICATIONS: 'NOTIFICATIONS', PRE_REGISTER_HEART: 'PRE_REGISTER_HEART', BIDDER_LIST: 'BIDDER_LIST', diff --git a/src/hooks/useHistory.ts b/src/hooks/useHistory.ts index 00967ae8..51431a97 100644 --- a/src/hooks/useHistory.ts +++ b/src/hooks/useHistory.ts @@ -1,8 +1,4 @@ -import { - getMyHistoryAuction, - getMyLostAuction, - getMyWonAuction, -} from '@/components/auction/queries'; +import { getMyHistoryAuction, getMyLostAuction, getMyWonAuction } from '@/components/userAuction/queries'; import { queryKeys } from '@/constants/queryKeys'; import { useInfiniteQuery } from '@tanstack/react-query'; diff --git a/src/mocks/data/auctionDetailsData.ts b/src/mocks/data/auctionDetailsData.ts index 79d74e5a..6cd7bf2c 100644 --- a/src/mocks/data/auctionDetailsData.ts +++ b/src/mocks/data/auctionDetailsData.ts @@ -1,28 +1,40 @@ import jordanBlackImage from '@/assets/images/jordan_black.jpeg'; import jordanRedImage from '@/assets/images/jordan_red.jpeg'; -import { AuctionDetails } from 'Auction'; +import { IAuctionDetails } from 'AuctionDetails'; -export const auctionDetailsData: AuctionDetails[] = [ +export const auctionDetailsData: IAuctionDetails[] = [ { - id: 1, - name: '[나이키] 에어 조던 로우', - minPrice: 100_000, - timeRemaining: 50_400, - participantCount: 11, - isParticipating: false, bidAmount: 0, - remainingBidCount: 3, - cdnPath: jordanRedImage, + bidId: null, + description: + "서로 다른 출신과 개성을 가진 이들이 모여 밴드 결성까지의 과정을 보여준 ‘Harmony from Discord’부터 멤버들 간의 만남을 동경과 벅차오르는 감성으로 담아낸 ‘MANITO’까지. 성장 서사를 써내려가는 밴드 QWER이 두 번째 EP인 ‘Algorithm’s Blossom’을 선보인다. 이번 앨범에서는 QWER이라는 하나의 팀으로서 새롭게 운명을 개척해나가는 이야기를 ‘알고리즘이 피워낸 꽃’이라는 키워드를 통해 풀어내고자 한다.\n\n\"사랑과 상처, 그 모든 것을 끌어안고 피어나”\n\n무수히 파편적이고 혼란하지만 보여지는 것은 단편적인 곳, 다양한 혼잡함이 가지런히 질서를 이루는 곳. 그런 '알고리즘' 속에서 우리의 이야기를 피워낸다. ‘Algorithm’s Blossom'에서 QWER은 보편적이지 않은 공간에 심겨진 씨앗으로, 동시에 사랑과 상처를 양분삼아 돋아난 싹으로, 세상에 보인 적 없던 새로운 꽃의 모습으로 자신들의 성장과 여정을 그린다.", + imageList: [jordanRedImage], + isParticipating: false, + isSeller: false, + minPrice: 23000, + productName: '조던 레드', + participantCount: 4, + productId: 14, + remainingBidCount: 0, + sellerName: 'aaron93', + status: 'PROCEEDING', + timeRemaining: 25816, }, { - id: 2, - name: '[나이키] 조던 블랙', - minPrice: 120_000, - timeRemaining: 25_200, - participantCount: 8, - isParticipating: true, - bidAmount: 130_000, - remainingBidCount: 2, - cdnPath: jordanBlackImage, + bidAmount: 0, + bidId: null, + description: + "서로 다른 출신과 개성을 가진 이들이 모여 밴드 결성까지의 과정을 보여준 ‘Harmony from Discord’부터 멤버들 간의 만남을 동경과 벅차오르는 감성으로 담아낸 ‘MANITO’까지. 성장 서사를 써내려가는 밴드 QWER이 두 번째 EP인 ‘Algorithm’s Blossom’을 선보인다. 이번 앨범에서는 QWER이라는 하나의 팀으로서 새롭게 운명을 개척해나가는 이야기를 ‘알고리즘이 피워낸 꽃’이라는 키워드를 통해 풀어내고자 한다.\n\n\"사랑과 상처, 그 모든 것을 끌어안고 피어나”\n\n무수히 파편적이고 혼란하지만 보여지는 것은 단편적인 곳, 다양한 혼잡함이 가지런히 질서를 이루는 곳. 그런 '알고리즘' 속에서 우리의 이야기를 피워낸다. ‘Algorithm’s Blossom'에서 QWER은 보편적이지 않은 공간에 심겨진 씨앗으로, 동시에 사랑과 상처를 양분삼아 돋아난 싹으로, 세상에 보인 적 없던 새로운 꽃의 모습으로 자신들의 성장과 여정을 그린다.", + imageList: [jordanBlackImage], + isParticipating: false, + isSeller: false, + minPrice: 23000, + productName: '조던 블랙', + participantCount: 4, + productId: 14, + remainingBidCount: 0, + sellerName: 'aaron93', + status: 'PROCEEDING', + timeRemaining: 25816, }, ]; diff --git a/src/mocks/data/homeAuctionsData.ts b/src/mocks/data/homeAuctionsData.ts index 14fd2c77..36da9f46 100644 --- a/src/mocks/data/homeAuctionsData.ts +++ b/src/mocks/data/homeAuctionsData.ts @@ -3,9 +3,9 @@ import jordanBlackImage from '@/assets/images/jordan_black.jpeg'; import jordanBlueImage from '@/assets/images/jordan_blue.jpeg'; import jordanRedImage from '@/assets/images/jordan_red.jpeg'; import newBalanceImage from '@/assets/images/newbalance_993.jpeg'; -import { PreRegisterAuction, RegisterAuction } from 'Auction'; +import { IAuctionItem, IPreAuctionItem } from 'AuctionItem'; -export const bestAuctionsData: RegisterAuction[] = [ +export const bestAuctionsData: IAuctionItem[] = [ { id: 0, name: '[나이키] 에어 조던 로우', @@ -13,6 +13,7 @@ export const bestAuctionsData: RegisterAuction[] = [ timeRemaining: 50_400, minPrice: 100_000, participantCount: 11, + isParticipating: true, }, { id: 1, @@ -21,6 +22,7 @@ export const bestAuctionsData: RegisterAuction[] = [ timeRemaining: 25_200, minPrice: 120_000, participantCount: 8, + isParticipating: true, }, { id: 2, @@ -29,6 +31,7 @@ export const bestAuctionsData: RegisterAuction[] = [ timeRemaining: 82_800, minPrice: 180_000, participantCount: 29, + isParticipating: true, }, { id: 3, @@ -37,6 +40,7 @@ export const bestAuctionsData: RegisterAuction[] = [ timeRemaining: 360, minPrice: 230_000, participantCount: 32, + isParticipating: true, }, { id: 4, @@ -45,10 +49,11 @@ export const bestAuctionsData: RegisterAuction[] = [ timeRemaining: 43_200, minPrice: 70_000, participantCount: 6, + isParticipating: true, }, ]; -export const imminentAuctionsData: RegisterAuction[] = [ +export const imminentAuctionsData: IAuctionItem[] = [ { id: 0, name: '[나이키] 조던 블랙', @@ -56,6 +61,7 @@ export const imminentAuctionsData: RegisterAuction[] = [ timeRemaining: 25_200, minPrice: 120_000, participantCount: 8, + isParticipating: true, }, { id: 1, @@ -64,6 +70,7 @@ export const imminentAuctionsData: RegisterAuction[] = [ timeRemaining: 43_200, minPrice: 70_000, participantCount: 6, + isParticipating: true, }, { id: 2, @@ -72,6 +79,7 @@ export const imminentAuctionsData: RegisterAuction[] = [ timeRemaining: 82_800, minPrice: 180_000, participantCount: 29, + isParticipating: true, }, { id: 3, @@ -80,6 +88,7 @@ export const imminentAuctionsData: RegisterAuction[] = [ timeRemaining: 360, minPrice: 230_000, participantCount: 32, + isParticipating: true, }, { id: 4, @@ -88,16 +97,18 @@ export const imminentAuctionsData: RegisterAuction[] = [ timeRemaining: 50_400, minPrice: 100_000, participantCount: 11, + isParticipating: true, }, ]; -export const preRegisterAuctionsData: PreRegisterAuction[] = [ +export const preRegisterAuctionsData: IPreAuctionItem[] = [ { id: 0, name: '[뉴발란스] 993', cdnPath: newBalanceImage, minPrice: 230_000, likeCount: 45, + isLiked: true, }, { id: 1, @@ -105,6 +116,7 @@ export const preRegisterAuctionsData: PreRegisterAuction[] = [ cdnPath: jordanRedImage, minPrice: 100_000, likeCount: 30, + isLiked: true, }, { id: 2, @@ -112,6 +124,7 @@ export const preRegisterAuctionsData: PreRegisterAuction[] = [ cdnPath: jordanBlueImage, minPrice: 180_000, likeCount: 18, + isLiked: true, }, { id: 3, @@ -119,6 +132,7 @@ export const preRegisterAuctionsData: PreRegisterAuction[] = [ cdnPath: jordanBlackImage, minPrice: 120_000, likeCount: 12, + isLiked: true, }, { @@ -127,5 +141,6 @@ export const preRegisterAuctionsData: PreRegisterAuction[] = [ cdnPath: adidasImage, minPrice: 70_000, likeCount: 1, + isLiked: true, }, ]; diff --git a/src/mocks/data/preRegisterHeartData.ts b/src/mocks/data/preRegisterHeartData.ts index 22f448f7..e09277b8 100644 --- a/src/mocks/data/preRegisterHeartData.ts +++ b/src/mocks/data/preRegisterHeartData.ts @@ -1,15 +1,16 @@ import JordanBlack from '@/assets/images/jordan_black.jpeg'; import JordanBlue from '@/assets/images/jordan_blue.jpeg'; import JordanRed from '@/assets/images/jordan_red.jpeg'; -import { PreRegisterAuction } from 'Auction'; +import { IPreAuctionItem } from 'AuctionItem'; -export const preRegisterHeartData: PreRegisterAuction[] = [ +export const preRegisterHeartData: IPreAuctionItem[] = [ { id: 0, name: '조던 블루', cdnPath: JordanBlue, minPrice: 200_000, likeCount: 30, + isLiked: true, }, { id: 1, @@ -17,6 +18,7 @@ export const preRegisterHeartData: PreRegisterAuction[] = [ cdnPath: JordanRed, minPrice: 350_000, likeCount: 12, + isLiked: true, }, { id: 2, @@ -24,5 +26,6 @@ export const preRegisterHeartData: PreRegisterAuction[] = [ cdnPath: JordanBlack, minPrice: 270_000, likeCount: 20, + isLiked: true, }, ]; diff --git a/src/pages/AuctionDetail.tsx b/src/pages/AuctionDetails.tsx similarity index 95% rename from src/pages/AuctionDetail.tsx rename to src/pages/AuctionDetails.tsx index 1958f103..e76f9969 100644 --- a/src/pages/AuctionDetail.tsx +++ b/src/pages/AuctionDetails.tsx @@ -2,7 +2,6 @@ import { useEffect, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; -import type { AuctionItem } from '@/components/details/AuctionItem'; import BuyersFooter from '@/components/details/BuyersFooter'; import { CiCoins1 } from 'react-icons/ci'; import Layout from '@/components/layout/Layout'; @@ -11,10 +10,11 @@ import Price from '@/assets/icons/price.svg'; import ProgressBar from '@/components/details/ProgressBar'; import SellersFooter from '@/components/details/SellersFooter'; import axios from 'axios'; +import { IAuctionDetails } from 'AuctionDetails'; -const AuctionDetail = () => { +const AuctionDetails = () => { const { productId } = useParams() as { productId: string }; - const [auctionItem, setAuctionItem] = useState(null); + const [auctionItem, setAuctionItem] = useState(null); const [isMenuOpen, setIsMenuOpen] = useState(false); const [isLoading, setIsLoading] = useState(true); const [isTimerFixed, _setIsTimerFixed] = useState(false); @@ -64,7 +64,7 @@ const AuctionDetail = () => { {/* 상품 이미지 영역 */}
- {auctionItem?.name} + {auctionItem?.productName}
{/* 타이머 및 프로그레스 바 */} {auctionItem && ( @@ -86,7 +86,7 @@ const AuctionDetail = () => { {/* 경매 아이템 제목 & 시작가 */} {auctionItem && (
-

{auctionItem.name || '[ERROR] 이름이 등록되지 않았어요!'}

+

{auctionItem.productName || '[ERROR] 이름이 등록되지 않았어요!'}

@@ -156,4 +156,4 @@ const AuctionDetail = () => { ); }; -export default AuctionDetail; +export default AuctionDetails; diff --git a/src/pages/Bid.tsx b/src/pages/Bid.tsx index 7035b837..5fa39fdc 100644 --- a/src/pages/Bid.tsx +++ b/src/pages/Bid.tsx @@ -48,6 +48,7 @@ const Bid = () => { getValues, }); + const { imageList, productName, minPrice, participantCount, remainingBidCount, bidAmount, timeRemaining, isParticipating, bidId } = auctionDetails; const onPostSubmit: SubmitHandler = async (data) => { const bidData = { auctionId: Number(auctionId), @@ -67,7 +68,7 @@ const Bid = () => {

- + {isParticipating && (
diff --git a/src/pages/BidderList.tsx b/src/pages/BidderList.tsx index a9751f0e..fdf7176b 100644 --- a/src/pages/BidderList.tsx +++ b/src/pages/BidderList.tsx @@ -19,7 +19,7 @@ const BidderList = () => { const { auctionDetails } = useGetAuctionDetails(auctionId); const { bidderList } = useGetBidderList(auctionId, filterState.sort); - const { imageList, name, minPrice, participantCount } = auctionDetails; + const { imageList, productName, minPrice, participantCount } = auctionDetails; return ( @@ -28,7 +28,7 @@ const BidderList = () => {
- +

참여 가격

diff --git a/src/pages/Heart.tsx b/src/pages/Heart.tsx index 257b1824..b829ad8f 100644 --- a/src/pages/Heart.tsx +++ b/src/pages/Heart.tsx @@ -3,7 +3,7 @@ import { useDeletePreRegisterHeart, useGetPreRegisterHeart } from '@/components/ import AuctionItem from '@/components/common/item/AuctionItem'; import Button from '@/components/common/Button'; import EmptyBoundary from '@/components/common/EmptyBoundary'; -import { PreRegisterAuction } from 'Auction'; +import type { IPreAuctionItem } from 'AuctionItem'; import { useNavigate } from 'react-router-dom'; const Heart = () => { @@ -16,7 +16,7 @@ const Heart = () => { return (
    - {preRegisterHeartList.map((el: PreRegisterAuction) => ( + {preRegisterHeartList.map((el: IPreAuctionItem) => (
  • navigate(`/product/${el.id}`)} className='cursor-pointer'> diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 2dd39247..9dc14872 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,4 +1,4 @@ -import type { PreRegisterAuction, RegisterAuction } from 'Auction'; +import type { IAuctionItem, IPreAuctionItem } from 'AuctionItem'; import CategoryList from '@/components/home/CategoryList'; import EmptyBoundary from '@/components/common/EmptyBoundary'; @@ -17,14 +17,14 @@ const Home = () => {
    - {bestAuctions.map((auction: RegisterAuction) => ( + {bestAuctions.map((auction: IAuctionItem) => ( ))} - {imminentAuctions.map((auction: RegisterAuction) => ( + {imminentAuctions.map((auction: IAuctionItem) => ( ))} @@ -34,7 +34,7 @@ const Home = () => { - {preRegisterAuctions.map((auction: PreRegisterAuction) => ( + {preRegisterAuctions.map((auction: IPreAuctionItem) => ( ))} diff --git a/src/pages/PreAuction.tsx b/src/pages/PreAuction.tsx index 37fed299..228a6da8 100644 --- a/src/pages/PreAuction.tsx +++ b/src/pages/PreAuction.tsx @@ -5,13 +5,11 @@ import axios from 'axios'; import ProgressBar from '@/components/details/ProgressBar'; import { useNavigate, useParams } from 'react-router-dom'; import Price from '@/assets/icons/price.svg'; -import type { PreAuctionItem } from '@/components/details/AuctionItem'; +import { IPreAuctionDetails } from 'AuctionDetails'; const PreAuction = () => { const { productId } = useParams() as { productId: string }; - const [preAuctionItem, setPreAuctionItem] = useState( - null - ); + const [preAuctionItem, setPreAuctionItem] = useState(null); const [isMenuOpen, setIsMenuOpen] = useState(false); const [isLoading, setIsLoading] = useState(true); const [isTimerFixed, _setIsTimerFixed] = useState(false); @@ -40,9 +38,7 @@ const PreAuction = () => { useEffect(() => { const fetchData = async () => { try { - const response = await axios.get( - `${import.meta.env.VITE_API_URL}/api/v1/products/${productId}` - ); + const response = await axios.get(`${import.meta.env.VITE_API_URL}/api/v1/products/${productId}`); console.log(response.data); setPreAuctionItem(response.data); } catch (error) { @@ -55,11 +51,7 @@ const PreAuction = () => { return ( - + {/* 메인 컨텐츠가 스크롤 가능하도록 수정 */}
    @@ -67,25 +59,16 @@ const PreAuction = () => {
    {preAuctionItem?.productName}
    {/* 타이머 및 프로그레스 바 */} {preAuctionItem && ( -
    +
    {isLoading ? ( -
    - 로딩 중... -
    +
    로딩 중...
    ) : ( { {/* 경매 아이템 제목 & 시작가 */} {preAuctionItem && (
    -

    - {preAuctionItem.productName || - '[ERROR] 이름이 등록되지 않았어요!'} -

    +

    {preAuctionItem.productName || '[ERROR] 이름이 등록되지 않았어요!'}

    Price 시작가 - - {numberWithCommas(Number(preAuctionItem.minPrice))}원 - + {numberWithCommas(Number(preAuctionItem.minPrice))}원

    @@ -165,19 +143,11 @@ const PreAuction = () => { {/* 백드롭 */} {isMenuOpen && ( <> -
    +
    {/* 메뉴 (아코디언) */}
    - - + +
    )} diff --git a/src/pages/ProductList.tsx b/src/pages/ProductList.tsx index ab9cc8da..bdd499ae 100644 --- a/src/pages/ProductList.tsx +++ b/src/pages/ProductList.tsx @@ -1,12 +1,13 @@ -import { OngoingAuctionListItem, PreEnrollProductListItem } from '@/@types/productList'; +import type { IAuctionItem, IPreAuctionItem } from 'AuctionItem'; import { useCallback, useEffect, useRef, useState } from 'react'; +import { useNavigate, useSearchParams } from 'react-router-dom'; + import Layout from '@/components/layout/Layout'; import OngoingProduct from '@/components/productList/OngoingProduct'; +import PreEnrollProduct from '@/components/productList/PreEnrollProduct'; import ProductButtons from '@/components/productList/ProductButtons'; import ProductListTabs from '@/components/productList/ProductListTabs'; -import { useNavigate, useSearchParams } from 'react-router-dom'; import useProductList from '@/hooks/useProductList'; -import PreEnrollProduct from '@/components/productList/PreEnrollProduct'; const ProductList = () => { const [activeTab, setActiveTab] = useState('ongoing'); @@ -75,8 +76,8 @@ const ProductList = () => {
    {activeTab === 'ongoing' - ? ongoingItems?.map((product: OngoingAuctionListItem) => ) - : enrollItems?.map((product: PreEnrollProductListItem) => )} + ? ongoingItems?.map((product: IAuctionItem) => ) + : enrollItems?.map((product: IPreAuctionItem) => )}
    diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx index 596afd73..018790e8 100644 --- a/src/pages/Register.tsx +++ b/src/pages/Register.tsx @@ -3,6 +3,7 @@ import { SubmitHandler, useForm } from 'react-hook-form'; import Button from '@/components/common/Button'; import FormField from '@/components/common/form/FormField'; +import type { IRegister } from 'Register'; import ImageUploader from '@/components/register/ImageUploader'; import { Input } from '@/components/ui/input'; import Layout from '@/components/layout/Layout'; @@ -12,14 +13,13 @@ import RegisterLabel from '@/components/register/RegisterLabel'; import { RegisterSchema } from '@/constants/schema'; import { Textarea } from '@/components/ui/textarea'; import { categories } from '@/constants/categories'; +import { convertCurrencyToNumber } from '@/utils/convertCurrencyToNumber'; import { useEditableNumberInput } from '@/hooks/useEditableNumberInput'; import { useNavigate } from 'react-router-dom'; +import { usePostRegister } from '@/components/register/quries'; import { useState } from 'react'; import { z } from 'zod'; import { zodResolver } from '@hookform/resolvers/zod'; -import { usePostRegister } from '@/components/register/quries'; -import { convertCurrencyToNumber } from '@/utils/convertCurrencyToNumber'; -import type { RegisterType } from 'Register'; type FormFields = z.infer; @@ -71,7 +71,7 @@ const Register = () => { const { productName, category, description, minPrice } = data; const formData = new FormData(); - const registerData: RegisterType = { + const registerData: IRegister = { productName, category, description, diff --git a/src/pages/UserParticipatedList.tsx b/src/pages/UserParticipatedList.tsx index bb5e94fe..c6dd19a5 100644 --- a/src/pages/UserParticipatedList.tsx +++ b/src/pages/UserParticipatedList.tsx @@ -1,4 +1,4 @@ -import { MyHistoryAuctionListItem, MyLostAuctionListItem, MyWonAuctionListItem } from '@/@types/productList'; +import type { IUserAuctionHistoryItem, IUserAuctionLostItem, IUserAuctionWonItem } from 'AuctionItem'; import { useCallback, useEffect, useRef, useState } from 'react'; import OrderHistoryProduct from '@/components/order/OrderHistoryProduct'; @@ -81,21 +81,12 @@ const UserParticipatedList = () => { }, [activeTab, refetchHistoryData, refetchWonData, refetchLostData]); return ( -
    +
    -
    - {activeTab === 'AuctionHistory' && - historyItems.map((product: MyHistoryAuctionListItem) => ( - - ))} - {activeTab === 'AuctionsWon' && - wonItems.map((product: MyWonAuctionListItem) => ( - - ))} - {activeTab === 'AuctionsLost' && - lostItems.map((product: MyLostAuctionListItem) => ( - - ))} +
    + {activeTab === 'AuctionHistory' && historyItems.map((product: IUserAuctionHistoryItem) => )} + {activeTab === 'AuctionsWon' && wonItems.map((product: IUserAuctionWonItem) => )} + {activeTab === 'AuctionsLost' && lostItems.map((product: IUserAuctionLostItem) => )}
    ); diff --git a/src/pages/UserRegisteredList.tsx b/src/pages/UserRegisteredList.tsx index e909cf31..e954b5b1 100644 --- a/src/pages/UserRegisteredList.tsx +++ b/src/pages/UserRegisteredList.tsx @@ -1,4 +1,4 @@ -import { OngoingAuctionRegisterdItem, PreEnrollProductRegisteredItem } from '@/@types/productList'; +import { IAuctionRegisteredItem, IPreAuctionRegisteredItem } from 'AuctionItem'; import { useCallback, useEffect, useRef, useState } from 'react'; import EmptyBoundary from '@/components/common/EmptyBoundary'; @@ -65,18 +65,18 @@ const UserRegisteredList = () => { }, [activeTab, refetchOngoingData, refetchEnrollData]); return ( -
    +
    -
    - {activeTab === true ? ( +
    + {activeTab === true ? ( - {ongoingItems.map((product: OngoingAuctionRegisterdItem) => ( + {ongoingItems.map((product: IAuctionRegisteredItem) => ( ))} ) : ( - {enrollItems.map((product: PreEnrollProductRegisteredItem) => ( + {enrollItems.map((product: IPreAuctionRegisteredItem) => ( ))} diff --git a/src/router.tsx b/src/router.tsx index 52523776..6d2437f8 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -3,7 +3,7 @@ import BidderList, { loader as bidderListLoader } from './pages/BidderList'; import AddressBook from './pages/AddressBook'; import AsyncBoundary from './components/common/loadingAndError/AsyncBoundary'; -import AuctionDetail from './pages/AuctionDetail'; +import AuctionDetails from './pages/AuctionDetails'; import GlobalLayout from './components/layout/GlobalLayout'; import Heart from './pages/Heart'; import Home from './pages/Home'; @@ -124,7 +124,7 @@ export const router = createBrowserRouter([ path: `${ROUTERS.AUCTION.ITEM}/:productId`, element: ( - + ), },