feat: 백엔드 관련 스크립트 추가 (#413)

Author: yeolyi

.gitignore

@@ -48,3 +48,5 @@ node_modules/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+csereal-server/

Dockerfile.playwright

@@ -1,7 +1,8 @@
 import { Role } from '@/apis/types/role';
+import { BASE_URL } from '@/constants/env';
 
 export const getMockLogin = (role: Role) =>
-  fetch(`https://cse-dev-waffle.bacchus.io/api/v2/mock-login?role=${role}`, {
+  fetch(`${BASE_URL}/v2/mock-login?role=${role}`, {
     method: 'GET',
     cache: 'no-store',
   });

apis/v2/mock-login.ts

@@ -1,5 +1,7 @@
+import { BASE_URL } from '@/constants/env';
+
 export const getMockLogout = () =>
-  fetch(`https://cse-dev-waffle.bacchus.io/api/v2/mock-logout`, {
+  fetch(`https://${BASE_URL}/api/v2/mock-logout`, {
     method: 'GET',
     cache: 'no-store',
   });

apis/v2/mock-logout.ts

@@ -1,5 +1,6 @@
 export const isBeta = process.env.NEXT_PUBLIC_PHASE === 'beta';
 export const isProd = process.env.NEXT_PUBLIC_PHASE === 'prod';
+export const isDevlocal = process.env.NEXT_PUBLIC_PHASE === 'devlocal';
 
 export const BASE_URL = {
   local: 'https://cse-dev-waffle.bacchus.io/api',

constants/env.ts

@@ -0,0 +1,6 @@
+import { mergeTests } from '@playwright/test';
+
+import { test as pagesTest } from './pages.fixture';
+import { test as roleTest } from './role.fixture';
+
+export const test = mergeTests(roleTest, pagesTest);

docker-compose.yml

@@ -0,0 +1,25 @@
+// TODO: eslint 문제 이 파일을 제외함으로서 예쁘게 해결하기
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import { Page } from '@playwright/test';
+
+import { NoticeCreatePage } from '../pages/community/notice/create.page';
+import { NoticePage } from '../pages/community/notice/index.page';
+import { test as base } from './role.fixture';
+
+type PagesFixtures = {
+  noticePage: NoticePage;
+  noticeCreatePage: NoticeCreatePage;
+};
+
+export const test = base.extend<PagesFixtures>({
+  noticePage: async ({ page }: { page: Page }, use: (page: NoticePage) => Promise<void>) => {
+    await use(new NoticePage(page));
+  },
+  noticeCreatePage: async (
+    { page }: { page: Page },
+    use: (page: NoticeCreatePage) => Promise<void>,
+  ) => {
+    await use(new NoticeCreatePage(page));
+  },
+});

e2e/fixtures/index.ts

@@ -0,0 +1,20 @@
+// TODO: eslint 문제 이 파일을 제외함으로서 예쁘게 해결하기
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import { test as base } from '@playwright/test';
+
+export type Role = 'STAFF' | 'RESERV' | 'COUNCIL';
+
+type RoleFixtures = {
+  loginAs: (role: Role) => Promise<void>;
+};
+
+export const test = base.extend<RoleFixtures>({
+  loginAs: async ({ page }, use) => {
+    const login = async (role: Role) => {
+      await page.waitForLoadState('networkidle');
+      await page.getByRole('button', { name: role, exact: true }).click();
+    };
+    await use(login);
+  },
+});

e2e/fixtures/pages.fixture.ts

@@ -0,0 +1,31 @@
+import { type Locator, type Page } from '@playwright/test';
+
+export class NoticeCreatePage {
+  readonly page: Page;
+  readonly titleInput: Locator;
+  readonly contentEditor: Locator;
+  readonly submitButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.titleInput = page.getByPlaceholder('제목을 입력하세요.');
+    this.contentEditor = page.locator('div.sun-editor-editable');
+    this.submitButton = page.getByRole('button', { name: /게시/ });
+  }
+
+  async goto() {
+    await this.page.goto('/community/notice/create');
+  }
+
+  async fillTitle(title: string) {
+    await this.titleInput.fill(title);
+  }
+
+  async fillContent(content: string) {
+    await this.contentEditor.fill(content);
+  }
+
+  async clickSubmitButton() {
+    await this.submitButton.click();
+  }
+}