Merge pull request #105 from CHZZK-Study/feat/server-sink

feat: 내가 등록한 경매 URL 수정
JECT-Study · Oct 4, 2024 · f20b68d · f20b68d
2 parents 59f34fb + 6844039
commit f20b68d
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 33 deletions.
diff --git a/src/components/common/item/ProductItem.tsx b/src/components/common/item/ProductItem.tsx
@@ -22,7 +22,7 @@ const ProductItem = ({ product, children }: { product: ProductProps; children: R
       <div className='flex flex-col'>
         <div className='w-full h-auto mb-4'>
           <div className='relative'>
-            <img className='object-cover w-full h-[10rem] rounded-t' src={`${product.cdnPath ? product.cdnPath : jordanBlackImage}`} alt='Jordan Black Shoes' />
+            <img className='object-cover w-full h-[15rem] rounded-t' src={`${product.cdnPath ? product.cdnPath : jordanBlackImage}`} alt='Jordan Black Shoes' />
             {product.timeRemaining && <TimeLabel time={product.timeRemaining} />}
           </div>
         </div>

diff --git a/src/components/login/queries.ts b/src/components/login/queries.ts
@@ -22,7 +22,7 @@ export const postSignup = async (data: User) => {
 };
 
 export const logout = async () => {
-  await httpClient.post(API_END_POINT.LOGOUT, {}, { withCredentials: true });
+  await httpClient.post(API_END_POINT.LOGOUT, { withCredentials: true });
 
   removeToken();
 };

diff --git a/src/components/order/OrderListTab.tsx b/src/components/order/OrderListTab.tsx
@@ -35,10 +35,10 @@ const OrderListTab = ({ activeTab, setActiveTab }: OrderListTabProps) => {
         onClick={() => setActiveTab('AuctionHistory')}
       >
         {isWidthScreen ? (
-          '진행중인 경매'
+          '참여한 경매'
         ) : (
           <>
-            진행중인
+            참여한
             <br />
             경매
           </>

diff --git a/src/components/order/OrderLostProduct.tsx b/src/components/order/OrderLostProduct.tsx
@@ -4,6 +4,13 @@ import { LuUsers } from 'react-icons/lu';
 import ProductItem from '../common/item/ProductItem';
 
 const OrderLostProduct = ({ product }: { product: IUserAuctionLostItem }) => {
+  const date = new Date(product.endDateTime);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+
+  const formattedDate = `${year}.${month}.${day}`;
+
   return (
     <ProductItem product={product}>
       <div className='flex'>
@@ -18,14 +25,14 @@ const OrderLostProduct = ({ product }: { product: IUserAuctionLostItem }) => {
           <LuUsers className='text-gray-500' />
           <p className='text-sm text-gray-500'>마감된 날짜</p>
         </div>
-        <p className='ml-4 font-semibold'>{`${product.endDateTime}`}</p>
+        <p className='ml-4 font-semibold'>{formattedDate}</p>
       </div>
       <div className='flex'>
         <div className='flex gap-2'>
           <LuUsers className='text-gray-500' />
           <p className='text-sm text-gray-500'>가장 높은 금액</p>
         </div>
-        <p className='ml-4 font-semibold'>{`${product.highestBid}`}</p>
+        <p className='ml-4 font-semibold'>{`${(product.highestBid).toLocaleString()}원`}</p>
       </div>
     </ProductItem>
   );

diff --git a/src/components/order/OrderWonProduct.tsx b/src/components/order/OrderWonProduct.tsx
@@ -4,6 +4,13 @@ import { LuUsers } from 'react-icons/lu';
 import ProductItem from '../common/item/ProductItem';
 
 const OrderWonProduct = ({ product }: { product: IUserAuctionWonItem }) => {
+  const date = new Date(product.endDateTime);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+
+  const formattedDate = `${year}.${month}.${day}`;
+
   return (
     <ProductItem product={product}>
       <div className='flex'>
@@ -18,14 +25,14 @@ const OrderWonProduct = ({ product }: { product: IUserAuctionWonItem }) => {
           <LuUsers className='text-gray-500' />
           <p className='text-sm text-gray-500'>마감된 날짜</p>
         </div>
-        <p className='ml-4 font-semibold'>{`${product.endDateTime}`}</p>
+        <p className='ml-4 font-semibold'>{formattedDate}</p>
       </div>
       <div className='flex'>
         <div className='flex gap-2'>
           <LuUsers className='text-gray-500' />
           <p className='text-sm text-gray-500'>최종 낙찰금액</p>
         </div>
-        <p className='ml-4 font-semibold'>{`${product.winningBid}`}</p>
+        <p className='ml-4 font-semibold'>{`${(product.winningBid).toLocaleString()}원`}</p>
       </div>
     </ProductItem>
   );

diff --git a/src/components/user/UserOrder.tsx b/src/components/user/UserOrder.tsx
@@ -13,14 +13,14 @@ interface ParticipationCountItmes {
 }
 
 interface Props {
-  participationCount?: ParticipationCountItmes;
+  participantCount?: ParticipationCountItmes;
   preRegisterCount?: number;
   registeredAuctionCount?: number;
 }
 
-const UserOrder = ({ participationCount, preRegisterCount, registeredAuctionCount}: Props) => {
+const UserOrder = ({ participantCount, preRegisterCount, registeredAuctionCount}: Props) => {
   const navigate = useNavigate();
-  const $participationCount = participationCount || { failedAuctionCount: 0, ongoingAuctionCount: 0, successfulAuctionCount: 0 };
+  const $participantCount = participantCount || { failedAuctionCount: 0, ongoingAuctionCount: 0, successfulAuctionCount: 0 };
   const $preRegisterCount = preRegisterCount || 0;
   const $registeredAuctionCount = registeredAuctionCount || 0;
 
@@ -41,11 +41,11 @@ const UserOrder = ({ participationCount, preRegisterCount, registeredAuctionCoun
           >
             <img
               src={OnGoingIcon}
-              alt="진행중인 경매"
+              alt="참여한 경매"
               className="w-8 h-8 mb-2"
             />
-            <span className="text-sm font-semibold">진행중인 경매</span>
-            <span className="mt-1 text-lg text-orange-500">{$participationCount.ongoingAuctionCount} 건</span>
+            <span className="text-sm font-semibold">참여한 경매</span>
+            <span className="mt-1 text-lg text-orange-500">{$participantCount.ongoingAuctionCount} 건</span>
           </div>
 
           {/* 성공한 경매 */}
@@ -59,7 +59,7 @@ const UserOrder = ({ participationCount, preRegisterCount, registeredAuctionCoun
           >
             <img src={SuccessIcon} alt="성공한 경매" className="w-8 h-8 mb-2" />
             <span className="text-sm font-semibold">성공한 경매</span>
-            <span className="mt-1 text-lg text-orange-500">{$participationCount.successfulAuctionCount} 건</span>
+            <span className="mt-1 text-lg text-orange-500">{$participantCount.successfulAuctionCount} 건</span>
           </div>
 
           {/* 실패한 경매 */}
@@ -73,7 +73,7 @@ const UserOrder = ({ participationCount, preRegisterCount, registeredAuctionCoun
           >
             <img src={FailedIcon} alt="실패한 경매" className="w-8 h-8 mb-2" />
             <span className="text-sm font-semibold">실패한 경매</span>
-            <span className="mt-1 text-lg text-orange-500">{$participationCount.failedAuctionCount} 건</span>
+            <span className="mt-1 text-lg text-orange-500">{$participantCount.failedAuctionCount} 건</span>
           </div>
         </div>
       </div>

diff --git a/src/components/user/UserProfile.tsx b/src/components/user/UserProfile.tsx
@@ -3,12 +3,14 @@ import { useNavigate } from 'react-router-dom';
 interface Props {
   nickname?: string;
   bio?: string;
+  link?: string;
 }
 
-const UserProfile = ({ nickname, bio }: Props) => {
+const UserProfile = ({ nickname, bio, link }: Props) => {
   const navigator = useNavigate();
   const userNickname = nickname || null;
   const userBio = bio || null;
+  const userLink = link || null;
 
   return (
     <div className="flex items-center pb-8 my-10 border-b border-b-gray3">
@@ -23,7 +25,7 @@ const UserProfile = ({ nickname, bio }: Props) => {
           <button
             className="px-3 py-1 border border-gray2 rounded-md"
             onClick={() =>
-              navigator('profile/edit', { state: { userNickname, userBio } })
+              navigator('profile/edit', { state: { userNickname, userBio, userLink } })
             }
           >
             수정

diff --git a/src/components/user/queries.ts b/src/components/user/queries.ts
@@ -7,20 +7,18 @@ export interface GetAuctionProps {
   pageNumber: number;
   pageSize: number;
   sortType?: string;
-  nickname: string;
 }
 
-export const getAuctionOngoingRegister = async ({ pageNumber, pageSize, sortType = 'newest', nickname }: GetAuctionProps): Promise<IAuctionRegisteredList> => {
-  const response = await httpClient.get(`${API_END_POINT.MY_ACUTION_ONGOING_REGISTER}/${nickname}?&sort=${sortType}&page=${pageNumber}&size=${pageSize}`);
+export const getAuctionOngoingRegister = async ({ pageNumber, pageSize, sortType = 'newest' }: GetAuctionProps): Promise<IAuctionRegisteredList> => {
+  const response = await httpClient.get(`${API_END_POINT.MY_ACUTION_ONGOING_REGISTER}?sort=${sortType}&page=${pageNumber}&size=${pageSize}`);
   return response.data;
 };
 
 export const getAuctionPreEnrollRegister = async ({
   pageNumber,
   pageSize,
-  sortType = 'newest',
-  nickname,
+  sortType = 'product-newest'
 }: GetAuctionProps): Promise<IPreAuctionRegisteredList> => {
-  const response = await httpClient.get(`${API_END_POINT.MY_ACUTION_PRE_ENROLL_REGISTER}/${nickname}?&sort=${sortType}&page=${pageNumber}&size=${pageSize}`);
+  const response = await httpClient.get(`${API_END_POINT.MY_ACUTION_PRE_ENROLL_REGISTER}?sort=${sortType}&page=${pageNumber}&size=${pageSize}`);
   return response.data;
 };
diff --git a/src/hooks/useMyAuctionList.ts b/src/hooks/useMyAuctionList.ts
@@ -16,9 +16,9 @@ const useMyAuctionList = (activeTab: boolean, nickname: string): any => {
     hasNextPage: hasNextOngoingPage,
     refetch: refetchOngoingData,
   } = useInfiniteQuery({
-    queryKey: [queryKeys.MY_AUCTION_REGISTERD, nickname],
+    queryKey: [queryKeys.MY_AUCTION_REGISTERD],
     queryFn: () =>
-      getAuctionOngoingRegister({ pageNumber: 0, pageSize: 10, nickname }),
+      getAuctionOngoingRegister({ pageNumber: 0, pageSize: 10 }),
     getNextPageParam: (lastPage) => {
       if (lastPage.pageNumber + 1 >= lastPage.totalPages) {
         return undefined;
@@ -37,9 +37,9 @@ const useMyAuctionList = (activeTab: boolean, nickname: string): any => {
     hasNextPage: hasNextEnrollPage,
     refetch: refetchEnrollData,
   } = useInfiniteQuery({
-    queryKey: [queryKeys.MY_PRODUCT_REGISTERD, nickname],
+    queryKey: [queryKeys.MY_PRODUCT_REGISTERD],
     queryFn: () =>
-      getAuctionPreEnrollRegister({ pageNumber: 0, pageSize: 10, nickname }),
+      getAuctionPreEnrollRegister({ pageNumber: 0, pageSize: 10 }),
     getNextPageParam: (lastPage) => {
       if (lastPage.pageNumber + 1 >= lastPage.totalPages) {
         return undefined;

diff --git a/src/hooks/useProfile.ts b/src/hooks/useProfile.ts
@@ -19,7 +19,7 @@ export const useProfile = () => {
 export const useEditProfile = () => {
   const navigate = useNavigate();
   const location = useLocation();
-  const { nickname, bio } = location.state || {};
+  const { userNickname, userBio, userLink } = location.state || {};
 
   const {
     control,
@@ -28,8 +28,9 @@ export const useEditProfile = () => {
     formState: { errors },
   } = useForm<UserProfile>({
     defaultValues: {
-      nickname: nickname || '',
-      bio: bio || '',
+      nickname: userNickname || '',
+      bio: userBio || '',
+      link: userLink || '',
     }
   });
 

diff --git a/src/pages/User.tsx b/src/pages/User.tsx
@@ -8,8 +8,8 @@ const User = () => {
 
   return (
     <div className="flex flex-col">
-      <UserProfile nickname={profileData?.nickname} bio={profileData?.bio} />
-      <UserOrder participationCount={profileData?.participationCount} preRegisterCount={profileData?.preRegisterCount} registeredAuctionCount={profileData?.registeredAuctionCount} />
+      <UserProfile nickname={profileData?.nickname} bio={profileData?.bio} link={profileData?.link} />
+      <UserOrder participantCount={profileData?.participantCount} preRegisterCount={profileData?.preRegisterCount} registeredAuctionCount={profileData?.registeredAuctionCount} />
       <UserOrderList />
     </div>
   );