🛠️ 피드 메인 페이지 피드백 반영

src/app/mocks/handler/feed.ts

@@ -1,4 +1,4 @@
-import { http } from 'msw';
+import { delay, http } from 'msw';
 
 import { feeds } from '../consts/feed';
 import { reports } from '../consts/report';
@@ -28,7 +28,7 @@ export const feedHandlers = [
   /**
    * @todo pageCount를 쿼리 파라미터로 받도록 수정
    */
-  http.get('/feeds', ({ request }) => {
+  http.get('/feeds', async ({ request }) => {
     const url = new URL(request.url);
     const page = url.searchParams.get('page') || 1;
 
@@ -47,6 +47,8 @@ export const feedHandlers = [
     const endOfPageRange = formattedPage * pageCount;
     const hasNextPage = endOfPageRange < totalFeeds;
 
+    await delay(Math.floor(Math.random() * (4000 - 2000 + 1)) + 2000);
+
     return createHttpSuccessResponse({
       feeds: feedsData,
       currentPageNumber: pageCount,

src/app/providers/query-client.ts

@@ -6,6 +6,7 @@ const queryClientOptions: QueryClientConfig = {
       staleTime: 10 * 60 * 1000, // 10 minutes
       gcTime: 15 * 60 * 1000, // 15 minutes
       refetchOnWindowFocus: false,
+      retry: false,
     },
   },
 };

src/pages/feed-main/ui/FeedMainPage.scss

@@ -0,0 +1,3 @@
+.feed-main-page {
+  margin-bottom: 24px;
+}

src/pages/feed-main/ui/FeedMainPage.tsx

@@ -1,4 +1,5 @@
 import { FeedMainHeader, FeedMainList } from '@/widgets';
+import './FeedMainPage.scss';
 
 export const FeedMainPage = () => {
   return (

src/shared/axios/config/instance.ts

@@ -4,7 +4,7 @@ import { onError, onRequest, onResponse } from './interceptors';
 
 export const axiosInstance = axios.create({
   baseURL: '',
-  timeout: 5000,
+  timeout: 3000,
   headers: {
     'Content-Type': 'application/json; charset=utf-8',
   },

src/shared/ui/network-toast-error/NetworkToastError.scss

@@ -1,75 +1,35 @@
-@keyframes bounceInUp {
-  from,
-  60%,
-  75%,
-  90%,
-  to {
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  from {
-    opacity: 0;
-    transform: translate3d(0, 100%, 0);
-  }
-  60% {
-    opacity: 1;
-    transform: translate3d(0, -20px, 0);
-  }
-  75% {
-    transform: translate3d(0, 10px, 0);
-  }
-  90% {
-    transform: translate3d(0, -5px, 0);
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
+.Toastify__toast-container {
+  width: 100%;
+  margin-bottom: 8px;
 
-.Toastify {
-  position: fixed;
-  bottom: 8px;
-  left: 0;
-  right: 0;
+  .Toastify__toast {
+    font-family: unset;
 
-  width: 280px;
-  height: 40px;
-  margin: 0 auto;
+    margin: 0 auto;
+    width: 280px;
+    height: 40px;
 
-  .network-error-toast {
-    animation: bounceInUp 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55) both;
+    min-height: 40px;
+    max-height: 40px;
 
-    width: 100%;
-    height: 100%;
     border-radius: 6px;
 
-    display: flex;
-    align-items: center;
-
-    color: #ffffff;
     background: #98a3b4e5;
+    color: #ffffff;
+    padding: 0;
 
-    .Toastify__toast--default {
-      color: #ffffff;
-
-      width: 100%;
-
-      .Toastify__toast-body {
-        display: flex;
-        align-items: center;
-
-        gap: 6px;
-
-        .Toastify__toast-icon {
-          width: 20px;
-          height: 20px;
+    .Toastify__toast-body {
+      height: 40px;
+      padding: 0 0 0 12px;
 
-          margin-left: 12px;
-        }
+      .Toastify__toast-icon {
+        margin-inline-end: 6px;
       }
+    }
 
-      .Toastify__close-button {
-        display: none;
-      }
+    .Toastify__close-button,
+    .Toastify__progress-bar--wrp {
+      display: none;
     }
   }
 }

src/shared/ui/network-toast-error/NetworkToastError.tsx

@@ -1,9 +1,34 @@
-import { ToastContainer } from 'react-toastify';
+import { useEffect, useRef } from 'react';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 import './NetworkToastError.scss';
 import { Icon } from '..';
 
-export const NetworkToastError = () => {
+interface NetworkToastErrorProps {
+  isVisible: boolean;
+  errorMessage: string;
+}
+
+export const NetworkToastError: React.FC<NetworkToastErrorProps> = ({
+  isVisible,
+  errorMessage,
+}) => {
+  const toastId = useRef<number | string>(-1);
+
+  useEffect(() => {
+    if (isVisible && toastId.current === -1) {
+      toastId.current = toast(errorMessage);
+      return;
+    }
+
+    if (!isVisible && toastId.current !== -1) {
+      toast.dismiss(toastId.current);
+      toastId.current = -1;
+      return;
+    }
+  }, [isVisible, errorMessage]);
+
   return (
     <ToastContainer
       className='network-error-toast b1semi'

src/widgets/feed-main-list/ui/FeedMainList.scss

@@ -1,6 +1,6 @@
 .feed-list-section {
   .feed-list {
-    padding: 16px 0 24px;
+    margin-top: 16px;
   }
 
   .feed-wrapper:not(:last-child)::after {

src/widgets/feed-main-list/ui/FeedMainList.tsx

@@ -1,5 +1,4 @@
 import InfiniteScroll from 'react-infinite-scroller';
-import { toast } from 'react-toastify';
 
 import { NetworkError, NetworkToastError } from '@/shared/ui';
 
@@ -21,19 +20,14 @@ export const FeedMainList = () => {
   } = useInfinityFeeds();
 
   if (isLoading) {
-    return <SkeletonFeedMainList />;
+    return <SkeletonFeedMainList count={10} />;
   }
 
   if (isError && !feeds) {
     // 초기 로딩에서 에러가 발생할 경우
     return <NetworkError refetch={refetchFeeds} />;
   }
 
-  if (isError && feeds) {
-    // 무한 스크롤 도중 에러가 발생할 경우
-    toast('인터넷 연결이 불안정해요');
-  }
-
   return (
     <section className='feed-list-section'>
       <InfiniteScroll
@@ -48,8 +42,12 @@ export const FeedMainList = () => {
             <Feed key={feed.id} feed={feed} />
           ));
         })}
+        {isFetching && <SkeletonFeedMainList count={3} />}
       </InfiniteScroll>
-      <NetworkToastError />
+      <NetworkToastError
+        isVisible={isError && !!feeds}
+        errorMessage='인터넷 연결이 불안정해요'
+      />
     </section>
   );
 };

src/widgets/feed-main-list/ui/SkeletonFeedMainList.scss

@@ -1,9 +1,5 @@
 .skeleton-feed-section {
-  width: 320px;
-  height: 508px;
-  margin: 16px 0 24px;
-
-  overflow: hidden;
+  margin-top: 16px;
 
   .skeleton-feed-wrapper:not(:last-child)::after {
     content: '';

src/widgets/feed-main-list/ui/SkeletonFeedMainList.tsx

@@ -1,10 +1,12 @@
 import { SkeletonFeed } from './SkeletonFeed';
 import './SkeletonFeedMainList.scss';
 
-export const SkeletonFeedMainList = () => {
+export const SkeletonFeedMainList: React.FC<{ count: number }> = ({
+  count,
+}) => {
   return (
     <section className='skeleton-feed-section'>
-      {new Array(5).fill(1).map((_, i) => (
+      {new Array(count).fill(1).map((_, i) => (
         <SkeletonFeed key={i} />
       ))}
     </section>