diff --git a/src/widgets/feed-main-list/test/FeedMainList.error.test.tsx b/src/widgets/feed-main-list/test/FeedMainList.error.test.tsx
new file mode 100644
index 0000000..92e5eb8
--- /dev/null
+++ b/src/widgets/feed-main-list/test/FeedMainList.error.test.tsx
@@ -0,0 +1,29 @@
+import { HttpResponse, http } from 'msw';
+import { expect, test } from 'vitest';
+
+import { server } from '@/setupTest';
+import { render, screen } from '@/shared/tests/setup';
+
+import { FeedMainList } from '..';
+
+test('피드 메인 페이지 에러 발생 시, 네트워크 에러 메시지가 화면에 표시된다.', async () => {
+ // given
+ server.use(
+ http.get('/feeds', async () => {
+ return new HttpResponse(null, { status: 524 }); // 타임아웃 에러 반환
+ }),
+ );
+ render();
+
+ const errorTitle = await screen.findByRole('heading', {
+ level: 1,
+ name: '인터넷에 연결되지 않았어요',
+ });
+ const retryButton = await screen.findByRole('button', {
+ name: '재시도하기',
+ });
+
+ // then
+ expect(errorTitle).toBeInTheDocument();
+ expect(retryButton).toBeInTheDocument();
+});
diff --git a/src/widgets/feed-main-list/test/FeedMainList.test.tsx b/src/widgets/feed-main-list/test/FeedMainList.test.tsx
new file mode 100644
index 0000000..4e5e290
--- /dev/null
+++ b/src/widgets/feed-main-list/test/FeedMainList.test.tsx
@@ -0,0 +1,65 @@
+import { HttpResponse, http } from 'msw';
+import { describe, expect, it } from 'vitest';
+
+import { server } from '@/setupTest';
+import { render, screen } from '@/shared/tests/setup';
+
+import { FeedMainList } from '..';
+
+const mockingFeedData = [
+ {
+ id: 1,
+ user: { id: 1, profileImage: '', name: '강병준' },
+ content: 'Feed Content 1',
+ images: [],
+
+ likeCount: 0,
+ commentCount: 0,
+
+ isLiked: false,
+ isBookmark: false,
+
+ createdAt: '2024-04-16 12:00:00',
+ updatedAt: '2024-04-16 12:00:00',
+ },
+];
+
+describe('피드 메인 페이지에서', () => {
+ it('스켈레톤 UI가 화면에 먼저 렌더링된다.', async () => {
+ // given
+ render();
+ const skeletonFeedMainList = document.querySelector(
+ '.skeleton-feed-section',
+ );
+
+ // then
+ expect(skeletonFeedMainList).toBeInTheDocument();
+ });
+
+ it('스켈레톤 UI 이후 콘텐츠가 정상적으로 렌더링된다.', async () => {
+ // given
+ server.use(
+ http.get('/feeds', async () => {
+ return HttpResponse.json(
+ {
+ code: '2000',
+ data: {
+ feeds: mockingFeedData,
+ currentPageNumber: 1,
+ pageSize: 1,
+ numberOfElements: 1,
+ hasNextPage: false,
+ },
+ },
+ { status: 200 },
+ );
+ }),
+ );
+ render();
+
+ const content = await screen.findByText(mockingFeedData[0].content);
+
+ // then
+ expect(content).toBeInTheDocument();
+ });
+});