🐛 카드 컴포넌트 UI 버그, 무한 스크롤 버그 수정, 각 카드 컴포넌트 key 대신 value 렌더링 하기

src/app/(root)/(routes)/mypage/mycards/components/my-card/MyCard.tsx

@@ -2,11 +2,15 @@ import { formatDistanceToNow } from 'date-fns'
 import koLocale from 'date-fns/locale/ko'
 import Image from 'next/image'
 import Link from 'next/link'
-import Badge from '@/components/ui/badge'
+import ReservedBadge from '@/components/domain/badge/reserved-badge'
+import TradeAvailableBadge from '@/components/domain/badge/trade-available-badge'
+import TradeCompleteBadge from '@/components/domain/badge/trade-complete-badge'
 import { Card, CardFlex, CardImage, CardText } from '@/components/ui/card'
 import AppPath from '@/config/appPath'
 import Assets from '@/config/assets'
+import { PRICE_RANGE_OBJS } from '@/constants/card'
 import type { Card as CardInfo } from '@/types/card'
+import { getValueByKey } from '@/utils/getValueByKey'
 
 const MoveToItemListPageButton = ({ priceRange }: { priceRange: string }) => (
   <Link href={`${AppPath.cards()}?priceRange=${priceRange}`}>
@@ -26,10 +30,6 @@ const MoveToSuggestCheckPageButton = ({ cardId }: { cardId: number }) => (
   </Link>
 )
 
-const TradeAvailableBadge = () => <Badge variant={'primary'}>거래가능</Badge>
-const ReservedBadge = () => <Badge variant={'secondary'}>예약중</Badge>
-const TradeCompleteBadge = () => <Badge variant={'gradation'}>거래성사</Badge>
-
 type MyCardProps = {
   card: CardInfo
 }
@@ -64,9 +64,18 @@ const MyCard = ({
             />
           </div>
 
-          <CardFlex direction={'col'} justify={'between'} className="h-full">
+          <CardFlex
+            direction={'col'}
+            justify={'between'}
+            className="h-full w-2/3"
+          >
             <CardFlex align={'center'} gap={'space'}>
-              <CardText type={'title'}>{cardTitle}</CardText>
+              <CardText
+                type={'title'}
+                className="whitespace-nowrap overflow-hidden overflow-ellipsis"
+              >
+                {cardTitle}
+              </CardText>
               {status === 'TRADE_AVAILABLE' ? (
                 <TradeAvailableBadge />
               ) : status === 'RESERVED' ? (
@@ -75,8 +84,15 @@ const MyCard = ({
                 <TradeCompleteBadge />
               )}
             </CardFlex>
-            <CardText type={'description'}>{itemName}</CardText>
-            <CardText type={'description'}>{priceRange}</CardText>
+            <CardText
+              type={'description'}
+              className="whitespace-nowrap overflow-hidden overflow-ellipsis"
+            >
+              {itemName}
+            </CardText>
+            <CardText type={'description'}>
+              {getValueByKey(PRICE_RANGE_OBJS, priceRange)}
+            </CardText>
             <CardFlex gap={'space'}>
               {status === 'TRADE_AVAILABLE' ? (
                 <>

src/app/(root)/(routes)/mypage/suggestions/[myCardId]/components/my-card-description-section/MyCardDescriptionSection.tsx

@@ -1,13 +1,13 @@
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 import koLocale from 'date-fns/locale/ko'
 import Link from 'next/link'
-import Badge from '@/components/ui/badge'
+import ReservedBadge from '@/components/domain/badge/reserved-badge'
+import TradeAvailableBadge from '@/components/domain/badge/trade-available-badge'
 import { CardFlex, CardImage, CardText } from '@/components/ui/card'
 import AppPath from '@/config/appPath'
+import { PRICE_RANGE_OBJS } from '@/constants/card'
 import { CardDetail } from '@/types/card'
-
-const TradeAvailableBadge = () => <Badge variant={'primary'}>거래가능</Badge>
-const ReservedBadge = () => <Badge variant={'secondary'}>예약중</Badge>
+import { getValueByKey } from '@/utils/getValueByKey'
 
 type MyCardDescriptionSection = {
   card: CardDetail
@@ -49,15 +49,27 @@ const MyCardDescriptionSection = ({
           className="w-2/3 h-full"
         >
           <CardFlex align={'center'} gap={'space'}>
-            <CardText type={'title'}>{cardTitle}</CardText>
+            <CardText
+              type={'title'}
+              className="whitespace-nowrap overflow-hidden overflow-ellipsis"
+            >
+              {cardTitle}
+            </CardText>
             {status === 'TRADE_AVAILABLE' ? (
               <TradeAvailableBadge />
             ) : (
               <ReservedBadge />
             )}
           </CardFlex>
-          <CardText type={'description'}>{itemName}</CardText>
-          <CardText type={'description'}>{priceRange}</CardText>
+          <CardText
+            type={'description'}
+            className="whitespace-nowrap overflow-hidden overflow-ellipsis"
+          >
+            {itemName}
+          </CardText>
+          <CardText type={'description'}>
+            {getValueByKey(PRICE_RANGE_OBJS, priceRange)}
+          </CardText>
           <CardText type={'date'}>
             {formatDistanceToNow(new Date(createdAt), { locale: koLocale })}
           </CardText>

src/app/(root)/(routes)/mypage/suggestions/[myCardId]/components/my-suggestion-card/MySuggestionCard.tsx

@@ -5,9 +5,11 @@ import { useParams } from 'next/navigation'
 import Button from '@/components/ui/button'
 import { CardFlex, CardText, Card, CardImage } from '@/components/ui/card/Card'
 import Assets from '@/config/assets'
+import { PRICE_RANGE_OBJS } from '@/constants/card'
 import { useMySuggestionUpdateMutation } from '@/hooks/api/mutations/useMySuggestionUpdateMutation'
 import { Card as CardInfo } from '@/types/card'
 import { DirectionType, Suggestion, SuggestionType } from '@/types/suggestion'
+import { getValueByKey } from '@/utils/getValueByKey'
 
 const SuggestionButtons = ({
   handleMySuggestionUpdate,
@@ -106,10 +108,26 @@ const MySuggestionCard = ({
             />
           </div>
 
-          <CardFlex direction={'col'} justify={'between'} className="h-full">
-            <CardText type={'title'}>{cardTitle}</CardText>
-            <CardText type={'description'}>{itemName}</CardText>
-            <CardText type={'description'}>{priceRange}</CardText>
+          <CardFlex
+            direction={'col'}
+            justify={'between'}
+            className="h-full w-2/3"
+          >
+            <CardText
+              type={'title'}
+              className="whitespace-nowrap overflow-hidden overflow-ellipsis"
+            >
+              {cardTitle}
+            </CardText>
+            <CardText
+              type={'description'}
+              className="whitespace-nowrap overflow-hidden overflow-ellipsis"
+            >
+              {itemName}
+            </CardText>
+            <CardText type={'description'}>
+              {getValueByKey(PRICE_RANGE_OBJS, priceRange)}
+            </CardText>
             <CardFlex gap={'space'}>
               {suggestionStatus === 'WAITING' ? (
                 directionType === 'RECEIVE' ? (

src/components/domain/badge/reserved-badge/ReservedBadge.tsx

@@ -0,0 +1,8 @@
+import Badge from '@/components/ui/badge'
+
+const ReservedBadge = () => (
+  <Badge variant={'secondary'} className="min-w-fit">
+    예약중
+  </Badge>
+)
+export default ReservedBadge

src/components/domain/badge/reserved-badge/index.tsx

@@ -0,0 +1,3 @@
+import ReservedBadge from './ReservedBadge'
+
+export default ReservedBadge

src/components/domain/badge/trade-available-badge/TradeAvailableBadge.tsx

@@ -0,0 +1,8 @@
+import Badge from '@/components/ui/badge'
+
+const TradeAvailableBadge = () => (
+  <Badge variant={'primary'} className="min-w-fit">
+    거래가능
+  </Badge>
+)
+export default TradeAvailableBadge

src/components/domain/badge/trade-available-badge/index.tsx

@@ -0,0 +1,3 @@
+import TradeAvailableBadge from './TradeAvailableBadge'
+
+export default TradeAvailableBadge

src/components/domain/badge/trade-complete-badge/TradeCompleteBadge.tsx

@@ -0,0 +1,8 @@
+import Badge from '@/components/ui/badge'
+
+const TradeCompleteBadge = () => (
+  <Badge variant={'gradation'} className="min-w-fit">
+    거래완료
+  </Badge>
+)
+export default TradeCompleteBadge

src/components/domain/badge/trade-complete-badge/index.tsx

@@ -0,0 +1,3 @@
+import TradeCompleteBadge from './TradeCompleteBadge'
+
+export default TradeCompleteBadge

src/components/domain/card/trade-history-card/TradeHistoryCard.tsx

@@ -21,10 +21,15 @@ const SubCard = ({
         className="rounded"
       />
     </div>
-    <CardText type={'description'} className="font-bold">
+    <CardText
+      type={'description'}
+      className="font-bold whitespace-nowrap overflow-hidden overflow-ellipsis"
+    >
       {itemName}
     </CardText>
-    <CardText type={'icon'}>{priceRange}</CardText>
+    <CardText type={'icon'}>
+      {getValueByKey(PRICE_RANGE_OBJS, priceRange)}
+    </CardText>
   </CardFlex>
 )
 
@@ -44,7 +49,7 @@ const TradeHistoryCard = ({
         <SubCard
           thumbnail={fromCard.thumbnail}
           itemName={fromCard.itemName}
-          priceRange={getValueByKey(PRICE_RANGE_OBJS, fromCard.priceRange)}
+          priceRange={fromCard.priceRange}
         />
         <CardFlex direction={'col'} align={'center'}>
           <CardImage alt={'거래 완료 이미지'} src={Assets.tradeComplete} />
@@ -55,7 +60,7 @@ const TradeHistoryCard = ({
         <SubCard
           thumbnail={toCard.thumbnail}
           itemName={toCard.itemName}
-          priceRange={getValueByKey(PRICE_RANGE_OBJS, toCard.priceRange)}
+          priceRange={toCard.priceRange}
         />
       </CardFlex>
     </Card>

src/components/domain/card/trade-status-card/TradeStatusCard.tsx

@@ -1,19 +1,19 @@
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 import koLocale from 'date-fns/locale/ko'
 import Link from 'next/link'
-import Badge from '@/components/ui/badge'
 import Card from '@/components/ui/card'
 import { CardFlex, CardImage, CardText } from '@/components/ui/card'
 import AppPath from '@/config/appPath'
+import { PRICE_RANGE_OBJS } from '@/constants/card'
 import { Card as CardInfo } from '@/types/card'
+import { getValueByKey } from '@/utils/getValueByKey'
+import ReservedBadge from '../../badge/reserved-badge'
+import TradeAvailableBadge from '../../badge/trade-available-badge'
 
 type TradeStatusCardProps = {
   card: CardInfo
 }
 
-const TradeAvailableBadge = () => <Badge variant={'primary'}>거래가능</Badge>
-const ReservedBadge = () => <Badge variant={'secondary'}>예약중</Badge>
-
 const TradeStatusCard = ({
   card: {
     cardId,
@@ -44,17 +44,33 @@ const TradeStatusCard = ({
             />
           </div>
 
-          <CardFlex direction={'col'} justify={'between'} className="h-full">
+          <CardFlex
+            direction={'col'}
+            justify={'between'}
+            className="h-full w-2/3"
+          >
             <CardFlex align={'center'} gap={'space'}>
-              <CardText type={'title'}>{cardTitle}</CardText>
+              <CardText
+                type={'title'}
+                className="whitespace-nowrap overflow-hidden overflow-ellipsis"
+              >
+                {cardTitle}
+              </CardText>
               {status === 'TRADE_AVAILABLE' ? (
                 <TradeAvailableBadge />
               ) : (
                 <ReservedBadge />
               )}
             </CardFlex>
-            <CardText type={'description'}>{itemName}</CardText>
-            <CardText type={'description'}>{priceRange}</CardText>
+            <CardText
+              type={'description'}
+              className="whitespace-nowrap overflow-hidden overflow-ellipsis"
+            >
+              {itemName}
+            </CardText>
+            <CardText type={'description'}>
+              {getValueByKey(PRICE_RANGE_OBJS, priceRange)}
+            </CardText>
             <CardText type={'date'}>
               {formatDistanceToNow(new Date(createdAt), { locale: koLocale })}
             </CardText>

src/config/apiEndPoint.ts

@@ -1,3 +1,4 @@
+import { COMMON_PAGE_SIZE } from '@/constants/pageSize'
 import { GetCardListReq, GetMyCardListReq } from '@/services/card/card'
 import { GetMyTradeHistoryListReq } from '@/services/history/history'
 import { GetMySuggestionListReq } from '@/services/suggestion/suggestion'
@@ -20,12 +21,12 @@ const ApiEndPoint = {
       cardTitle,
       cursorId,
       status: 'TRADE_AVAILABLE,RESERVED',
-      size: '5',
+      size: COMMON_PAGE_SIZE,
     })}`,
   getMyCardList: ({ tradeStatus, cursorId }: GetMyCardListReq) => {
     return `/cards/${tradeStatus}/my-cards?${getQueryParams({
       cursorId,
-      size: '5',
+      size: COMMON_PAGE_SIZE,
     })}`
   },
   postDibs: (cardId: number) => `/dibs/${cardId}`,
@@ -41,7 +42,7 @@ const ApiEndPoint = {
     return `/suggestions/${directionType}/${suggestionType}/${cardId}/?${getQueryParams(
       {
         cursorId,
-        size: '5',
+        size: COMMON_PAGE_SIZE,
       },
     )}`
   },
@@ -53,7 +54,7 @@ const ApiEndPoint = {
   getMyTradeHistoryList: ({ cursorId }: GetMyTradeHistoryListReq) => {
     return `/complete-requests/user/?${getQueryParams({
       cursorId,
-      size: '5',
+      size: COMMON_PAGE_SIZE,
     })}`
   },
   postImageFile: () => '/s3/upload/single',

src/constants/pageSize.ts

@@ -1 +1,2 @@
 export const RECENT_HISTORY_SIZE = 5
+export const COMMON_PAGE_SIZE = 10