🎉 각 카드 스타일 수정, 페이지 타이틀 스타일 수정 (#127)

* 🎉 제안 카드 낙관적 업데이트 기능 구현 * 🐛 MySuggestionCard 이벤트 버블링 버그 해결 * 🎉 제안 수락/결정 API 에러처리 기능 추가 * 🎉 모두 읽음 처리 API 에러 처리 구현 * 🎉 모두 읽음 처리 버튼 데이터 없는 경우, 지난 소식 탭일 경우 처리 * 🎉 알림 카드 , 읽은 카드의 경우 액티브 표시 삭제 * 🎉 리스트 페이지 staleTime 적용 * 🐛 거래내역 카드 UI 버그 해결 - 텍스트 수 많아질시 스타일 깨짐 현상 해결 * 🐛 물건 카드 UI 버그 해결 - 뷰포트 너비가 줄어들때 이미지가 줄어드는 현상 해결 - 뷰포트 너비가 줄어들때 요소가 박스 밖으로 빠져나오는 현상 해결 * 🐛 내 카드 UI 버그 해결 - 뷰포트 너비가 줄어들 시 이미지가 줄어드는 현상 해결 - 뷰포트 너비가 줄어들 시 요소가 이탈하는 현상 해결 * 🐛 내 제안 카드 UI 버그 해결 - 뷰포트 너비 줄어들 시 이미지 줄어드는 현상 해결 * 🐛 내 제안 카드 설명 UI 버그 해결 - 뷰포트 줄어 들 시, 이미지 크기 줄어드는 현상 해결 * 🐛 알림카드 UI 버그 해결 - 세줄이 넘어갈시 글자가 박스를 넘어가는 현상 해결 * 🐛 페이지 타이틀 글자 수 많아 질시 줄 내려감 버그 해결 * 🎉 isEmpty 일시, NoData로 fallback 변경
team-nabi · Nov 28, 2023 · 9f8924a · 9f8924a
1 parent f6b02c1
commit 9f8924a
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 41 deletions.
diff --git a/src/app/(root)/(routes)/cards/my/components/my-card/MyCard.tsx b/src/app/(root)/(routes)/cards/my/components/my-card/MyCard.tsx
@@ -16,7 +16,7 @@ const MoveToItemListPageButton = ({ priceRange }: { priceRange: string }) => (
   <Link href={`${AppPath.cards()}?priceRange=${priceRange}`}>
     <CardFlex align={'center'} gap={'space'}>
       <Image src={Assets.checkCircle} alt="check-circle" />
-      <CardText>제안 하러가기</CardText>
+      <CardText className="break-keep">제안 하러가기</CardText>
     </CardFlex>
   </Link>
 )
@@ -25,7 +25,7 @@ const MoveToSuggestCheckPageButton = ({ cardId }: { cardId: number }) => (
   <Link href={`${AppPath.mySuggestions(cardId)}`}>
     <CardFlex align={'center'} gap={'space'}>
       <Image src={Assets.arrowCircleRight} alt="arrow-circle-right" />{' '}
-      <CardText>제안 확인</CardText>
+      <CardText className="break-keep">제안 확인</CardText>
     </CardFlex>
   </Link>
 )
@@ -54,7 +54,7 @@ const MyCard = ({
           gap={'space'}
           className="h-full"
         >
-          <div className="relative h-full w-36">
+          <div className="relative h-full min-w-[128px]">
             <CardImage
               className="rounded-lg"
               src={thumbnail}
@@ -67,13 +67,10 @@ const MyCard = ({
           <CardFlex
             direction={'col'}
             justify={'between'}
-            className="w-2/3 h-full"
+            className="w-full h-full"
           >
             <CardFlex align={'center'} gap={'space'}>
-              <CardText
-                type={'title'}
-                className="overflow-hidden whitespace-nowrap overflow-ellipsis"
-              >
+              <CardText type={'title'} className="line-clamp-1">
                 {cardTitle}
               </CardText>
               {status === 'TRADE_AVAILABLE' ? (
@@ -84,10 +81,7 @@ const MyCard = ({
                 <TradeCompleteBadge />
               )}
             </CardFlex>
-            <CardText
-              type={'description'}
-              className="overflow-hidden whitespace-nowrap overflow-ellipsis"
-            >
+            <CardText type={'description'} className="line-clamp-1">
               {itemName}
             </CardText>
             <CardText type={'description'}>

diff --git a/src/app/(root)/(routes)/notifications/components/notification-card/NotificationCard.tsx b/src/app/(root)/(routes)/notifications/components/notification-card/NotificationCard.tsx
@@ -24,7 +24,9 @@ const NotificationCard = ({
                 objectFit="cover"
               />
             </div>
-            <CardText type={'description'}>{content}</CardText>
+            <CardText type={'description'} className="line-clamp-3">
+              {content}
+            </CardText>
           </CardFlex>
           <CardFlex className="w-12" justify={'center'}>
             <div className="w-2.5 h-2.5 relative">

diff --git a/...uggestions/[myCardId]/components/my-card-description-section/MyCardDescriptionSection.tsx b/...uggestions/[myCardId]/components/my-card-description-section/MyCardDescriptionSection.tsx
@@ -33,7 +33,7 @@ const MyCardDescriptionSection = ({
         gap={'space'}
         className="w-full h-full"
       >
-        <div className="relative w-1/3 h-full">
+        <div className="relative h-full min-w-[128px]">
           <CardImage
             className="border rounded-lg border-background-secondary-color"
             src={thumbnail}
@@ -47,13 +47,10 @@ const MyCardDescriptionSection = ({
           direction={'col'}
           // justify={'between'}
           gap={'space'}
-          className="w-2/3 h-full"
+          className="w-full h-full"
         >
           <CardFlex align={'center'} gap={'space'}>
-            <CardText
-              type={'title'}
-              className="overflow-hidden whitespace-nowrap overflow-ellipsis"
-            >
+            <CardText type={'title'} className="line-clamp-1">
               {cardTitle}
             </CardText>
             {status === 'TRADE_AVAILABLE' ? (
@@ -62,10 +59,7 @@ const MyCardDescriptionSection = ({
               <ReservedBadge />
             )}
           </CardFlex>
-          <CardText
-            type={'description'}
-            className="overflow-hidden whitespace-nowrap overflow-ellipsis"
-          >
+          <CardText type={'description'} className="line-clamp-1">
             {itemName}
           </CardText>
           <hr className="my-1" />

diff --git a/...(root)/(routes)/suggestions/[myCardId]/components/my-suggestion-card/MySuggestionCard.tsx b/...(root)/(routes)/suggestions/[myCardId]/components/my-suggestion-card/MySuggestionCard.tsx
@@ -27,7 +27,7 @@ const SuggestionButtons = ({
       gap={'space'}
     >
       <Image src={Assets.checkCircle} alt="check-circle" />
-      <CardText>수락</CardText>
+      <CardText className="break-keep">수락</CardText>
     </CardFlex>
     <CardFlex
       onClick={() => {
@@ -38,7 +38,7 @@ const SuggestionButtons = ({
       gap={'space'}
     >
       <Image src={Assets.quitCircle} alt="check-circle" />
-      <CardText>거절</CardText>
+      <CardText className="break-keep">거절</CardText>
     </CardFlex>
   </>
 )
@@ -115,7 +115,7 @@ const MySuggestionCard = ({
           className="h-full"
         >
           <div
-            className="relative h-full w-36 cursor-pointer"
+            className="relative h-full min-w-[128px] cursor-pointer"
             onClick={() => {
               router.push(AppPath.card(String(cardId)))
             }}
@@ -132,7 +132,7 @@ const MySuggestionCard = ({
           <CardFlex
             direction={'col'}
             justify={'between'}
-            className="w-2/3 h-full"
+            className="w-full h-full"
           >
             <CardText type={'title'} className="line-clmap-1">
               {cardTitle}

diff --git a/src/components/domain/card/trade-history-card/TradeHistoryCard.tsx b/src/components/domain/card/trade-history-card/TradeHistoryCard.tsx
@@ -22,8 +22,9 @@ const SubCard = ({
       />
     </div>
     <CardText
+      title={itemName}
       type={'description'}
-      className="font-bold whitespace-nowrap overflow-hidden overflow-ellipsis"
+      className="w-20 font-bold text-center whitespace-nowrap overflow-hidden overflow-ellipsis"
     >
       {itemName}
     </CardText>

diff --git a/src/components/domain/card/trade-status-card/TradeStatusCard.tsx b/src/components/domain/card/trade-status-card/TradeStatusCard.tsx
@@ -35,10 +35,10 @@ const TradeStatusCard = ({
           gap={'space'}
           className="h-full"
         >
-          <div className="relative w-32 h-full">
+          <div className="relative min-w-[128px] h-full">
             <CardImage
               src={thumbnail}
-              alt="이미지가 없습니다."
+              alt="물건 이미지"
               layout="fill"
               objectFit="cover"
             />
@@ -47,13 +47,10 @@ const TradeStatusCard = ({
           <CardFlex
             direction={'col'}
             justify={'between'}
-            className="w-2/3 h-full"
+            className="w-full h-full"
           >
             <CardFlex align={'center'} gap={'space'}>
-              <CardText
-                type={'title'}
-                className="overflow-hidden whitespace-nowrap overflow-ellipsis"
-              >
+              <CardText type={'title'} className="line-clamp-1">
                 {cardTitle}
               </CardText>
               {status === 'TRADE_AVAILABLE' ? (
@@ -62,10 +59,7 @@ const TradeStatusCard = ({
                 <ReservedBadge />
               )}
             </CardFlex>
-            <CardText
-              type={'description'}
-              className="overflow-hidden whitespace-nowrap overflow-ellipsis"
-            >
+            <CardText type={'description'} className="line-clamp-1">
               {itemName}
             </CardText>
             <CardText type={'description'}>

diff --git a/src/components/domain/exception-boundary/ExceptionBoundary.tsx b/src/components/domain/exception-boundary/ExceptionBoundary.tsx
@@ -1,4 +1,6 @@
+import router from 'next/router'
 import Loading from '@/app/loading'
+import NoData from '../no-data'
 
 type ExceptionBoundaryProps = {
   isLoading: boolean
@@ -24,7 +26,13 @@ const ExceptionBoundary: React.FC<ExceptionBoundaryProps> = ({
   }
 
   if (isEmpty) {
-    return <div>데이터 없음!</div>
+    return (
+      <NoData
+        title="해당 물건이 존재 하지 않습니다."
+        onClickButton={() => router.push('/cards/new')}
+        buttonContent="물건 등록하러 가기"
+      />
+    )
   }
 
   return (

diff --git a/src/components/domain/page-title/PageTitle.tsx b/src/components/domain/page-title/PageTitle.tsx
@@ -14,7 +14,7 @@ const PageTitle = ({ title }: { title: string }) => {
         className="flex items-center justify-start cursor-pointer"
         onClick={() => router.back()}
       />
-      <h2 className="flex items-center justify-center text-xl font-bold">
+      <h2 className="flex items-center justify-center text-xl font-bold whitespace-nowrap">
         {title}
       </h2>
       <div></div>