Merge pull request #146 from CHZZK-Study/feat/address-page

Feat: 주소 목록페이지 생성
JECT-Study · Oct 19, 2024 · 939dcb9 · 939dcb9
2 parents ad04e76 + 39571c3
commit 939dcb9
Show file tree

Hide file tree

Showing 27 changed files with 533 additions and 231 deletions.
diff --git a/src/@types/Address.d.ts b/src/@types/Address.d.ts
@@ -0,0 +1,8 @@
+export interface AddresDetail {
+  name: string,
+  phoneNumber: string,
+  zonecode: string,
+  address: string,
+  addressDetail: string,
+  defaultAddress: string,
+}
diff --git a/src/@types/AuctionItem.d.ts b/src/@types/AuctionItem.d.ts
@@ -11,14 +11,23 @@ declare module 'AuctionItem' {
     timeRemaining: number;
     isParticipated: boolean;
   }
-  export interface IAuctionRegisteredItem extends IAuctionItemBase {
+  export interface IAuctionOngoingRegisteredItem extends IAuctionItemBase {
     status: string;
     createdAt: string;
     participantCount: number;
     timeRemaining: number;
     auctionId: number;
   }
 
+  export interface IAuctionEndRegisteredItem extends IAuctionItemBase {
+    auctionId: number;
+    participantCount: number;
+    winningBidAmount: number;
+    isWon: boolean;
+    isPaid: boolean;
+    createAt: string;
+  }
+
   export interface IPreAuctionItem extends IAuctionItemBase {
     productId: number;
     likeCount: number;

diff --git a/src/@types/AuctionList.d.ts b/src/@types/AuctionList.d.ts
@@ -1,7 +1,8 @@
 declare module 'AuctionList' {
   import type {
     IAuctionItem,
-    IAuctionRegisteredItem,
+    IAuctionOngoingRegisteredItem,
+    IAuctionEndRegisteredItem,
     IPreAuctionItem,
     IPreAuctionRegisteredItem,
     IUserAuctionHistoryItem,
@@ -21,7 +22,8 @@ declare module 'AuctionList' {
 
   export interface IAuctionList extends PaginationData<IAuctionItem> {}
   export interface IPreAuctionList extends PaginationData<IPreAuctionItem> {}
-  export interface IAuctionRegisteredList extends PaginationData<IAuctionRegisteredItem> {}
+  export interface IAuctionOngoingRegisteredList extends PaginationData<IAuctionOngoingRegisteredItem> {}
+  export interface IAuctionEndRegisteredList extends PaginationData<IAuctionEndRegisteredItem> {}
   export interface IPreAuctionRegisteredList extends PaginationData<IPreAuctionRegisteredItem> {}
   export interface IUserAuctionWonList extends PaginationData<IUserAuctionWonItem> {}
   export interface IUserAuctionHistoryList extends PaginationData<IUserAuctionHistoryItem> {}

diff --git a/src/components/address/FIndAddressButton.tsx b/src/components/address/FIndAddressButton.tsx
diff --git a/src/components/common/atomic/CreatedAt.tsx b/src/components/common/atomic/CreatedAt.tsx
@@ -0,0 +1,25 @@
+import PriceIcon from '@/assets/icons/price.svg';
+
+const CreatedAt = ({ createAt }: { createAt: string }) => {
+  const date = new Date(createAt);
+  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 (
+    <div
+      aria-label="마감된 날짜"
+      className="flex items-center text-xs sm:text-body2 text-gray2"
+    >
+      <img src={PriceIcon} alt="마감된 날짜" />
+      <span className='whitespace-nowrap'>
+        {`마감된 날짜 `}
+        <span className="text-xs text-black sm:text-body2Bold">{formattedDate}</span>
+      </span>
+    </div>
+  );
+};
+
+export default CreatedAt;
diff --git a/src/components/order/OrderLostProduct.tsx b/src/components/order/OrderLostProduct.tsx
@@ -3,27 +3,16 @@ import { LuUsers } from 'react-icons/lu';
 import ProductItem from '../common/item/ProductItem';
 import { formatCurrencyWithWon } from '@/utils/formatCurrencyWithWon';
 import MinPrice from '../common/atomic/MinPrice';
+import CreatedAt from '../common/atomic/CreatedAt';
 
 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}일`;
   const formattedHighPrice = formatCurrencyWithWon(product.highestAmount);
 
 
   return (
     <ProductItem product={product}>
       <MinPrice price={product.minPrice} />
-      <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'>{formattedDate}</p>
-      </div>
+      <CreatedAt createAt={product.endDateTime} />
       <div className='flex'>
         <div className='flex gap-2'>
           <LuUsers className='text-gray-500' />

diff --git a/src/components/order/OrderWonProduct.tsx b/src/components/order/OrderWonProduct.tsx
@@ -3,26 +3,15 @@ import { LuUsers } from 'react-icons/lu';
 import ProductItem from '../common/item/ProductItem';
 import { formatCurrencyWithWon } from '@/utils/formatCurrencyWithWon';
 import MinPrice from '../common/atomic/MinPrice';
+import CreatedAt from '../common/atomic/CreatedAt';
 
 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}일`;
   const formattedWinningPrice = formatCurrencyWithWon(product.winningAmount);
-  
+
   return (
     <ProductItem product={product}>
       <MinPrice price={product.minPrice} />
-      <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'>{formattedDate}</p>
-      </div>
+      <CreatedAt createAt={product.endDateTime} />
       <div className='flex'>
         <div className='flex gap-2'>
           <LuUsers className='text-gray-500' />

diff --git a/src/components/profile/FindAddressButton.tsx b/src/components/profile/FindAddressButton.tsx
diff --git a/src/components/user/EndMyRegister.tsx b/src/components/user/EndMyRegister.tsx
@@ -0,0 +1,50 @@
+import ProductItem from '../common/item/ProductItem';
+import type { IAuctionEndRegisteredItem } from 'AuctionItem';
+import { useNavigate } from 'react-router-dom';
+import MinPrice from '../common/atomic/MinPrice';
+import ParticipantCount from '../common/atomic/ParticipantCount';
+import { formatCurrencyWithWon } from '@/utils/formatCurrencyWithWon';
+import CreatedAt from '../common/atomic/CreatedAt';
+
+const EndMyRegister = ({ product }: { product: IAuctionEndRegisteredItem }) => {
+  const navigate = useNavigate();
+  const winningBidAmount = product.winningBidAmount ?? 0;
+  const formattedWinningBid = formatCurrencyWithWon(winningBidAmount);
+
+  return (
+    <ProductItem product={product} onClick={() => navigate(`/auctions/bid/${product.auctionId}`)}>
+      <MinPrice price={product.minPrice} />
+      <ParticipantCount count={product.participantCount} />
+      <div
+        aria-label="낙찰 금액"
+        className="flex items-center text-xs sm:text-body2 text-gray2"
+      >
+        <img alt="참여자" />
+        <span className='whitespace-nowrap'>
+          낙찰 금액 <span className="text-xs text-black sm:text-body2Bold">{formattedWinningBid}</span>
+        </span>
+      </div>
+      <div
+        aria-label="참여자"
+        className="flex items-center text-xs sm:text-body2 text-gray2"
+      >
+        <img alt="참여자" />
+        <span className='whitespace-nowrap'>
+          낙찰 여부 <span className="text-xs text-black sm:text-body2Bold">{product.isWon ? '낙찰' : '유찰'}</span>
+        </span>
+      </div>
+      <div
+        aria-label="참여자"
+        className="flex items-center text-xs sm:text-body2 text-gray2"
+      >
+        <img alt="참여자" />
+        <span className='whitespace-nowrap'>
+          결제 여부 <span className="text-xs text-black sm:text-body2Bold">{product.isPaid ? '결제 완료' : '미결제'}</span>
+        </span>
+      </div>
+      <CreatedAt createAt={product.createAt} />
+    </ProductItem>
+  );
+};
+
+export default EndMyRegister;
diff --git a/src/components/user/OngoingMyRegister.tsx b/src/components/user/OngoingMyRegister.tsx
@@ -1,16 +1,18 @@
 import ProductItem from '../common/item/ProductItem';
-import type { IAuctionRegisteredItem } from 'AuctionItem';
+import type { IAuctionOngoingRegisteredItem } from 'AuctionItem';
 import { useNavigate } from 'react-router-dom';
 import MinPrice from '../common/atomic/MinPrice';
 import ParticipantCount from '../common/atomic/ParticipantCount';
+import CreatedAt from '../common/atomic/CreatedAt';
 
-const OngoingMyRegister = ({ product }: { product: IAuctionRegisteredItem }) => {
+const OngoingMyRegister = ({ product }: { product: IAuctionOngoingRegisteredItem }) => {
   const navigate = useNavigate();
 
   return (
     <ProductItem product={product} onClick={() => navigate(`/auctions/bid/${product.auctionId}`)}>
       <MinPrice price={product.minPrice} />
       <ParticipantCount count={product.participantCount} />
+      <CreatedAt createAt={product.createdAt} />
     </ProductItem>
   );
 };

diff --git a/src/components/user/UserOrder.tsx b/src/components/user/UserOrder.tsx
@@ -86,7 +86,7 @@ const UserOrder = ({ participantCount, preRegisterCount, registeredAuctionCount}
           <div
             className="flex flex-col items-center w-1/2 p-4 border rounded-lg cursor-pointer border-gray2"
             onClick={() =>
-              navigate(ROUTERS.REGISTERED_LIST, { state: { sortType: true } })
+              navigate(ROUTERS.REGISTERED_LIST, { state: { sortType: 'ongoing' } })
             }
           >
             <img src={AuctionIcon} alt="정식 경매" className="w-8 h-8 mb-2" />
@@ -98,7 +98,7 @@ const UserOrder = ({ participantCount, preRegisterCount, registeredAuctionCount}
           <div
             className="flex flex-col items-center w-1/2 p-4 border rounded-lg cursor-pointer border-gray2"
             onClick={() =>
-              navigate(ROUTERS.REGISTERED_LIST, { state: { sortType: false } })
+              navigate(ROUTERS.REGISTERED_LIST, { state: { sortType: 'preAuction' } })
             }
           >
             <img

diff --git a/src/components/user/UserOrderTab.tsx b/src/components/user/UserOrderTab.tsx
@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 
 interface UserOrderTabProps {
-  activeTab: boolean;
-  setActiveTab: (activeTab: boolean) => void;
+  activeTab: string;
+  setActiveTab: (activeTab: string) => void;
 }
 
 const UserOrderTab = ({ activeTab, setActiveTab }: UserOrderTabProps) => {
@@ -11,22 +11,33 @@ const UserOrderTab = ({ activeTab, setActiveTab }: UserOrderTabProps) => {
       <div
         className={classNames(
           'flex justify-center items-center w-full py-2 cursor-pointer font-bold',
-          activeTab === true
+          activeTab === 'ongoing'
             ? 'border-b-2 border-cheeseYellow'
             : 'border-b-2 border-gray-300',
         )}
-        onClick={() => setActiveTab(!activeTab)}
+        onClick={() => setActiveTab('ongoing')}
       >
-        정식 경매
+        진행중인 경매
+      </div>
+      <div
+        className={classNames(
+          'flex justify-center items-center w-full py-2 cursor-pointer font-bold',
+          activeTab === 'end'
+            ? 'border-b-2 border-cheeseYellow'
+            : 'border-b-2 border-gray-300',
+        )}
+        onClick={() => setActiveTab('end')}
+      >
+        종료된 경매
       </div>
       <div
         className={classNames(
           'flex justify-center w-full items-center py-2 cursor-pointer font-bold',
-          activeTab === false
+          activeTab === 'preAuction'
             ? 'border-b-2 border-cheeseYellow'
             : 'border-b-2 border-gray-300',
         )}
-        onClick={() => setActiveTab(!activeTab)}
+        onClick={() => setActiveTab('preAuction')}
       >
         사전 경매
       </div>