🎉 낙관적 업데이트 기능 구현, Mutation API 에러 처리 구현 (#123)

* 🎉 제안 카드 낙관적 업데이트 기능 구현 * 🐛 MySuggestionCard 이벤트 버블링 버그 해결 * 🎉 제안 수락/결정 API 에러처리 기능 추가 * 🎉 모두 읽음 처리 API 에러 처리 구현 * 🎉 모두 읽음 처리 버튼 데이터 없는 경우, 지난 소식 탭일 경우 처리 * 🎉 알림 카드 , 읽은 카드의 경우 액티브 표시 삭제 * 🎉 리스트 페이지 staleTime 적용 * ✨ 내 제안 업데이트 뮤테이션 쿼리키 누락 해결 * 🎉 Mutation Error Toast destructive 타입 적용 * 🎉 내 제안 카드 클릭 범위 축소 적용 * ✨ 컴포넌트 추상화 계층 정리
team-nabi · Nov 28, 2023 · f6b02c1 · f6b02c1
1 parent 9943ac7
commit f6b02c1
Show file tree

Hide file tree

Showing 25 changed files with 266 additions and 198 deletions.
diff --git a/src/app/(root)/(routes)/cards/components/card-filter-section/CardFilterSection.tsx b/src/app/(root)/(routes)/cards/components/card-filter-section/CardFilterSection.tsx
@@ -0,0 +1,10 @@
+import FilterFormDialog from '../filter-form-dialog'
+import SearchInput from '../search-input'
+
+const CardFilterSection = () => (
+  <div className="h-9 flex justify-between items-center mb-6">
+    <SearchInput />
+    <FilterFormDialog />
+  </div>
+)
+export default CardFilterSection
diff --git a/src/app/(root)/(routes)/cards/components/card-filter-section/index.tsx b/src/app/(root)/(routes)/cards/components/card-filter-section/index.tsx
@@ -0,0 +1,3 @@
+import CardFilterSection from './CardFilterSection'
+
+export default CardFilterSection
diff --git a/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx b/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx
@@ -6,9 +6,8 @@ import ExceptionBoundary from '@/components/domain/exception-boundary'
 import { useCardsQuery } from '@/hooks/api/queries/useCardsQuery'
 import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
 import { CategoryObjs, PriceRangeObjs } from '@/types/card'
+import CardFilterSection from '../card-filter-section'
 import CardList from '../card-list/CardList'
-import FilterFormDialog from '../filter-form-dialog'
-import SearchInput from '../search-input'
 
 const CardListContent = () => {
   const searchParams = useSearchParams()
@@ -42,20 +41,15 @@ const CardListContent = () => {
 
   return (
     <>
-      <div className="h-9 flex justify-between items-center mb-6">
-        <SearchInput />
-        <FilterFormDialog />
-      </div>
-      <div>
-        <ExceptionBoundary
-          isLoading={isLoading}
-          isError={isError}
-          isEmpty={isEmpty}
-          isFetchingNextPage={isFetchingNextPage}
-        >
-          <CardList />
-        </ExceptionBoundary>
-      </div>
+      <CardFilterSection />
+      <ExceptionBoundary
+        isLoading={isLoading}
+        isError={isError}
+        isEmpty={isEmpty}
+        isFetchingNextPage={isFetchingNextPage}
+      >
+        <CardList />
+      </ExceptionBoundary>
       <div ref={lastElementRef} />
     </>
   )

diff --git a/src/app/(root)/(routes)/cards/my/components/my-card-list-content/MyCardListContent.tsx b/src/app/(root)/(routes)/cards/my/components/my-card-list-content/MyCardListContent.tsx
@@ -32,22 +32,19 @@ const MyCardListContent = () => {
   const isEmpty = data?.pages[0].data.cardList.length === 0
   return (
     <>
-      <div className="flex items-center justify-center my-12 h-9">
-        <TradeStatusTabs
-          tradeStatus={tradeStatus}
-          setTradeStatus={setTradeStatus}
-        />
-      </div>
-      <div>
-        <ExceptionBoundary
-          isLoading={isLoading}
-          isError={isError}
-          isEmpty={isEmpty}
-          isFetchingNextPage={isFetchingNextPage}
-        >
-          <MyCardList data={data} />
-        </ExceptionBoundary>
-      </div>
+      <TradeStatusTabs
+        tradeStatus={tradeStatus}
+        setTradeStatus={setTradeStatus}
+      />
+      <ExceptionBoundary
+        isLoading={isLoading}
+        isError={isError}
+        isEmpty={isEmpty}
+        isFetchingNextPage={isFetchingNextPage}
+      >
+        <MyCardList data={data} />
+      </ExceptionBoundary>
+
 
       <div ref={lastElementRef} />
     </>

diff --git a/src/app/(root)/(routes)/cards/my/components/trade-status-tabs/TradeStatusTabs.tsx b/src/app/(root)/(routes)/cards/my/components/trade-status-tabs/TradeStatusTabs.tsx
@@ -15,7 +15,7 @@ const TradeStatusTabs = ({
   }
 
   return (
-    <Tabs defaultValue={tradeStatus}>
+    <Tabs defaultValue={tradeStatus} className="my-12">
       <TabsList>
         <TabsTrigger
           value="TRADE_AVAILABLE"

diff --git a/src/app/(root)/(routes)/chatrooms/components/chat-room-list-content/ChatRoomListContent.tsx b/src/app/(root)/(routes)/chatrooms/components/chat-room-list-content/ChatRoomListContent.tsx
@@ -27,16 +27,14 @@ const ChatRoomListContent = () => {
 
   return (
     <>
-      <div>
-        <ExceptionBoundary
-          isLoading={isLoading}
-          isError={isError}
-          isEmpty={isEmpty}
-          isFetchingNextPage={isFetchingNextPage}
-        >
-          <ChatRoomList data={data} />
-        </ExceptionBoundary>
-      </div>
+      <ExceptionBoundary
+        isLoading={isLoading}
+        isError={isError}
+        isEmpty={isEmpty}
+        isFetchingNextPage={isFetchingNextPage}
+      >
+        <ChatRoomList data={data} />
+      </ExceptionBoundary>
 
       <div ref={lastElementRef} />
     </>

diff --git a/src/app/(root)/(routes)/dibs/components/MyDibsTemplate.tsx b/src/app/(root)/(routes)/dibs/components/MyDibsTemplate.tsx
@@ -27,16 +27,14 @@ const MyDibsTemplate = () => {
 
   return (
     <>
-      <div>
-        <ExceptionBoundary
-          isLoading={isLoading}
-          isError={isError}
-          isEmpty={isEmpty}
-          isFetchingNextPage={isFetchingNextPage}
-        >
-          <MyDibsList data={data} />
-        </ExceptionBoundary>
-      </div>
+      <ExceptionBoundary
+        isLoading={isLoading}
+        isError={isError}
+        isEmpty={isEmpty}
+        isFetchingNextPage={isFetchingNextPage}
+      >
+        <MyDibsList data={data} />
+      </ExceptionBoundary>
 
       <div ref={lastElementRef} />
     </>

diff --git a/...)/(routes)/history/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx b/...)/(routes)/history/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx
@@ -27,16 +27,14 @@ const MyTradeHistoryListContent = () => {
 
   return (
     <>
-      <div>
-        <ExceptionBoundary
-          isLoading={isLoading}
-          isError={isError}
-          isEmpty={isEmpty}
-          isFetchingNextPage={isFetchingNextPage}
-        >
-          <MyTradeHistoryList data={data} />
-        </ExceptionBoundary>
-      </div>
+      <ExceptionBoundary
+        isLoading={isLoading}
+        isError={isError}
+        isEmpty={isEmpty}
+        isFetchingNextPage={isFetchingNextPage}
+      >
+        <MyTradeHistoryList data={data} />
+      </ExceptionBoundary>
 
       <div ref={lastElementRef} />
     </>

diff --git a/src/app/(root)/(routes)/notifications/components/notification-card/NotificationCard.tsx b/src/app/(root)/(routes)/notifications/components/notification-card/NotificationCard.tsx
@@ -9,7 +9,7 @@ type NotificationCardProps = {
 }
 
 const NotificationCard = ({
-  notification: { content, cardId },
+  notification: { content, cardId, read },
 }: NotificationCardProps) => {
   return (
     <Link href={`${AppPath.mySuggestions(cardId)}`}>
@@ -28,13 +28,15 @@ const NotificationCard = ({
           </CardFlex>
           <CardFlex className="w-12" justify={'center'}>
             <div className="w-2.5 h-2.5 relative">
-              <CardImage
-                alt={'점 아이콘'}
-                src={Assets.notificationDot}
-                layout="fill"
-                objectFit="cover"
-                className="rounded"
-              />
+              {read || (
+                <CardImage
+                  alt={'점 아이콘'}
+                  src={Assets.notificationDot}
+                  layout="fill"
+                  objectFit="cover"
+                  className="rounded"
+                />
+              )}
             </div>
           </CardFlex>
         </CardFlex>

diff --git a/...)/(routes)/notifications/components/notification-list-content/NotificationListContent.tsx b/...)/(routes)/notifications/components/notification-list-content/NotificationListContent.tsx
@@ -31,7 +31,7 @@ const NotificationListContent = () => {
 
   return (
     <>
-      <NotificationReadButton />
+      <NotificationReadButton isEmpty={isEmpty} isRead={isRead} />
       <NotificationStatusTabs setIsRead={setIsRead} />
       <ExceptionBoundary
         isLoading={isLoading}

diff --git a/...ot)/(routes)/notifications/components/notification-read-button/NotificationReadButton.tsx b/...ot)/(routes)/notifications/components/notification-read-button/NotificationReadButton.tsx
@@ -1,20 +1,33 @@
 import Button from '@/components/ui/button'
 import { useNotificationListUpdateMutation } from '@/hooks/api/mutations/useNotificationListUpdateMutation'
 
-const NotificationReadButton = () => {
+type NotificationReadButtonProps = {
+  isRead: boolean
+  isEmpty: boolean
+}
+
+const NotificationReadButton = ({
+  isEmpty,
+  isRead,
+}: NotificationReadButtonProps) => {
   const { mutate } = useNotificationListUpdateMutation()
 
   const handleReadAllNotifications = () => {
     mutate()
     window.location.reload()
   }
 
+  if (isRead) {
+    return null
+  }
+
   return (
     <div className="flex justify-end">
       <Button
         variant={'gradation'}
         rounded={'lg'}
         onClick={handleReadAllNotifications}
+        disabled={isEmpty}
       >
         모두 읽음 처리
       </Button>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import CardFilterSection from './CardFilterSection'

		export default CardFilterSection